Creating Your RSVP Custom BlockUpdated 2 months ago

Platform: Tapcart + LyveCom
Audience: Ecommerce Managers, CSMs
Purpose: Embed your LyveCom Channel Page into your Tapcart mobile app so customers can RSVP for future lives and watch past events—all in one place.

📲 How to Create an RSVP Custom Block in Tapcart

⚠️ Before You Begin

Make sure your Tapcart plan supports Custom Blocks.
Refer to Tapcart’s Custom Block Introduction for eligibility and feature access.

Step 1: Create a Custom Block in Tapcart

1. Log into your Tapcart builder.

2. Navigate to Custom Blocks.

3. Click Create New Custom Block.

4. Open the Custom Block Code Editor.

Step 2: Add Code in the Editor Tabs

You’ll see three tabs in the code editor: HTML, CSS, and JavaScript. Each one is required for your Channel Page to work properly.

HTML Tab

Paste the following code into the HTML tab:

1htmlCopyEdit<div id="lyvecom">
2  <div id="lyvecom_event--page"></div>
3</div>
4

CSS Tab

Paste the following code into the CSS tab.
Note: You can customize widget styling further in the LyveCom dashboard.

1cssCopyEdit* {
2    box-sizing: border-box;
3    padding: 0;
4    margin: 0;
5    font-family: Helvetica;
6}
7
8h1 {
9    margin: 10px 0px;
10}
11
12.container {
13    display: flex;
14    flex-direction: column;
15    justify-content: center;
16    align-items: center;
17    aspect-ratio: 1;
18}
19

JavaScript Tab

Paste the following code into the JavaScript tab:

1javascriptCopyEditfunction injectLyveComWidgetScript() {
2    var scriptElement = document.createElement('script');
3    scriptElement.src = 'https://dashboard.lyvecom.com/widget/widget.js';
4
5    scriptElement.onload = function() {
6        LyveComWidget.mountEventPage({
7            account: 'YOUR ACCOUNT ID',
8            parentElement: '#lyvecom_event--page',
9            lng: 'en'
10        });
11    };
12
13    window.document.addEventListener('FullLyveComOpen', () => {
14        Tapcart.actions.scrollToBlockTop();
15        document.getElementById('lyvecom').style.height = `calc(${Tapcart.variables.device.windowHeight || 750}px - 80px)`;
16    });
17
18    window.document.addEventListener('FullLyveComClosed', () => {
19        document.getElementById('lyvecom').style.height = 'auto';
20    });
21
22    document.head.appendChild(scriptElement);
23}
24
25// Call the function to inject the script
26injectLyveComWidgetScript();
27

|| Replace 'YOUR ACCOUNT ID' with your LyveCom account ID found in your dashboard.

Step 3: Add Your Custom Block to a Page

Use the Tapcart builder to drag and drop your custom RSVP block onto any screen in your app where you'd like to highlight past lives or drive RSVP signups.

Have more questions? Reach out to our support team - we’re happy to help!

Happy selling! ✨