Videoly
Overview
Videoly
Videoly is a tool used to display product videos on the website on Product Detail Page. using videoly give us more control over the video displayed as well as the suggestion of videos that come in youtube iframe format.
Check Dashboard here
Integration
- Add videoly script
- Create invisible placeholders for product information and widget location
You can add the following to your product page template and videoly will 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>
Offical Documentation refer
- 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>
- 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>
- Creating invisible placeholders for widget location
<div id="videoly-videobox-placeholder"></div>
Widget Events
Widget API fires events to notify your application of changes to the Videoly widget. The following list defines the events that the API fires.
- onVideoDataLoaded This event is fired whenever a Videoly Widget has finished loading videos and is ready to share or play videos.
If you want to render videos on your own, this particular event is the most important one to subscribe to.
The example below shows a sample function for handling this event:
window.videolyInitCallbacks = {
onVideoDataLoaded: [
(err, data) => {...},
(err, data) => {...},
...
]
}
Data structures Video item shape
{
id: String;
videoId: String;
duration: String; // "01:51"
genre: String;
language: String;
title: String;
thumbs: {
default: {
url: String;
},
medium: {...},
high: {...}
}
}
Conclusion
on succesfull implementation of videoly we will get the following data in our product detail page
