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 embeddable. 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> and <link> 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 defer crossorigin="anonymous" src="https://embed.talkshop.live/embed.js"></script><link href="https://embed.talkshop.live/static/css/styles.css" rel="stylesheet">

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'><div class='tsl-media' data-type='channel' data-modus='CHANNEL CODE'></div><div class='tsl-data' /></div>

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 id in your browser’s location bar. For instance, the stream id for https://talkshop.live/stream/1234 is 1234.

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

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

 

Example

<div class='tsl-container'><div class='tsl-media' data-type='channel' data-modus='talkshoplive'></div><div class='tsl-data' /></div>

 

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 326px. We discourage developers from adding their own styles to our elements unless it's absolutely necessary. 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, but we do not recommend having more than 4 embeds on any one page. Below is an example of embedding two different shows on one page:

<div class='tsl-container'><div class='tsl-media' data-type='show' data-modus='1234'></div><div class='tsl-data' /></div><div class='your-spacer-class'></div><div class='tsl-container'><div class='tsl-media' data-type='show' data-modus='5678'></div><div class='tsl-data' /></div>