Setting Up Your Channel Page Custom Block for Upcoming and Previous Lives

Purpose:

The purpose of this guide is to embed your channel page to collect RSVPs and have viewers watch your passed lives within the Tapcart application.

Intended Audience:

Ecommerce Manager, CSMs

Before you begin, ensure you are subscribed to the TapCart Plan has Custom Blocks enabled. Refer to TapCart's Custom Blocks Introduction for additional details.

Creating the LyveCom Channel Page 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. Each tab is crucial for crreating your channel page block

HTML Tab:

Insert the following HTML code into the HTML section:

<div id="lyvecom">
  <div id="lyvecom_event--page"></div>
</div>

CSS Tab:

Widget styling can be adjusted in the LyveCom dashboard.

* {
    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;
}

JS Tab:

Incorporate the LyveCom channel page script below:

// JS
function injectLyveComWidgetScript() {
            var scriptElement = document.createElement('script');
            scriptElement.src = 'https://dashboard.lyvecom.com/widget/widget.js';
            // Call LyveComWidget mount when the script is loaded
            scriptElement.onload = function() {
                LyveComWidget.mountEventPage({
                    account: 'YOUR ACCOUNT ID',
                    parentElement: '#lyvecom_event--page',
                    lng: 'en'
                });
        };

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

        // Call the function to inject the script
        injectLyveComWidgetScript();

Note: You can simply replace YOUR ACCOUNT ID with your Account ID within your LyveCom Settings

Updated on: 04/06/2024