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 obstacles and solutions​

Some strict server-side security policies might block requests from within an iframe element. If the merchant web server responses contain headers that deny the right of opening web pages within an iframe, Bambuser can not guarantee the full functionality of the Bambuser Miniplayer.

Options that limit the full experience of Bambuser Miniplayer:

  1. Cross domain access

    • Obstacle: A Landing page is not hosted on the same domain and protocol as merchant website and product pages
    • Possible solution: For cross-market shows, where viewers get navigated to product pages when clicking on a product item, the merchant is obligated to hydrate the products with a localized Product URL that has the same domain as the landing page.

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

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

    • Obstacle: Response headers from merchant web server that contain Content-Security-Policy: frame-ancestors 'none';

    • Possible solution: Content-Security-Policy: frame-ancestors 'self';

      note

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

  4. Any iframe incompatibility associated with components of the merchant website

  5. Fixed positioning of body element on iOS user-agents

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 Dashboard
    *
    * 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
  });
};