The player

Get up and running with Bambuser One-to-Many

Delete

Step 1 out of 5

Who is this article for? 

  • Everyone on your team
  • 5-min read

1. What is integration?

To get a good grip on the integration, we have divided these into two parts & articles:

  1. The player (to be able to stream)
  2. The conversion tracking (to measure sales)


Complete these, and your integration is complete. The integration is usually the most time-consuming part of the onboarding, thus we recommend starting with it as soon as possible. You and the team are responsible for the integration of the player to your e-commerce site, that's why we begin with this part before entering the usage guide. 


2. The player integration

Integration is the part to make your player appear on the eCommerce site. This is being done in your CMS/back-end depending on the type of player. Although if you and the team would like to have add-to-cart directly in the player, we strongly recommend starting by testing the default/initial player on your site before advancing.  

 

2.1 Initial/default player

It is our plug-and-play solution and the most lightweight integration possible. All you need to do is copy and paste the embed code in your show in the Bambuser Dashboard and you’re good to go. You can of course use this as your main player, you can test it here! 

  • Plug-and-play
  • See sales & conversion (if conversion tracking is implemented)
  • Get Bambuser functionalities like chat, likes, and more
  • You will not see stats in your dashboard regarding add-to-cart and add-to-cart click rate


2.1.2 Script initial player 

This is the only script needed

<button id="YOUR_ELEMENT_ID_HERE">Join show now</button>
<script>
  (function() {
    if (!window.initBambuserLiveShopping) {
window.initBambuserLiveShopping = function(item) { window.initBambuserLiveShopping.queue.push(item) }
window.initBambuserLiveShopping.queue = [];
var scriptNode = document.createElement('script');
scriptNode['src'] = 'https://lcx-embed.bambuser.com/your-brand/embed.js';
document.body.appendChild(scriptNode);
}
window.initBambuserLiveShopping({
showId: 'SHOW_ID_HERE',
node: document.getElementById('YOUR_ELEMENT_ID_HERE'),
type: 'overlay',
});
})();
</script>

Delete


2.2 Miniplayer

Now, once you have tested the default player and its code and would like to level up to miniplayer, you easily add a short piece of code before the embed code you added in the first step. The miniplayer is a feature that allows the player to be minimized to a corner of your viewers' screens when they select to open a product, allowing them to remain an active viewers while browsing your site. You can test it here!

  • Browse while the show is running
  • Sales & conversion (if conversion tracking is implemented)
  • Bambuser functionalities (chat, likes & more) 
  • You will not see stats in your dashboard regarding add-to-cart and add-to-cart click rate


2.2.1 Script miniplayer

Add the miniplayer script above original script

MINIPLAYER SCRIPT 
window.onBambuserLiveShoppingReady = (player) => {
player.configure({
buttons: {
product: player.BUTTON.MINIMIZE,
},
});
};

THE ORIGINAL SCRIPT
<button id="YOUR_ELEMENT_ID_HERE">Join show now</button>
<script>
(function() {
if (!window.initBambuserLiveShopping) {
window.initBambuserLiveShopping = function(item) { window.initBambuserLiveShopping.queue.push(item) };
window.initBambuserLiveShopping.queue = [];
var scriptNode = document.createElement('script');
scriptNode['src'] = 'https://lcx-embed.bambuser.com/your-brand/embed.js';
document.body.appendChild(scriptNode);
}
window.initBambuserLiveShopping({
showId: 'SHOW_ID_HERE',
node: document.getElementById('YOUR_ELEMENT_ID_HERE'),
type: 'overlay',
});
})();
</script>

Delete


2.3 Cart integration (add-to-cart in the player)

Nicely done! If you would like to add an additional layer to your player and the capability to add-to-cart directly in your player, you have the cart integration. You can test it here! 

  • Add-to-cart capability
  • Additional product pictures
  • Price & size
  • Sales & conversion (if conversion tracking is implemented)
  • Bambuser functionalities (chat, likes & more)
  • Stats in your dashboard regarding add-to-cart and add-to-cart click rate


3. Shopify + LiveShopping

We have a guide and a ready-to-use sample integration code that works across almost all Shopify stores. To learn more, check out the Shopify integration guide.


4. Player integration assistant

The code generator will help you to generate sample code to use on your eCommerce site. As you see in the example below, we started with a "locale" English miniplayer without an add-to-cart that is minimized in the bottom right corner.

We then changed "locale" to Japanese, added add-to-cart functionality, and changed the position of the minimized player to the top right corner! 

  1. Chose the player and features you would like to have
  2. Copy+paste the script
  3. Modify the example code to suit your site

Delete

Get the URL now

You should use this tool to elaborate on the different functionality - Test it out here!


As mentioned above, it's recommended to start with the integration and secure that it works properly. The following guide is in-depth details and learnings of the Bambuser tool, its features, and how to go live.

5. Technical documentation

This article is a snapshot of the players we offer and how to integrate them, please head over to our technical documentation for a complete guide. 


Next step

Now it's time to explore the conversion tracker! ➔ Click here for the next step: Conversion tracker


If you found what you were looking for, please hit the thumbs up. If this article didn't help you, hit the thumbs down, and please reach out to us so we can help you. We really appreciate your feedback.