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. Product description and specification
3. Add-to-cart button
4. 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. Adding an attribute (class) to description and specifications fields

It is important for Videoly to have a rich contextual understanding of the product in order to map it with the most relevant video content. To achieve this, the widget also reads sections which contain description and specifications of the product. We understand, that for some products description can contain large chunks of text, which is why we don't advise to put it in a placeholder element for us, but rather add a class which our widget is automatically listening to, these are the following classes: ".videoly-product-description" and ".videoly-product-specifications". Here is an example:

<div class="pdp-description bg-white videoly-product-description">
<p>
Take the party with you anywhere with the JBL PartyBox 110 portable speaker . Play music on the beach or by a pool without worrying about a little water splash, or invite your friends over for a lively karaoke night. Play music all day and into the night with 12-hour battery life. You can fully immerse yourself in the music with high-quality JBL Original Sound with Bass Boost and dynamic light show, which can transform any room into a real party scene. Connect your devices via wireless connection or with an AUX input and become the master of the party with the JBL PartyBox app. 
</p>
</div>

<table class="pdp-description bg-white videoly-product-specifications">
<tr>
<td>width:</td>
<td>25cm</td>
</tr>
<tr>
<td>height:</td>
<td>55cm</td>
</tr>
</table>

It is enough to add this class to the parent element for the description section which is enclosing all the paragraphs and other elements. Also, Videoly will send only one request per PDP containing the information from these fields to avoid these larger product data transfers on every single page load. 

3. Adding a attribute (class) to 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>

4. 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.