Skip to main content

Floating Action Button (FAB)



In order to get as many visits to a show as possible, you can embed this widget on all or selected pages of your website. The widget will become visible on your site to promote your Live or recorded show.

  • Let visitors on your e-commerce site know you are Live
  • Drive traffic to a recorded show
  • Automatically promote your latest 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.

Getting started

Setting up your FAB

Login to the Bambuser Live Shopping dashboard. Click on the Widgets from the menu and then select FAB. img

Publish on website

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

Add show

Create/Select the show that you would like to be promoted by the FAB widget.

Live: The show that you select in the Live section will only appear on FAB when the show status is Live.

Ended Shows: The show that you select in the Recorded section will only appear on FAB when the show has ended or uploaded as an on-demand video.

For Live, it is also possible to alternatively 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 include live show option.

Include live show

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 to the FAB. This excludes test shows and password-protected shows.

note

As FAB can only promote one show at a time, if you have multiple Live shows concurrently, with this option, only the Live show 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 selected show using the FAB widget.

img

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 can 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, or you have a recorded show selected, you should be able to see the FAB widget in the preview link.

How it works?

Initiation

Assuming the FAB code snippet is embedded and published on your website. Once the page is loaded:

  1. FAB script runs
  2. Retrieve FAB widget data
  3. If the "Published on website" option is toggled On in the dashboard:
    • If the selected show is Live, present the FAB widget immediately
    • If not Live but a recorded show is selected, present the recoreded show
    • If neither are available, do not show the FAB widget
  4. Schedule next update

img

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.

StatusUpdate Interval
The show is Live (to check if the show has ended)30s
The show is scheduled for up to an hour later30s
No scheduled show time1min
The show is scheduled for more than an hour later10min
The show has ended10min

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 will start 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 the onBambuserLiveShoppingReady method to configure itself. img

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. img

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. img

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.

img

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.