Skip to content
Craftium

Setup guide: Comic Check-In

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 files are in the folder comic-checkin: four files html.txt, css.txt, js.txt and fields.txt in the folder of your style, or in comic-checkin/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 stamp card in StreamElements

  1. Open Overlays

    Log in at streamelements.com and click Overlays in the menu on the left. Already using our Comic Chat, Spin Wheel or Alert? Put the check-in 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 cards should appear, for example 800 × 450 at the bottom of the screen.

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

  7. Save and test

    Click Save. Then click Test: check-in, Test: full card or Test: top 5.

    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. They never save anything, so no test names end up in your top 5.

Your stamp card

Check-in: by default with !checkin or !lurk in chat. Change the words under Check-in command and Lurk command, empty = off. Keyword anywhere in a message also counts messages like hi chat. Who can check in: everyone, subs, VIPs or mods.

Channel points (Twitch): in your Twitch Creator Dashboard open Viewer Rewards → Channel Points → Manage Rewards and add a custom reward called Check-in. The widget reacts to that name (Name of the channel points reward, several names with a comma). Channel points need Twitch Affiliate or Partner.

Once per stream: How often is once per stream or once per cooldown in hours. A new stream starts after Hours without any chat (default 4). A second stream on the same day? Type !card newstream.

Card, ranks and streak: Stamps per card 3 to 20, your own Card title and Text when a card is full. Ranks: one per line, stamps and name, for example 5 Regular. The streak counts streams in a row, not days; Streak jokers save a missed stream.

Bonus stamps: subs, gifted subs, bits, tips, follows and raids can give a stamp too, with a minimum for bits and tips. All off by default.

Chat commands: viewers type !card (own card) and !card top (top 5). You and your mods: !card give Name 3, !card set Name 12, !card reset Name, !card resetall yes, !card newstream, !card hide and !card show. Hidden stays hidden after an OBS restart.

Your data: stamps are saved in your StreamElements account. Moving to a new overlay: click Export data, copy the text from the editor, paste it into Import data of the new widget, save, then clear the field.

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 the stamp sound switch on Control audio via OBS: the cards 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 widget reloads at every scene switch and waiting cards 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, the stamps stay.
Language of the labelsEnglish, Deutsch, Español, Português or Français, with matching default ranks.
Color themeClassic, night or pastel colors of your style.
Stamp design / Own stamp imageStar, heart, lightning or check mark, or a picture from your StreamElements media library.
Seconds per card2 to 15 seconds; a full card stays a little longer.
Show profile picturesFrom channel points, subs and follows; a drawn avatar if there is none.
Calm modeNo flashes, no flicker, no shake; the cards still move.
Who can use !card and !card topEveryone, subs, VIPs, mods or only you. Mod commands are always for you and your mods.
Keep at most this many viewersDefault 2,000, up to 5,000; the least active leave first.

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?
  • Hidden? Type !card show.
A viewer typed !checkin, nothing happened

Already checked in this stream: the card says so once, then stays quiet. Check Who can check in and the cooldown.

Channel points do not count

The reward name on Twitch and in Name of the channel points reward must match (upper and lower case do not matter).

Everyone could check in twice

The widget saw a pause longer than Hours without any chat and started a new stream. Raise the number of hours.

No sound

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.

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