Creating Your Livestream Custom Block

Setting Up Your Streaming Block and Custom Stream Block Page

Purpose:

The purpose of this guide is to embed your live streaming widget within your Tapcart application as a new screen

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.

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 customizing your livestream's look and functionality.

HTML Tab:

Insert the following HTML code to create a pre-live section:

<div class="container">
  <div class="lyvecom-stream" id="lyvecom-stream">
    <div class="overlay">
    </div>
  </div>
</div>

CSS Tab:

Use the following CSS template to style the page in line with your brand identity:

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); /* Import the Pacifico font */

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Helvetica', sans-serif;
}

h1 {
    margin: 10px 0px;
    color: #00E4FF;
    font-family: 'Pacifico', cursive; /* Use the Pacifico font for headers */
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    width: 100%;
    background: url('https://cdn.shopify.com/s/YOUR_FILE_LINK') no-repeat center center;
    background-size: cover;
}

#test {
  height: auto;
}

.lyvecom-stream {
  width: 100%;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 3px solid black; /* Changed border color to black */
}

.overlay {
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    width: 100%;
    height: 100%;
    text-align: center;
}

.live-shopping-text {
  color: #FFFFFF;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 10px;
}

.subtitle-text {
  color: #FFFFFF; /* Changed color to white */
  font-weight: bold;
  font-size: 14px;
  text-transform: uppercase;
  padding: 10px 0;
  letter-spacing: 1px;
}

Replace the file link YOUR_FILE_LINK with an image as the background before the stream starts.

JS Tab:

function injectLyveComWidgetScript() {
  var scriptElement = document.createElement('script')
  scriptElement.src = 'https://dashboard.lyvecom.com/widget/widget.js'
  scriptElement.onload = function () {
    LyveComWidget.mount({
      account: 'ACCOUNT ID',
      lng: 'en',
      position: 'left',
      positionLeft: '0',
      positionBottom: '0',
      fullScreen: true,
    })
 }

  document.getElementById('lyvecom-stream').style.height = 
`calc(${Tapcart.variables.device.windowHeight || 750}px - 80px)`

  document.head.appendChild(scriptElement)
}

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

// block-vendor:lyvecom
// block-type:live-streaming

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

Updated on: 04/06/2024

Was this article helpful?

Thank you!