Bambuser revolutionized e-commerce by introducing shoppable live videos. The next natural step is making all video content shoppable.

With Shoppable Video, Bambuser customers can source video content from any origin - be it recorded live shows, camera roll, or other external sources - and reuse it as shoppable video across their e-commerce website.

Additionally, customized shopping layers can be added to videos by incorporating products, organizing them into playlists, editing seamlessly, and displaying them anywhere on the site exactly as desired.

A new product in your Bam Hub
 

This product will be introduced in your Bam Hub as “On Demand”. This is where you create your shoppable videos. 

Bambuser’s Web Component

To add shoppable video anywhere on your website or app, you need to add the Bambuser web component to your site. Start by providing the integration documentation to your developer so they can set it up on your website.

Open Developer Guide

Video Demo | Technical integration

You can also add shoppable videos to your site through Google Tag Manager, eliminating the need for developer assistance. 

Video Demo | How to add Shoppable Video to your site with Google Tag Manager

Overview of sections

In your Bam Hub, the left-hand menu has five icons: Videos, Products, Pages, Settings and Get Started.

	Videos - upload, import, and manage all your on-demand videos to make them shoppable.
	Products - add and manage the products you’d like displayed on your shoppable videos.
	Pages - create playlists and manage where your videos will be displayed on your site once you have integrated the web component.
	Settings - invite users and update your logo in the top left corner of your Bam Hub.
	Get Started - please use the Get Started guide when entering your Bam Hub; it's an excellent onboarding resource.

How to Start Creating Shoppable Videos in your Bam Hub | Videos Section

You are able to upload a video from any device to your Bam Hub on desktop or from your Bambuser mobile app, or you can import a previously ended live show. 

Video Demo | Upload & Edit your shoppable videos

To upload a video from your computer, follow these steps:

1. Navigate to the Videos section - here you will also see an overview of all your on-demand videos.
2. Click Upload in the upper right corner.
3. A pop-up will appear where you can drag and drop your files or browse for your files. You can upload multiple files at the same time.
4. When the video has been uploaded, click on the video and under the tab Settings you can update the name of the video, add a description, add tags, add a Poster and what products are added to the video. 
5. Under the tab Edit Video, you can trim the video to your liking and either Save as New, which will create a new video with the length you have chosen, or Save, which saves and replaces the video with the new length. 
6. Once you have clicked either Save as New or Save, your video will be visible in the video list to use. 

To upload a video from your mobile device, follow these steps: 

1. Click On Demand in the lower bar section.
2. Click the “+” button in the upper right corner to access what videos you want to upload.
3. Click on the video you want to upload and click Add in the top right corner.
4. When the video has been uploaded, simply click on the video to edit title, description, tags and products added. 
5. The video is now added to your videos and you can go ahead and add it to playlists from your desktop Bam Hub. 

To import a previously ended live show, follow these steps: 

1. Click Import Show in the upper right corner.
2. A pop-up window will appear where you can search for all your previously ended shows.
3. Trim the length of your show to your liking and choose the poster image.
4. Click Save as new and your new shoppable video has been saved to use.
5. When the video is saved, you can also click on the video to edit name, description, poster and decide what products you want to add to the video.

How to Add Products to your Bam Hub | Products Section 

Here, you can choose and add the products you’d like displayed on your shoppable videos. This creates a library of all your products, simplifying the process of choosing which products to feature. 

 Video Demo | Add products to your shoppable videos

1. To add a new product, simply click + Product in the top right corner.
2. You can enter the URL of the corresponding product page on your site, or add information about the product manually.
3. When entering the URL, the system will fetch the following information automatically:
   1. Product name (required)
   2. Product Reference (SKU) (required)
   3. Product URL
   4. Product Poster
   5. Brand name 

If any of the above information can’t be retrieved from your website, you can add it manually.

Once a product has been added, it will be searchable, and you can easily add it to a video under “settings” when clicking on a video. 

How to Manage Where Your Videos Are Visible | Pages Section

Here, you can manage where your videos will be displayed on your site once you have integrated the web component.

Video Demo | Display your Shoppable Videos

1. Navigate to the Pages section - here you will also see an overview of all your pages which you have created in your Bam Hub or in the code and have the Web Component added to them.
2. Click + Page in the upper right corner to add a new page to the overview.
3. A pop-up will appear where you can search for pages on your site where the web component is already integrated or manually add a page where the web component is or will be integrated. Please note the page needs to have received at least one view to show up on the list.
4. Click on the page you want to add to the overview or manually add and click DONE.

How to Create a Playlist | Pages Section

1. In the Pages section, click the page where you’d like to place your playlist. Please note, you can only add videos to a playlist after you have uploaded them into the Bam Hub in the Videos section.
2. When you’ve clicked on a page, you will see all your playlists on that page. 
3. You can either click on a playlist to manage it or click + Playlist to create a new one. 
4. Add videos manually in the Added by video field or by tags in the Added by tag field. 
5. Reorder your videos by dragging and dropping them to the desired position.
6. Multiple playlists can be displayed on the same page. Ensure you match the correct playlist ID, which you can find under Settings, with the corresponding web component on your site. 

Under settings, you can configure how you want the videos to be displayed on your site:

• With or without a product card
  • You can decide if you want to have the shoppable element on your video or not.
• Play on hover or Autoplay
  • Enable either videos to be played when hovering over or as soon as entering the site.
• Loop
  • Toggle if you want your videos to loop and be in constant replay mode.
