Embed Twitch Live Streams into Bettermode

Embedding Twitch live streams and chats into your Bettermode community can enhance user engagement, especially for gaming, eSports, and live event discussions. This guide will show you how to embed a Twitch live stream and its chat directly into Bettermode, ensuring your community members can watch and participate without leaving the platform.

Embed a Twitch Livestream into Bettermode

Find the channel name of the live stream that you would like to embed.
As an Admin, go to the space where you want to embed the live stream or create a new space.
Open the Design Studio for the space.
Tip: Go to the space and click on the letter C on your keyboard to open the design studio.

Add the HTML script block and paste the embed code provided below:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twitch Embed</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }

        #twitch-container {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        #twitch-video, #twitch-chat {
            width: 100%;
        }

        #twitch-video iframe, #twitch-chat iframe {
            width: 100%;
            border: none;
        }

        @media (max-width: 767px) {
            #twitch-video iframe {
                height: 300px; 
            }

            #twitch-chat iframe {
                height: 400px; 
            }
        }

        @media (min-width: 768px) {
            #twitch-container {
                flex-direction: row;
                height: 480px; 
            }

            #twitch-video {
                width: 70%;
            }

            #twitch-chat {
                width: 30%;
            }

            #twitch-video iframe, #twitch-chat iframe {
                height: 480px; 
            }
        }
    </style>
</head>
<body>
    <div id="twitch-container">
        <div id="twitch-video">
            <iframe
                src="<https://player.twitch.tv/?channel=CHANNEL-NAME&parent=community.url.com>"
                frameborder="0"
                allowfullscreen="true"
                scrolling="no"
                sandbox="allow-same-origin allow-scripts allow-popups"
                muted="true">
            </iframe>
        </div>
        <div id="twitch-chat">
            <iframe
                src="<https://www.twitch.tv/embed/CHANNEL-NAME/chat?darkpopout&parent=community.url.com>"
                frameborder="0"
                scrolling="no"
                sandbox="allow-same-origin allow-scripts allow-popups">
            </iframe>
        </div>
    </div>
</body>

Replace both CHANNEL-NAME with the actual channel name of the live stream you want to embed in the code. This needs to be done in both iframe codes.
Replace both community.url.com with the URL of your community (where the live stream will be embedded). This needs to be done in both iframe codes. Do not include https://.

Below is an example of the edited section:

            <iframe
                src="<https://player.twitch.tv/?channel=lenovolegion&parent=bettermode-hub-demo.bettermode.io>"
                frameborder="0"
                allowfullscreen="true"
                scrolling="no"
                sandbox="allow-same-origin allow-scripts allow-popups"
                muted="true">
            </iframe>
        </div>
        <div id="twitch-chat">
            <iframe
                src="<https://www.twitch.tv/embed/lenovolegion/chat?darkpopout&parent=bettermode-hub-demo.bettermode.io>"
                frameborder="0"
                scrolling="no"
                sandbox="allow-same-origin allow-scripts allow-popups">
            </iframe>

Click Save.
In the Wrapper field of the HTML Script block, select None if you do not want any padding or borders (optional).
Click Save Changes.
Preview the space to ensure that the embed was successfully implemented.

Troubleshooting

Stream Not Loading: Ensure that Twitch has allowed embedding on your channel. You can enable this by going to your Twitch account settings under Channel and Videos, then turning on Allow Embedding.
Chat Not Displaying: Verify that the parent URL (yourcommunity.bettermode.com) is properly configured in the iframe code.
Page Responsiveness: Ensure your iframe width is set to 100% for a responsive experience across different devices.
Console Errors: If the stream or chat isn't displaying, check your browser’s developer console for errors related to cross-domain iframe embedding, and confirm that the parent domain is set correctly.

Embed Twitch Live Streams into Bettermode

Embed a Twitch Livestream into Bettermode

Troubleshooting

Related Articles:

Contact Us