TSL Embed

Embed shows, channels and more using the TSL Embed SDK.

Our all-in-one, responsive, patent pending embed allows you to embed your live shows and checkout on any third-party platform to extend your selling potential and drive partnership sales.

Potential buyers never leave the platform hosting the embed. Checkout is completely contained within the embed allowing you and/or your partners to reduce bounce.

Installation

Follow the steps below to quickly embed any show or channel

Step 1: Include the TSL JavaScript SDK & Stylesheet

Include the following <script> on your page once, ideally in the <head> section or right after the opening <body> tag. If using WordPress, use the Insert Script to head option in the post editor.

<script async crossorigin="anonymous" src="https://embed.talkshop.live/embed.js"></script>

Step 2: Insert Show or Channel

Use the data-type and data-modus attributes to embed a channel or show. Be sure to read the descriptions of each embed type in order to choose which one is best suited for your needs.

A channel type embed is ideal for pages that will always want to display the most recent or live show for a channel. With a channel embed, the most recent or live show will be displayed. If a channel starts a live show while a user is viewing the embed, the embed will automatically switch to the live show.

The data-modus for a channel embed can be found by navigating to your channel's page and finding the channel code in your browser’s location bar. For instance, the channel code for https://talkshop.live/channels/talkshoplive is talkshoplive.

Place this code wherever you want the embed plugin to appear on your page:

<div class='tsl-container' data-type='channel' data-modus='CHANNEL CODE' />

A show type embed is ideal for articles and blog posts, where the embed plugin will always display the same show.

The data-modus for a show embed can be found by navigating to your show’s page and finding the stream key in your browser’s location bar. For instance, the stream key for https://talkshop.live/watch/ABCD_XYZ1 is ABCD_XYZ1.

Place this code wherever you want the embed plugin to appear on your page:

<div class='tsl-container' data-type='show' data-modus='STREAM KEY' />

Step 3: Add Optional Configuration Settings

data-view (string):

The data-view setting allows you to customize the content menu (the area below the video) when the embed renders. The three options are default, chat, and products. If data-view="chat" or data-view="products" the embed will render with the content menu expanded to show the chat or the products for sale. If data-view is not provided or data-view="default" is provided, the embed will render with the content menu collapsed.

data-eventid (string):

The data-eventid setting allows you to specify exactly which stream should be rendered. This is helpful in the case of a series (multiple air dates and streams) where you want to show a specific stream from that series instead of the most recent event. The data-eventid can be found by navigating to the show’s page and finding the eventid in the browser's location bar.

For example, for the event https://talkshop.live/watch/ABCD_XYZ1/1234, ABCD_XYZ1 is the stream key used in the data-modus and 1234 is the eventid.

data-dnt (string):

The data-dnt setting is a Do Not Track signal.You may choose whether the TalkShopLive embed on your site helps to personalize content and suggestions for TalkShopLive users, including web analytics tracking. You can opt out of having information from your website used for personalization by setting this property to 1.

data-manual-init (string):

The data-manual-init setting allows you to have full control over when the embed initializes. If set to 1 the embed will not initialize unless the TSLController.launch() method is explicitly invoked by the parent window.

Configuration Quick Reference

Setting Type Description Options
data-type string, required The type of embed that should be rendered. "show" or "channel"
data-modus string, required The show key or channel handle.
data-view string, optional The view that the embed defaults to upon rendering. For example, if data-view=”chat” the embed would render with the chat open. The default option renders with the products menu expanded default (condensed), chat, products (default)
data-eventid string, optional If source is show and eventid is provided, the specific stream/event will be rendered. eventid
data-dnt string, optional Do not track 0 (default), 1
data-manual-init string, optional If 1, embed will not initialize unless the TSLController.launch() function is explicitly invoked from the parent window. Default, 0. 0 (default), 1

Example

Shopify

Coming soon this year, our Shopify app will include a widget for you to use in your theme and pages. For Shopify blog posts, you will still need to use the <div> tag method described above, but the <script> tag will be automatically installed. We will be sure to update you when this feature is available.

WordPress

Coming soon this year, we will be releasing a TalkShopLive Embed WordPress plugin. In the meantime, you may follow the steps above to include embeds within your WordPress pages and posts. We will be sure to update you when this feature is available.

Responsive & Style

By default the TSL Embed is responsive, which means it will automatically adapt its layout for desktop and mobile browsers. The max-width of an embed is 720px and the min-width is 250px. Please note that altering the core style or functionality of our embed is strictly prohibited by our terms of service.

Multiple embeds on one page

Multiple embeds are supported. Below is an example of embedding two different shows on one page:

<div class='tsl-container' data-type='show' data-modus='ABCD_XYZ1' /><div class='your-spacer-class'></div><div class='tsl-container' data-type='show' data-modus='XYZ_123' />