Embedding Your Live Streaming Widget in TapcartUpdated 2 months ago

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

1. Open your Tapcart builder.

2. Navigate to Custom Blocks.

3. Click Create New Custom Block.

4. 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! ✨