Floating Action Button (FAB)

In order to get as many visits to a Live show as possible, you can embed this widget to all or to selected pages on your website. The widget will become visible to all the users browsing your website when a Live show is happening.

• Lets visitors on your e-commerce site know you’re Live
• Automatically presents a video preview from your Live show
• Present this widget on any page where you can run JavaScript

You can also perform A/B testing and limit the widget visibility to a selected group of your customers.

note

The FAB widget is only visible when the selected show is Live. Recorded or scheduled shows will not be promoted by the FAB unless you go Live with them.

Getting started

Setting up your FAB

Login to your Bambuser Live Shopping(LVS) dashboard. Click on the Widgets from the menu and then select FAB.

Add show

Add/select the show that you would like to be promoted by the FAB widget.

Alternatively, it is also possible to set the FAB's selected show from the show setup page.

note

You can only select one show at a time. For more information, check out the How it works section.

If you want to automate it for all non-test shows, see Automatically add Live shows option.

Publish on website

With this option, you can disable the appearance of the FAB widget whenever necessary.

Automatically add live shows

If you go live frequently and want to automate the assignment of shows to the FAB widget, this option automatically assigns every new Live show (not test shows) to the FAB.

As FAB can only promote one show at a time, if you have multiple Live shows concurrently, with this option, only the Live that started the latest will be promoted by FAB.

Position

Choose if you want the FAB widget to appear on the bottom-right or bottom-left.

If you need to add additional offsets, see fine-tuning position.

Redirection URL

Used to redirect visitors to your dedicated landing page for Live Video Shopping.

Clicking/Tapping on the FAB widget will

• Redirect the user to this URL
• then autoplays the show

