Setup guide: Comic Coworking Tasklist
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 channel (Twitch, Kick or YouTube).
- 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?
Tasklist only: chat to-do list and pomodoro timer. Tasklist with Dieter: the same, plus Dieter the dachshund in his corner below the list. You chose the version on Etsy, and the license page gives you exactly that widget. Everything on this page applies to both, except the part about Dieter.
Set up the list in StreamElements
-
Open Overlays
Log in at streamelements.com and click Overlays in the menu on the left.
-
Open or create a 1080p overlay
Use the overlay of your coworking scene, or click New overlay, choose 1080p (1920 × 1080) and click Start.
-
Add a custom widget
Click Add widget (the + button), then Static / Custom and Custom widget. A small box appears in the top left corner.
-
Open the code editor
With the new widget selected, click Open editor on the left. You see five tabs: HTML CSS JS Fields Data.
-
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.
-
Place the box
Open Position, size and style. A good start on the right side: width 520, height 960, position 1360 / 60. The list reaches down to the bottom of the box and turns the page when it is full. Only the timer: width 520, height 110.
-
Save and test
Click Save. Then click Test: add a task a few times, Test: complete a task and Test: start the timer / next phase. Test: clear the list empties it again.
Test buttons work after the first save and only in the editor.
Chat commands
Viewers: !task read 20 pages adds a task (also !add, !todo). !done checks off their first open task, !done 2 the second, !done read finds it by text, !done all finishes all. !remove takes back the last own task. Up to 3 open tasks per viewer by default.
You and your mods: !tasks done removes finished tasks, !tasks clear empties the list, !tasks lock and !tasks unlock close and open it for viewers (you can still add), !tasks remove name deletes one viewer’s tasks.
Timer: !timer start, !timer pause, !timer skip (next phase), !timer reset (back to the first focus phase, the list stays), !timer focus 50 (also break and long).
All command words and who may use them are in Task list and Pomodoro timer, several words per command separated by commas. It works the same in your Twitch, Kick and YouTube chat.
Dieter (only with the version Tasklist with Dieter)
Dieter’s corner sits below the list in the same box; keep the box at least 520 × 700. Position of Dieter's corner moves it above the timer. Show in this widget → Only Dieter's corner shows him on his own, for a second copy of the widget anywhere on screen.
During the focus phase he sleeps. When the break starts he gets up, the bar below shows the recap (tasks done, the new thing, the most productive viewer) and new things appear. When Dieter gets up: in the break, also briefly for every task, or never.
His corner grows with every finished task, across all streams: dog bed at 10, blanket at 25, reading lamp at 50, bookshelf at 100, plant at 150, name sign at 250, fairy lights at 400. !tasks setcount 120 sets the count, !tasks resetcount starts over.
Add the overlay to OBS
- 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.
- In OBS Studio select your scene, click + under Sources and choose Browser. Paste the link as URL and set Width 1920 and Height 1080.
- Timer at the top and list on the side? Add the widget a second time and set Show in this widget to Only the timer in one and Only the list in the other. Both share the same list and timer.
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.
| Setting | What it does |
|---|---|
| Language of the labels | Title and timer phases in English, Deutsch, Español, Português or Français. |
| Title of the list | Your own title, or TASKS in your language. |
| Open tasks per viewer / Maximum length of a task | 1 to 20 open tasks per viewer, you yourself up to 20; 20 to 150 characters. |
| Completed tasks | Move to the bottom, stay in place, or disappear after 8 seconds. |
| Focus / Break / Long break / Long break after | Lengths in minutes and after how many rounds the long break comes (0 = never). |
| Start the next phase automatically | Off: the timer waits for !timer start after every phase. |
| Sound when a phase ends | Optional own sound file, uploaded in StreamElements. |
| Seconds per page | How long each page shows when the list is longer than the box. |
| Color theme | Classic, night or pastel colors of your style. |
| Calm mode | No pop on the check mark, softer glow in Neon. |
Help
Nothing shows up
- All four tabs replaced and Save clicked?
- Box big enough, for example 520 × 960?
- OBS browser source at 1920 × 1080 with the link of this overlay?
!task does nothing
Check Who can add tasks and the command word. Each viewer can have 3 open tasks by default. A locked list only takes your own tasks: !tasks unlock.
The timer does not start
By default only you and your mods can use !timer. Show the pomodoro timer must be on.
Dieter keeps sleeping
He gets up when a break starts, so the timer has to run. Without a timer he gets up when a new thing unlocks.
Still stuck?
Write to us via Etsy messages or at craftium.berlin@gmail.com. Tell us your style, your version, 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; your settings and your list stay. Only if the editor shows an update note:
- Open the overlay in StreamElements, click the widget and then Open editor.
- Replace HTML, CSS, JS and Fields with the new files, exactly as in step 5.
- Don’t touch Data: your settings live there.
- Click Done and Save.
Current version: 1.0.0.