Articles on: Livestreaming

Hosting a Stream in Your TapCart App

How to Stream on TapCart Using LyveCom



Purpose:


The purpose of this guide is to enable Marketing Managers, Social Media Managers, and Livestream Hosts to effectively stream on TapCart using LyveCom via OBS Streaming Software or your iPhone, tailored for Shopify Plus platforms.

Intended Audience:

Marketing Managers, Social Media Managers, and Livestream Hosts.

Before you begin, ensure you are subscribed to the TapCart Enterprise Plan with Custom Blocks enabled. Refer to TapCart's Custom Blocks Introduction for additional details.

Create a New Page in TapCart:



Navigate to your TapCart dashboard and create a new page titled 'Live Shopping'.
Add this page to your main navigation for easy access.
Open the Custom Block Code Editor in TapCart

In your newly created custom block, access the custom block code editor.



Go to the 'streaming' tab in your LyveCom settings.
Copy the streaming widget embed code for your livestream.

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" style="height: calc({{device.windowHeight}}px * 0.9)">
    <div class="overlay">
      <p class="live-shopping-text">Live Shopping</p>
      <p class="subtitle-text">Starting soon...</p>
    </div>
  </div>
</div>


Feel free to modify the text to suit your brand's voice and style.

CSS Tab:



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


* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: Helvetica;
}

h1 {
    margin: 10px 0px;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    width: 100%;
}

#test {
  height: auto;
}

.lyvecom-stream {
  min-height: 750px;
  width: 100%;
  background-color: #FFEBE1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.overlay {
    background: transparent; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

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

.subtitle-text {
  color: #F5C4AF;
   font-weight: bold;
  font-size: 18px;
}


Customize the font styles and colors to match your branding preferences.

JS Tab:



Incorporate the LyveCom streaming widget using the JavaScript code provided below:



Original Widget Script:

<script src="https://dashboard.lyvecom.com/widget/widget.js"></script>
<script>
LyveComWidget.mount({
    account: '623f626515dsfsa674f78825b24d2',
    lng: 'en',
    position: 'left',
    positionLeft: '0',
    positionBottom: '0'
});
</script>



Modified Widget Script for TapCart:


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

  document.head.appendChild(scriptElement);
}
injectLyveComWidgetScript();


Note: You can simply replace the account number ID: 64c137c783e842d8069863f8c5 from the original LyveCom stream.

Updated on: 06/12/2023

Was this article helpful?

Share your feedback

Cancel

Thank you!