https://bambuser.com/docs/assets/js/1062fb04.398d64c2.js

1"use strict";(globalThis.webpackChunkbambuser_docs||=[]).push([[3768],{34659(e,n,s){s.r(n),s.d(n,{assets:()=>h,contentTitle:()=>u,default:()=>m,frontMatter:()=>d,metadata:()=>i,toc:()=>p});var r=()=>s(37887),t=s.cw(function(e,n){const r=s.p+"assets/images/fill-parent-console-error-8445eb2a5d7c14d79afd281ce3549f4e.png";s.d(n,["A",0,r])});const i=JSON.parse('{"id":"troubleshooting/shoppable-video-not-appearing","title":"Shoppable Videos Not Appearing on My Website","description":"No Shoppable Videos showing: wrong Global/EU embed script, empty playlist, mismatched component ID, page URL mismatch, player-fit=\\"fill-parent\\" constraint.","source":"@site/shoppable-video/troubleshooting/shoppable-video-not-appearing.md","sourceDirName":"troubleshooting","slug":"/troubleshooting/shoppable-videos-not-appearing","permalink":"/docs/shoppable-video/troubleshooting/shoppable-videos-not-appearing","draft":false,"unlisted":false,"tags":[{"inline":true,"label":"shoppable videos","permalink":"/docs/shoppable-video/tags/shoppable-videos"}],"version":"current","frontMatter":{"title":"Shoppable Videos Not Appearing on My Website","description":"No Shoppable Videos showing: wrong Global/EU embed script, empty playlist, mismatched component ID, page URL mismatch, player-fit=\\"fill-parent\\" constraint.","slug":"shoppable-videos-not-appearing","tags":["shoppable videos"],"hide_table_of_contents":false}}');var o=s(74848),l=s(28453),a=s(4865),c=s(19365);s(86025);const d={title:"Shoppable Videos Not Appearing on My Website",description:'No Shoppable Videos showing: wrong Global/EU embed script, empty playlist, mismatched component ID, page URL mismatch, player-fit="fill-parent" constraint.',slug:"shoppable-videos-not-appearing",tags:["shoppable videos"],hide_table_of_contents:!1},u=void 0,h={},p=[{value:"Common Causes and Solutions",id:"common-causes-and-solutions",level:2},{value:"1. <strong>Mismatched Bambuser Script</strong>",id:"1-mismatched-bambuser-script",level:3},{value:"2. <strong>Empty Playlist in BamHub</strong>",id:"2-empty-playlist-in-bamhub",level:3},{value:"3. <strong>Incorrect Playlist ID</strong>",id:"3-incorrect-playlist-id",level:3},{value:"4. <strong>Page Source URL Mismatch</strong>",id:"4-page-source-url-mismatch",level:3},{value:"5. <strong>&quot;Fill Parent&quot; Player Fit Mode Configuration</strong>

1",id:"5-fill-parent-player-fit-mode-configuration",level:3}];function b(e){const n={a:"a",admonition:"admonition",br:"br",code:"code",h2:"h2",h3:"h3",hr:"hr",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.p,{children:"If your shoppable videos are not appearing on your website, there are several common issues that might be causing this problem. Follow these steps to help you identify and resolve the issue."}),"\n",(0,o.jsx)(n.admonition,{title:"Videos appearing but wrong content?",type:"tip",children:(0,o.jsxs)(n.p,{children:["If videos ",(0,o.jsx)(n.strong,{children:"are"})," appearing on your page but they're showing the wrong content, this is likely a placement misconfiguration issue. See ",(0,o.jsx)(n.a,{href:"/shoppable-video/troubleshooting/wrong-shoppable-videos-appearing",children:"Troubleshooting: Wrong Shoppable Videos Appearing"})," for help resolving placement conflicts."]})}),"\n",(0,o.jsx)(n.admonition,{title:"Unwanted videos appearing?",type:"tip",children:(0,o.jsxs)(n.p,{children:["If videos are appearing on your PDPs that you didn't explicitly configure, this is likely due to automatic SKU-based distribution. See ",(0,o.jsx)(n.a,{href:"/shoppable-video/troubleshooting/unwanted-videos-on-pdps",children:"Unwanted videos appearing on our PDPs"})," to learn how to disable this feature."]})}),"\n",(0,o.jsx)(n.hr,{}),"\n",(0,o.jsx)(n.h2,{id:"common-causes-and-solutions",children:"Common Causes and Solutions"}),"\n",(0,o.jsxs)(n.h3,{id:"1-mismatched-bambuser-script",children:["1. ",(0,o.jsx)(n.strong,{children:"Mismatched Bambuser Script"})]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:"Cause:"}),(0,o.jsx)(n.br,{}),"\n","The Bambuser script on your website might not match the environment set for your Bambuser workspace (Global or EU)."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Solution:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Verify"})," that you're using the correct Bambuser script based on your workspace\u2019s region (Global or EU)."]}),"\n"]}),"\n",(0,o.jsxs)(a.A,{defaultValue:"global-servers",values:[{label:"Global workspaces",value:"global-servers"},{label:"EU workspaces",value:"eu-servers"}],children:[(0,o.jsxs)(c.A,{value:"global-servers",children:[(0,o.jsxs)(n.p,{children:["If your Bambuser workspace is on the Global dashboard, use the following script in the ",(0,o.jsx)(n.code,{children:"<head>"})," or ",(0,o.jsx)(n.code,{children:"<body>"})," tags of your website:"]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:'<script async src="https://lcx-embed.bambuser.com/default/embed.js"><\/script>\n'})})]}),(0,o.jsxs)(c.A,{value:"eu-servers",children:[(0,o.jsxs)(n.p,{children:["If your Bambuser workspace is on the EU dashboard, use the following script in the ",(0,o.jsx)(n.code,{children:"<head>"})," or ",(0,o.jsx)(n.code,{children:"<body>"})," tags of your website:"]}),(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-html",children:'<script async src="https://lcx-embed-eu.bambuser.com/default/embed.js"><\/script>\n'})})]})]}),"\n",(0,o.jsx)(n.admonition,{title:"Where\u2019s my workspace located?",type:"note",children:(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["If you log in to your workspace on ",(0,o.jsx)(n.strong,{children:"lcx.bambuser.com"}),", use the Global script."]}),"\n",(0,o.jsxs)(n.li,{children:["If you log in to your workspace on ",(0,o.jsx)(n.strong,{children:"lcx-eu.bambuser.com"}),", use the EU script."]}),"\n"]})}),"\n",(0,o.jsxs)(n.h3,{id:"2-empty-playlist-in-bamhub",children:["2. ",(0,o.jsx)(n.strong,{children:"Empty Playlist in BamHub"})]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:"Cause:"}),(0,o.jsx)(n.br,{}),"\n","Your Bambuser workspace playlist may not contain any videos."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Solution:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Verify"})," that you have added videos to your playlist in the Bambuser workspace.","\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Go to your Bambuser workspace: ",(0,o.jsx)(n.code,{children:"BamHub \u2192 Pages \u2192 Playlist \u2192 Add videos manually"}),", and make sure that videos are listed in the playlist."]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(n.h3,{id:"3-incorrect-playlist-id",children:["3. ",(0,o.jsx)(n.strong,{children:"Incorrect Playlist ID"})]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:"Cause:"}),(0,o.jsx)(n.br,{}),"\n","The playlist ID configured on your website doesn't match the one in your Bambuser workspace settings."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Solution:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:"Verify"})," that the playlist ID on your website (1) matches the one in your Bambuser workspace (2)."]}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Find the Playlist ID on Your Website:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["If you have set a ",(0,o.jsx)(n.a,{href:"/shoppable-video/bam-playlist-integration#3-configuring-playlist-layout-and-behavior",children:"playlist-id"})," attribute in your ",(0,o.jsx)(n.code,{children:"<bam-playlist>"})," tag, that is your playlist ID."]}),"\n",(0,o.jsxs)(n.li,{children:["If the ",(0,o.jsx)(n.a,{href:"/shoppable-video/bam-playlist-integration#3-configuring-playlist-layout-and-behavior",children:"playlist-id"})," attribute is not set, the playlist ID is automatically generated using the formula ",(0,o.jsx)(n.code,{children:"playlist-auto-id-[(number of <bam-playlist> elements on your page) - 1]"}),". For example, if you have only one ",(0,o.jsx)(n.code,{children:"<bam-playlist>"})," element on your page, and no ",(0,o.jsx)(n.code,{children:"playlist-id"})," attribute, your playlist ID will be ",(0,o.jsx)(n.code,{children:"playlist-auto-id-0"}),"."]}),"\n",(0,o.jsxs)(n.li,{children:['Alternatively, you can find the playlist ID by opening the browser console \u2192 Network tab \u2192 type "distribution" \u2192 refresh the page \u2192 and check the playlist ID in the request payload under ',(0,o.jsx)(n.code,{children:"containerId"}),"."]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"img",src:r().A+"",width:"1903",height:"935"})}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:"Compare the Playlist ID:"}),(0,o.jsx)(n.br,{}),"\n","Once you've identified the playlist ID on your website, compare it with the one in the ",(0,o.jsx)(n.strong,{children:"Advanced Settings"})," of your Bambuser workspace:"]}

1),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Go to ",(0,o.jsx)(n.code,{children:"BamHub \u2192 Pages \u2192 Playlist \u2192 Settings \u2192 Advanced settings \u2192 Playlist ID"})]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(n.h3,{id:"4-page-source-url-mismatch",children:["4. ",(0,o.jsx)(n.strong,{children:"Page Source URL Mismatch"})]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:"Cause:"}),(0,o.jsx)(n.br,{}),"\n","This issue may occur when your page is performing redirects in the background."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"Solution:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.strong,{children:"Verify"})," that the correct page URL is configured in BamHub."]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:"To do this:"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:["Open the ",(0,o.jsx)(n.strong,{children:"Network"}),' tab in your browser\u2019s developer tools and type "distribution".']}),"\n",(0,o.jsxs)(n.li,{children:["Refresh your page and look for the page source URL in the request payload under ",(0,o.jsx)(n.code,{children:"URL"}),"."]}),"\n",(0,o.jsx)(n.li,{children:"This is the page URL you need to configure in BamHub."}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:["To check and configure this URL, go to your Bambuser workspace: ",(0,o.jsx)(n.code,{children:"BamHub \u2192 Pages \u2192 Playlist"})," and search for that URL. This is where you should configure your playlist."]}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"img",src:r().A+"",width:"1903",height:"935"})}),"\n",(0,o.jsxs)(n.p,{children:["For more information on how to handle redirects, refer to ",(0,o.jsx)(n.a,{href:"/shoppable-video/troubleshooting/background-redirects",children:"this article"}),"."]}

1),"\n",(0,o.jsxs)(n.h3,{id:"5-fill-parent-player-fit-mode-configuration",children:["5. ",(0,o.jsx)(n.strong,{children:'"Fill Parent" Player Fit Mode Configuration'})]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:"Cause:"}),(0,o.jsx)(n.br,{}),"\n",'The "fill-parent" player fit mode can only be used when the playlist has a soft limit of 1 or when the video mode is set to "single video". If these conditions are not met, videos will not appear.']}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"How to Identify:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsx)(n.p,{children:"Check your browser's console for the following error message:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{children:'The "fill-parent" player fit mode can only be used with a limit of 1 or soft limit of 1 or mode "single". undefined\n'})}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"img",src:t().A+"",width:"803",height:"105"})}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(n.p,{children:[(0,o.jsx)(n.strong,{children:"Solution:"}),(0,o.jsx)(n.br,{}),"\n","You need to ensure that either:"]}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsx)(n.li,{children:"The soft limit is set to 1, OR"}),"\n",(0,o.jsx)(n.li,{children:'The video mode is set to "single video"'}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:"To fix this issue:"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"If configured in code:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Check your ",(0,o.jsx)(n.code,{children:"<bam-playlist>"})," element attributes or JavaScript configuration"]}),"\n",(0,o.jsxs)(n.li,{children:["Ensure that if you're using ",(0,o.jsx)(n.code,{children:'player-fit="fill-parent"'}),", you also set ",(0,o.jsx)(n.code,{children:'soft-limit="1"'})," or ",(0,o.jsx)(n.code,{children:'mode="single"'})]}),"\n",(0,o.jsx)(n.li,{children:"Update your code accordingly"}),"\n"]}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.strong,{children:"If configured in Bambuser dashboard:"})}),"\n",(0,o.jsxs)(n.ul,{children:["\n",(0,o.jsxs)(n.li,{children:["Go to your Bambuser workspace: ",(0,o.jsx)(n.code,{children:"BamHub \u2192 Pages \u2192 Playlist \u2192 Settings \u2192 Appearances"})]}),"\n",(0,o.jsx)(n.li,{children:"Check the player fit mode setting"}),"\n",(0,o.jsx)(n.li,{children:'Either change the player fit mode from "fill-parent" to another option, or ensure the soft limit is set to 1 or the mode is set to "single video"'}),"\n"]}),"\n"]}),"\n"]})]})}function m(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(b,{...e})}):b(e)}},19365(e,n,s){s.d(n,{A:()=>a});s(96540);var r=s(18215),t=s(47751);const i="tabItem_Ymn6";var o=s(74848);function l({children:e,className:n,hidden:s}){return(0,o.jsx)("div",{role:"tabpanel",className:(0,r.A)(i,n),hidden:s,children:e})}function a({children:e,className:n,value:s}){const{selectedValue:r,lazy:i}=(0,t.uc)(),a=s===r;return!a&&i?null:(0,o.jsx)(l,{className:n,hidden:!a,children:e})}},4865(e,n,s){s.d(n,{A:()=>b});s(96540);var r=s(18215),t=s(17559),i=s(47751),o=s(23104),l=s(92303);const a="tabList__CuJ",c="tabItem_LNqP";var d=s(74848);function u({className:e}){const{selectedValue:n,selectValue:s,tabValues:t,block:l}=(0,i.uc)(),a=[],{blockElementScrollPositionUntilNextRender:u}=(0,o.a_)(),h=e=>{const r=e.currentTarget,i=a.indexOf(r),o=t[i].value;

