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 havefixed
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)
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.
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
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:
- You have the
dismiss
button configuration set toplayer.BUTTON.CLOSE
in the configurations. - 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
- 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 theplayer.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 workspace
* + 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
- User is navigated to a different domain (cross origin) as the one player is embedded on.
- 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 errorLets 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:
- The player is opened under
www.brand.com
domain (E.g.www.brand.com/live
) - An iframe is automatically created which has the same URL as the current page (
www.brand.com/live
) - 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 - 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 - An error message appears inside the iframe
- Same issue goes for all navigations to cross-origin domains within the iframe
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.
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.
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.