Skip to content
Craftium

Setup guide: Comic Chat

About five minutes. You need a free StreamElements account and the files from your Etsy download.

Before you start

  • A free StreamElements account, logged in with the channel you stream on (Twitch, YouTube or Kick).
  • Your Etsy download, unzipped. The folder of your style contains four files: html.txt, css.txt, js.txt and fields.txt. Bought the bundle? Use the folder bundle.
  • A computer with Chrome, Edge or Firefox. The StreamElements editor does not work well on phones.

Set up the widget in StreamElements

  1. Open Overlays

    Log in at streamelements.com and click Overlays in the menu on the left.

  2. Create a new overlay

    Click New overlay. A new tab opens. Choose 1080p (1920 × 1080) and click Start. Close the short intro tour and give the overlay a name, for example “Comic Chat”.

  3. Add a custom widget

    Click Add widget (the + button), then Static / Custom and Custom widget. A small box appears in the top left corner.

  4. Open the code editor

    With the new widget selected, click Open editor in the panel on the left. You see five tabs: HTML CSS JS Fields Data.

  5. Replace all four tabs

    Do this for HTML, CSS, JS and Fields:

    1. Open the matching file from your download (for example html.txt for the HTML tab), select all and copy.
    2. Click into the tab, select everything with Ctrl + A (Mac: Cmd + A) and delete it.
    3. Paste the file content.

    Leave Data as it is. Then click Done.

    Replace all four, even if a tab looks fine. StreamElements fills CSS and JS with an example widget. If it stays, the bubbles turn white and tiny.

  6. Set the size

    A new custom widget is only 290 × 180 pixels. Open Position, size and style in the panel on the left and set the width to 600 and the height to 900. Then drag the box to where your chat should be.

    Any size works: everything stays inside the box, including the big comic effects. Smaller box, fewer messages.

  7. Save and test

    Click Save at the top right. Then click Test: show a message in the widget settings. A comic bubble appears.

    The test buttons only work after the first save. You can also simply type in your own chat.

Add the overlay to OBS

  1. In your list of overlays on StreamElements, open the menu … of the overlay and click Copy URL. Keep this link private: it contains a key to your account.
  2. In OBS Studio, click + under Sources and choose Browser. Paste the link as URL and set Width 1920 and Height 1080, the same size as the overlay.
  3. Leave Shutdown source when not visible and Refresh browser when scene becomes active switched off. Otherwise the chat reloads at every scene switch and forgets its messages.
  4. Want the chat in more scenes? Add the same source there with Add Existing instead of creating a new one. One source means one chat connection.

Streamlabs Desktop: Add Source → Browser Source, same link and the same settings.

Settings

Click the widget in the StreamElements overlay editor. The settings appear in the panel on the left. Click Save after changes.

SettingWhat it does
Comic styleBundle only: Pop Art, Manga or Neon. Switch anytime.
Language of the labelsEnglish, Deutsch, Español, Português or Français for FIRST CHAT!, DELETED and the badges.
Size (%)60 to 160. Makes everything bigger or smaller inside the box.
Max. messages on screenHow many bubbles are visible at once (default 8).
Hide messages afterSeconds until a bubble leaves on its own. 0 = it stays until new messages push it out.
Max. new messages per secondFor busy chats and raids (default 4). Extra messages wait their turn.
Show badges / avatarsStreamer, mod, VIP and sub badges; avatars where the platform provides them.
Calm modeNo flashes, no flicker, for viewers who are sensitive to light.
Hide these usersNames separated by commas or one per line.
Hide commands / known botsMessages that start with ! and bots like Nightbot or Streamlabs (both on by default).
Shared Chat messagesShow or hide messages from other channels during a Twitch Shared Chat.
Also show test messages in OBSOff by default, so tests never appear live on stream.

Help

Nothing shows up
  • All four tabs replaced and Save clicked?
  • Box size set to 600 × 900, not still 290 × 180?
  • OBS browser source set to 1920 × 1080 with the link of the right overlay?
  • In OBS, open the source’s properties and click Refresh cache of current page.
  • Your StreamElements account is logged in with the channel you stream on.
The bubbles are white or tiny, the font looks wrong

The CSS tab still contains the StreamElements example. Open the editor again and replace all four tabs, then save.

The test button does nothing

Save once first, then try again. Test messages appear in the editor only. To see them in OBS, switch on Also show test messages in OBS.

Bubbles are cut off at the edge

Make the box bigger or lower Size (%).

The chat is empty after switching scenes

In the OBS source properties, switch off Shutdown source when not visible and Refresh browser when scene becomes active.

Bot or command messages appear

Check Hide commands and Hide known bots. Add any other bot under Hide these users.

Too much flashing for my viewers

Switch on Calm mode. The bubbles still move, but nothing flashes.

Still stuck?

Write to us via Etsy messages or at craftium.berlin@gmail.com. Tell us your style, your streaming software and what you see; a screenshot of the editor helps. Never send us your overlay link.

Install an update

When a new version comes out, you get the new files. Your settings stay as they are:

  1. Open the overlay in StreamElements, click the widget and then Open editor.
  2. Replace HTML, CSS, JS and Fields with the new files, exactly as in step 5.
  3. Don’t touch Data: your settings live there.
  4. Click Done and Save. Open the widget settings once and save again.

Current version: 1.0.0