Install with Google Tag Manager
This guide assumes that your site already has Google Tag Manager installed. The difficulty of installing Google Tag Manager on your website may vary depending on platform
Probably the easiest and quickest way to get started with the Bambuser One-to-One integration is to use our Google Tag Manager template. Our template is a plug-and-play solution with basic functionality which doesn't require any coding. However, for more advanced features like full product and cart integrations, you need to follow our general implementation guide. It is perfectly fine to start with this GTM integration and then add on more features later with help from your developers. See extending with more features for how to add remaining features on top of the GTM integration.
Installation
1. Search for "Bambuser" in Template Gallery
2. Install Bambuser Live Shopping template
To install our template you need to click Add to workspace and then accept
the required permissions by clicking Add in the next step.
3. Create a tag
- Go to tags and create a new tag from our template
4. Configure tag
Basic Configuration
Organization ID (Mandatory)
Select one-to-one integration and provide your organization ID in the configuration. Your organization ID can be found in Bambuser dashboard URL: https://lcx.bambuser.com/[YOUR_ORG_ID]/...
Theme ID (Optional)
The Bambuser Call Widget is a white label product, so it is possible to get your own theme. However, this field is optional as your organization will already have a default theme for your brand. You will only have to fill this out in case your organization has more than one theme available. If you do want to provide a specific theme, you can get a theme ID from Bambuser support
Queue ID (Optional)
For drop-in calls you can choose which queue should be used when customer calls in. This can be a queue ID (recommended) or a queue name. Both queue ID and queue name can be found in your dashboard under the menu option Queues. Leaving the field empty will use the default queue.
Locale (Optional)
Enter what language you want the customer to see the overlay widget in. You can choose to enter a static language here or use some variable that you have available in GTM for customer language. Note that the chosen language needs to also be configured on Bambuser side for the terms and conditions label to be translated correctly. Reach out to your point of contact at Bambuser to have this configured on your dashboard.
Overlay Widget
The Overlay Widget (OLW) is an easy way to guide more visitors into the call widget. By appearing automatically after a (configurable) amount of seconds it guides visitors towards sales help at the right time. You can read more about it here.
In the GTM template you can select a version of OLW you want to have. You can pick betwen Video, Avatar, Side dock. In there you can also configure after how long time OLW will trigger on the page.
In case you will only use bookings without drop-in calls, you can decide not to display OLW at all by selecting none.
Datalayer Event Structures
Datalayer Interceptors
When using the Co-Browsing feature (on by default), our Call Widget will automatically pick up add to cart, remove from cart and product impression events from the datalayer. We automatically pick up events that follow the Google Analytics 4 ecommerce tracking standards, or the example events specified below. The way the call experience will be enhanced and the Agent will be more informed about what products the customer views and adds/removes to cart while being in the call.
Additionally supported event structures (automatic)
Apart for the Google Analytics 4 ecommerce tracking standards, we also automatically pick up the following structure below. By automatic, we mean that you can leave the fields in the GTM tag empty and it will still work.
Add to cart events
{
"event": "addToCart",
"ecommerce": {
"currencyCode": "SEK",
"add": {
"products": [
{
"id": "abc123",
"name": "Bambuser Hoodie",
"price": 199,
"quantity": 1
}
]
}
}
}
Remove from cart events
{
"event": "removeFromCart",
"ecommerce": {
"currencyCode": "SEK",
"remove": {
"products": [
{
"id": "abc123",
"name": "Bambuser Hoodie",
"price": 199,
"quantity": 1
}
]
}
}
}
Custom event structure (manual)
You can also handle cases where your website follows some other standard but still push these tracking events to the
datalayer. In that case, you will have to manually map your custom structure through the GTM tag. That will help our Call Widget pick up the correct events and enhance the call experince.
Example: Your custom Add to Cart event structure and how to map them in UI
{
"event": "add_to_cart",
"currency": "SEK",
"items": [
{
"item_id": "abc123",
"item_name": "Bambuser Hoodie",
"price": 199,
"quantity": 1
}
]
}
Advanced One-to-One features
The GTM template does include a section of advanced features that can help you adapt the default experience. In this section we go through the advanced features and explain what they are and how they can be used.
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. When you are using the GTM template you can use variables about the customer from the dataLayer and forward those over a secure data channel to the Agent.
A complete example of how to set this up is provided here
Tracking Bambuser events
The Bambuser One-to-One Call Widget can trigger many different real-time tracking events to your dataLayer that can be picked up and sent to your own analytics tool if you like. These events are triggered by default and then by following our guide to setup GA4 tracking you can get all these events into your own Google analytics.
If you do not want these events to be triggered to your dataLayer you can deactivate it by deselecting "Track Bambuser events to the datalayer" checkbox.
Trigger ecommerce events
The Bambuser One-to-One Call Widget also triggers standard ecommerce events like product impressions, add to cart and checkout. These events are triggered by default and then by following our guide to setup GA4 tracking you can get all these events into your own Google analytics.
If you do not want these events to be triggered to your dataLayer you can deactivate it by deselecting "Let Bambuser trigger ecommerce events" checkbox.
Debug mode
If something is wrong with your widget installation it might be helpful to launch the widget in debug mode that will expose the oneToOneEmbed instance on the window. This could help a developer to troubleshoot the setup configuration by accessing it in the browsers console.
Region selection
Due to data compliance, Bambuser offers two different data regions when you become a customer. This is decided on when you sign up as a customer so that your data will be stored according to data compliance rules. When installing the template you get the option to pick region and you should then pick the same region that you got when you signed up. The template will not work if you select the wrong region since your organization ID will be tied to a specific region.
Cookie consent
In order to support conversion tracking, our Call Widget needs to
save cookies in the customer's browser and that requires customer consent.
Our GTM template supports GTM Consent Mode API where we listen to changes to the analytics_storage consent type. If you use any of the
already supported third party consent managers, the cookie consent will work automatically for
our Call Widget. If you have your own consent manager on your site, then you would need to build
support to set the analytics_storage consent with the Consent API. If this consent is not set to true, the Call Widget will not save any
cookies and the conversion tracking will not work.
5. Select a trigger of when the widget should be shown
In this example we have selected to show the widget on every page which is
a default existing trigger in Google Tag Manager. You can also choose to
create your own trigger that can be based on many different rules.
For example, you could trigger the tag on only certain pages, or after
a certain time the user have spent on the page.
6. Preview and test
Google tag manager has a preview feature that you can now use to test the integration before putting it live on your website.
- Click the preview button on the top right corner in Google Tag Manager
- Enter your website url where you already have this GTM container installed
- GTM will now open your website with this extra tag assistant box that indicates you are in preview mode and not your actual live website
- Open the call widget by clicking the overlay widget and enter the queue
- Open your Bambuser dashboard and enter the Agent tool
- Answer the incoming call and test the features. Learn more here
Go live with only bookings?
In order to go live with only bookings and disable the drop-in use-case, follow the same steps above but with the following changes.
- Change the trigger to only appear when
bambuserConnectIdexist in the page url, like the image shows below
- Change the overlay widget to be
None - Setup booking system integration according to our guides
- Make sure your customers can book meetings somewhere with your booking system provider
Extend with more features
If you have started integrating with this GTM template but also want to present products to the customer within the One-to-One session, you have the possibility to extend your integration. In that case, you will need to develop that by attaching some event handlers to your GTM implementation.
Follow our guides at Provide product data and Cart integration with one difference -> referenced oneToOneEmbed will now be attached to the window object, and you will be able to access through: window._bambuser.oneToOneEmbed.
Custom CTA element
If you do not wish to use Overlay Widget (OLW) to trigger opening The Call Widget, you can define a custom CTA element.
For that, you would need to call show() function.
Example code
customElement.addEventListener('click', () => {
window._bambuser.oneToOneEmbed.show();
});