Initial Setup

Set up and implement the Bambuser player

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 on the show setup page.

With that snippet, we load the Bambuser Liveshopping embed script and register a click event listener for the specified Call To Action (CTA) element. The trigger element will then start an overlay iframe of the player. 

See a real-time demo  



Embed the player

1. Set up your show

Log in to the dashboard

Use your credentials to log in to the Bambuser dashboard.

Create a show / Open an existing show

To create a new show, click the "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 the 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)



Note

Product data is collected using the following standards:
    - Schema.org/Product
    - og: meta tags 

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.

Add the code snippet to your landing page

Add a 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'RE 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 a node in the embed script you can make any item on your website start the player.

Customizable properties:

Property Description Type
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

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 the following syntax if you want to have more than one show 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, the player will automatically be triggered on page load.

?autoplayLiveShopping=SHOWID   

2. Custom initialisation

Omitting the node during initialization.

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

Use Player API Reference

To further customize the behavior 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.

Initial setup FAQ

Can we have multiple shows with countdowns on our site concurrently?

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, you can find it here.‍

Can we use Google Tag Manager (GTM) to embed the player?

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 a clickable image).

If the desired trigger element exists on the page - and 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. A way to do this 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).


Was this article helpful?