Skip to main content

Miniplayer

Enable the Miniplayer (floating player) feature​

The Bambuser Miniplayer is a minimized version of the Bambuser Live Video Shopping player which enables viewers to surf the merchant’s website, product pages, and to proceed with checkout while watching the show with no interruption. Viewers can maximize the player and continue watching in the main player at any time.

Requirements​

  • Your website is allowed to be rendered within an <iframe> while the ancestor of the <iframe> is your website (Read more)
  • <body> element should not have fixed positioning

Exemption for SPA websites

For fully single page applications, it is possible to skip the iframe navigation. As long as the DOM is not fully reloaded, the Miniplayer element can keep playing the show with no interruption. In this case, your website does not require to be rendered in an iframe. (Read more on how to implement Miniplayer for SPA websites)

Compatibility

Miniplayer might not be compatible with all websites. You can read more about the Miniplayer compatibility here.

Implementation​

Enabling the Miniplayer​

You can enable the Miniplayer by configuring the behavior of certain buttons inside the player. See the player's configure() method and the examples.

note

It is a good practice to add player configuration code before the embed script.

Example
<button id="YOUR_ELEMENT_ID_HERE">Join show now</button>
<script>
  window.onBambuserLiveShoppingReady = function (player){
    player.configure({
      buttons: {
        dismiss: player.BUTTON.MINIMIZE,
      },
    });
  };

  (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: 'SHOW_ID_HERE',
      node: document.getElementById('YOUR_ELEMENT_ID_HERE'),
      type: 'overlay',
    });
  })();
</script>

Example: Configuring the dismiss button (Player top-right buttons)

  • Enables the Miniplayer
window.onBambuserLiveShoppingReady = (player) => {
  player.configure({
    buttons: {
      dismiss: player.BUTTON.MINIMIZE,
    },
  });
};

Example: Configuring the product buttons

  • Enables the Miniplayer
  • Disables the player cart
  • Minimizes the player when a product is clicked
window.onBambuserLiveShoppingReady = (player) => {
  player.configure({
    buttons: {
      product: player.BUTTON.MINIMIZE,
    },
  });
};

Example: Configuring the checkout button

  • Enables the Miniplayer
  • Minimizes the player when the checkout button is clicked
note

You need to have the Cart Integration implemented to be able to use the checkout button in the player.

window.onBambuserLiveShoppingReady = (player) => {
  player.configure({
    buttons: {
      checkout: player.BUTTON.MINIMIZE,
    },
  });
};

Disabling the Miniplayer​

To disable the Miniplayer (so the player can not be minimized) you need to make sure that:

  1. You have the dismiss button configuration set to player.BUTTON.CLOSE in the configurations.
  2. You do not have any buttons configured with player.BUTTON.MINIMIZE.

Example: Disable the Miniplayer

window.onBambuserLiveShoppingReady = (player) => {
  player.configure({
    buttons: {
      dismiss: player.BUTTON.CLOSE,
    },
  });
};

For SPA websites​

For implementing the Miniplayer on an SPA (single page application) website, you need some additional integration.

1. Configure the floating player navigationMode​

By setting the navigationMode to player.FLOATING_PLAYER_NAVIGATION_MODE.MANUAL, your website will NOT be loaded inside an iframe, once the player is minimized.

2. Handle player.EVENT.NAVIGATE_BEHIND_TO event​

trigger
  • Navigating to PDPs when a product is clicked
    (in case products should navigate the user to the PDP)
  • Invoking player.showCheckout(url) method
    (Usually invoked through the player.EVENT.CHECKOUT event handler)

Whenever you are navigating to a URL from the player (PDP, checkout, links from the chat), the player gets minimized and the app should navigate to the targeted URL. Since navigation/routing might work differently on each SPA app, you will have to handle navigation by yourself (manually).

Example:

window.onBambuserLiveShoppingReady = (player) => {
  player.configure({
    buttons: {
      dismiss: player.BUTTON.MINIMIZE, // Enables Miniplayer
      checkout: player.BUTTON.MINIMIZE, // Minimizes the player once the checkout is clicked
    },
    floatingPlayer: {
      navigationMode: player.FLOATING_PLAYER_NAVIGATION_MODE.MANUAL,
    },
  });

  player.on(player.EVENT.NAVIGATE_BEHIND_TO, function (event) {
    /*
     * Triggered in two occasions:
     *  + Navigating to PDPs
     *    - event.url holds the PDP URL that added through Bambuser dashboard
     *  + Invoking player.showCheckout(url) method
     *    - event.url holds the passed url on method call
     *
     * What should be handled:
     * 1. Load page content without reloading the page
     * eg. Use React Router,AJAX , ...
     *
     * 2. (If needed) Change url inside browser address bar
     * eg. history.pushState({}, 'Your Page Title', event.url)
     *
     */
  });
};

Miniplayer FAQ​

This could happen due to a few different reasons:
  1. User is navigated to a different domain (cross origin) as the one player is embedded on.
  2. Strict security policies in the server response headers might be blocking the page from being rendered within an iframe element.

Read more on Miniplayer compatibility to see the options that are limiting the Bambuser Miniplayer experience and potential solutions.

By default, the player is minimized to the bottom right corner of the website. However, the viewer is free to drag the player around the screen afterward.

It works under certain circumestances.

Example Scenario - cross-origin frame access error

Lets say your website consisted of:

  • www.brand.com - where you embedded the player
  • shop.brand.com - where your product pages are linked from

Here is what can happen:

  1. The player is opened under www.brand.com domain (E.g. www.brand.com/live)
  2. An iframe is automatically created which has the same URL as the current page (www.brand.com/live)
  3. When a viewer clicks on a product, the player gets minimized and tries to open the product URL (hosted under shop.brand.com) in the iframe
  4. Since the origin of the iframe parent is www.brand.com but the page that is rendered in it is from a cross-origin URL (shop.brand.com), the browser might refuse to render that page in the iframe
  5. An error message appears inside the iframe
  6. Same issue goes for all navigations to cross-origin domains within the iframe

Problem

In the above example the problem could be due to that your server responses include a security header that prevents your website from being rendered in iframes with cross-origin parent. For example

  • X-Frame-Options = SAMEORIGIN
    • or
  • Content-Security-Policy: frame-ancestors 'self';

Solution In this case, you need to whitelist the origin of the iframe parent (www.brand.com or where the player is embedded) by adding/changing the server response headers of the pages hosted on other domains (E.g. shop.brand.com) as below:

  • Content-Security-Policy: frame-ancestors 'self' www.brand.com;

It depends on how the iframing is being blocked.

  1. Can not be rendered in an iframe at all.

    • X-Frame-Options = DENY
    • Or Content-Security-Policy: frame-ancestors 'none';

    In this case, the minimum requirements for the Miniplayer are not met, therefore, it will not function as expected. So, we suggest that you disable the Miniplayer.

  2. Can not be rendered in an iframe with cross-origin parent.

    • X-Frame-Options = SAMEORIGIN
      • or
    • Content-Security-Policy: frame-ancestors 'self';

    In this case, you need to open the cross-origin links in a new tab. Alternatively you are able to open these links within the TOP document (so, it will not get opened in the correct iframe), however, it reloads the current page that destroys the Miniplayer player instance.

When using Miniplayer and navigate to a cross-origin page, you should expect that the address bar can not be updated with a cross-origin URL.

For example, if you opened the player on www.example.com, and then later navigated to checkout.example.com (while the player is minimized), the URL in the address bar will not be updated as long as you are navigating in the cross-origin page.