The default configuration of the widget is typically set up by the Videoly team: Our engineers create an account and scan your product page to allow the widget to work properly. 

We highly recommend creating placeholders for product information on your site in invisible DOM nodes to make us absolutely confident that data is reliable, consistent and you're getting the most out of our matching process.  

This also helps ensure that we read product information correctly when you update your site. 

This data includes, but is not limited to: 

• Product title
• Shop's internal product ID
• GTIN
• SKU
• Brand 
• Category tree
• Stock status
• Price information
• Currency

(Read more about what information Videoly collects here.) 

Creating a placeholder for product information has two main benefits:

• Better coverage: when product information sections are identical and available on all product pages, we will be able to show as many videos as possible
• Content consistency: Changes in titles won't cause the creation of new products
• Nothing to worry about when updating your site: if you decide to change your product page layout or migrate to a new online platform, the Videoly widget will require either minimum or no adjustments at all
  

How to set it up?

You'll need to add a few lines of code, the aforementioned invisible DOM nodes. These lines can be located anywhere in your HTML layout. 

You can add the following to your product page template and we'll immediately take this into use:

<div id="videoly-product-title" style="display:none;">Clean product title here without SEO things</div>
<div id="videoly-product-id" style="display:none;">12345678ABC</div> 
<div id="videoly-product-sku" style="display:none;">LEGO12345-AB23</div>
<div class="videoly-product-gtin" style="display:none;">5702016603842</div>
<div class="videoly-product-mpn" style="display:none;">21319</div>
<div id="videoly-category-tree" style="display:none;">Home,Category,Brand</div>
<div id="videoly-stock-status" style="display:none;">instock</div>
<div id="videoly-product-brand" style="display:none;">BRAND NAME HERE </div>
<div id="videoly-product-price" style="display:none;">43.82</div>
<div id="videoly-product-currency" style="display:none;">EUR</div>

Data provided in the placeholders is a primary source of product information for the widget. Previously configured selectors set up by our team will be overridden. 

When implementing the lines above, make sure the values of ID attributes remain the same on all product pages, while the content of the div element changes depending on the product page.

Collecting add-to-cart conversions

Videoly can measure the value of videos by collecting clicks on the add-to-cart button. Here, you can add the class name "videoly-atc-btn" to notify Videoly to monitor the button:

<div class="btn-addtocart btn-default videoly-atc-btn">Add to Cart</div>