Initial Setup

The widget contains both mandatory and optional features and can be adapted to different use cases.

To be able to meet and support your customers when they need sales guidance, you can allow calls to be initiated from various sources.

Initiate The Calls Widget

Before embedding the Calls Widget on your site, you should first decide how you want to approach your customers. There are different integration options for the call initiation.

Embed Source URL

Embed source URL is different depending on location of servers that your workspace is set up on.

Global Servers

Use Global servers URL https://one-to-one.bambuser.com/embed.js if the login to your Bambuser workspace is on following link: https://lcx.bambuser.com/.

EU Servers

Use European servers URL https://one-to-one.bambuser.com/eu/embed.js if the login to your Bambuser workspace is on following link: https://lcx-eu.bambuser.com/.

Overlay Widget

The Overlay Widget (OLW) is an easy way to guide more visitors into the Calls Widget. By appearing automatically after configurable amount of seconds it guides visitors towards sales help at the right time.

Make sure to add the Calls Widget script on all pages where the OLW should appear.

If you want to further configure Overlay Widget, you can read more about it here.

<script>
window.onBambuserOneToOneReady = function(BambuserOneToOneEmbed) {
  // This method will be invoked when embed.js has loaded and Bambuser
  // Calls API is available.
  // Creating an instance directly will allow to detect connect links
  // that will automatically open the Live Meeting overlay on page load.
  let oneToOneEmbed = new BambuserOneToOneEmbed({
      orgId: 'YOUR_ORG_ID_HERE',
      triggers: [
            'smart', // activate the overlay widget
            'connect-link' // activate the connect link - Unrelated to OLW, yet mandatory
        ],
        smartVariantOverride: 'Video', // force variant 'Video'. Other options are 'Avatar' and 'Side dock'
        popupTimeoutSeconds: '5' // after how many seconds OLW appears on the first time page load (default = 60)
      });
}
</script>
<script id="bambuser-one-to-one" async src="https://one-to-one.bambuser.com/embed.js"></script>

CTA on one page

Have a dedicated landing page for the concept of Live Video Video Consultation.


The script only needs to be embedded on that page.

<button id="start-one-to-one">Get in touch with us</button>
<script>
window.onBambuserOneToOneReady = function(BambuserOneToOneEmbed) {
  // This method will be invoked when embed.js has loaded and Bambuser
  // Calls API is available.
  // Creating an instance directly will allow to detect connect links
  // that will automatically open the Live Meeting overlay on page load.
  let oneToOneEmbed = new BambuserOneToOneEmbed({
      orgId: 'YOUR_ORG_ID_HERE',
    });

  // Connect CTA button to open Calls Widget overlay.
  let button = document.querySelector('#start-one-to-one');
  button.addEventListener('click', () => {
    oneToOneEmbed.show();
  });
}
</script>
<script id="bambuser-one-to-one" async src="https://one-to-one.bambuser.com/embed.js"></script>

CTA on multiple pages

Increase visibility by using fixed CTAs (Call To Action) on several product pages.

Make sure to add the Calls Widget script on all pages where you have placed each CTA and connect the button to open the Calls Widget overlay.

Example: Each product page having Ask an expert button.

     

// PAGE 1
<button id="start-one-to-one">Ask an expert</button>
<script>
window.onBambuserOneToOneReady = function(BambuserOneToOneEmbed) {
  let oneToOneEmbed = new BambuserOneToOneEmbed({
      orgId: 'YOUR_ORG_ID_HERE',
 });

  // Connect CTA button to open Calls Widget overlay.
  let button = document.querySelector('#start-one-to-one');
  button.addEventListener('click', () => {
    oneToOneEmbed.show();
  });
}
</script>
<script id="bambuser-one-to-one" async src="https://one-to-one.bambuser.com/embed.js"></script>



// PAGE 2
<button id="start-one-to-one">Ask an expert</button>
<script>
window.onBambuserOneToOneReady = function(BambuserOneToOneEmbed) {
  let oneToOneEmbed = new BambuserOneToOneEmbed({
      orgId: 'YOUR_ORG_ID_HERE',
 });

  // Connect CTA button to open Calls Widget overlay.
  let button = document.querySelector('#start-one-to-one');
  button.addEventListener('click', () => {
    oneToOneEmbed.show();
  });
}
</script>
<script id="bambuser-one-to-one" async src="https://one-to-one.bambuser.com/embed.js"></script>

GTM

This is the Plug-and-Play solution that gets you started with receiving calls within just a few minutes.

How to install

1. Search for "Bambuser" in Template Gallery
2. Install our Bambuser Live Shopping template
3. Go to tags
4. Create a new tag from our template
5. Select one-to-one integration and provide your organization ID in the configuration
6. Select a trigger of when the widget should be shown
7. Done!

You can now preview and test on your site before publishing for your customers

Read more

You can read the full guide of GTM setup here.