• Play as a carousel or as a single video when in full-screen mode
  • You can decide if you want to showcase your videos in a carousel where the shopper easily swipes to the next video, or only showcase one video in full-screen.
• Display in a row or grid view
  • Enabled your videos to be displayed either in a single row or in multiple rows (grid).

Floating Action Button (FAB)

You can showcase your shoppable videos using a Floating Action Button (FAB), an overlay widget positioned in a chosen corner of the page that captures the attention of website visitors.

How to add your shoppable videos to a Floating Action Button: 

1. In the Shoppable Video product, go to Pages and select the page where you want the FAB to appear.
2. Choose the playlist you want to display in the FAB, then click Settings.
3. In Playlist Settings, select FAB as the layout for the playlist.
4. Your videos will now be displayed as a Floating Action Button on that specific page.

Theming

You can fully customize the appearance of your videos using Theming options, giving you complete control over how your content is presented.

How to personalize the look and feel of your shoppable videos:

1. In the Shoppable Video product, go to Settings from the left-hand menu.
2. Select Theming.
3. Customize the overall look and feel of your videos, including icons, product cards, button colors, UI, and typography.
4. To modify the layout or styling for specific playlists, navigate to the desired playlist and select Settings.

Player & Playlist Settings

You can easily customize how your videos appear on your website directly from the Bam Hub. Simply go to the Pages section, select the playlist containing the videos you'd like to customize, and click Settings in the right-hand menu. You'll then see four options available for further customization.

Playlist Settings: Personalize video behavior within a playlist by enabling features like autoplay for seamless transitions between videos, or playback on hover for instant previews.

Preview Player Settings: Manage how videos are played in preview mode before being clicked, allowing for tailored viewing experiences.

Styling: Personalize the appearance of your videos.

Advanced Settings: Adjust video settings in alignment with your website’s code for greater control and seamless integration.

Playlist Settings

Autoplay
Play on hover allows videos on your website to start playing when a user hovers over them, while Autoplay automatically starts the videos as soon as the user lands on the page.

Layout
Changing the layout will modify how videos appear on your website. The Row layout displays videos in a single horizontal line, with users scrolling to view more if space is limited. The Grid layout stacks videos, creating additional rows when necessary. The FAB (Floating Action Button) layout places the video in a small overlay widget in the corner of the screen for convenient access.

Player fit
If your videos have varying sizes, you can choose from several options to standardize their appearance. Same Width resizes all videos to have equal width, while Same Height adjusts them to share the same height. The default size is set to a 9:16 format, with dimensions of 250px width and 444px height. Alternatively, you can specify custom sizes in the code or via the Player Width/Player Height settings. The Exact Size option maintains the size defined in the code or player settings, while Fill Parent ensures the video fills the entire container (referred to as div in the code).

Focus mode
Select how videos behave when a user taps on them. Options include Carousel, where the tapped video expands and display the entire playlist in a scrollable carousel (vertically on mobile, horizontally on desktop); Single Video, which enlarges and plays the video individually on a bigger screen; Click to Pause, where tapping only pauses the video without expanding it; and Disabled, allowing you to implement custom behaviors, such as directing users to another page, by adding your own code.

Zoom in on hover
Enable or disable the player zoom effect that activates when the mouse cursor hovers over it.

Player alignment
Set the alignment of videos within the playlist by choosing from Left, Center, or Right positioning.

Preview Player Settings

Product card in video
Your videos will be displayed with the shoppable product card by toggling this option.

Product card mode
If product cards are enabled for your videos, you can customize their appearance with the following options: Product Info and Thumbnail (Responsive), which displays both the product information and image but adjusts the content if space is limited; Thumbnail Only, which shows only the product image; and Always Show Product Info and Thumbnail, which ensures both the product information and image are always visible.

Landscape in portrait
When viewing a landscape video on a portrait screen, you can choose how the video should behave: Fit, where the video maintains its landscape orientation and may have black bars on the top and bottom, or Fill, where the video is cropped to fill the portrait frame.

Show video titles
Enable or disable the display of the video title on the video itself.

Wrap long titles
If the video title is long and you want it to be visible on the video, you can enable text wrapping to display the title on multiple lines.

Show poster when video is paused
When a video is paused, you can choose to display the poster image rather than the current frame.

Start muted
You can choose to have the videos start with the sound muted by default.

Loop
Enabling loop mode will make your videos play automatically in a continuous loop.

Styling

Corner radius
Adjust the corner radius in pixels. A higher number will create more rounded corners for your videos.

Player width
Specify the width of the preview player in pixels. This determines the size of the video preview on your website before user interaction.

Player height
Specify the height of the preview player in pixels. This affects the size of the video preview on your website before user interaction.

Player overlay font family
Choose the fonts to be displayed on the player.

Player overlay font weight
For the preview player, set the text boldness by specifying a value; a higher number results in bolder text.

Thumbnail size
Decide the size of the thumbnail on the product card: small, medium, or large.

Player placeholder color
Choose a placeholder color that will be displayed before the video or poster image appears..

Playlist gap
Set the amount of space between videos within the same playlist.

Playlist carousel corner radius
If the playlist is displayed as a carousel, adjust the corner radius of the carousel elements.

Advanced Settings

Bam Hub controlled
When this option is turned off, the web component will follow its own configuration settings.

Playlist Id
Update the playlist ID here. Ensure that any changes to the playlist ID are also reflected in the corresponding code.