Shoppable Videos
Shoppable Videos enables your users to add products and services within the cart and checkout directly within the Story without leaving the Story watching experience.

This walkthrough shows how to use Shoppabble Videos in your app.
Product Fallback for Hydration
There is a boolean parameter named storyFallbackIsEnabled
which is used to determine whether the product data should be hydrated from the feed or not.
You can set thestoryFallbackIsEnabled
to true
if you want to enable product fallback from the feed.
<VerticalFeedBar
style={{ width: '100%', height: 120, marginTop: 50 }}
storylyId={STORYLY_TOKEN}
storyFallbackIsEnabled = {true}
..
/>
Supplemental Product Feed Handling
This guide will walk you through the process of localizing all Storyly-related texts and content. You can deliver the appropriate content to each language/country pair by passing the locale
parameter on the client side.
To set the locale
, you need to use the IETF BCP 47 format as shown below:
<VerticalFeedBar
style={{ width: '100%', height: 120 }}
ref={ref => { this.storyly = ref }}
storylyId=STORYLY_INSTANCE_TOKEN
storylyLocale = "tr-TR"
...
/>
Tip
If you use the Translate option for Story Groups on the Storyly Dashboard, end user will see the content in their own
locale
.
Storyly Cart
There is a boolean parameter named storyCartIsEnabled
which is added cart and cart icon to top of the left of Shoppable Videos. By default, it is set to false, but, when this parameter is set as true, the cart and the cart icon will be enabled on Shoppable Stories.
<VerticalFeedBar
style={{ width: '100%', height: 120, marginTop: 50 }}
storylyId={STORYLY_TOKEN}
storyCartIsEnabled = {true}
..
/>
Update Storyly Cart
If you already have a cart in your application, you may sync your cart with Storyly cart. This function allows you to update your Storyly cart to sync with the already existing one.
<VerticalFeedPresenter
style={{ width: '100%', height: 120, marginTop: 50 }}
storylyId={STORYLY_TOKEN}
updateCart={cart => { }}
..
/>
Product Hydration
This function allows you to hydrate your products while initializing the SDK to show products to end users in Stories with the Product Catalog feature.
With the onProductHydration event, Storyly will return the IDs of the products included in Stories. With these IDs, you can use onProductHydration
function to pass relevant products' data to the SDK.
Here is an example of hydrateProducts
. We set the product data manually as an example, but you can set your data from your database as well.
<VerticalFeedBar
ref={ref => {
this.verticalFeedView = ref
if (this.verticalFeedView != null) {
this.verticalFeedView.hydrateProducts([
{
"productId": "1",
"productGroupId": "1",
"title": "High-waist midi skirt",
"url": "https://www.storyly.io/",
"desc": "High-waist midi skirt made of a viscose blend. Featuring a slit at the hem and invisible zip fastening.",
"price": 25.99,
"currency": "USD",
"imageUrls": ["https://random-feed-generator.vercel.app/images/clothes/group-1/1-6D7868.jpg","https://random-feed-generator.vercel.app/images/clothes/group-1/2-6D7868.jpg","https://random-feed-generator.vercel.app/images/clothes/group-1/3-6D7868.jpg","https://random-feed-generator.vercel.app/images/clothes/group-1/4-6D7868.jpg"],
"variants": [
{"name":"color","value":"#6D7868"},
{"name":"size","value":"XS"}
]
},
{
"productId": "3",
"productGroupId": "1",
"title": "High-waist midi skirt",
"url": "https://www.storyly.io/",
"desc": "High-waist midi skirt made of a viscose blend. Featuring a slit at the hem and invisible zip fastening.",
"price": 25.99,
"currency": "USD",
"imageUrls": ["https://random-feed-generator.vercel.app/images/clothes/group-1/1-6D7868.jpg","https://random-feed-generator.vercel.app/images/clothes/group-1/2-6D7868.jpg","https://random-feed-generator.vercel.app/images/clothes/group-1/3-6D7868.jpg","https://random-feed-generator.vercel.app/images/clothes/group-1/4-6D7868.jpg"],
"variants": [
{"name":"color","value":"#6D7868"},
{"name":"size","value":"M"}
]
},
storylyId={STORYLY_TOKEN}
...
/>
Warning
Please make sure that you pass the necessary product data to avoid any issue.
onProductHydration
This function will notify you to get ids of products.
<VerticalFeedBar
style={{ width: '100%', height: 120, marginTop: 50 }}
storylyId={STORYLY_TOKEN}
onProductHydration={VerticalFeedProductHydrationEvent => {
console.log(`[Vertical Feed Bar] default - Product IDs ${JSON.stringify(event.productIds)} `)
}}
..
/>
onProductEvent
This function will notify you about all Vertical Feed events so that you can make redirections accordingly. Also, you can send these events to your data platform to track user journeys on your end.
<VerticalFeedBar
style={{ width: '100%', height: 120, marginTop: 50 }}
storylyId={STORYLY_TOKEN}
onProductEvent={eventPayload => {
if (eventPayload.event == "VerticalFeedItemCheckoutButtonClicked" ) {
console.log(`[Vertical Feed Bar] default - VerticalFeedItemCheckoutButtonClicked ${JSON.stringify(eventPayload.event)} `)
}
if (eventPayload.event == "VerticalFeedItemCartButtonClicked" ) {
console.log(`[Vertical Feed Bar] default - VerticalFeedItemCartButtonClicked ${JSON.stringify(eventPayload.event)} `)
}
if (eventPayload.event == "VerticalFeedItemCartViewClicked" ) {
console.log(`[Vertical Feed Bar] default - VerticalFeedItemCartViewClicked ${JSON.stringify(eventPayload.event)} `)
}
if (eventPayload.event == "VerticalFeedItemProductSelected" ) {
console.log(`[Vertical Feed Bar] default - VerticalFeedItemProductSelected ${JSON.stringify(eventPayload.event)} `)
}
}}
..
/>
VerticalFeedItemCheckoutButtonClicked Event
If isProductCartEnabled
is set to true, this event is sent when checkout button clicked.
VerticalFeedItemCartButtonClicked Event
This event is sent when cart button clicked from success sheet.
VerticalFeedItemCartViewClicked Event
This event is sent when cart view clicked
VerticalFeedItemProductSelected Event
This event is sent when the product is selected.
onCartUpdate
This function will notify you about updates the cart in a StorylyView wrapper component.
/*
* This function will notify you about updates the cart in a StorylyView component(<VerticalFeedBar> / <VerticalFeed> / <VerticalFeedPresenter>).
* event: Vetical Feed event type which is received.
* approveCartChange: It represents a callback function that will be executed if the "update cart" operation is successful
* rejectCartChange: It represents a callback function that will be executed if the "update cart" operation fails
*/
<VerticalFeedBar
style={{ width: '100%', height: 120, marginTop: 50 }}
storylyId={STORYLY_TOKEN}
onCartUpdate = {eventPayload=>{
if (eventPayload.event == "VerticalFeedProductCartUpdateEvent" ) {
console.log(`[Vertical Feed Bar] default - VerticalFeedProductCartUpdateEvent ${JSON.stringify(eventPayload.event)} `)
//This event sent when a product is added.
}
if (eventPayload.event == "VerticalFeedItemProductUpdated" ) {
console.log(`[Vertical Feed Bar] default - VerticalFeedItemProductUpdated ${JSON.stringify(eventPayload.event)} `)
//This event sent when a product is updated.
}
if (eventPayload.event == "VerticalFeedItemProductRemoved" ) {
console.log(`[Vertical Feed Bar] default - VerticalFeedItemProductRemoved ${JSON.stringify(eventPayload.event)} `)
//This event sent when a product is removed.
}
this.customStoryly.rejectCartChange(eventPayload.responseId, "Failed")
this.customStoryly.approveCartChange(eventPayload.responseId, {
"items": [
{
"item": {
"productId": "1",
"productGroupId": "1",
"title": "High-waist midi skirt",
"url": "https://www.storyly.io/",
"desc": "High-waist midi skirt made of a viscose blend. Featuring a slit at the hem and invisible zip fastening.",
"price": 25.99,
"imageUrls": ["https://random-feed-generator.vercel.app/images/clothes/group-1/1-6D7868.jpg","https://random-feed-generator.vercel.app/images/clothes/group-1/2-6D7868.jpg","https://random-feed-generator.vercel.app/images/clothes/group-1/3-6D7868.jpg","https://random-feed-generator.vercel.app/images/clothes/group-1/4-6D7868.jpg"],
"variants": [
{"name":"color","value":"#6D7868"},
{"name":"size","value":"XS"}
]
},
"totalPrice": 12,
"oldTotalPrice": 15,
"quantity": 2
}
],
"totalPrice": 12,
"oldTotalPrice": 15,
"currency": "USD"
});
}}
..
/>
Updated 19 days ago