Articles on: Integrations

Creating a Bubbles Custom Block

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

Was this article helpful?

Share your feedback

Cancel

Thank you!