Product Card Plugin

Overview

Product card (mp4e:product-card, an official plugin) shows timed product cards: the product's picture, a badge, its name, a line or two about it, the price (the old price struck through when it is on sale) and one button that opens the product's page. One card shows at a time, on the left or right of the frame or in a bottom corner. Viewers can tap the button while the video plays.

Product card is a family plugin: it has the family's five themes, its common style settings, its minimum readable size and its keyboard and TV-remote navigation.

Adding product cards to a video

1. Install Product card from the marketplace.
2. Add one Product card overlay covering the whole timeline. It covers the whole frame and places its own card, so do not resize it: pick a side or a bottom corner in position instead.
3. Enter the products, or leave them empty to use the video's analysis.
4. Pick a theme and a size. Lean-back is for a TV across the room.

The products

products is a list of products in seconds of the video. It can also be JSON text, so a single {{listVariable}} can supply the whole list, and any field can be a {{variable}} (a price that changes, for example).

[
  { "name": "Cast-iron pan", "description": "Pre-seasoned, 26 cm, oven-safe.", "price": "$49", "originalPrice": "$59",
    "badge": "-17%", "image": "media://pan-photo", "url": "https://shop.example/pan", "start": 42, "end": 58 },
  { "name": "Chef's knife", "price": "$89", "url": "https://shop.example/knife", "start": 95 },
  { "name": "Wooden spoon", "description": "Olive wood, hand-finished.", "start": 140 }
]

Entries without a name or a start are left out, and the rest are ordered by start. When two products' times overlap, the one that starts later is shown; once it ends, an earlier product still inside its own time shows again.

With no products listed, Product card reads the products the video's analysis found through mp4e.getIntelligence() (each shown during the first stretch of the video it appears in, with its description and price when the analysis has them). The analysis has no links or pictures, so these cards have no button. If the analysis' things are not allowed — by the creator in the plugin's Intelligence access or by the host — no card shows.

Settings

Product card's own settings, plus the family's common style settings (theme, accent, size, surface, textColor, font, radius, motion):

How it behaves

• Tappable while the video plays. The card is the only part of the frame that takes the pointer (through clickable regions): every click beside it goes through to the video, your hotspots, other overlays and the player's controls.
• The button opens the product's link in a new tab, through the player, so the host's rules for opening links apply. Do not add a click handler to the overlay: the overlay covers the whole frame, so it would fire on a click anywhere.
• On a player that cannot route taps to a plugin's card, the card can be tapped once the viewer pauses; a tap beside it, Escape or Back, or playing again gives the frame back to the video.
• A keyboard or TV remote reaches the button with Tab at any time; Enter presses it.
• The name always shows, the description is cut after two lines and the price is as large as the name. When the frame is short, the picture shrinks before the text has to.
• A screen reader hears each product as its card appears, with its price.
• On a phone-sized player the card becomes one row across the frame — a small picture, the name and price, the button — at the top for the side positions and at the bottom for the corners. Cards always stay clear of the player's controls bar.

Actions and events

Actions, through pluginAction from rules, other plugins and input shortcuts:

{ "type": "pluginAction", "pluginId": "mp4e:product-card", "actionId": "show", "config": { "index": 1 } }

Product card emits three events:

• productShown { index, number, name, start } — the video brought a product's card on screen, by playing into it or by a seek. It follows the player's own time, so it never fires when the video loads, when the settings or a variable change, or for a card the show action put up.
• productClicked { index, number, name, url } — the viewer pressed the card's button (its link opens in a new tab).
• addToCart { objectId?, name, price, currency } — the viewer pressed Add to cart (below).

index is the product's place in time order, from 0 (number from 1). Rules hear the events as plugin:mp4e:product-card:productShown and plugin:mp4e:product-card:productClicked:

Trigger:    plugin:mp4e:product-card:productClicked
Action:     setVariable  clicks  increment  1

Your page hears them through onEvent (see Player Events):

<MP4EPlayer
  src="/video.mp4"
  onEvent={(event, data) => {
    if (event === 'plugin:emit' && data.event === 'productClicked') {
      // { index, number, name, url }
      analytics.track('product_click', data.data);
    }
  }}
/>

Add to cart

Turn on addToCart and give a product its price as a number (priceValue) and its currency, and the card's button adds it to a cart instead of opening its link. price stays the text the card shows; a price is never read out of it. A product without a number or a currency keeps the usual button (its link, or none).

• The button reads Add to cart (or your ctaText) with a cart icon. Pressing it emits addToCart; it opens no link and does not emit productClicked.
• The button then reads Added ✓ for a moment; the card stays open and the video keeps playing. A second press while it says Added ✓ adds nothing, so a double tap is one item.
• A screen reader hears "Added to cart" and the product's name.

Product card only announces the product; it does not keep a cart. Rules hear the event as plugin:mp4e:product-card:addToCart and hand the product to the Cart plugin's addItem (or anywhere else). Make interactive's Shopping cart writes that rule for you and turns Add to cart on in its product cards; see In-video shopping for the checkout.

Opening from a tracked product

Product card can also be the card a tracked product opens: pick it as the display of an object group (or of one object) in the Studio's group settings, for clicked, hovered or visible. Opened that way it shows one product, at once, from its settings — no timeline, no full-frame layer: the card is the whole display, 600 × 400 design pixels unless the display sets its own size. Fill the settings from the object's data with {{object.data.*}}:

Make interactive sets this up for you when it tracks a video's products: each tracked product opens this card when tapped and on its own while it is the only product on screen, beside the product, with its name, description and price and no button, in the theme and with the cue you chose — or, with the Shopping cart, an Add to cart button. Card settings you made yourself for the group are kept.

To set it up in the Studio, open the group's settings (the gear icon) and its Display Settings tab, add the event — Clicked for a card when the viewer taps the product, Visible for a card that opens by itself — and pick this plugin. Then:

• Fill the card's fields under its settings; each can use the product's own data, such as {{object.data.title}}.
• Tick Avoid covering objects so the card opens beside the product, clear of everything tracked on screen, and moves aside only when something moves under it.
• For Visible, tick Only when it's the only one on screen to show the card only while this product is the group's only one in view.
• Under Auto-close, When the object leaves the screen closes the card with its product.

• products, position and duration are not used; the style settings (theme, accent, size, …) and addToCart are.
• The card has a close button (✕); it and Escape or Back close the card. Pressing the button opens the link and emits productClicked { name, url, objectId } — the object instead of an index. addToCart carries the object's objectId. productShown is not emitted; your page hears the card open as display:show.
• In the Studio these fields are listed as "(object card)" in the display's settings; a timed Product card overlay does not show them.