PageSourceSearch

https://bambuser.com/docs/assets/js/77a14901.95a2d532.js

js bambuser.com collected 2026-09-24 08:31:10 UTC 23,710 bytes, 1 lines download raw bytes

1"use strict";(globalThis.webpackChunkbambuser_docs||=[]).push([[4883],{58257(e,i,t){t.r(i),t.d(i,{assets:()=>d,contentTitle:()=>l,default:()=>p,frontMatter:()=>r,metadata:()=>s,toc:()=>c});const s=JSON.parse('{"id":"distribution","title":"Distributing videos","description":"Three ways to assign videos to <bam-playlist>: curated BamHub playlists, automatic PDP matching (query=\\"tag:\\"/\\"sku:\\"), and static video-ids attribute.","source":"@site/shoppable-video/distribution.mdx","sourceDirName":".","slug":"/distributing-videos","permalink":"/docs/shoppable-video/distributing-videos","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"id":"distribution","title":"Distributing videos","description":"Three ways to assign videos to <bam-playlist>: curated BamHub playlists, automatic PDP matching (query=\\"tag:\\"/\\"sku:\\"), and static video-ids attribute.","sidebar_label":"Video distribution methods","slug":"/distributing-videos"},"sidebar":"someSidebars","previous":{"title":"Track Shopper Events","permalink":"/docs/shoppable-video/shopper-events-tracking"},"next":{"title":"Product data scraping","permalink":"/docs/shoppable-video/data-scraping"}}');var n=t(74848),a=t(28453),o=t(86025);const r={id:"distribution",title:"Distributing videos",description:'Three ways to assign videos to <bam-playlist>: curated BamHub playlists, automatic PDP matching (query="tag:"/"sku:"), and static video-ids attribute.',sidebar_label:"Video distribution methods",slug:"/distributing-videos"},l=void 0,d={},c=[{value:"1. Curated playlists",id:"1-curated-playlists",level:3},{value:"How the Bambuser Playlist Loads Curated Playlists",id:"how-the-bambuser-playlist-loads-curated-playlists",level:4},{value:"2. Automatic playlists based on PDPs",id:"2-automatic-playlists-based-on-pdps",level:3},{value:"2.1. By SKU scraping",id:"21-by-sku-scraping",level:4},{value:"How It Works",id:"how-it-works",level:5},{value:"Implementation Example",id:"implementation-example",level:5},{value:"2.2. By tagging",id:"22-by-tagging",level:4},{value:"How It Works",id:"how-it-works-1",level:5},{value:"Use Cases",id:"use-cases",level:5},{value:"2.3. By explicit SKU",id:"23-by-explicit-sku",level:4},{value:"How It Works",id:"how-it-works-2",level:5},{value:"Implementation Example",id:"implementation-example-1",level:5},{value:"3. Static video assignment via Video IDs",id:"3-static-video-assignment-via-video-ids",level:3},{value:"Implementation Example",id:"implementation-example-2",level:4},{value:"Finding Video IDs",id:"finding-video-ids",level:4},{value:"Troubleshooting",id:"troubleshooting",level:2}];function h(e){const i={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",h4:"h4",h5:"h5",li:"li",mermaid:"mermaid",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,a.R)(),...e.components};return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(i.p,{children:["If you followed the ",(0,n.jsx)(i.a,{href:"/shoppable-video/bam-playlist-integration",children:"Integration guide"})," you might want to start adding videos to your playlists."]}),"\n",(0,n.jsx)(i.p,{children:"There are three ways to distribute videos using the Bambuser playlist component:"}),"\n",(0,n.jsxs)(i.ol,{children:["\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.a,{href:"#1-curated-playlists",children:(0,n.jsx)(i.strong,{children:"Curated playlists"})}),": Manage content, pages and playlists from the Bambuser dashboard."]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.a,{href:"#2-automatic-playlists-based-on-pdps",children:(0,n.jsx)(i.strong,{children:"Automatic playlists on PDPs"})}),": Automatically creates a playlist with videos relevant to a product. There are three methods:","\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.a,{href:"#21-by-sku-scraping",children:(0,n.jsx)(i.strong,{children:"2.1. By SKU scraping"})}),": Matches videos by product SKU found on the PDP"]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.a,{href:"#22-by-tagging",children:(0,n.jsx)(i.strong,{children:"2.2. By tagging"})}),": Uses tags to control which videos appear on your pages"]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.a,{href:"#23-by-explicit-sku",children:(0,n.jsx)(i.strong,{children:"2.3. By explicit SKU"})}),": Explicitly specify the SKU in the query attribute to override scraped SKU"]}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.a,{href:"#3-static-video-assignment-via-video-ids",children:(0,n.jsx)(i.strong,{children:"Static video assignment"})}),": Directly specify which videos to display using the video-ids attribute."]}),"\n"]}),"\n",(0,n.jsx)(i.h3,{id:"1-curated-playlists",children:"1. Curated playlists"}),"\n",(0,n.jsx)(i.p,{children:"To manually distribute videos to a playlist on your page, follow these steps:"}),"\n",(0,n.jsxs)(i.ol,{children:["\n",(0,n.jsx)(i.li,{children:'Go to the "Pages" section in your workspace.'}),"\n",(0,n.jsx)(i.li,{children:"Locate and select the URL of your page from the list."}),"\n",(0,n.jsx)(i.li,{children:"Click on the page to view its playlist configuration."}),"\n",(0,n.jsx)(i.li,{children:"Add the videos you want to display on your page, or add tags to automatically include all videos with matching tags."}),"\n"]}),"\n",(0,n.jsx)(i.mermaid,{value:'flowchart LR\n    A[Dashboard] --"navigate to"--\x3e B[Pages] \n    B --"select"--\x3e C[Page URL]\n    C --"configure"--\x3e D[Playlist]\n    D --\x3e E1[Add Videos]\n    D --\x3e E2[Add Tags]\n    E1 & E2 --"save"--\x3e F[Published Playlist]'}),"\n",(0,n.jsx)(i.p,{children:"This method gives you complete control over which videos appear on specific pages of your website."}),"\n",(0,n.jsx)(i.h4,{id:"how-the-bambuser-playlist-loads-curated-playlists",children:"How the Bambuser Playlist Loads Curated Playlists"}),"\n",(0,n.jsxs)(i.p,{children:["When you add the ",(0,n.jsx)(i.co
1de,{children:'<bam-playlist org-id="YOUR_ORG_ID">'})," component to a page, it automatically:"]}),"\n",(0,n.jsxs)(i.ol,{children:["\n",(0,n.jsx)(i.li,{children:"Identifies the current page URL"}),"\n",(0,n.jsx)(i.li,{children:"Queries the Bambuser API for playlists configured for that URL within your account"}),"\n",(0,n.jsx)(i.li,{children:"Retrieves playlist configurations, including video selections and style settings"}),"\n",(0,n.jsx)(i.li,{children:"Loads and displays all videos assigned to that playlist with the applied styling"}),"\n"]}),"\n",(0,n.jsx)(i.mermaid,{value:'flowchart LR\n    A[User Visits Page] --\x3e B[bam-playlist Loads]\n    B --"Page URL & ORG ID"--\x3e C[Bambuser API]\n    C --"returns playlist data"--\x3e D[Renders Playlist]'}),"\n",(0,n.jsx)(i.p,{children:"Implementation requires your organization ID:"}),"\n",(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-html",children:'<bam-playlist org-id="YOUR_ORG_ID"></bam-playlist>\n'})}),"\n",(0,n.jsx)(i.p,{children:"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."}),"\n",(0,n.jsx)(i.h3,{id:"2-automatic-playlists-based-on-pdps",children:"2. Automatic playlists based on PDPs"}),"\n",(0,n.jsxs)(i.p,{children:["Automatic playlists on Product Detail Pages (PDPs) can be created using ",(0,n.jsx)(i.strong,{children:"three different methods"}),":"]}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.a,{href:"#21-by-sku-scraping",children:(0,n.jsx)(i.strong,{children:"2.1. By SKU scraping"})}),": The playlist automatically finds and matches videos based on the product SKU scraped from your PDP"]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.a,{href:"#22-by-tagging",children:(0,n.jsx)(i.strong,{children:"2.2. By tagging"})}),": The playlist fetches videos based on tags you assign to videos and specify in the ",(0,n.jsx)(i.code,{children:"query"})," attribute"]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.a,{href:"#23-by-explicit-sku",children:(0,n.jsx)(i.strong,{children:"2.3. By explicit SKU"})}),": Explicitly specify the SKU in the ",(0,n.jsx)(i.code,{children:"query"})," attribute to override the SKU that would be scraped from the page"]}),"\n"]}),"\n",(0,n.jsx)(i.p,{children:"Choose the method that best fits your needs."}),"\n",(0,n.jsx)(i.h4,{id:"21-by-sku-scraping",children:"2.1. By SKU scraping"}),"\n",(0,n.jsx)(i.p,{children:"To automatically display videos on a PDP by matching product SKUs, follow these steps:"}),"\n",(0,n.jsxs)(i.ol,{children:["\n",(0,n.jsx)(i.li,{children:"Upload a video to your workspace."}),"\n",(0,n.jsx)(i.li,{children:"Add a product to the video and ensure you enter the URL of your PDP."}),"\n",(0,n.jsx)(i.li,{children:"The playlist integrated into your PDP will now automatically find the video."}),"\n"]}),"\n",(0,n.jsx)(i.admonition,{title:"Requirements",type:"note",children:(0,n.jsxs)(i.p,{children:["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  ",(0,n.jsx)(i.a,{href:"https://schema.org/Product",children:"Product schema"}),"."]})}),"\n",(0,n.jsx)(i.admonition,{title:"Override what the playlist uses for matching",type:"tip",children:(0,n.jsxs)(i.p,{children:["If the scraper cannot find the correct SKU on your PDP, or if you want to use a different SKU than what's on the page for video matching, you can override what the ",(0,n.jsx)(i.code,{children:"<bam-playlist>"})," component uses by applying ",(0,n.jsx)(i.a,{href:"#23-by-explicit-sku",children:"method 2.3: By explicit SKU"})," with ",(0,n.jsx)(i.code,{children:'query="sku:abc123"'}),". This only affects what the component uses to match videos on the page\u2014it does ",(0,n.jsx)(i.strong,{children:"not"})," change the product reference (SKU) that gets scraped and stored when you add or scrape that product in the Bambuser dashboard (Bamhub). To change the product reference for a product in Bamhub, edit it manually in Bamhub or use a ",(0,n.jsx)(i.a,{href:"https://knowledge.bambuser.com/get-started-bambuser/product-feed",children:"product feed"}),"."]})}),"\n",(0,n.jsx)(i.h5,{id:"how-it-works",children:"How It Works"}),"\n",(0,n.jsx)(i.p,{children:"The automatic playlist feature creates a dynamic connection between your product pages and relevant shoppable videos:"}),"\n",(0,n.jsx)(i.mermaid,{value:'graph TD\n    A[Upload Video] --\x3e B[Add Products to Video]\n    B --\x3e C[Enter Product References/SKUs]\n    D[bam-playlist on PDP] --"scans page"--\x3e E[Finds Product Reference]\n    E --"matches with"--\x3e F[Videos with Same Reference]\n    F --\x3e G[Creates playlist dynamically] '}),"\n",(0,n.jsxs)(i.p,{children:["When you embed the ",(0,n.jsx)(i.co
1de,{children:"<bam-playlist>"})," web component on your Product Detail Pages (PDPs), it automatically creates relevant playlists by:"]}),"\n",(0,n.jsxs)(i.ol,{children:["\n",(0,n.jsxs)(i.li,{children:["\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"Scanning your page"}),": The component reads your product data using the same scraping techniques described in the ",(0,n.jsx)(i.a,{href:"/shoppable-video/data-scraping/",children:"Product data scraping documentation"}),"."]}),"\n"]}),"\n",(0,n.jsxs)(i.li,{children:["\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"Finding product references"}),": It extracts the product reference (SKU) from your page using this priority order:"]}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:"Schema.org markup (JSON-LD or Microdata)"}),"\n",(0,n.jsx)(i.li,{children:"OpenGraph meta-tags"}),"\n",(0,n.jsx)(i.li,{children:"Generic HTML tags"}),"\n"]}),"\n"]}),"\n",(0,n.jsxs)(i.li,{children:["\n",(0,n.jsxs)(i.p,{children:[(0,n.jsx)(i.strong,{children:"Matching with videos"}),": It finds all videos in your content library that include products with the same reference."]}),"\n"]}),"\n"]}),"\n",(0,n.jsx)(i.mermaid,{value:'flowchart LR\n    subgraph "Bambuser Dashboard"\n        A[Upload Videos] --\x3e B[Add Products]\n        B --\x3e C[Enter Product References]\n    end\n    \n    subgraph "Your Website"\n        D[PDP with Product Data] --\x3e E[bam-playlist Component]\n        E --"scans for"--\x3e F[Product Reference/SKU]\n    end\n    \n    C -.-> G{Match?}\n    F -.-> G\n    \n    G --"if found"--\x3e H[Display Matching Videos]'}),"\n",(0,n.jsx)(i.h5,{id:"implementation-example",children:"Implementation Example"}),"\n",(0,n.jsx)(i.p,{children:"To implement automatic playlists on your PDPs using SKU scraping:"}),"\n",(0,n.jsxs)(i.ol,{children:["\n",(0,n.jsx)(i.li,{children:"Upload videos to your Bambuser workspace"}),"\n",(0,n.jsx)(i.li,{children:"Add products to your videos with accurate product references/SKUs"}),"\n",(0,n.jsxs)(i.li,{children:["Add the ",(0,n.jsx)(i.code,{children:"<bam-playlist>"})," component to your PDP template:"]}),"\n"]}),"\n",(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-html",children:'<bam-playlist org-id="YOUR_ORG_ID"></bam-playlist>\n'})}),"\n",(0,n.jsx)(i.p,{children:"The component will handle the rest - scanning your page for product data and displaying all relevant videos that feature the product."}),"\n",(0,n.jsx)(i.mermaid,{value:"sequenceDiagram\n    participant U as User\n    participant PDP as Product Page\n    participant BP as bam-playlist\n    participant B as Bambuser API\n    \n    U->>PDP: Visits product page\n    PDP->>BP: Loads component with ORG_ID\n    BP->>PDP: Scans for product data\n    Note over BP: Extracts product reference\n    BP->>B: Requests videos with reference\n    B->>BP: Returns matching videos\n    BP->>PDP: Displays playlist"}),"\n",(0,n.jsx)(i.p,{children:"This automatic connection ensures your customers always see relevant video content featuring the products they're viewing."}),"\n",(0,n.jsx)(i.h4,{id:"22-by-tagging",children:"2.2. By tagging"}),"\n",(0,n.jsx)(i.p,{children:"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."}),"\n",(0,n.jsx)(i.h5,{id:"how-it-works-1",children:"How It Works"}),"\n",(0,n.jsx)(i.p,{children:"Tag-based distribution allows you to fetch videos by matching tags you've assigned to your videos:"}),"\n",(0,n.jsx)(i.mermaid,{value:"flowchart LR\n    A[Tag Videos] --\x3e B[Add query attribute]\n    B --\x3e C[bam-playlist fetches by tag]\n    C --\x3e D[Displays matching videos]"}),"\n",(0,n.jsxs)(i.ol,{children:["\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.strong,{children:"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., ",(0,n.jsx)(i.co
1de,{children:"variant-123"}),", ",(0,n.jsx)(i.code,{children:"summer-collection"}),", ",(0,n.jsx)(i.code,{children:"featured"}),")."]}),"\n"]}),"\n",(0,n.jsx)("img",{src:(0,o.Ay)("/img/video-tagging.png")}),"\n",(0,n.jsxs)(i.ol,{start:"2",children:["\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.strong,{children:"Configure your playlist"}),": Use the ",(0,n.jsx)(i.code,{children:"query"})," attribute in your ",(0,n.jsx)(i.code,{children:"<bam-playlist>"})," component to fetch videos by tag:"]}),"\n"]}),"\n",(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-html",children:'<bam-playlist \n  org-id="YOUR_ORG_ID" \n  query="tag:variant-123">\n</bam-playlist>\n'})}),"\n",(0,n.jsxs)(i.p,{children:["Replace ",(0,n.jsx)(i.code,{children:"variant-123"})," with the tag name you used when tagging your videos. The tag name in the ",(0,n.jsx)(i.code,{children:"query"})," attribute must exactly match the tag you added to your videos (case-sensitive)."]}),"\n",(0,n.jsx)(i.h5,{id:"use-cases",children:"Use Cases"}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.strong,{children:"Product variants"}),": Tag videos with a variant identifier (e.g., ",(0,n.jsx)(i.code,{children:"variant-123"}),") and use the same tag in your query to show videos on all variant PDPs"]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.strong,{children:"Collections"}),": Tag videos with collection names (e.g., ",(0,n.jsx)(i.code,{children:"summer-2024"}),") and display them on category pages"]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.strong,{children:"Featured content"}),": Tag videos as ",(0,n.jsx)(i.code,{children:"featured"})," and show them on specific pages"]}),"\n"]}),"\n",(0,n.jsx)(i.h4,{id:"23-by-explicit-sku",children:"2.3. By explicit SKU"}),"\n",(0,n.jsxs)(i.p,{children:["Use the ",(0,n.jsx)(i.code,{children:'query="sku:{skuValue}"'})," attribute to explicitly specify the SKU that the ",(0,n.jsx)(i.code,{children:"<bam-playlist>"})," component should use for video matching. This overrides only what the component recognizes on the page\u2014it does ",(0,n.jsx)(i.strong,{children:"not"})," affect what product reference (SKU) is scraped and stored when you add or scrape that product in the Bambuser dashboard (Bamhub)."]}),"\n",(0,n.jsx)(i.h5,{id:"how-it-works-2",children:"How It Works"}),"\n",(0,n.jsxs)(i.p,{children:["When you specify an explicit SKU in the ",(0,n.jsx)(i.code,{children:"query"})," attribute, the playlist will:"]}),"\n",(0,n.jsxs)(i.ol,{children:["\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.strong,{children:"Use the specified SKU"}),": The playlist uses the SKU you provide in the ",(0,n.jsx)(i.code,{children:"query"})," attribute instead of attempting to scrape it from the page"]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.strong,{children:"Match with videos"}),": It finds all videos in your content library that include products with the same SKU"]}),"\n",(0,n.jsxs)(i.li,{children:[(0,n.jsx)(i.strong,{children:"Display matching videos"}),": The playlist displays all relevant videos that feature products with the matching SKU"]}),"\n"]}),"\n",(0,n.jsx)(i.mermaid,{value:"flowchart LR\n    A[bam-playlist with query=sku:abc123] --\x3e B[Uses explicit SKU abc123]\n    B --\x3e C[Finds videos with matching SKU]\n    C --\x3e D[Displays matching videos]"}),"\n",(0,n.jsx)(i.h5,{id:"implementation-example-1",children:"Implementation Example"}),"\n",(0,n.jsx)(i.p,{children:"To use explicit SKU matching:"}),"\n",(0,n.jsxs)(i.ol,{children:["\n",(0,n.jsx)(i.li,{children:"Upload videos to your Bambuser workspace"}),"\n",(0,n.jsx)(i.li,{children:"Add products to your videos with accurate product references/SKUs"}),"\n",(0,n.jsxs)(i.li,{children:["Add the ",(0,n.jsx)(i.code,{children:"<bam-playlist>"})," component to your page with the ",(0,n.jsx)(i.code,{children:"query"})," attribute specifying the SKU:"]}),"\n"]}),"\n",(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-html",children:'<bam-playlist \n  org-id="YOUR_ORG_ID" \n  query="sku:abc123">\n</bam-playlist>\n'})}
1),"\n",(0,n.jsxs)(i.p,{children:["Replace ",(0,n.jsx)(i.code,{children:"abc123"})," with the actual SKU you want to use for matching videos."]}),"\n",(0,n.jsx)(i.admonition,{title:"Explicit SKU only affects the playlist on the page",type:"tip",children:(0,n.jsxs)(i.p,{children:["When using ",(0,n.jsx)(i.code,{children:'query="sku:abc123"'}),", the specified SKU overrides what the ",(0,n.jsx)(i.code,{children:"<bam-playlist>"})," component uses for matching\u2014so the playlist will use the SKU you provide instead of whatever the component would otherwise recognize on the page. This does ",(0,n.jsx)(i.strong,{children:"not"})," change what gets scraped when you add or scrape that product in Bamhub. If you are not happy with the product reference (SKU) that Bamhub has for a product, you can either ",(0,n.jsx)(i.a,{href:"/shoppable-video/troubleshooting/video-distribution-requirements/#2-requirement-2-product-reference-must-match-the-one-obtained-through-the-product-scraper",children:"edit it manually in Bamhub"})," or use a ",(0,n.jsx)(i.a,{href:"https://knowledge.bambuser.com/get-started-bambuser/product-feed",children:"product feed"}),"."]})}),"\n",(0,n.jsx)(i.h3,{id:"3-static-video-assignment-via-video-ids",children:"3. Static video assignment via Video IDs"}),"\n",(0,n.jsxs)(i.p,{children:["You can also directly specify which videos should appear in a playlist by providing video IDs to the ",(0,n.jsx)(i.code,{children:"<bam-playlist>"})," component:"]}),"\n",(0,n.jsxs)(i.ol,{children:["\n",(0,n.jsx)(i.li,{children:"Use the video IDs of the content you want to display"}),"\n",(0,n.jsxs)(i.li,{children:["Add these IDs directly to the ",(0,n.jsx)(i.code,{children:"video-ids"})," attribute of the component"]}),"\n"]}),"\n",(0,n.jsx)(i.p,{children:"You can also place multiple playlist components on the same page, each with different video IDs."}),"\n",(0,n.jsx)(i.h4,{id:"implementation-example-2",children:"Implementation Example"}),"\n",(0,n.jsxs)(i.p,{children:["You can add one or more ",(0,n.jsx)(i.code,{children:"<bam-playlist>"})," web components with different video selections:"]}),"\n",(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{className:"language-html",children:'<bam-playlist \n  video-ids="puv_qLTxiftQPcJYDAxXuxsgTh,puv_J2VZRPAV1FqWDqeRvWuZkz">\n</bam-playlist>\n\n<bam-playlist \n  video-ids="puv_3xYz1234AbCdEfGhIjKlMn">\n</bam-playlist>\n'})}),"\n",(0,n.jsx)(i.h4,{id:"finding-video-ids",children:"Finding Video IDs"}),"\n",(0,n.jsx)(i.p,{children:"To get a video's ID:"}),"\n",(0,n.jsxs)(i.ol,{children:["\n",(0,n.jsx)(i.li,{children:"Go to the Videos page in your Bambuser dashboard"}),"\n",(0,n.jsx)(i.li,{children:"Click on a video to open it"}),"\n",(0,n.jsxs)(i.li,{children:["Look at the URL in your browser:","\n",(0,n.jsx)(i.pre,{children:(0,n.jsx)(i.code,{children:"https://lcx.bambuser.com/YOUR_ORG_ID/on-demand/videos/puv_qLTxiftQPcJYDAxXuxsgTh/setup\n"})}),"\n"]}),"\n",(0,n.jsxs)(i.li,{children:["The video ID is the part after ",(0,n.jsx)(i.code,{children:"/videos/"})," and before the next slash (e.g., ",(0,n.jsx)(i.code,{children:"puv_qLTxiftQPcJYDAxXuxsgTh"}),")"]}),"\n"]}),"\n",(0,n.jsx)(i.p,{children:"This method gives you direct control over playlist content without requiring dashboard configuration or product data matching. It's particularly useful for:"}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:"Creating custom collections on category pages"}),"\n",(0,n.jsx)(i.li,{children:"Featuring specific videos on landing pages"}),"\n",(0,n.jsx)(i.li,{children:"Implementing hardcoded playlists where dynamic behavior isn't needed"}),"\n"]}),"\n",(0,n.jsx)(i.h2,{id:"troubleshooting",children:"Troubleshooting"}),"\n",(0,n.jsxs)(i.ul,{children:["\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"/shoppable-video/troubleshooting/video-distribution-requirements",children:"My Shoppable Videos are not automatically appearing on PDPs (SKU-based distribution)"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"/shoppable-video/troubleshooting/wrong-shoppable-videos-appearing",children:"Wrong Shoppable Videos Appearing"})}),"\n",(0,n.jsx)(i.li,{children:(0,n.jsx)(i.a,{href:"/shoppable-video/troubleshooting/unwanted-videos-on-pdps",children:"Unwanted videos appearing on our PDPs"})}),"\n"]})]})}function p(e={}){const{wrapper:i}={...(0,a.R)(),...e.components};return i?(0,n.jsx)(i,{...e,children:(0,n.jsx)(h,{...e})}):h(e)}},28453(e,i,t){t.d(i,{R:()=>o,x:()=>r});var s=t(96540);const n={},a=s.createContext(n);function o(e){const i=s.useContext(a);return s.useMemo(function(){return"function"==typeof e?e(i):{...i,...e}},[i,e])}function r(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(n):e.components||n:o(e.components),s.createElement(a.Provider,{value:i},e.children)}}}]);

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.