Increase visibility with the Floating Action Button

1. How to use it 2. How to test it visually 3. How to embed the Floating Action Button 4. Customize my FAB Frequently asked questions

Delete

The below article includes instructions on what the FAB is and how to embed and customize it. If you're already well-versed and eager to access the order forms swiftly, simply access the files below.

Please note: Both FAB and Channels are categorized as Widgets. To customize these widgets, you only need to complete one form, which is conveniently located below. Additionally, the same form is available in the Channels article; however; it only needs to be completed once to apply to both widgets.

Bambuser - Widget Design Order Form.xlsx

Bambuser - Widget Design Order Form.numbers

Complete the form and save it
Open your email & attach the order form
Send the email to support@bambuser.com
Your design will be visible within 5-6 business days

Delete

Who can use this feature?

Users on a Lite, Standard, or Enterprise plan

Can't find this feature in your Dashboard? Please reach out to your point of contact at Bambuser.

You can embed this widget into all or selected pages on your website to get as many visits to a live show as possible. The widget will become visible to all the users browsing your website when a live show happens.

Let website visitors know there are live shows
Automatically captures a video preview from a live show
Easy for visitors to choose if they want to keep watching or minimize
Present this widget on any page where you can run javascript

1. How to use it

You can activate the Floating Action Button from the Widget section or the show setup page. On your Floating Action Button settings page, you can select a show which should be presented when the show is live. On this page, you can also choose the position of the Floating Action Button in the drop-down menu and get the script needed to implement.

Delete

Note

You first need to create a show on the show setup page to add a show from the Widgets section.

You can also select a specific show which should be visible with the Floating Action Button on a particular show’s setup page by ticking the box. Ensure that you have embedded the code accordingly. Otherwise, it will not show on your site.

Automatically add live shows

Add every show to your floating action button in one click.

Go to Dashboard->Widgets->FAB
Enable ‘Automatically add live shows
Then all shows other than the test show will be auto-assigned to FAB

Important:
When the ‘Automatically add live shows’ is enabled, only the latest live show will win the place. Any show that goes live before the first show ends will never be shown on FAB. After the first show has ended, it will auto-start the next living show on FAB.

2. How to test it visually

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 live 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

3. How to embed the Floating Action Button

On your FAB settings page, press the Copy button in the Embed part found on this page. This copies the embed code, which can be inserted on any page where you want to present the FAB.

Tip: if you want to present this FAB on multiple pages or based on other rules, it’s a good idea to include this script either globally on your site or consists of this script in your Google Tag Manager(or alike).

For implementation documentation on how to embed the Floating Action Button, please visit our Bambuser documentation here.

4. Customize my FAB

As a Standard and Enterprise Tier client, you can customize your branded FAB in a lot of different ways and elements. We have made a comprehensive brand book that includes everything you need to create your branded FAB. You can explore what you can customize, how it will look like, and how you submit your request.

Branded HEX-codes
Shape
Branded screen background
And more!
Explore the Widgets Brand Book here!

Once you have decided how you want your FAB to appear from the brand book, you submit your chosen alternatives. Once your brand request has been submitted to Bambuser, it will be handled within 5-6 business days.

Submission form available both for Numbers and Excel:

Bambuser - Widget Design Order Form.xlsx

Bambuser - Widget Design Order Form.numbers

Complete the form and save it
Open your email & attach the order form
Send the email to support@bambuser.com
Your design will be visible within 5-6 business days

This is your org ID, it can be found in your URL once logged in to the dashboard.

Delete

Behaviour for FAB when showcasing LIVE shows

If the FAB has been set to showcase live shows, the FAB will only show the show when it is live
Every time the page is refreshed then FAB will appear for 30 sec
If you are surfing on the same page FAB will not appear unless the page is refreshed
If you click the FAB and close the show and not refresh, then FAB will not appear again

How to add ended shows to FAB

If you are on the Bam Player, you are also able to add already ended shows to your FAB. Still on the Standard Player? Read this guide on how to easily switch.

Manually Select Ended Shows

Go to FAB settings
Enable "Include ended shows"
Click on CHANGE SHOW
Select the ended show to promote

Auto-select Last Ended Show

Go to FAB settings
Enable "Auto-select last ended show"

Delete

Behaviour for FAB when showcasing ended shows

You can choose to toggle Include ended shows, meaning that you can manually click on CHANGE SHOW to select which ended show you want to promote
You can also choose to toggle Auto-select last ended shows, meaning that your most recent ended show will automatically be showcased in the FAB
If you toggle both live and ended shows, the live show will be prioritized and the ended show will start playing when the live show is done

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

Can I change the color/font of the FAB?

Yes, but you will need help from the Bambuser team and these settings and changes will apply not only to the Floating Action Button but for the Channels too. Please reach out to your Bambuser point of contact for more information.

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