Twitch widget

Your Twitch channel on your own site

The Twitch widget puts your channel on your website. Between streams it is a library of your past broadcasts, highlights and uploads, newest first. While you are live, your stream moves to the front as a card marked LIVE, and a visitor who opens it watches with Twitch chat beside the player, on your page.

It is made for one platform. If you also clip to YouTube or TikTok, the Video Showcase keeps every platform in one widget, a tab each.

Add your channel

1. Open the Videos tab in the editor. It is the first tab after Templates. At the top is a box headed Add a source as a new tab.
2. Type your channel. Your Twitch name on its own works, and so does a link such as twitch.tv/yourname.
3. Press Add as a tab. Your past broadcasts and uploads appear in the preview, newest first, with their pictures, titles, dates and views.

There is nothing to set up on Twitch, and no developer account is needed. Twitch's player checks which site it is shown on; DreamWidget passes your site's address along, so it plays on your site with nothing to configure.

Each tab has a panel that opens and closes with its sources and their videos. Beside every video is a switch: turn one off and it stays in your list but leaves the widget.

When you are live

The widget checks your channel all the time. Within a few minutes of you going live, the stream becomes the first card, with a LIVE badge. A click on it opens your live channel over the page. When the stream ends, that card goes and your latest video is first again.

1. Choose whether chat opens beside the stream. On the Design tab, in the Video card, Twitch chat beside a live stream is on unless you turn it off. On a wide screen the chat sits beside the player; signed in Twitch viewers can chat from there.
2. Style the LIVE badge. In the same card, the badge has its own color, text color, size and weight.

Start from a template

Every Twitch widget starts from a template: a finished look you can keep as it is or change. When you make the widget on the dashboard, each template plays a short clip of itself, and Use this template opens it in the editor with your own videos in it. Every template comes as a dark and a light version, for a dark or a light page.

Changed your mind later? The Templates tab, first in the editor, shows them all again. One click puts a template on your widget straight away. Your videos, words and links stay; only the look changes, and Undo takes it back.

Two screens: Desktop and Mobile

Above the preview is a switch with two choices, Desktop and Mobile. Every setting in Layout and Design is kept for each of them separately, so a grid can have four columns on a computer and one on a phone. A tablet is drawn from the Desktop settings. Your videos are shared by both.

1. Choose the screen you want to change. Press Desktop or Mobile above the preview. The preview takes that screen's size, and every change you make from then on is for that screen only.
2. Use the same change on both, if you want. Tick Edit all screens under the preview, and a change goes to Desktop and Mobile together.

The player, and how it opens

A click on a video opens it in Twitch's own player, over your page, and starts it. Nobody is sent to another site. A live stream opens the same way, with chat beside it when that is on. By default the player grows out of the video that was clicked and shrinks back into it when it closes. While the player loads, the video's picture is held with a play button on it, and the moment the video really plays the button gives a small press and fades away.

1. Open the Video player card. It is on the Design tab. While it is open, the preview shows the player, so you can see every change.
2. Choose how it opens. Under How it opens, Grows from the click is the default. At once shows the player with no motion. Visitors whose device asks for less motion always get a short fade instead of the grow.
3. Pick the play button. The Play button card sets the button on every video card: Twitch's own play mark, a circle with a triangle in your colors, a triangle alone, your own image, or none, with its size and colors.

Your files

Every picture you upload is kept in your account, not in one widget, so you can use it again anywhere. Beside each place that takes a picture, such as your own play button image, a custom logo in Social Links, or the widget background, there is a Your files button that lists everything you have uploaded before. Pick one and it is used at once, with nothing uploaded twice. Your account page shows how much space your files take.

The widget's background has its own library: on the Design tab, in Widget background, press Change background style. Add a picture or Add a video puts your own behind the videos, and once one is there, Effects for your picture offers slow movements and effects under the pointer, each with its own settings.

Buttons that say what they do

You can add your own titles, text and buttons above or below the videos, in Layout under Added titles, text and buttons, each placed with sliders. A button does one of two real things: it goes to a link you give it, or it adds an event to the visitor's calendar. Give it words that say which, such as "Subscribe on Twitch" for a link to your channel. The templates follow the same rule: no button in them promises something that will not happen.

Publish and put it on your site

1. Press Publish changes, at the top right. It lists what you changed and asks once. Publish sends it.
2. Copy the code. The window that says your widget is live has the embed code and a Copy code button. The same code is on the Settings tab, and on the dashboard as Copy embed on the widget's card.
3. Paste it once, where the widget should appear. It is a frame and a short script together; keep both. A page that already has the code picks up every later publish within a minute. Embedding on your site shows where to paste it on each website builder.

If something goes wrong

The LIVE card does not appear right away. It can take a few minutes after you go live. A visitor who loads the page after that sees it.

A video will not play on your site. Tell us the address of the page at hello@dreamwidget.com and we will look; Twitch's player is particular about the site it is shown on.

"This Twitch Widget takes Twitch only." A YouTube, Vimeo or TikTok link was pasted. It belongs in its own widget, or in a Video Showcase, which mixes platforms.

Anything else: hello@dreamwidget.com, and tell us the widget's name.