You can embed this 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.
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.
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
- 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 appearing 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
Your FAB will automatically adopt the theming settings configured in the Theming section of Settings, including colors, fonts, and font colors
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"
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
Is it possible to change the size of the FAB button?
It is currently not possible to change the size of the FAB button.
Delete