Creating a shoppable video bubbles in Tapcart

Purpose:

The purpose of this guide is to embed educational bubbles - shoppable videos on your product pages in Tapcart

Intended Audience:

Ecommerce Manager, CSMs

Creating the LyveCom 'Bubble' Custom Block

Navigate over to Custom Blocks in the Tapcart builder
Create a new "Custom Block"
Open the Custom Block Code Editor in TapCart

In your newly created custom block, access the custom block code editor.



In the custom block code editor, you will find three tabs: HTML, CSS, and JS.

HTML Tab:

Insert the following HTML code:

<!-- HTML -->
<div id="lyvecom">
  <div class="lyvecom_carousel--component"></div>
</div>
<!-- END HTML -->

CSS Tab:

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: Helvetica;
}

h1 {
    margin: 10px 0px;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    margin-top: 20px;
}

JS Tab:

Incorporate the LyveCom playlist script below:

function injectLyveComWidgetScript() {
            var scriptElement = document.createElement('script');
            scriptElement.src = 'https://dashboard.lyvecom.com/widget/widget.js';
            // Call mountCarouselComponent() when the script is loaded
            scriptElement.onload = function() {
                LyveComWidget.mountCarouselComponent({
                    carouselID: 'BUBBLE ID',
                    parentElement: '.lyvecom_carousel--component',
                    carousel: true,
                    bubbles: true,
                    lng: 'en'
                });
            };

              window.document.addEventListener('FullLyveComOpen', () => {
              document.getElementById('lyvecom').style.height = `calc(${Tapcart.variables.device.windowHeight || 750}px - 80px)`
              Tapcart.actions.scrollToBlockTop()
            })

           window.document.addEventListener('FullLyveComClosed', () => {
              document.getElementById('lyvecom').style.height = 'auto'
            })
        
            document.head.appendChild(scriptElement);
        }
        // Call the function to inject the script
        injectLyveComWidgetScript();

Note: Replace YOUR BUBBLE ID with your playlist ID in the LyveCom Dashboard when publishing your playlist.





Proceed to embed the custom block using the Tapcart builder on any page

Updated on: 07/06/2024