Video PDP using Shoppable Video

Introduction

This guide explains how to create a Video PDP (Product Detail Page) experience using the Bambuser Shoppable Video player. With this approach, you can bring users from social media or marketing channels directly into an immersive video shopping journey, combining product videos, details, and shopping features in one place.

This scenario leverages the features of the Bambuser Shoppable Video player and the <bam-playlist> web component to deliver a seamless, interactive product video experience.

Requirements

• Code implementation/deployment on the website pages.
• (Optional) Creating a new product page template for Video PDP (or extending the current one).

Example scenario

Bring your users into a video experience journey that includes everything from product details to shopping features.

This use case allows users to:

• Click a link, for example, from social media, marketing emails, etc.
• Land directly on an expanded video player showing product-related content
• Watch and scroll through the videos and shop without leaving the player
• Access the regular product page by closing the player

Implementation

1. Initial set up

Follow the Shoppable Video integration documentation to implement the <bam-playlist> on your Video PDP page.

Example:

<script async src="https://lcx-embed.bambuser.com/default/embed.js"></script>

<bam-playlist org-id="your-org-id"></bam-playlist>

2. Set up the playlist

The Bambuser Shoppable Video player offers three different methods to distribute videos to your playlists, each with its own advantages:

1. Curated Playlists

   Manually select specific videos or tags through the Bambuser dashboard to display on your Video PDP. This gives you complete control over the video selection and order.

   • Learn more about Curated Playlists

   ---

2. Automatic Playlists based on Product SKU (Recommended)

   Automatically display videos that feature the product on the current page by matching product SKUs. This requires proper product schema markup on your page.

   Recommended approach

   We recommend this method for Video PDPs as it creates a seamless, self-maintaining system where videos automatically appear on relevant product pages without manual configuration. This ensures your Video PDPs always show the most relevant content for each product.

   • Learn more about Automatic Playlists

   ---

3. Static Video Assignment

   Directly specify which videos should appear by providing their video IDs in the component attributes. This is useful for hardcoded playlists that don't need dynamic behavior.

   • Learn more about Static Video Assignment

3. Auto starting the playlist

The auto start (immediately expand the player into focused mode after page load) is configured by adding the start-focused="true" attribute the the <bam-playlist> web component.

Example:

<bam-playlist org-id="your-org-id" start-focused="true"></bam-playlist>

Enable auto start through URL params

If you use your regular PDP as the host for the Video PDP scenario, you may want to enable auto start only from a special URL that contains a specific query parameter.

To enable this feature through URL query params:

1. Define an arbitrary query param (e.g., videoFocused)
2. Read the query param from the page URL
3. If the query param exists, use JavaScript to add start-focused="true" to the <bam-playlist>.
4. Once added, the player starts right away.

Example:

<!-- Read ?videoFocused=true from the query params -->
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const urlParams = new URLSearchParams(window.location.search);
    const videoFocused = urlParams.get('videoFocused');
    const bamPlaylist = document.querySelector('bam-playlist');
    if (videoFocused && videoFocused === 'true') {
      bamPlaylist.setAttribute('start-focused', 'true');
    }
    console.log("Verify start-focused=", bamPlaylist.getAttribute('start-focused')); // Optional verification
  });
</script>

4. Handle player close event

If your Video PDP is a separate page from the regular PDP, you may want to redirect the user to the regular PDP after they close the player. Here is how you do that:

Example implementation:

<script>
  document.querySelector('bam-playlist').addEventListener('close', () => {
    console.log('User closed the player');
    const productPageUrl = "https://www.brand.com/products/example123";
    location = productPageUrl;
  });
</script>

---

Best Practice

To have the smoothest experience, we suggest you create a special product page (Video PDP) instead of using the regular product page.

tip

Why? If this is implemented on regular PDPs, there will be a short delay before the Bambuser player can autostart. So, the customer may see the regular PDP and then the player starts on top of the page.

Customize the PDP template for Shoppable Video

For an smoother experience, you could have a customize product page templater if the link indicates that the Bambuser Shoppable Video is automatically triggering after the page load. You can have only a black background and hide all elements, which eliminates the lag between page load and the execution of the Bambuser player.

Page Template	User Experience	Visual Flow
⚠️ Regular PDP Template	There will be a short delay before the Bambuser player loads and autostarts. The customer may see the regular PDP and then the player starts on top of the page.	→ →
✅ Custom Video PDP Template	The page initially loads with a black background. And once the Bambuser player loads, it autostarts.	→ →

Redirect to the regular PDP after the player is closed

Finally, when the user closes the player, they can be redirected to the regular PDP, as explained above.

→

Example implementation:

<script>
  document.querySelector('bam-playlist').addEventListener('close', () => {
    console.log('User closed the player');
    const productPageUrl = "https://www.brand.com/products/example123";
    location = productPageUrl;
  });
</script>

Advanced options

Here is a list of options that you may want to consider to enhance the user experience:

1. Product and Cart Integration - You can use the same integration as you use for Live and Shoppable Video on other pages.
2. Use any of the available playlist configurations if needed.

Video PDP FAQ

Multiple <bam-playlist> on one page?

If you have multiple playlists on a page, you need to add the start-focused="true" attribute only to the playlist that you would like to auto start.

So, the only difference from the code above would be how you select the right <bam-playlist> component to add the start-focused="true" attribute to.

Example:

const playlistIndex = 1
const bamPlaylist = document.querySelectorAll('bam-playlist')[playlistIndex];

caution

Make sure you select the right bam-playlist component if you have more than one playlist on the page.