The default configuration of the widget is typically set up by the Videoly team.

We highly recommend creating placeholders to make data as reliable and consistent as possible and ensure 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. 

1. Product information 
2. Add-to-cart button
3. Widget location 

(Read more about what information Videoly collects here.) 

Main benefits of creating placeholders:

• Optimised consistency: Having your product information in a pre-defined and structured format ensures we're picking up on product info in the best possible way, even when PDP layout varies slightly.
• 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 (provided your product info remains the same during migration). 
  

1. Creating invisible placeholders for product information

You'll need to add a few lines of code (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.

2. Creating invisible placeholders for add-to-cart button

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>

3. Creating invisible placeholders for widget location

By default, the Videoly widget’s position is defined by the Videoly team.

We recommend placing the widget above the fold (for better watch rates) and in close proximity to the add-to-cart button. This can, of course, be changed by the website owner at any time.

You can also use the widget placeholder to determine a different location for the widget on mobile. 

In order to do this, a DIV element with ID (attribute) = “videoly-videobox-placeholder” should be added to the product page template in the desired place. Once this DIV element is on the page, the Videoly widget will attach itself to it as a child element.

Simply insert this code to the place on the product page template where you would like to see the Videoly widget:

<div id="videoly-videobox-placeholder"></div>

Note: there is no need to move Videoly’s <script> tag anywhere else. Just keep it at the end of the page before the </body> closing tag.