To do that, you will need to have a code snippet added to your landing page. That code snippet is available to you inside the dashboard in the show setup page.
With that snippet, we load Bambuser Liveshopping embed script and register click event listener for specified Call To Action (CTA) element. The trigger element will then start an overlay iframe of the player.
See real time demo
Embed the player
1. Set up your show
Log in to the dashboard
Use your credentials to login to Bambuser dashboard.
Create a show / Open an existing show
To create a new show, click "Create test show" or "Create show" button on the top right corner.
Add products (optional)
To add products to your show, navigate to your show on Live Shopping dashboard. On the right side, you can see the show's product section. Add your products by entering the URL(s) to your PDP (Product Display Page). You can add multiple products by entering space-separated or comma-separated URLs.
When you add a product to a show in the Bambuser Dashboard, some basic product details are loaded from the given product's PDP. These can only be populated correctly when your PDP structured data is in the format our scraper expects.
- A thumbnail image URL
- A product name or title
- A brand name
- A reference value (often the SKU, or if it does not exist, the product URL)
2. Embed the code snippet
Copy the embed code snippet
On your show page, press the Copy button in the Embed part of the show's Setup page. This copies the embed code, which can then be inserted on any page where you want to show the player.
Add the code snippet to your landing page
Add code snippet to your landing page. This can be done by adding it to the source code, CMS editor or tag managers such as GTM.
Example: Default embed code
That's it! You are ready to broadcast your first show! 🥳🥳🥳
When a user visits your site he/she will now see a button saying Join show now. Pressing the button will open the player and start the show! Simple as that.
Do you want something a little more exciting than a simple button? Maybe an image or a popup on your website? Read on how to customize your trigger element below.
3. Customize the trigger element
The embed code includes a simple
<button> that starts the player. But very often this is not the way you want your CTA (call to action) to look.
|showId||Each show has a unique ID that is included in the code snippet on your show page in Bambuser Dashboard. In some cases, you may want to assign this property dynamically.||String|
|node||An element that opens the player on click event. Removing node completely will trigger the player on page load.||DOM Element|
Find the correct embed code for your brand on the "Show setup" page on the dashboard.
Example: Customized trigger element
Embedding multiple shows
Use following sytax if you want to have more than one shows embedded on your landing page.
Instead of the customer manually starting the show, the player can be configured to automatically start when they land on your page. This can be done in two ways.
1. Query parameter
Change the URL of the player page by adding the following query parameter. If that show is already embedded on your page, player will automatically be trigged on page laod.
2. Custom initialisation
Omitting the node during initialisation.
Use Player API Reference
To further customize the behaviour of the player, there are different configuration options and events that you can handle.
If you wish to customize the appearance of your player (colors, fonts, icons, etc.), reach out to your contact person at Bambuser.
If the desired trigger element exists on the page - if a button was added via the site's CMS, for example - then the embed code can be slightly adjusted to attach to that element and work even when injected via GTM. One option is to remove `node` from the embed code which causes the player to open up automatically when the user arrives at the page (i.e. no clickable element necessary).