Skip to main content

Cobrowsing

Cobrowsing enables agents and customers to collaboratively browse products on your native site together in real-time. During the call, agents will both be able to follow the customer's browsing history within the agent tool and through notifications track what product pages (PDPs) the customer is browsing on.

Requirements

  • The feature is available for Agents using the desktop version of the Agent Tool (Chrome or Edge Chromium as browser) . All agents need to install a Chrome extension in order to use the co-browsing feature. Click here to install it.
  • 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 Cobrowsing feature might not be compatible with all websites. Read more about the compatibility & requirements here.

Shopify

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

Product Scraping

When Caller enters the Cobrowsing mode, some basic product details are scraped from the content of the given URL they are on (e.g. https://yourcompany.com/products/pink-shirt). That information will be displayed to the Agent so he/she can better steer the conversation during the call.

note

Read more about how our scraper works here.

img

Cart Synchronization (optional)

During Cobrowsing session, Bambuser virtual cart can be managed in two different ways:

1. Through Agent Tool:

Products can be added to the virtual cart within the Calls Widget and then synchronized with your native cart. For that you will need to have Provide Product Data integration. Note that you will need to account for fetching the product through URL.

2. Through your native site:

If a shopper adds a product to their cart through your native website, that product can be added to Bambuser virtual cart. For that to work, we listen to emitted Google Analytics (GA) events that are triggered when the shopper clicks Add to Cart button on your native site. Same goes for removing product from the cart.

Depending on the structure of your datalayer events, this will either happen automatically, or you will need to manually map it inside the integration code:

Automatic

This requires a standard structure of GA so that Bambuser Calls Widget can detect your registered events. Exact structure can be found on Google's Analytics official documentation:

Manual mapping

You can also handle cases where your website does not follow the GA standard, however still pushes these tracking events to the datalayer. In that case, you will have to manually map your custom structure through the embed code. That will help the Calls Widget pick up the correct events and enhance the call experience.

Example: Your custom Add to Cart event structure and how you would map it within the BambuserOneToOneEmbed.

{
"event": "add-to-cart",
"details": [
{
"sku": "abc123",
"product_name": "Bambuser Hoodie",
"product_price": 199,
"product_quantity": 1,
"product_currency": "SEK",
"product_brand": "Bambuser",
}
]
}

Example: Your custom Remove From Cart event structure and how you would map it within the BambuserOneToOneEmbed.

{
"event": "remove-from-cart",
"details": [
{
"sku": "abc123",
"product_name": "Bambuser Hoodie",
"product_price": 199,
"product_quantity": 1,
"product_currency": "SEK",
"product_brand": "Bambuser",
}
]
}

Cobrowsing FAQ

In Cobrowsing, when Agent starts browsing, he/she will be sent to merchantBaseUrl. This defaults to window.origin. However, you can dynamically override that in case you have multiple markets on same domain.

Example use case:
    • EU URL: https://demo.bambuser.shop/eu

      let oneToOneEmbed = new BambuserOneToOneEmbed({
      merchantBaseUrl: 'https://demo.bambuser.shop/eu'
      });
    • USA URL: https://demo.bambuser.shop/usa

      let oneToOneEmbed = new BambuserOneToOneEmbed({
      merchantBaseUrl: 'https://demo.bambuser.shop/usa'
      });