Initial Setup

Let's start with adding the player to your website.
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)

alt text

note

Product data is collected using the following standards:

If none of the above is implemented on your product pages, you may can still manually update product info.

Learn more about scraping here: Bambuser Live Shopping Product Data Scraping


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.

alt text

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
<button id="liveshopping-123">Join show now</button>
<script>
(function() {
if (!window.initBambuserLiveShopping) {
window.initBambuserLiveShopping = function(item) { window.initBambuserLiveShopping.queue.push(item) };
window.initBambuserLiveShopping.queue = [];
var scriptNode = document.createElement('script');
scriptNode['src'] = 'https://lcx-embed.bambuser.com/your-brand/embed.js';
document.body.appendChild(scriptNode);
}
window.initBambuserLiveShopping({
showId: 'BAMBUSER-LIVESHOPPING-SHOW-ID-HERE',
node: document.getElementById('liveshopping-123'),
type: 'overlay',
});
})();
</script>
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.

By simply changing the value of node in the embed script you can make any item on your website start the player. Note the small changes between Example 1 and Example 2

Customizable properties:
PropertyDescriptionType
showIdEach 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
nodeAn element that opens the player on click event. Removing node completely will trigger the player on page load.DOM Element

caution

Find the correct embed code for your brand on the "Show setup" page on the dashboard.

Example: Customized trigger element

// Your very cool interactive element here provided with a id attribute
<div id="myCoolClickableThing">Click me!</div>
// The bambuser embed script stripped of the "button" element
// and with a node pointing at your element "myCoolClickableThing"
<script>
(function() {
if (!window.initBambuserLiveShopping) {
window.initBambuserLiveShopping = function(item) { window.initBambuserLiveShopping.queue.push(item) };
window.initBambuserLiveShopping.queue = [];
var scriptNode = document.createElement('script');
scriptNode['src'] = 'https://lcx-embed.bambuser.com/**your-brand**/embed.js';
document.body.appendChild(scriptNode);
}
window.initBambuserLiveShopping({
showId: 'BAMBUSER-LIVESHOPPING-SHOW-ID-HERE',
node: document.getElementById('myCoolClickableThing'),
type: 'overlay',
});
})();
</script>

Extra customizations

Embedding multiple shows

Use following sytax if you want to have more than one shows embedded on your landing page.

// Your very cool interactive element here provided with a id attribute
<div id="myCoolClickableThing-1">Click me!</div>
<div id="myCoolClickableThing-2">Click me!</div>
// The bambuser embed script stripped of the "button" element
// and with a node pointing at your element "myCoolClickableThing"
<script>
(function() {
if (!window.initBambuserLiveShopping) {
window.initBambuserLiveShopping = function(item) { window.initBambuserLiveShopping.queue.push(item) };
window.initBambuserLiveShopping.queue = [];
var scriptNode = document.createElement('script');
scriptNode['src'] = 'https://lcx-embed.bambuser.com/embed.js';
document.body.appendChild(scriptNode);
}
// We can embed multiple shows in a single page as below
// node: The trigger element for opening the reletive show
window.initBambuserLiveShopping({
showId: 'BAMBUSER-LIVESHOPPING-SHOW-ID-HERE',
node: document.getElementById('myCoolClickableThing-1'),
type: 'overlay',
});
window.initBambuserLiveShopping({
showId: 'BAMBUSER-LIVESHOPPING-SHOW-ID-HERE',
node: document.getElementById('myCoolClickableThing-2'),
type: 'overlay',
});
})();
</script>

Autoplay

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.

?autoplayLiveShopping=SHOWID

2. Custom initialisation

Omitting the node during initialisation.

<script>
(function() {
if (!window.initBambuserLiveShopping) {
window.initBambuserLiveShopping = function(item) { window.initBambuserLiveShopping.queue.push(item) };
window.initBambuserLiveShopping.queue = [];
var scriptNode = document.createElement('script');
scriptNode['src'] = 'https://lcx-embed.bambuser.com/your-brand/embed.js';
document.body.appendChild(scriptNode);
}
window.initBambuserLiveShopping({
showId: 'BAMBUSER-LIVESHOPPING-SHOW-ID-HERE',
n̶o̶d̶e̶:̶ ̶d̶o̶c̶u̶m̶e̶n̶t̶.̶g̶e̶t̶E̶l̶e̶m̶e̶n̶t̶B̶y̶I̶d̶(̶'̶m̶y̶C̶o̶o̶l̶C̶l̶i̶c̶k̶a̶b̶l̶e̶T̶h̶i̶n̶g̶'̶)̶,̶
type: 'overlay',
});
})();
</script>

Use Player API Reference

To further customize the behaviour of the player, there are different configuration options and events that you can handle.

Appearance

If you wish to customize the appearance of your player (colors, fonts, icons, etc.), reach out to your contact person at Bambuser.

FAQ

You can have as many shows on your website as you would like. Each show will have its own ID (found in the dashboard) and you can link it to its own CTA. How to do that, can be found here.
You can inject the JavaScript part of the embed code via GTM, but that only enables the ability to open the player, it does not add any trigger button that would actually allow the user to open the player (this can be a button or an clickable image or whatever).

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).