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

Possible workarounds

In some cases, Bambuser can provide technical workarounds as customization in the merchant's script which enables the merchants to use Bambuser Miniplayer although the above requirements are not satisfied. In some cases, Bambuser can provide technical workarounds as customization in the merchant's script which enables the merchants to use Bambuser Miniplayer although the above requirements are not satisfied. Please see IFRAME_SRCDOC navigation mode.

CAUTION

Bambuser does not guarantee the full compatibility of the possible workarounds with the merchant's website.

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

   }); 
 };


player.FLOATING_PLAYER_NAVIGATION_MODE.IFRAME_SRCDOC Experimental

For cases that the website is restricted from being rendered inside an iframe tag, this navigation mode can be a workaround.

CAUTION

This approach can be also used on Shopify stores. However, not all the Shopify themes and apps are compatible with this approach.

This is an experimental workaround and Bambuser can not guarantee the functionality of this approach. We recommend that you keep the Miniplayer disabled for your production shows.

Requirements:

  • Server response headers have X-Frame-Options = DENY or/and Content-Security-Policy: frame-ancestors 'none';
  • Contents can be rendered correctly when supplied through iframe src-doc attribute
window.onBambuserLiveShoppingReady = player => { 
   player.configure({ 
     buttons: { 
       dismiss: player.BUTTON.MINIMIZE, 
     }, 
     floatingPlayer: { 
       navigationMode: player.FLOATING_PLAYER_NAVIGATION_MODE.IFRAME_SRCDOC, 
     } 
   }); 
 };