How to embed Twitch live streams in 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 shows you how to embed a Twitch live stream and its chat directly into Bettermode, so community members can watch and participate without leaving the platform.

Embed a Twitch Live Stream into Bettermode

Find the channel name of the Twitch live stream you want 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. The Design Studio is where you customize the space layout and add content blocks.
Tip: From within the space, press the C key on your keyboard to open the Design Studio.

Add an HTML Script block and paste the embed code 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>

<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 CHANNEL-NAME with the actual Twitch channel name in both iframe codes (one for the video player and one for the chat).
Replace community.url.com with your community's domain (where the live stream will be embedded). Update both iframe codes. Do not include https:// in the parent domain.

Example Configuration

Here is an example with values filled in:

<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>

<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 padding or borders (optional).
Click Save Changes.
Preview the space to verify the embed displays correctly.

Troubleshooting

Stream Not Loading

Ensure that Twitch has allowed embedding on your channel. To enable this:

Log in to your Twitch account.
Go to Settings > Channel and Videos.
Turn on Allow Embedding.

Chat Not Displaying

Verify that the parent URL is correctly configured in both iframe codes. The parent domain must match your community's domain exactly (for example, bettermode-hub-demo.bettermode.io). Do not include the https:// protocol in the parent parameter.

Page Responsiveness Issues

The provided code includes responsive styling for mobile and desktop devices. Ensure you have not modified the iframe width settings. The width should remain set to 100% for proper responsiveness across devices.

Console Errors

If the stream or chat does not display:

Open your browser's developer console (press F12 or right-click > Inspect).
Look for errors related to cross-domain iframe embedding.
Confirm that the parent domain in the iframe code matches your community's domain.