You may use an absolute path (https://brand.com/pages/live) or a relative path (/pages/live).

(If empty, clicking/tapping on the FAB widget triggers the player on the same page.)

Embedding the FAB

To embed the FAB widget on your website, all you need to do is to add the code snippet, available on the FAB setup page (Widgets -> FAB -> Embed section), to your website. This code must be placed on all pages where you would like to promote your Live shows using the FAB widget.

tip

It is recommended to use a tag management solution (such as Google Tag Manager or similar) to embed the FAB widget. This way you could embed the FAB effortlessly and control the embed code and triggers without touching the site’s codebase.

caution

If you do not set a redirection URL, it is important that you make sure you have the Bambuser player integration code on all pages where you embed the FAB. So, once the FAB is clicked, the player is started and reads the onBambuserLiveShoppingReady method for configurations.

Preview

The preview link takes you to a page where the same code snippet is embedded. If your selected show is currently live, you should be able to see the FAB widget in the preview link.

How it works?

Initiation

Assuming the FAB code snippet is embedded. Once the page is loaded:

1. FAB script runs
2. Fetches FAB widget data
3. If the show is Live:
   • If Live, show the FAB widget immediately
   • If not, do not show/remove the FAB widget
4. Schedule next update

Update frequency

The floating action button uses slow polling functionality and, at even intervals, fetches the show's state, which means that it might take some time for the widget to show up on your website after your show has gone Live, or to disappear when your Live show has ended.

Status	Update Interval
The show is Live (to check if the show has ended)	30s
The show is scheduled for up to an hour later	30s
No scheduled show time	1min
The show is scheduled for more than an hour later	10min
The show is archived	10min

Starting the player

When clicking on the Floating Action Button, the full Live Video Shopping experience should automatically play. This works in two ways:

Open on the current page

In case you do not set any redirection URL, clicking the FAB widget starts the player on the current page. Note that if you have any custom integration code for the player (onBambuserLiveShoppingReady function implementation), the integration code needs to be available on all pages where you embed the FAB widget. So, when the player gets initialized, it reads the configurations and event handlers from onBambuserLiveShoppingReady to configure itself.

Redirect to a landing page

When you set a redirection URL for the FAB on Bambuser dashboard, clicking FAB will redirect the user to the specified redirection URL. By default the ?autoplayLiveShopping=LIVE_SHOW_ID query param gets added to the redirection URL, which starts the player automatically as the landing page is loaded.

Advanced options

Position fine-tuning

Sometimes there is existing content that can end up obstructed by the floating action button. To prevent that, it is possible to change the exact position of the component. The distance (offset) from the side of the window is referred to as offset X, the distance from the bottom, as offset Y.

Defaults

• On a Desktop sized window (≥ 480px): offset X and offset Y are 16px .
• On a Mobile sized window (< 480px): offset X and offset Y are 8px.

Apply custom offset

If you want to have a different offset, the embed code is where to do it. Here are

window.__bfwOffsX = [MOBILE_OFFSET, DESKTOP_OFFSET];

window.__bfwOffsY = [MOBILE_OFFSET, DESKTOP_OFFSET];

For example, here we add the following offsets:

• Distance from the right/left
  • Mobile: 20px
  • Desktop: 100px
• Distance from the bottom
  • Mobile: 20px
  • Desktop: 100px

The FAB embed code would look like this:

(function(d, t, i, w) {
  window.__bfwId = w;
  window.__bfwOffsX = [20, 100];
  window.__bfwOffsY = [20, 100];
  if (d.getElementById(i) && window.__bfwInit) return window.__bfwInit();
  if (d.getElementById(i)) return;
  var s, ss = d.getElementsByTagName(t)[0];
  s = d.createElement(t); [s.id](http://s.id/) = i;
  s.src = 'https://lcx-widgets.bambuser.com/embed.js'; // For EU environment -> 'https://lcx-widgets-eu.bambuser.com/embed.js'
  ss.parentNode.insertBefore(s, ss);
})(document, 'script', 'bambuser-liveshopping-widget', 'YOUR_UNIQUE_FAB_WIDGET_ID');

Localization

The default Floating Action Button language is in English.

If you have other languages enabled on your Bambuser account, you can change the localization of the FAB widget in the embed code.

Set locale

To set the widget locale, add the code below to the embed code.

window.__bfwl = 'ko-KR';

Usage example: Setting Korean language for FAB ('ko-KR')

(function(d, t, i, w) {
  window.__bfwl = 'ko-KR';
  window.__bfwId = w;
  if (d.getElementById(i) && window.__bfwInit) return window.__bfwInit();
  if (d.getElementById(i)) return;
  var s, ss = d.getElementsByTagName(t)[0];
  s = d.createElement(t); [s.id](http://s.id/) = i;
  s.src = 'https://lcx-widgets.bambuser.com/embed.js';
  ss.parentNode.insertBefore(s, ss);
})(document, 'script', 'bambuser-liveshopping-widget', 'YOUR-UNIQUE-FAB-ID');

Cookies

To disable first-party cookies for the FAB component, you should set the window property _bamls_widgets_allowFirstPartyCookies to false before you load the FABs embed code. See the example below:

Usage example: Disabling first party cookies for FAB

(function(d, t, i, w) {
  window._bamls_widgets_allowFirstPartyCookies = false;
  window.__bfwId = w;
  if (d.getElementById(i) && window.__bfwInit) return window.__bfwInit();
  if (d.getElementById(i)) return;
  var s, ss = d.getElementsByTagName(t)[0];
  s = d.createElement(t); [s.id](http://s.id/) = i;
  s.src = 'https://lcx-widgets.bambuser.com/embed.js'; // For EU environment -> 'https://lcx-widgets-eu.bambuser.com/embed.js'
  ss.parentNode.insertBefore(s, ss);
})(document, 'script', 'bambuser-liveshopping-widget', 'YOUR-UNIQUE-FAB-ID');

Crendentialless Iframe 🧪

If you have the Cross-Origin-Embedder-Policy: 'credentialless' HTTP header in your website server responses, <Iframe> elements would not work unless they are initiated in credentialless mode. Read more about IFrame credentialless.

Since the FAB widget is rendered within an iframe element, to allow support for Credentialless you need to include the below configuration in the FAB embed code.

window._bamls_widgets_credentiallessIframe = true;

Usage example: Enabling support for Credentialless iframe

(function(d, t, i, w) {
  window._bamls_widgets_credentiallessIframe = true;
  window.__bfwId = w;
  if (d.getElementById(i) && window.__bfwInit) return window.__bfwInit();
  if (d.getElementById(i)) return;
  var s, ss = d.getElementsByTagName(t)[0];
  s = d.createElement(t); [s.id](http://s.id/) = i;
  s.src = 'https://lcx-widgets.bambuser.com/embed.js'; // For EU environment -> 'https://lcx-widgets-eu.bambuser.com/embed.js'
  ss.parentNode.insertBefore(s, ss);
})(document, 'script', 'bambuser-liveshopping-widget', 'YOUR-UNIQUE-FAB-ID');

Design customization

Styling of the FAB widget is done from the Bambuser side. To get more details about theming and visual customization options for the FAB widget, please check out the FAB guide on the Bambuser knowledge base or reach out to your contact person at Bambuser.