Increase visibility with the Floating Action Button

See FAB demo here: https://demo.bambuser.shop/floating-action-button/

You can embed one or multiple FAB widget on all or selected pages of your website to attract more visitors to your live or recorded shows. The widget will be visible to all users browsing your site whenever a live show is happening or a recorded show is available.

Key Features:

Promote live and recorded shows: Let visitors know about upcoming live events or watch recorded shows at their convenience.
Automatic video preview: Captures a video preview from live or recorded content.
User control: Visitors can choose to keep watching the show or close the widget easily.
Flexible placement: Present the widget on any page where JavaScript is supported.
Visibility on PDPs: Ensure product detail pages showcase relevant content.

Setting up your FAB

Navigate to your Bam Hub
Click "Widgets" on your left menu
Select "Fabs"
Click on "+ Fab" on the top right
Fill out the initial info and click "Create" to create the FAB widget.
Click on your just newly created FAB again to open FAB setup page for additional settings

Delete

FAB Settings

Title - Since you can have multiple FAB widgets, it is important to give each widget a unique title. This title is only visible to you and your team.
Auto-select live shows - When enabled, most recent live show will automatically be assigned to this FAB when going live. To exclude a specific show, override this in the show's settings.
Auto-select ended shows - When enabled, most recent ended show will automatically be assigned to this FAB when they end. To exclude a specific show, override this in the show's settings.
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.
- If empty, clicking on the FAB widget triggers the player on the same page.
- If you enter URL here, clicking on the FABwidget will Redirect the user to this URL and then autoplay the show
  - You may use an absolute path (https://brand.com/pages/live) or a relative path (/pages/live).
Publish on website - With this option, you can disable the appearance of the FAB widget whenever necessary.
Currently selected show - Shows the currently selected show and gives you the ability to mnually select a show to appear in this FAB. Note that, depending on the settings above, your selection may be overridden later when other shows go live or end.

Managing shows in FAB(s)

Firstly, create/ select the show that you would like to highlighted in your FAB widget -> Click on "Add to Fabs" button.

Delete

Highlight this show on FABs

When the show goes live: If the FAB setting is configured to "Auto-select live shows" in the FAB details setup, the FAB will automatically appear in this list. However, you can override this setting if needed. The FABs displayed in the "When the Show Goes Live" section will automatically show the live show during its active state.
When the show ends: If the FAB setting is configured to "Auto-select ended shows" in the FAB details setup, the FAB will automatically appear in this list. However, you can override this setting if needed. The FABs displayed in the "When the Show Ends" section will automatically show the ended show during its active state.

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.

Delete

Preview

The preview button 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.

Delete

FABs IDs

Each FAB widget has a unique ID, which is used to identify the widget. This ID can be found in the embed code to ensure the correct widget is displayed.

Delete

Redirection URL

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 actually has all correct configuration set through the code.

How to test it visually on your website

You can test what the Floating Action Button will look like on your website. The functionalities as opening the player wholly will not proceed. However, this is a great way to visually present how it will appear on your website.

This is how you do it;

Create a show in your show setup page
Tick the box for Floating Action Button
Start the show from your phone
Head over to Widgets and copy the embed code at the bottom of the page
Go to your site, open console (right-click & go to Inspect - Console)
Paste the code and delete <script> in the beginning and </script> in the end
Press enter - The Floating Action Button is appearing on your site!

Delete

Top tip!
You can of course add the FAB to your GTM in your staging environment and start a show. In that case, you can easily see how it will look like on your site

Customize my FAB

Your FAB will automatically adopt the theming settings configured in the Theming section of Settings, including colors, fonts, and font colors

Troubleshooting

Technical Documentation

Technical Documentation can be found here: https://bambuser.com/docs/live/fab-integration/#getting-started

Frequently asked questions

Can I change the position of the FAB?

Yes, you can change the position through the code. Since the floating action button can be shown on smaller screens (mobile), each offset is specified with two numbers; first the number to use for smaller screens and the other for desktop. If you want to have a different offset, the embed code is where to do it.

window.__bfwOffsX = [8, 100];
(This changes the distance from the right/left to be 100px. On mobile the distance is 8px.)

window.__bfwOffsY = [8, 100];
(This changes the distance from the bottom to be 100px. On mobile the distance is 8px.)

window.__bfwOffsX = [8, 200];
window.__bfwOffsY = [8, 100];
(This changes the distance from the right/left to be 200px and the distance from the bottom 100px, on desktop. On mobile the distances are 8px.)

Delete

Does the FAB support landscape?

Yes, it will change depending on the dimensions of the broadcast. If the broadcast has a width that is equal to or higher than the height it will be considered landscape.

Delete