Purpose: Create a dedicated screen in your Tapcart app to host your LyveCom live shopping stream with a branded look and feel.
Intended Audience: Ecommerce Managers, CSMs
Creating Your Livestream Custom Block
|| Before you begin: Ensure your Tapcart plan includes Custom Blocks. Need help? Refer to Tapcart’s Custom Blocks Overview.
Step 1: Create a New Custom Block
-
Open your Tapcart builder.
Navigate to Custom Blocks.
Click Create New Custom Block.
Open the Custom Block Code Editor.
Step 2: Insert Code in the Editor Tabs
Tapcart's editor includes three sections: HTML, CSS, and JavaScript. Each is required to embed and customize your live stream.
HTML Tab
Paste the following code into the HTML section:
1htmlCopyEdit<div class="container">
2 <div class="lyvecom-stream" id="lyvecom-stream">
3 <div class="overlay">
4 </div>
5 </div>
6</div>
7
CSS Tab
Paste the following CSS to style your live screen.
Replace YOUR_FILE_LINK with a background image URL that matches your brand.
1cssCopyEdit@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); /* Import the Pacifico font */
2
3* {
4 box-sizing: border-box;
5 padding: 0;
6 margin: 0;
7 font-family: 'Helvetica', sans-serif;
8}
9
10h1 {
11 margin: 10px 0px;
12 color: #00E4FF;
13 font-family: 'Pacifico', cursive;
14}
15
16.container {
17 display: flex;
18 flex-direction: column;
19 justify-content: center;
20 align-items: center;
21 aspect-ratio: 1;
22 width: 100%;
23 background: url('https://cdn.shopify.com/s/YOUR\_FILE\_LINK') no-repeat center center;
24 background-size: cover;
25}
26
27#test {
28 height: auto;
29}
30
31.lyvecom-stream {
32 width: 100%;
33 background-color: transparent;
34 display: flex;
35 justify-content: center;
36 align-items: center;
37 border: 3px solid black;
38}
39
40.overlay {
41 background: none;
42 display: flex;
43 flex-direction: column;
44 align-items: center;
45 justify-content: center;
46 padding: 20px;
47 width: 100%;
48 height: 100%;
49 text-align: center;
50}
51
52.live-shopping-text {
53 color: #FFFFFF;
54 font-size: 32px;
55 font-weight: bold;
56 margin-bottom: 10px;
57}
58
59.subtitle-text {
60 color: #FFFFFF;
61 font-weight: bold;
62 font-size: 14px;
63 text-transform: uppercase;
64 padding: 10px 0;
65 letter-spacing: 1px;
66}
67
JavaScript Tab
Paste the following JavaScript to inject the LyveCom live streaming widget:
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.mount({
7 account: 'ACCOUNT ID',
8 lng: 'en',
9 position: 'left',
10 positionLeft: '0',
11 positionBottom: '0',
12 fullScreen: true,
13 });
14 };
15
16 document.getElementById('lyvecom-stream').style.height =
17 `calc(${Tapcart.variables.device.windowHeight || 750}px - 80px)`;
18
19 document.head.appendChild(scriptElement);
20}
21
22// Call the function to inject the script
23injectLyveComWidgetScript();
24
25// block-vendor:lyvecom
26// block-type:live-streaming
27
|| Replace 'ACCOUNT ID' with your actual LyveCom account ID, available in your LyveCom dashboard.
Step 3: Add the Block to Your App
Use Tapcart’s drag-and-drop builder to place this new live streaming screen anywhere in your app navigation—perfect for homepages, “Live” tabs, or promotions.
Have more questions? Reach out to our support team - we’re happy to help!
Happy selling! ✨
Was this article helpful?