You can create video commerce widgets on the TVPage dashboard to educate and inspire customers at any stage of the purchase journey. Common pages to place a widget are: homepage, category pages, brand pages, and a product detail page (PDP).
Types of Widgets
- In-Line: Usually placed in a dedicated page space.
- PDP: In combination with a UI call-to-action, a lightbox would open with the video player.
- Carousel: Several videos are displayed in the main column. Upon interaction, a lightbox opens with the video player and related products.
- Right Rail: Several videos are displayed in the side bar. Upon interaction, a lightbox opens with the video player and related products.
Loading & Page Performance
A TVPage Widget is a single compiled, minified <script> served from TVPage when the page is requested. This script contains all of the necessary libraries needed for the Widget to function. Before TVPage provides the completed script, an analysis should be performed on the target web site to identify if there are any shared libraries that can be leveraged, prior to TVPage providing the final script for implementation. This can greatly benefit load time and amount of data that the client is downloading during a page load.
If jQuery is available within the target page, this greatly reduces the amount of data that needs to be transferred upon page load. Notify TVPage if this is the case, and indicate the version the jQuery that is available and TVPage will verify compatibility.
The TVPage <script> is loaded asynchronously and does not affect page render time. Once the page is loaded and the DOM is ready, our script will render the Widget elements into the page. This essentially augments the server-rendered HTML with the additional elements needed to display the Video Commerce Experience.
Additionally, the usage of DNS Pre-Fetching can be implemented within the page to speed up the requests that are made to the TVPage Widget:
<link rel="dns-prefetch" href="//embed.domain.com">
Homepage / Category Page Widgets
Homepage and Category Page Widgets may function in the same way, in that they render a video experience into the page. The video data that is rendered into the Widget can be manually chosen, or delivered dynamically based on a dynamic channel configuration (See Channels).
The presentation of the video content can be displayed as a List, Grid, Carousel or other customized layout. When a user interacts with the Widget and clicks on a video, the video will either play in-line or a lightbox will be displayed with a video player and related products from within the video. The foregoing behavior will depend on the Widget Template selected and any customization applied.
Widgets are typically implemented at the location in the page where you wish them to be rendered. For example, if you wanted to render a horizontal carousel of videos, mid-way down your homepage, you would create an HTML container (full-grid width) and insert the widget. Additionally, you can supply an HTML selector to the widget and it will render itself within that selector.
Below in an example of an In-Line widget:
Here is an example of lightbox opened from a carousel widget:
Product Details Page
The Product Details Page (PDP) Widget has several implementation options:
- Inline: Typically in a long form content area or dedicated page space.
- Lightbox: In combination with a UI call-to-action, a lightbox would open with the video player.
- Hub: Several videos can be displayed as thumbnails with supporting UI elements. The interacted a lightbox would open with the video player.
The PDP widget is different from other widgets in that it passes the SKU or Product ID from the product page when it loads, back to TVPage. TVPage will then return associated video(s) if they exist. If no videos exist for that product, then no elements will be rendered into the page.
The implementation <script> can be placed anywhere within the page, so it is flexible in the way that your page loads assets and resources. A few example of <script> placements:
- Within the <head> section of the page. Be aware that as browsers render the page, these scripts are requested in the order they are coded. The TVPage <script> is a non-blocking asynchronous script, however consider your script & css resource loading strategy if implementing within the <head> section.
- From your Tag Management software. You can utilize your tag management software to fire the TVPage script on pages in which you would like it to be loaded. This can be very beneficial, as it does not require coding or website updates.
- Anywhere within the <body></body> tags of the page. Depending on how your eCommerce software is configured and your resource loading strategy, the TVPage <script> can be loaded within isolated components of the page. This can be beneficial from a script organization perspective.
Next article: Video Commerce Hubs