Shoppable Video

You can use shoppable videos to define a set of products that appear in your videos and display product images alongside in a product bar. This allows your users to visit your product detail pages and make a purchase.

Adding Shoppable Video functionality

Shoppable Video functionality is included in the standard video player package.

You can add Shoppable Video functionality to your video source using the shoppable parameter. The shoppable parameter is an object containing all the shoppable video configuration. This can be broken down into two sections:

1. Configuration for the shoppable UI and functionality.
2. The products array which contains the configuration for the products listed and any video hotspots you want to include.

Here's a simple example of the shoppable configuration for the "ShoppableDemoVideo" player source:

Configuring the shoppable UI

The shoppable object supports a number of properties to configure the Shoppable Video component look and feel. This allows you to customize the shoppable component of the video player to match your brand and also to standardize all of your product images. See video player customization for more information on how to customize the player as a whole.

• Set the products bar startState as well as the icon used to toggle it (toggleIcon) and the width once open. You can also configure how long you want the bar to stay open for using the autoClose property.
• Define any transformations that are applied to all of the product images in the products bar. You can use this to standardize the size, format and quality or add brand overlays and effects.
• Set the message to display before the video starts (bannerMsg) and whether to show a product carousel overlay once the video has finished playing (showPostPlayOverlay).

Here's an example of configuring the clothes example to better match the brand:

Defining products

You can define all of the products you want to appear in the products bar using the products array. For each product you need to specify the relevant information:

• Set the productId and productName of the product as well as the publicId of the product image to show.
• Set the startTime and endtime for when the product appears in video.
• Define what happens when a user interacts with the product in products bar. You can configure onClick and onHover behavior (available options are different for each).
• Define your hotspots for the video. This allows you to add a clickable hotspot for a product on the video itself. The hotspot is shown when a user clicks a product from the products bar and the video is then paused at the defined time. You can use this to highlight the location of the product in the frame.

For example, using the sunglasses from the example above:

Reference

Properties

ShoppableProps

ProductsProps

HotspotProps

OnHoverProps

OnClickProps

OnClickArgsProps

Enums

StartState

A string value setting the state of the product bar when the video loads.

TooltipPosition

A string value setting the position of the hotspot tooltip.

OnHoverAction

A string value setting the action to perform when a user hovers over the product.

OnClickAction

A string value setting the action to perform when a user clicks on the product.

Events