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.

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

Google Analytics Standard Event structure

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:

• add_to_cart
• remove_from_cart

Non-standard supported structure

Apart for the Google Analytics 4 ecommerce tracking standards, we also automatically pick up the following structure below.

Add To Cart

{
    "event": "addToCart",
    "ecommerce": {
        "currencyCode": "SEK",
        "add": {
            "products": [
                {
                    "id": "abc123",
                    "name": "Bambuser Hoodie",
                    "price": 199,
                    "quantity": 1
                }
            ]
        }
    }
}

Remove From Cart

{
    "event": "removeFromCart",
    "ecommerce": {
        "currencyCode": "SEK",
        "remove": {
            "products": [
                {
                    "id": "abc123",
                    "name": "Bambuser Hoodie",
                    "price": 199,
                    "quantity": 1
                }
            ]
        }
    }
}

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.

Custom Add To Cart Event Structure

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

Mapping of custom structure within the embed

let oneToOneEmbed = new BambuserOneToOneEmbed({
  customInterceptor: {
    add_to_cart: {
      eventName: 'event',
      name: 'details.0.product_name',
      sku: 'details.0.sku',
      price: 'details.0.product_price',
      brand: 'details.0.product_brand',
      currency: 'details.0.product_currency',
      quantity: 'details.0.product_quantity',
    }
  },
});

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

Custom Remove From Cart Event Structure

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

Mapping of custom structure within the embed

let oneToOneEmbed = new BambuserOneToOneEmbed({
  customInterceptor: {
    remove_from_cart: {
      eventName: 'event',
      name: 'details.0.product_name',
      sku: 'details.0.sku',
      price: 'details.0.product_price',
      brand: 'details.0.product_brand',
      currency: 'details.0.product_currency',
      quantity: 'details.0.product_quantity',
    }
  },
});

Troubleshooting

• During the call, website crashes in the background
• Our website has different domain/subdomain for different parts. Would Cobrowsing work?

Cobrowsing FAQ

When agent clicks on "browsing" icon, they get sent to the wrong market URL

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