Skip to main content

Miniplayer compatibility

How to add the Miniplayer functionality to your website​

Bambuser Miniplayer is usually compatible with websites that are functional when opened within an iframe. Bambuser can also provide some workarounds that can potentially add the Miniplayer functionality to merchants' websites where it is not fully compatible.

Definition​

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.

Technology​

Bambuser Miniplayer adds an iframe element (according to W3C: The iframe element) over the merchant’s landing page to let viewers surf the merchant website (inside the iframe) without any interruption or page reload while having the Miniplayer over the iframe.

Potential incompatibility reasons:​

Cross domain access
  • Obstacle: Page on which caller initiates the Player from is not hosted on the same domain and protocol as merchant website/product pages/checkout pages/etc...

  • Possible solution: You can add target="_blank" attribute to your anchor links leading to external domains to open them on new tab, or target="_top" to kill the miniplayer and force reload to targeted external URL. You might want to do that just in the context when your website is being rendered inside an iframe. You can recognize this by below script on page load:

    Example code:

    • document.addEventListener("DOMContentLoaded", (event) => {
      //true if your page is being rendered in an iframe
      if (top !== self) {

        // note that this is just an example, you will need to
        // define your own anchor buttons specifically for your website
        let externalDomainLink = document.getElementById("externalDomainLinkId");

        //_blank will open the page in new tab
        externalDomainLink.setAttribute("target", "_blank");
      };
    });
X-Frame-Options (RFC7034)
  • Obstacle: Response headers from a merchant web server that contains X-Frame-Options = DENY

  • Possible solution: Set X-Frame-Options = SAMEORIGIN

    note

    The Content-Security-Policy HTTP header has a frame-ancestors directive which obsoletes this header for supporting browsers.

CSP: frame-ancestors directive (content security policy level 2)
note

The Content-Security-Policy header that has a frame-ancestors directive will obsoletes X-Frame-Options header for supporting browsers.

Exception for SPA (single page application) websites​

In case the merchant website is a SPA, where viewers can dynamically navigate to other pages of the merchant's website without new page load, there is the possibility to skip the overlay iframe. So, the Bambuser Miniplayer is an overlay on the actual landing page with no iframe involved. In this case, none of the above-mentioned requirements are needed to be satisfied. Note that the merchant will need some development effort to set up this feature.

note

You should add a floatingPlayer object inside the configure method

player.FLOATING_PLAYER_NAVIGATION_MODE.IFRAME​

Default behavior! Does not need to be specified.

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

player.FLOATING_PLAYER_NAVIGATION_MODE.MANUAL​

Used for SPA sites. Note that you will have to navigate your website manually

window.onBambuserLiveShoppingReady = player => {
  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 when a product is clicked.
    *
    * **event.url** holds the targeted url specific in Bambuser Workspace
    *
    * 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
  });
};

Troubleshooting​