Skip to main content

How to Host a live stream on your Tellie page with Twitch

Tellie Site
  • Updated

Basics 🔠

Before you do your first livestream on your Tellie site, make sure you have a twitch.tv account. If you have one you can skip ahead to "Linking Twitch to Tellie".  

Go to Twitch.tv and sign up: 

 

Screenshot_2023-01-26_at_11.23.34_AM.png

 

Once your account is set, make sure you are also setup to live stream. There's a few ways to run a livestream on twitch. 

-Setting up your Profile: https://help.twitch.tv/s/article/channel-page-setup

 

Mobile 📲 🎦

-Mobile Live stream Setup via Twitch: https://help.twitch.tv/s/article/mobile-game-broadcasting This version allows you to directly stream from your phone via the twitch app without needing to do much. 

   mobile_iphone-526a4005c7c0760cb83f.png

-Mobile Live stream Setup via Streamlabs OBS Mobile: https://streamlabs.com/mobile-app This version allows you to add more character to your mobile live stream. This includes adding overlays, subscription pop ups, follower pop ups, chat overlay, alert box, widgets, and more. 

      streamlabs-app-icon.png

 

Desktop 🖥️ 🎦

Streamlabs OBS: https://streamlabs.com/streamlabs-live-streaming-software This version is similar to the mobile version, however there is much more customization. You can still add overlays, themes, chat, pop ups, and even Co-Stream and have Guests appear with you. Streamlabs OBS also allows you to edit bitrate, quality, record the live steam as a backup, have multiple sources such as audio and video, plus more. Use Streamlabs OBS if you want more of a head start. 

     streamlabs-app-icon.png

OBS: https://obsproject.com/ This version of OBS is the original, however it's much more simpler. You can pretty much do everything Streamlabs OBS can do, however you need to import each file for overlays, themes, popups and more. This is useful for advance users doing it all from scratch. 

en-obs-studio-logo.jpg

 

Linking Twitch to Tellie 🌐

Once your profile is complete, you're ready to stream. All you have left is connecting your twitch to your Tellie Site.

There are two ways to connect your Twitch account, either by using the Instant Embed Tile or the Code Tile (Pro feature).

 

Instant Embed

Screenshot_2023-01-26_at_1.10.43_PM.png

Use the Instant Embed Tile to copy / paste your Twitch URL. Once you're live, your stream should automatically play.

Note: This method will only include your livestream video, not your Twitch chat (unless you have included your chat as a video overlay with OBS or Streamlabs, but still—the chat won't be interactive). If you'd like to include your Twitch Chat, you will have to use Code Tile method detailed below..

→ Example using Instant Embed: https://www.twitch.tv/TellieRocks 

Screenshot_2023-01-26_at_1.12.36_PM.png

 

→ Example using Instant Embed method while live: 

Screenshot_2023-01-26_at_1.15.18_PM.png

 

 

Code Tile

Screenshot_2023-01-26_at_3.59.31_PM.png

The Code Tile is a Tellie Pro feature.

Use the code tile to embed both video and chat from your stream.  As a reminder the chat will be live, and you will still need to moderate via your Twitch dashboard. This also applies to settings such as 'Followers-Only Chat'. 

 

Code Tile example live: 

Screenshot_2023-01-26_at_1.15.54_PM.png

 

Code Tile example offline: 

 

Screenshot_2023-01-26_at_3.37.40_PM.png

 

Code needed: 

 

Code Example:  Change Highlighted section

<html>
<body>
<!-- Add a placeholder for the Twitch embed -->
<div id=“twitch-embed”></div>

<!-- Load the Twitch embed JavaScript file -->
<script src=“https://embed.twitch.tv/embed/v1.js”></script>

<!-- Create a Twitch.Embed object that will render within the “twitch-embed” element -->
<script type=“text/javascript”>
new Twitch.Embed(“twitch-embed”, {
width: 1200,
height:720,
channel: “Symfuhny”,
// Only needed if this page is going to be embedded on other websites
parent:“tell.ie”
});
</script>
</body>
</html>

<html>
<body>
<!-- Add a placeholder for the Twitch embed -->
<div id=“twitch-embed”></div>

<!-- Load the Twitch embed JavaScript file -->
<script src=“https://embed.twitch.tv/embed/v1.js”></script>

<!-- Create a Twitch.Embed object that will render within the “twitch-embed” element -->
<script type=“text/javascript”>
new Twitch.Embed(“twitch-embed”, {
width: 1200,
height:720,
channel: “TellieRocks”,
// Only needed if this page is going to be embedded on other websites
parent:“tell.ie”
});
</script>
</body>
</html>

 

Note: You may also change the Width and Height in the code sample above depending on your needs. Please leave 'tell.ie' as the parent, if you change it it will cause an error. For more info on Twitch's embed visit this link. 

 

Instant Embed vs Code Tile similarities & differences on Tellie

 

Feature Instant Embed Code Tile
Follow/Unfollow ✅ ✅
Change Video Quality ✅ ✅
See Chat ✅ ✅
Make Clips ✅ ✅
Subscribe ✅ ✅
Full Screen ✅ ✅
Ads show (Partners & Affiliates only) ✅ ✅
Moderator Chat Settings ❌ ✅
Can see Users in Chat ❌ ✅
Live Views ❌ ✅
Mod View ❌ ✅
Channel Points ❌ ✅
Emotes on Twitch ❌ ✅
Can view top Gifted Subs & Bits ❌ ✅

 

 

 

 

 

 

 

 

 

 

 

Related articles