Organization ID

Your organization ID can be found in Bambuser workspace URL

• https://lcx.bambuser.com/[YOUR_ORG_ID]/...

Important: Use the Official Bambuser Script

You should use the official Bambuser embed script (e.g., "https://one-to-one.bambuser.com/embed.js) instead of hosting a local or modified version. Self-hosted or outdated copies can cause problems like incorrect price rendering, missing features, or broken functionality because they do not receive our ongoing updates. The official script is required for:

• Access to the Latest Features: It keeps your integration current with new enhancements and improvements we roll out regularly.
• Reliability and Stability: It’s fully tested and maintained by us, preventing errors that arise from outdated or untested code.

---

Calls Widget positioning

The Calls Widget is rendered on top of your site to allow customers to interact with the page behind the widget and browse around on your site while waiting in queue.

Default positioning of the Calls Widget is in the bottom left corner. You can change the positioning yourself in Bam Hub > Settings > Theming > Components, where you can configure the side (left or right) and adjust the horizontal and vertical offsets.

Minimized Calls Widget

For better browsing experience on different devices the customer can further minimize The Calls Widget while waiting in queue. If you want to change the positioning for the minimized version and set another Z-index, you can define placement dynamically through integration code. Find more information here.

Compatibility & Requirements

Navigating around your website when Calls Widget is present might not be fully compatible with all websites. Read more about the compatibility & requirements here.

Embedding options

When adding the embed you can pass options to BambuserOneToOneEmbed(). Embedding options are used to configure the the Calls Widget for your specific use case.

There are some options needed for initiation of the the Calls Widget (presented in code examples above) as well as other options, which you can read about below.

You need to specify your options inside BambuserOneToOneEmbed():

let oneToOneEmbed = new BambuserOneToOneEmbed({
  /* your options here */
});

Queue system for drop-in

Bambuser Video Consultation product comes with a built-in queueing system. Workspace admins can configure different queues in Bambuser workspace. Each queue will get its own unique ID when created.

Queue ID

Each queue will have a Queue ID, which Video Consultation Admin can find in Queue Settings within Bambuser Workspace.

In the integration code, you can specify what queue the customer should end up in when initiating the call. You do this by passing the queue property inside BambuserOneToOneEmbed. This will change the behavior of placing customers into the default queue.

Example usage:

let oneToOneEmbed = new BambuserOneToOneEmbed({
    queue: 'QUEUE_ID_HERE' //if not specified, default queue configured from the workspace will get applied
});

Read more

To get information regarding queue status, there are several functions you can use in order to customize the behavior for Calls Widget initiation. You can read more here.

Provide customer data

Customer information can be provided and presented to the Agent during a call. The information that will be provided is controlled by you.

You do this by passing the data object inside BambuserOneToOneEmbed.

Example usage:

let oneToOneEmbed = new BambuserOneToOneEmbed({

    // Optional
    data: {
        firstName: "Joe", 
        lastName: "Doe"
    }
});

The data shared with the agent is sent over secure data channels and will be stored in memory on agent side for the duration of the session. It will only be stored on server database if using Call Summary feature.

Read more

You can read more information about providing customer data here.

Additional options

For a complete list of all available configuration options including locale, allowFirstPartyCookies, enableScanning, merchantBaseUrl, dataLayerTracking, ecommerceTracking, bookingServiceIds, themeId, and many more, see the Calls Widget API Reference.

Troubleshooting

• Widget Drop-In Button Stuck in Infinite Loading
• Widget Popup Not Appearing on Landing Page (with ?bambuserConnectId Parameter)

Initial setup FAQ

Can we use Google Tag Manager (GTM) to embed the widget?

You can inject a JavaScript code including the embed code via any tag management solutions such as Google Tag Manager (GTM), Adobe Launch, Tealium, etc.

How do I configure Terms and Conditions links in the widget?

Configure T&C Links:

1. Navigate to Translations: Go to Bamhub → Settings → Translations and choose the correct locale for your market.

2. Update T&C Fields:

• POPUP_TERMS_CLICK_AND_ACCEPT_MESSAGE - Message for the accept button
• POPUP_TERMS_MESSAGE - Main terms and conditions message
• SHOPPER_INPUT_FORM_TERMS_AND_CONDITIONS_PLAIN_TEXT - Plain text version

3. Add HTML Links: The fields support HTML, so you can create clickable links. Important: Do not change the dynamic variable 0 if it's present.

Example:I agree to the <a href="https://example.com/terms"&gt;Terms of Service</a> and <a href="https://example.com/privacy"&gt;Privacy Policy</a>

4. Save and Publish: Click "Save and publish" to apply changes. Changes will be reflected within the next hour.

Privacy Note: Users must accept privacy Terms and Conditions before joining a video consultation call. Bambuser does not store personal information from users who engage with live chat - only an event is logged when users accept T&Cs.