Miniplayer

Enable the Miniplayer

When a customer is ready to proceed to your native checkout page to complete the purchase the Calls 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 Calls 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 Calls 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')
  });
};

How It Works: TOP Context vs Co-browsing Iframe Context

The Co-browsing feature works by loading your website's pages within an <iframe> while CoBrowsing. This creates two distinct JavaScript environments, or "contexts," that exist on the page simultaneously. Understanding this is key for development and troubleshooting.

• The Top Context: This is the initial page where the Video Consultation widget was launched.
• The Iframe Context: This is the navigation window where the user and agent are co-browsing your site.

Each context has its own separate window object and document object. This means that scripts running in the top context cannot directly access variables or functions in the iframe, and vice-versa.

Visualizing the Contexts

The top context page hosts the Bambuser Calls Widget which then creates an iframe and loads your site into the iframe for co-browsing.

Accessing the iFrame Window from the Top Context

If you need to programmatically access the window object of the iframe from your main entry page's JavaScript, you can do so by selecting the iframe element and accessing its contentWindow property.

For the Video Consultation player, the iframe is contained within a div element with the id one-to-one-surf. You can use a query selector to find it:

TOP context

// Get the window object of the iframe where user surfing the site
const surfIframeWindow = document.querySelector("div[id=one-to-one-surf]>iframe").contentWindow;

// Now you can access the iframe's window object
console.log(surfIframeWindow.location.href);

Troubleshooting

• During the call, website crashes in the background
• Our website has different domain/subdomain for different parts. Would Miniplayer work?
• Accessing dataLayer events in the Iframe Navigation Context

Miniplayer FAQ

How to disable the Miniplayer?

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');
  }); 

Can we configure the position to which the Calls Widget goes when minimized?

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