Articles on: Integrations

Creating Your Livestream Custom Block

Setting Up Your Streaming Block and Custom Stream Block Page


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.

Creating the LyveCom streaming widget 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 customizing your livestream's look and functionality.


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

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

CSS Tab:

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

@import url(''); /* 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('') 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:

Incorporate the LyveCom streaming widget script below:

function injectLyveComWidgetScript() {
  var scriptElement = document.createElement('script')
  scriptElement.src = ''
  scriptElement.onload = function () {
      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)`


// Call the function to inject the script

// 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?

Share your feedback


Thank you!