DISCLAIMER: This feature is currently in BETA and is not supported across all browsers - specifically, full functionality is not yet supported in Firefox. 

With HapYak's new e-commerce widget you can use our iframe annotation to add a product catalog and shopping cart directly to your videos. Currently, the annotation works with Walmart and AO.com's APIs. It also has a setting where you can manually enter product data, so anyone can use it!

To start, add two iframe annotations to your video. One of these will contain your product information and the other will be your shopping cart. In the iframe annotation that you want to contain your product info, paste the following URL: //hapyak_demos.s3.amazonaws.com/shoppable/cta.html

In the second annotation, where you want your shopping cart to appear, paste this URL: //hapyak_demos.s3.amazonaws.com/shoppable/cart.html

Once you've done that, you should see a 'Config' button in the annotation that will contain your product information. Click on that to enter your product info. From the drop-down menu, select 'Manual Entry' if you want to manually input your product information, or either the Walmart or AO API options if you have a product SKU from either of those sites that you want to input into your video. 

Styling

You can customize the look and feel of your product display widget in a number of different ways. 

  • Button Style - This drop-down allows you to choose between three different button styles for your "Add to Cart" button - A plus sign, a pulsing dot, and the words "Add to Cart."
  • Currency - Use this drop down to select the currency in which you would like your item's price to be displayed.
  • Hover - This box is checked by default. Uncheck this if you DO NOT want your product title and price to appear when users hover over the "Add to Cart" button. 
  • Details - This box is checked by default. Uncheck this if you DO NOT want users to be able to see the details panel (containing the product name, image, price, and description, if applicable) when they click "Add to Cart." If this is unchecked, the featured product will be moved directly into the shopping cart when a user clicks "Add to Cart."

Manual Entry

This option allows you to enter in any relevant product details, including the product name, description, product image URL, and shopping cart URL . Adjust the other configuration options as desired and click "Save." 

Note: Product ID is a required field for all entry options. For manual entry, if you don't have a product ID, you may have to enter a placeholder, but this field MUST have a value in order for the annotation to work. 

Walmart or AO API

Choose this option if you have a product ID or SKU from Walmart or AO.com for a product that you would like to display in your video. Paste that product SKU in the "Product ID" space, and configure the other options as desired. You can usually find the product ID either on the product page or in the URL of the product page. 

If using the AO API, you will additionally need to paste this URL into the "add-to-cart URL" to ensure that clicking the "Checkout" button takes you to your AO basket: https://ao.com/c/shoppingbasket.aspx

Then, click "Save."

You will need to add a product info annotation for each unique product that you want to feature in your video. You will only need to add the cart annotation once. We recommend making the cart annotation visible until the end of the video. 

Analytics

Our e-commerce widget allows you to track when users click on either of three buttons in the video. 

For the blue-green Call to Action Button, as well as for the Add to Cart button in the product details panel, the annotation allows you to track the product id, name, and price. This data will show up in Google Analytics as the values of "call-to-action-button" and "add-to-cart-button", respectively. 

You can track these three things, along with the quantity of each item ordered, when users click the Checkout button in the shopping cart. This data will show up in Google Analytics as the values of "checkout-button."

Did this answer your question?