Skip to content
Craftium

Setup guide: Comic Alert

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.
  • Your Etsy download, unzipped. The alert files are in the folder comic-alert: four files html.txt, css.txt, js.txt and fields.txt in the folder of your style, or in comic-alert/bundle for the bundle with the style switch.
  • A computer with Chrome, Edge or Firefox. The StreamElements editor does not work well on phones.

Set up the alert box in StreamElements

  1. Open Overlays

    Log in at streamelements.com and click Overlays in the menu on the left. Already using our Comic Chat or Spin Wheel? Put the alert box into the same overlay and go on with step 3.

  2. Create a new overlay

    Click New overlay, choose 1080p (1920 × 1080) and click Start. Close the intro tour and give the overlay a name.

  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 on the left. You see five tabs: HTML CSS JS Fields Data.

  5. Replace all four tabs

    For HTML, CSS, JS and Fields: open the matching file (for example html.txt), copy everything, click into the tab, select all with Ctrl + A (Mac: Cmd + A), delete and paste. Leave Data as it is and click Done.

    Replace all four, even if a tab looks fine. StreamElements fills CSS and JS with an example widget.

  6. Set the box

    A new custom widget is only 290 × 180 pixels. Open Position, size and style and put the box where the alerts should appear, for example 800 × 450 in the middle, or the full 1920 × 1080.

    Any size works: the alert fits itself into the box and is never cut off. Size inside the widget box and Position inside the widget box make it smaller or move it up or down.

  7. Old alert box still on?

    If your StreamElements AlertBox is still in the overlay, both would show every event. Switch off the event types there that the comic alert should show, or remove the old AlertBox.

  8. Save and test

    Click Save. Then click Test: follow, Test: resub … or Test: all six: the alerts play one after the other.

    Test buttons work after the first save and only in the editor. To see them in OBS, switch on Test buttons also work in OBS. Sound may stay silent in the editor until you click into the page.

Your alerts

Events: under Alerts switch every type on or off: follows, subs and resubs (YouTube members too), gifted subs (bundled into one alert), bits (and Kick KICKs), tips (and YouTube Super Chats), raids. Gifts, bits, tips and raids have a minimum.

Power levels: under Bigger alerts for bigger moments write three numbers per event, for example 5, 20, 50 for tips: below 5 is level 1, from 5 level 2, from 20 level 3, from 50 level 4. Higher levels bring a bigger explosion, more confetti, light rays, shake and a flash.

Texts: under Texts write your own headline per event with %name% and %amount% (months, gifts, bits, the tip or raiders). Empty = the text of your language. Blocked words hides viewer messages with words you choose.

Sound and voice: Play sounds plays the comic hit of your style, bigger per level. Own sound for follows and the other sound fields take a file from your StreamElements media library instead. Read viewer messages aloud reads resub, bit and tip messages with a StreamElements voice; the alert stays until the voice is done.

Mod commands: you and your mods type !alert pause, !alert resume, !alert skip, !alert clear (drop waiting alerts), !alert replay, !alert mute and !alert unmute. Pause and mute survive an OBS restart; while paused, the editor shows a small note. Change the word in Command word, empty = off. Skip, mute and replay in the StreamElements activity feed work too.

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.
  3. For sound and voice switch on Control audio via OBS: the alerts then get their own slider in the audio mixer.
  4. Leave Shutdown source when not visible and Refresh browser when scene becomes active switched off, otherwise the alert box reloads at every scene switch and waiting alerts get lost.

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

More settings

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

SettingWhat it does
Comic styleBundle only: Pop Art, Manga or Neon. Switch anytime.
Language of the alert textsEnglish, Deutsch, Español, Português or Français.
Color themeClassic, night or pastel colors of your style.
Seconds per alert3 to 20 seconds; with text to speech the alert stays until the voice is done.
Show the viewer’s profile picture / Show the viewer’s messageProfile picture (a drawn face if there is none) and the message, each on or off.
Calm modeNo flashes, no flicker, no shake; the alerts still move.
Who may use the commandsYou and your mods, or only you.
Hold other StreamElements alerts while a comic alert playsOther StreamElements alerts wait, at most this many seconds. 0 = they do not wait.

Help

Nothing shows up
  • All four tabs replaced and Save clicked?
  • Box bigger than 290 × 180?
  • OBS browser source at 1920 × 1080 with the link of the right overlay?
  • Alerts paused? Type !alert resume.
An event came in, but no alert

Check the switch of that type under Alerts and its minimum. Alerts wait in line: the next one comes when the current one is done.

Every event shows twice

An old StreamElements AlertBox is still active in the same overlay. Switch off those event types there or remove it.

No sound or no voice

Sound plays in OBS. In the editor your browser may block it until you click into the page. In OBS switch on Control audio via OBS. Muted with !alert mute? Type !alert unmute. Text to speech is a StreamElements service: if it is down, the alert plays without voice.

Too much flashing for my viewers

Switch on Calm mode: no flashes, no flicker, no shake.

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.

Updates

Updates for version 1.x install themselves when the overlay loads, and your settings stay. Only if the editor shows an update note:

  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.

Current version: 1.0.0