1o!==n&&(u(r),s(o))},p=e=>{let n=null;switch(e.key){case"Enter":h(e);break;case"ArrowRight":{const s=a.indexOf(e.currentTarget)+1;n=a[s]??a[0];break}case"ArrowLeft":{const s=a.indexOf(e.currentTarget)-1;n=a[s]??a[a.length-1];break}}n?.focus()};return(0,d.jsx)("ul",{role:"tablist","aria-orientation":"horizontal",className:(0,r.A)("tabs",{"tabs--block":l},e),children:t.map(({value:e,label:s,attributes:t})=>(0,d.jsx)("li",{role:"tab",tabIndex:n===e?0:-1,"aria-selected":n===e,ref:e=>{a.push(e)},onKeyDown:p,onClick:h,...t,className:(0,r.A)("tabs__item",c,t?.className,{"tabs__item--active":n===e}),children:s??e},e))})}function h({children:e}){return(0,d.jsx)("div",{className:"margin-top--md",children:e})}function p({className:e,children:n}){return(0,d.jsxs)("div",{className:(0,r.A)(t.G.tabs.container,"tabs-container",a),children:[(0,d.jsx)(u,{className:e}),(0,d.jsx)(h,{children:n})]})}function b(e){const n=(0,l.A)(),s=(0,i.OC)(e);return(0,d.jsx)(i.O_,{value:s,children:(0,d.jsx)(p,{className:e.className,children:(0,i.vT)(e.children)})},String(n))}},47751(e,n,s){s.d(n,{OC:()=>b,O_:()=>x,uc:()=>g,vT:()=>d});var r=s(96540),t=s(90612),i=s(205),o=s(57485),l=s(70679),a=s(31682),c=s(74848);function d(e){return r.Children.toArray(e).filter(e=>"\n"!==e)}function u(e){const{values:n,children:s}=e;return(0,r.useMemo)(()=>{const e=n??function(e){return r.Children.toArray(e).flatMap(e=>{if(!e)return[];if((0,r.isValidElement)(e)&&function(e){const{props:n}=e;return!!n&&"object"==typeof n&&"value"in n}(e))return[e];const n="string"==typeof e.type?e.type:e.type.name;throw new Error(`Docusaurus error: Bad <Tabs> child <${n}>: all children of the <Tabs> component should be <TabItem>, and every <TabItem> should have a unique "value" prop.\nIf you do not want to pass on a "value" prop to the direct children of <Tabs>, you can also pass an explicit <Tabs values={...}> prop.`)}).map(({props:{value:e,label:n,attributes:s,default:r}})=>({value:e,label:n,attributes:s,default:r}))}(s);return function(e){const n=(0,a.XI)(e,(e,n)=>e.value===n.value);if(n.length>0)throw new Error(`Docusaurus error: Duplicate values "${n.map(e=>`'${e.value}'`).join(", ")}" found in <Tabs>. Every value needs to be unique.`)}(e),e},[n,s])}function h({value:e,tabValues:n}){return n.some(n=>n.value===e)}function p({queryString:e=!1,groupId:n}){const s=(0,t.W6)(),i=function({queryString:e=!1,groupId:n}){if("string"==typeof e)return e;if(!1===e)return null;if(!0===e&&!n)throw new Error('Docusaurus error: The <Tabs> component groupId prop is required if queryString=true, because this value is used as the search param name. You can also provide an explicit value such as queryString="my-search-param".');return n??null}({queryString:e,groupId:n});return[(0,o.aZ)(i),(0,r.useCallback)(e=>{if(!i)return;const n=new URLSearchParams(s.location.search);n.set(i,e),s.replace({...s.location,search:n.toString()})},[i,s])]}function b(e){const{defaultValue:n,queryString:s=!1,groupId:t}=e,o=u(e),[a,c]=(0,r.useState)(()=>function({defaultValue:e,tabValues:n}){if(0===n.length)throw new Error("Docusaurus error: the <Tabs> component requires at least one <TabItem> children component");if(e){if(!h({value:e,tabValues:n}))throw new Error(`Docusaurus error: The <Tabs> has a defaultValue "${e}" but none of its children has the corresponding value. Available values are: ${n.map(e=>e.value).join(", ")}. If you intend to show no default tab, use defaultValue={null} instead.`);return e}const s=n.find(e=>e.default)??n[0];if(!s)throw new Error("Unexpected error: 0 tabValues");return s.value}({defaultValue:n,tabValues:o})),[d,b]=p({queryString:s,groupId:t}),[m,g]=function({groupId:e}){const n=function(e){return e?`docusaurus.tab.${e}`:null}(e),[s,t]=(0,l.Dv)(n);return[s,(0,r.useCallback)(e=>{n&&t.set(e)},[n,t])]}({groupId:t}),x=(()=>{const e=d??m;return h({value:e,tabValues:o})?e:null})();(0,i.A)(()=>{x&&c(x)},[x]);return{selectedValue:a,selectValue:(0,r.useCallback)(e=>{if(!h({value:e,tabValues:o}))throw new Error(`Can't select invalid tab value=${e}`);c(e),b(e),g(e)},[b,g,o]),tabValues:o,lazy:e.lazy??!1,block:e.block??!1}}const m=(0,r.createContext)(null);function g(){const e=r.useContext(m);if(!e)throw new Error("useTabsContext() must be used within a Tabs component");return e}function x(e){return(0,c.jsx)(m.Provider,{value:e.value,children:e.children})}},37887(e,n,s){const r=s.p+"assets/images/console-debugging-distribution-fc039f5c5b2b23d08d21665890120ed0.png";s.d(n,["A",0,r])},28453(e,n,s){s.d(n,{R:()=>o,x:()=>l});var r=s(96540);const t={},i=r.createContext(t);function o(e){const n=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:o(e.components),r.createElement(i.Provider,{value:n},e.children)}}}]);