Skip to main content

Distributing videos

If you followed the Integration guide you might want to start adding videos to your playlists.

There are three ways to distribute videos using the Bambuser playlist component:

  1. Curated playlists: Manage content, pages and playlists from the Bambuser dashboard.
  2. Automatic playlists on PDPs: Automatically creates a playlist with videos relevant to a product. There are two methods:
  3. Static video assignment: Directly specify which videos to display using the video-ids attribute.

1. Curated playlists​

To manually distribute videos to a playlist on your page, follow these steps:

  1. Go to the "Pages" section in your workspace.
  2. Locate and select the URL of your page from the list.
  3. Click on the page to view its playlist configuration.
  4. Add the videos you want to display on your page, or add tags to automatically include all videos with matching tags.

This method gives you complete control over which videos appear on specific pages of your website.

How the Bambuser Playlist Loads Curated Playlists​

When you add the <bam-playlist org-id="YOUR_ORG_ID"> component to a page, it automatically:

  1. Identifies the current page URL
  2. Queries the Bambuser API for playlists configured for that URL within your account
  3. Retrieves playlist configurations, including video selections and style settings
  4. Loads and displays all videos assigned to that playlist with the applied styling

Implementation requires your organization ID:

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

Each playlist web component handles its own rendering, applying configurations and style settings defined on the web component attributes or in your Bambuser workspace on the playlist settings.

2. Automatic playlists based on PDPs​

Automatic playlists on Product Detail Pages (PDPs) can be created using two different methods:

  • 2.1. By SKU scraping: The playlist automatically finds and matches videos based on the product SKU scraped from your PDP
  • 2.2. By tagging: The playlist fetches videos based on tags you assign to videos and specify in the query attribute

Choose the method that best fits your needs.

2.1. By SKU scraping​

To automatically display videos on a PDP by matching product SKUs, follow these steps:

  1. Upload a video to your workspace.
  2. Add a product to the video and ensure you enter the URL of your PDP.
  3. The playlist integrated into your PDP will now automatically find the video.
Requirements

This method requires that the playlist can find the SKU on the PDP. The playlist uses multiple methods to locate the SKU, primarily by looking for a Product schema.

How It Works​

The automatic playlist feature creates a dynamic connection between your product pages and relevant shoppable videos:

When you embed the <bam-playlist> web component on your Product Detail Pages (PDPs), it automatically creates relevant playlists by:

  1. Scanning your page: The component reads your product data using the same scraping techniques described in the Product data scraping documentation.

  2. Finding product references: It extracts the product reference (SKU) from your page using this priority order:

    • Schema.org markup (JSON-LD or Microdata)
    • OpenGraph meta-tags
    • Generic HTML tags

  3. Matching with videos: It finds all videos in your content library that include products with the same reference.

Implementation Example​

To implement automatic playlists on your PDPs using SKU scraping:

  1. Upload videos to your Bambuser workspace
  2. Add products to your videos with accurate product references/SKUs
  3. Add the <bam-playlist> component to your PDP template:
<bam-playlist org-id="YOUR_ORG_ID"></bam-playlist>

The component will handle the rest - scanning your page for product data and displaying all relevant videos that feature the product.

This automatic connection ensures your customers always see relevant video content featuring the products they're viewing.

2.2. By tagging​

Use tags to control which videos appear on your pages. This method is particularly useful for product variants where you want videos to appear on all variant PDPs regardless of the specific variant, or when you want to organize videos by collections, themes, or other custom categories.

How It Works​

Tag-based distribution allows you to fetch videos by matching tags you've assigned to your videos:

  1. Tag your videos: In your Bambuser dashboard, go to the Videos section and add tags to your videos. You can use any tag name you choose (e.g., variant-123, summer-collection, featured).
  1. Configure your playlist: Use the query attribute in your <bam-playlist> component to fetch videos by tag:
<bam-playlist 
  org-id="YOUR_ORG_ID" 
  query="tag:variant-123">
</bam-playlist>

Replace variant-123 with the tag name you used when tagging your videos. The tag name in the query attribute must exactly match the tag you added to your videos (case-sensitive).

Use Cases​
  • Product variants: Tag videos with a variant identifier (e.g., variant-123) and use the same tag in your query to show videos on all variant PDPs
  • Collections: Tag videos with collection names (e.g., summer-2024) and display them on category pages
  • Featured content: Tag videos as featured and show them on specific pages

3. Static video assignment via Video IDs​

You can also directly specify which videos should appear in a playlist by providing video IDs to the <bam-playlist> component:

  1. Use the video IDs of the content you want to display
  2. Add these IDs directly to the video-ids attribute of the component

You can also place multiple playlist components on the same page, each with different video IDs.

Implementation Example​

You can add one or more <bam-playlist> web components with different video selections:

<bam-playlist 
  video-ids="puv_qLTxiftQPcJYDAxXuxsgTh,puv_J2VZRPAV1FqWDqeRvWuZkz">
</bam-playlist>

<bam-playlist 
  video-ids="puv_3xYz1234AbCdEfGhIjKlMn">
</bam-playlist>

Finding Video IDs​

To get a video's ID:

  1. Go to the Videos page in your Bambuser dashboard
  2. Click on a video to open it
  3. Look at the URL in your browser: 
    https://lcx.bambuser.com/YOUR_ORG_ID/on-demand/videos/puv_qLTxiftQPcJYDAxXuxsgTh/setup
  4. The video ID is the part after /videos/ and before the next slash (e.g., puv_qLTxiftQPcJYDAxXuxsgTh)

This method gives you direct control over playlist content without requiring dashboard configuration or product data matching. It's particularly useful for:

  • Creating custom collections on category pages
  • Featuring specific videos on landing pages
  • Implementing hardcoded playlists where dynamic behavior isn't needed

Troubleshooting​