Shows on Product Pages
Shoppers are far more likely to tune in to the show and purchase via the show if it features a product that they’re already actively looking for and ready to invest in.
There is a possibility to embed recorded shows on respective PDPs that direct the viewer directly to the part of the show where the products are discussed in-stream. This way, merchants hugely increase the lifespan of shows, nurture longer average viewing times and ultimately increase the chance of achieving higher conversion rates.
How does it work
During a show, a moderator has the possibility to highlight a product that is currently discussed about. That information will be translated into deeplink which is available for you to fetch through our REST APIs.
You can then use the deeplink in player configuration on your product page, which will bring your customers directly to the point in time in your show when the product is highlighted and demonstrated.
Integration Steps
Step 1: Create your API Key
To create an API key, navigate to your BamHub -> Settings -> Integrations -> API Keys. Required scope for this guide is READ_PRODUCTS.
This will enable you to make https requests to our REST APIs. This is the same API that you might already have interacted with in our Live Shopping product offering.
It is recommended to integrate the Live Video Shopping REST API from a secure backend environment. If you already have such an environment, you can simply call the Live Video Shopping REST API directly.
The Live Video Shopping REST API implements Rate Limiting, thus implementers are encouraged to minimize the usage of the API. In particular you should not call the Live Video Shopping REST API directly from a frontend environment, since apart from posing security risks related to API Keys, this results in very many erroneous requests which may end up rate limiting your usage.
Read more here.
Step 2: Fetch deeplinks
Product Bundles are not supported to be fetched through the REST API.
Most common use case to fetch deeplinks is described in below two steps:
2.1: Get a list of all highlighted products across all shows
Returns a list of all products which has been highlighted in shows.
{
"results":[
{
"brand":"Some product brand",
"id":"tpl:7e2b3c1ec0a18adf0968679a7bb7ec72e4fbf693",
"productReference":123,
"publicUrl":"https://www.example-product.com/shoes/latest-shoes/shoe1003",
"title":"The latest shoe",
"thumbnail":"https://www.example-product.com/shoes/latest-shoes/shoe1003/assets/images/shoe1003",
"createdAt":"2021-01-12T22:55:00.000Z",
"lastAppearance":"2021-02-12T14:18:38.000Z"
},
{
"brand": "Some product brand",
"id": "tpl:7e2b3c1ec0a18adf0968679a7bb7ec72e4fbf321",
"productReference": 456,
"publicUrl": "https://www.example-product.com/shoes/latest-shoes/shoe1004",
"title": "The latest shoe",
"thumbnail": "https://www.example-product.com/shoes/latest-shoes/shoe1004/assets/images/shoe1004",
"createdAt": "2021-01-10T22:55:00.000Z",
"lastAppearance": "2021-02-14T14:18:38.000Z"
}
],
"next":"t32MPe6tyBD86t32Me6tyBD86B86ByicD86t32MPew"
}
2.2: Get a list of appearances by one or more product references
Based on one or more product references will return a result with a list of objects containing appearances for each product reference. This endpoint can receive multiple references and will accept up to a maximum of 20 references in one request, example
?productReference=123&productReference=124&productReference=125. Use theproductReferenceobtained in step 2.1. to construct the query.NOTE: This will return shows that have ended and are non-test shows.
{
"results":[
{
"appearances":[
{
"showId":"0WB2n43mpsIV2PX21d3j",
"deeplink": "f00ba5@100",
"showData":{
"channels":[
{
"channelId":"someChannelId"
}
],
"title":"My show title",
"published":true
},
"startRelative":24.201682,
"createdAt":"2021-01-12T22:55:00.000Z",
"hashId":"f00ba5"
},
{
"showId":"9P1WT6Nam2UlE058BrHG",
"deeplink": "0004f6f@20",
"showData":{
"channels":[
{
"channelId":"someChannelId"
}
],
"title":"Another show title",
"published":false
},
"startRelative":163.825207,
"createdAt":"2021-01-13T22:55:00.000Z",
"hashId":"0004f6f"
}
],
"productReference":123
}
]
}
You might want to exclude unpublished shows from your PDPs. Therefore, make sure to filter out shows with published: false.
Step 3: Pass deeplink and showID to your PDP
The API calls in step 2 will return a payload that contains (among other information) one or several deeplink values associated with specific showId. Use these two values in embed code when initializing the player.
Read more here.
// Trigger a show with a deeplink
window.initBambuserLiveShopping({
showId: 'SHOW_ID_HERE',
deeplink: 'DEEPLINK_HERE',
});
Shows on PDPs FAQ
If a product is highlighted in more than one show, multiple deeplinks will be available through the API. You can select and pass the desired deeplink and the corresponding show ID to display multiple shows on the PDP.
Example code:UI:<div id="myCoolClickableThing-1">Click me!</div>
<div id="myCoolClickableThing-2">Click me!</div>
<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/embed.js';
document.body.appendChild(scriptNode);
}
// We can embed multiple shows in a single page as below
// node: The trigger element for opening the reletive show
window.initBambuserLiveShopping({
showId: 'BAMBUSER-LIVESHOPPING-SHOW-ID-HERE',
node: document.getElementById('myCoolClickableThing-1'),
deeplink: 'DEEPLINK_HERE_1',
type: 'overlay',
});
window.initBambuserLiveShopping({
showId: 'BAMBUSER-LIVESHOPPING-SHOW-ID-HERE',
node: document.getElementById('myCoolClickableThing-2'),
deeplink: 'DEEPLINK_HERE_2',
type: 'overlay',
});
})();
</script>
- Go to Settings in Shoppable Video.
- Set Player Width/Height to your desired size (e.g., 260x500).
- Enable the Exact Size option for consistent playlist sizing.