Skip to content
Craftium

Setup guide: Comic Pee Break

About five minutes. You need a free StreamElements account and your personal files from our license page (link in your Etsy download, have your order number ready).

Before you start

  • A free StreamElements account, logged in with your Twitch channel.
  • The setup on the license page: after your order number and channel, it shows a copy button for every tab (HTML, CSS, JS, Fields). Your license key is already in the code. Everything is also there as a ZIP (backup).
  • A computer with Chrome, Edge or Firefox. The StreamElements editor does not work well on phones.

Which version do you have?

Animation only: the whole break with countdown, backgrounds and sound, started by your BRB scene or !brb, ended with !back. The editor shows two test buttons (break and end), and the chat interactions below are not included. With chat interactions: everything on this page. You chose the version on Etsy, and the license page gives you exactly that widget.

Set up the break in StreamElements

  1. Open Overlays

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

  2. Create an overlay for your break

    Click New overlay, choose 1080p (1920 × 1080) and click Start. Name it, for example BRB. Use a separate overlay for the break, so Dieter only shows up in your break scene.

  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: press the matching button on the license page (for example Copy HTML) or copy the file from the ZIP, 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. Make it full screen

    Open Position, size and style and set the position to 0 / 0, the width to 1920 and the height to 1080. Dieter, the hydrant and the background fill the whole screen.

  7. Pick length and background

    Under Break set Break length, 1 to 30 minutes (default 3): Dieter sleeps until the countdown ends. Your own text on the sign, or the default in your language.

    Under Look choose the Background: graffiti wall with a wildstyle BRB piece, park, comic dots, transparent (only Dieter over your game) or your own image.

  8. Save and test

    Click Save. Then click Test: start a 2-minute break. Once Dieter lies down (after about 16 seconds), try Test: treat, Test: follow, Test: sub, Test: bone rain and Test: raid. Test: end the break now sends him out.

    Test buttons work after the first save and only in the editor.

Chat commands and channel points (only with the version With chat interactions)

Start and end: you and your mods start a break with !brb (or !brb 5 for five minutes) and end it early with !back. Change the words and who may use them under Break.

Treat via channel points: in the Twitch Creator Dashboard open Viewer Rewards → Channel Points → Manage Rewards & Challenges and click Add New Custom Reward. Give it exactly the name in Channel points reward name for a treat, by default Treat for Dieter (capital letters do not matter). Channel points need Twitch Affiliate or Partner.

Everyone plays along: viewers type !wake and !pet (one use per cooldown each, the whole chat at most every 8 seconds), follows bring a butterfly that lands on Dieter’s nose, subs a new look, bits and tips a bone rain (one bone per amount you set, at most 12), raids three dog friends.

Waiting in line: everything waits until Dieter lies down and then plays one after the other. Within the last 3 seconds of a break nothing new starts. At the end a sign shows the treats, bones and the best friend of the break.

Your BRB scene in OBS

  1. In your list of overlays on StreamElements open the menu … of the BRB overlay and click Copy URL. Keep this link private: it contains a key to your account.
  2. In OBS Studio select your break scene, click + under Sources and choose Browser. Paste the link as URL and set Width 1920 and Height 1080.
  3. For the sound switch on Control audio via OBS.
  4. Switch on Refresh browser when scene becomes active: every switch to your break scene starts a new break with Dieter walking in. Prefer to start with !brb only? Set Start the break to Only with the chat command.

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
Language of the textsSign, speech bubbles and sound words in English, Deutsch, Español, Português or Français.
Background / Own background imageGraffiti wall, park, comic dots, transparent, or your own image uploaded in StreamElements.
Color themeClassic, night or pastel colors of your style.
Show the summary signA sign with treats, bones, wake-ups and the best friend when Dieter leaves.
Music / Own music / Music volumeMusic for your style during the break, or your own file (you need the rights).
Sound effects / Sound effects volumePaws, sniffing, splashing, snoring, woof and chomp, made in code.
Calm modeSound words do not blink, the tail wags calmly.

Help

Nothing shows up
  • All four tabs replaced and Save clicked?
  • Box set to 1920 × 1080?
  • OBS browser source at 1920 × 1080 with the link of the BRB overlay?
  • Start the break on loading the overlay, or type !brb.
A follow came in, but nothing happened

Interactions wait until Dieter lies down (about 16 seconds after the start). Within the last 3 seconds of a break nothing new starts.

The treat does nothing

The reward name must match the field exactly (capital letters do not matter). The reward lives on Twitch, not in StreamElements, and needs Affiliate or Partner.

!wake does nothing

Every viewer can use it once per cooldown, and the whole chat at most every 8 seconds. You and your mods have no cooldown.

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 and check the mixer.

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