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.

You can see a real-time demo  


Requirements

Non-SPA (Single Page Application) websites

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

SPA websites

  • <body> element should not have fixed positioning

Compatibility

Miniplayer is not compatible with all websites. Read more about mini-player compatibility here.

Implementation

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

Miniplayer Configuration script needs to be before embed script

Non-SPA websites

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

SPA websites

Implementation of miniplayer on SPA sites is a bit different. Note that you will have to navigate your website manually.

window.onBambuserLiveShoppingReady = player => {
  player.configure({
  player.configure({
    buttons: {
      dismiss: player.BUTTON.MINIMIZE,
    },
    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
*     - 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. Change url inside browser address bar
     * eg. history.pushState({}, null, event.url)
     * 
     * 2. Load page content without reloading the page 
     * eg. Use React Router, AJAX , ...
     * 
     */
    // Your codes here 
  });
};

FAQ

When the player minimizes, the website crashes in the background

This could happen due to a few different reasons:

  1. Your Products URLs lead to a different domain than the one where the player is embedded on
  2. Strict server-side security policies might be blocking requests from within an iframe element

Read here‍ on what exactly are the options that are limiting the Bambuser Miniplayer experience and potential solutions.

Can we configure the position to which the player goes when minimized?

Currently, it is only possible for the player to automatically minimizes to the bottom right corner of the website. However, the viewer is free to drag the player around the screen afterward.

Was this article helpful?