Integration guide

Introduction

Embed Bambuser On Demand on your website effortlessly using standard HTML Web Components.

The <bam-playlist> web component renders a series of shoppable videos on any website with plenty of flexibility that allows you to style them to match your brand. Each <bam-playlist> will be populated with videos either selected automatically or handpicked by you or your staff.

<bam-playlist org-id="your-org-id"></bam-playlist>

Integration

1. Load the Bambuser script on your website

Global workspaces
EU workspaces

For Bambuser workspaces on the Global dashboard, put the following script tag either in the <head> or <body> tags of your website.

<script async src="https://lcx-embed.bambuser.com/default/embed.js"></script>

For Bambuser workspaces on the EU dashboard, put the following script tag either in the <head> or <body> tags of your website.

<script async src="https://lcx-embed-eu.bambuser.com/default/embed.js"></script>

Where's my workspace located?

If you log in to your workspace on lcx.bambuser.com, use the Global script.

If you log in to your workspace on lcx-eu.bambuser.com, use the EU script.

Already a user?

If you have Bambuser Live shopping shows on your webpage, you already have the script on your site!

2. Position the playlist on your page(s)

Place the web component where the playlist should be by adding a <bam-playlist> in the HTML of your page. Once playlists has been successfully added to your page(s), you can populate the playlists with videos via your workspace.

<bam-playlist org-id="your-org-id"></bam-playlist>

What's my org-id?

You'll find your org-id in the URL of your workspace:

3. Configuring playlist layout and behavior

Below is the options available for configuration of the <bam-playlist> HTML element. Multiple options can be enabled by adding them one after the other to the <bam-playlist> element.

<bam-playlist org-id="your-or-gid" autoplay="hover" mode="grid"></bam-playlist>

Note that only org-id is required, the rest are optional.

Not a fan of code?

You can also configure playlists from the "Pages" section in your workspace.

Name	Options	Description
org-id (required)		Your workspaces `org-id`, can be found in the URL when you're logged in to the workspace.
autoplay (optional)	`hover` (default) `cascade`	Autoplay videos in the playlist. hover ‐ Play when the mouse cursor hovers over a player. cascade ‐ Play a few seconds of each video sequentially.
mode (optional)	`grid` (default) `row`	Display mode. grid ‐ Render players in a gird (fills available horizontal space and expands downwards). row ‐ Render all players on a single row (scrolling sideways).
player-fit (optional)	`same-width` (default) `same-height` `exact-size` `fill-parent`	This is useful when having combination of videos with different aspect ratios within the playlist. `same-width` ‐ Render all players based on `--bam-player-width`, while height is determined dynamically `same-height` ‐ Render all players based on `--bam-player-height`, while width is determined dynamically `exact-size` ‐ Renders all players based on both `--bam-player-width` & `--bam-player-height` `fill-parent` ‐ Renders all players by using neither `--bam-player-width` & `--bam-player-height`. It will work only if the playlist is set to show only 1 element: either by `limit="1"` or `mode="single"`
focus-mode (optional)	`carousel` (default) `single` `none` `playpause`	Select what happens when a user clicks on a video. carousel ‐ Show players in a full-window "carousel". single ‐ Open players individually in a full-window. none ‐ Do nothing. playpause ‐ Pause the player when
zoom-on-hover (optional)	`true` (default) / `false`	Controls if a player should "zoom" when hovered by a mouse cursor. true ‐ playlist should "zoom" when hovered by a mouse cursor. false ‐ playlist should not "zoom" when hovered by a mouse cursor.
player-settings (optional)	See Player settings below for options.	Specific settings for how players in the playlist should be presented and behave.

Player settings

Below are additional settings that can be used to toggle or configure various elements inside the individual players. These are enabled by adding name-of-setting:value in the player-settings attribute of the <bam-playlist>.

<bam-playlist org-id="your-org-id" player-settings="products:true"></bam-playlist>

Multiple settings can be added by stringing them together separated by a semicolon (;).

<bam-playlist org-id="your-org-id" player-settings="products:true;title:false"></bam-playlist>

Name	Options	Description
products (optional)	`true` (default) / `false`	Controls whether products associated with the video should be shown on top of the players in the playlist. true ‐ Products for the videos are presented on top of the players in the playlist. false ‐ Products for the videos are hidden in the playlist.
productCardMode (optional)	`default` (default) / `thumbnail` / `full`	Controls the layout of product cards in the player. default ‐ Responsive mode. thumbnail ‐ Show only thumbnail image. full ‐ Show thumbnail and text.
title (optional)	`true` (default) / `false`	Controls the visibility of the video title. true ‐ Title text is visible in playlist. false ‐ Title text is hidden in playlist.
overlayTextWrap (optional)	`true` (default) / `false`	Controls whether the text in the overlay should wrap or overflow. true ‐ Text in the playlist should wrap. false ‐ Text in the playlist should overflow.

4. Styling the playlist with CSS variables

The playlist appearance can be easily styled to match your brand using CSS variables.

Here's how to style the playlist:

Define CSS Variables: CSS variables can be defined within a <style> block in your HTML file. These variables will control the appearance of the playlist

2 Apply CSS Variables: The playlist will automatically use these variables to adjust its styling. Change sizes, fonts and other styles by updating the values of the CSS variables.

Example:

:root {
  --bam-playlist-gap: 10px;
  --bam-player-overlay-font-family: Courier;
}

CSS variable name	Description	Type	Default value
`--bam-player-corner-radius`	Set the corner radius of players.	pixel	0px
`--bam-player-width`	Control the width of players (default is the original size of the video).	pixel	auto
`--bam-player-height`	Control the height of players (default is the original size of the video).	pixel	auto
`--bam-player-overlay-font-family`	Choose which font to use for the title overlay.	string	sans-serif
`--bam-player-overlay-font-weight`	Control the weight of the text in the title overlay.	number	400
`--bam-player-thumbnail-size`	Set the size of the product thumbnail.	pixel	68px
`--bam-player-placeholder-color`	Set the color of the placeholder (shown before the video or poster image has loaded).	color	#EEE
`--bam-playlist-gap`	Control the horizontal and vertical space between players in a row/grid.	pixel	25px
`--bam-playlist-carousel-corner-radius`	Set the corner radius of players rendered in the carousel mode.	pixel	0px

Introduction​

Integration​

1. Load the Bambuser script on your website​

2. Position the playlist on your page(s)​

3. Configuring playlist layout and behavior​

Player settings​

4. Styling the playlist with CSS variables​

Example:​