Skip to main content

Miniplayer

Enable the Miniplayer​

When a customer is ready to proceed to your native checkout page to complete the purchase the Call Widget will emit an event goto-checkout indicating that customer should get redirected to your native checkout page.

It might be more convenient to have the Call Widget minimized and "float" on top of your website when the customer taps the Go to checkout button. Instead of ending the call or opening the checkout page in a new tab, the Call Widget can just float on top of your checkout page and the customer can checkout while still interacting with an agent.

To achieve this, you will need to enable miniplayer as instructed below.

Requirements​

Your website should be allowed to be rendered within an <iframe> while the ancestor of the <iframe> is your website.

If your website is an SPA (Single Page Application), you can however skip the overlay <iframe>, in which case the above requirement does not apply to you.

Compatibility & Requirements

The miniplayer player might not be compatible with all websites. Read more about the compatibility & requirements here.

Shopify

Due to Shopify's technical limitations, the Miniplayer feature is not compatible with Shopify stores.

Implementation​

You can enable the miniplayer by opening the checkout page with the floatAbove(url) method.

Example

window.onBambuserOneToOneReady = function(BambuserOneToOneEmbed) {
  let oneToOneEmbed = new BambuserOneToOneEmbed({ /* embed config */ });
  oneToOneEmbed.on('goto-checkout', () => {
    oneToOneEmbed.floatAbove('https://your-checkout-url-here')
  });
};

Miniplayer FAQ​

This could happen due to a few different reasons:
  1. User is navigated to a different domain (cross origin) as the one widget is embedded on.
  2. 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.

To disable the Miniplayer you need to:

  • Handle goto-checkout event so the checkout page opens in a new tab/same tab

    oneToOneEmbed.on('goto-checkout', (event) => {
      // Open checkout url in new tab and allow call to continue in current tab
      window.open('https://your-checkout-url-here', '_blank');
      // Open checkout url in the same tab force closes the widget
      window.open('https://your-checkout-url-here', '_top');
    });

By default, the Call Widget is minimized to the bottom right corner of the website. However, the viewer is free to drag the Call Widget around the screen afterward.

It depends on how the iframing is being blocked.

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


  2. 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 currect iframe), however, it reloads the current page that distroys the Call Widget instance.

It works under certain circumestances.

Example Scenario - cross-origin frame access error Lets say your website consisted of:

  • www.brand.com - where you embedded the Call Widget
  • checkout.brand.com - where your checkout is on

Here is what can happen:

  1. The Call Widget is opened under www.brand.com domain (E.g. www.brand.com/consultation)
  2. An iframe is automatically created which has the same URL as the current page (www.brand.com/consultation)
  3. Within the call -> when a caller clicks on a checkout button, the call gets minimized and tries to open the checkout URL (hosted under checkout.brand.com) in the iframe
  4. 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 (checkout.brand.com), the browser might refuse to render that page in the iframe
  5. An error message appears inside the iframe
  6. Same issue goes for all navigations to cross-origin domains within the iframe

Problem 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 Call Widget is embedded) by adding/changing the server response headers of the pages hosted on other domains (E.g. checout.brand.com) as below:

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 Call Widget on www.example.com, and then later navigated to checkout.example.com (while the Call Widget is minimized), the URL in the address bar will not be updated as long as you are navigating in the cross-origin page.