Last updated: Aug-03-2022
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:
- Configuration for the shoppable UI and functionality.
- 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
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
startStateas well as the icon used to toggle it (
toggleIcon) and the
widthonce open. You can also configure how long you want the bar to stay open for using the
- Define any
transformationsthat 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 (
Here's an example of configuring the clothes example to better match the brand:
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
productNameof the product as well as the
publicIdof the product image to show.
- Set the
endtimefor when the product appears in video.
- Define what happens when a user interacts with the product in products bar. You can configure
onHoverbehavior (available options are different for each).
- Define your
hotspotsfor 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:
|autoClose||Number (in seconds)||The length of time in seconds, after there's no interaction that the products bar automatically closes. Default:
|bannerMsg||String||The message displayed alongside the play button when the video first loads. Default:
|products||Array of Products||The list of products to show in the products bar and the configuration for each.|
|showPostPlayOverlay||Boolean||Whether to show a product carousel overlay after the video has finished. Default:
|startState||StartState||The state of the product bar when the video loads. Default:
|toggleIcon||String URL||The URL of the icon used to toggle the product bar.|
|transformation||cloudinary.Transformation, Object, Array, or String||Transformations to apply to all product images shown in the product bar. Default:
|width||String Percentage||The width of the product bar as a percentage of the total width of the player. Default:
|hotspots||Array of Hotspots||The hotspots on the video for this product. Allows the user to click in a certain location and at a certain time to take them to the product description page.|
|onClick||OnClickProps||The behavior when the user clicks on the product.|
|onHover||OnHoverProps||The behavior when the user hovers over the product.|
|productId||Number||The ID of the product.|
|productName||String||The name of the product.|
|publicId||String||The public ID of the product image.|
|startTime||String||The start time (in seconds) where the product appears in the video. Used to highlight the product in the bar while visible in the video.|
|endTime||String||The end time (in seconds) where the product no longer appears in the video.|
|clickUrl||String URL||The URL for the user to visit when clicking the hotspot.|
|time||String (mm:ss)||The exact time to display the hotspot.|
|tooltipPosition||TooltipPosition||The position of the hotspot tooltip displaying product information.|
|x||String Percentage||The X coordinate for positioning the hotspot.|
|y||String Percentage||The Y coordinate for positioning the hotspot.|
|action||OnHoverAction||The action to perform when hovering over the product in the product bar.|
|action||OnClickAction||The action to perform when clicking on the product in the product bar.|
|args||OnClickArgsProps||The arguments to configure the action.|
|pause||Boolean or Number (seconds)||Whether to pause the video or a number of seconds to pause the video for. Relevant when
|time||String (mm:ss)||The time to seek the video to. Relevant when
|url||String URL||The URL to navigate the user to. Relevant when
A string value setting the state of the product bar when the video loads.
|closed||The product bar is closed when the video loads.|
|open||The product bar is open when the video loads.|
|openOnPlay||Opens the product bar when the play button is clicked. Default.|
A string value setting the position of the hotspot tooltip.
|top||Positions the tooltip above the hotspot.|
|bottom||Positions the tooltip below the hotspot.|
|left||Positions the tooltip to the left of the hotspot.|
|right||Positions the tooltip to the right of the hotspot.|
A string value setting the action to perform when a user hovers over the product.
|overlay||Overlays text on the product image.|
|switch||Switches the product image for a different one.|
A string value setting the action to perform when a user clicks on the product.
|goto||Opens a URL in a new tab.|
|seek||Jumps to a specific position in the video (and optionally shows a hotspot).|
|productHover||Triggered when a user hovers over a product in the products bar.|
|productClick||Triggered when a user clicks on a product in the products bar.|
|productBarMin||Triggered when the products bar is minimized.|
|productBarMax||Triggered when the products bar is maximized.|
|productHoverPost||Triggered when a user hovers over a product in the post-play overlay.|
|productClickPost||Triggered when a user clicks on a product in the post-play overlay.|
|replay||Triggered when the video is replayed.|
- Deliver your videos using HLS or DASH adaptive bitrate streaming formats
- Register to events to further customize your player or for analytics tracking
- Check out all the video player options in the Video Player API Reference
- Learn more about the video effects and transformations you can apply to your videos