- Put these following scripts tag near the top of the
<head>tag and before any other script or CSS tags.
<!-- Do not change the order -->
<script async src="https://assets.streamshop.com.br/sdk-ads/liveshop-ads-video.min.js"></script>
<script async src="https://assets.streamshop.com.br/sdk-ads/liveshop-ads-carousel.min.js"></script>
- Place our html tag
<liveshop-ads-video>in your<body>tag where you wish.
<liveshop-ads-carousel slugs-video="ABC,DEF,GHI"></liveshop-ads-carousel>
You can get your slug-video in your store in StreamShop Dashboard
🎉 That's it! 🎉
Take a look at the attributes below to customize your experience with our SDK:
| Property | Type | Required | Details |
|---|---|---|---|
| slugs-video | string | ✅ | Sets the carousel slugs of your videos ads |
| videos-width | string | ❌ | Sets the horizontal width of your video ads (default: "200px") |
| width | string | ❌ | Sets the horizontal width (default: "100%") |
| height | string | ❌ | Sets the vertical height (default: "100%") |
| quality | 'lq' | 'mq' | 'hq' | ❌ | Sets the quality of your video cover |
| theme | 'light; | 'dark' | ❌ | Sets the theme (default: 'light') |
| hml | boolean | ❌ | Sets if it's hml environment (default: false) |
| border-radius | string | ❌ | Sets the carousel border radius (default: 16px) |
| gap | string | ❌ | Sets the carousel gap between videos (default: 12px) |
| aspect-ratio | string | ❌ | Sets the carousel aspect-ratio of videos (default: 9/16) |
| use-post-message | boolean | ❌ | Set it true if you want to track StreamShop events outside application (default: false) |
| stories-style | boolean | ❌ | Set it true if you want to use stories mode in carousel (default: false) |
| stories-size | string | ❌ | Sets the videos horizontal and vertical of sizes in the stories mode (default: 80px) |
| stories-color | string | ❌ | Sets a custom color to stories (default: #c654ff) |
| skip-terms | boolean | ❌ | Set it true if you want to hide the terms and conditions bottom sheet (default: false) |
| use-legacy-overlay | boolean | ❌ | Set it true if you want to use legacy overlay. Not recommended (default: false) |
| show-logo | boolean | ❌ | Determines whether logo sampling should be enabled (default: false) |
| use-active-videos-from | string | ❌ | Set your store slug and it will build your carousel with all your actived videos. |