Skip to content
Craftium

Setup guide: Comic Overlay

About five minutes. You need the file customize.html from your Etsy download and OBS Studio or Streamlabs Desktop.

Before you start

  • Your download, unzipped. Inside is customize.html, the page that makes your overlay files.
  • A computer with a current browser: Chrome, Edge, Firefox or Safari.
  • OBS Studio, Streamlabs Desktop or other streaming software with a browser source.

Buttons and menus of OBS are written as OBS shows them in English. In another language they sit in the same place. The customize page speaks your language: choose it at the top right.

Part 1: Make your overlay

  1. Open the customize page

    Double-click customize.html. It opens in your browser, nothing is installed. Pick the language of the page at the top right.

  2. Your channel

    Under Basics enter Channel name and choose Color theme and Overlay language. Logo or avatar: Choose image adds your logo (PNG, JPG or WebP). It is made smaller and stays on your computer.

  3. Your socials

    Under Socials choose up to 6: Twitch, YouTube, TikTok, Kick, Instagram, X, Discord or a website, each with your name or link. + Add social adds one, × removes one.

  4. Texts and countdown

    Open Starting Soon, Be Right Back, Stream Ending, Webcam frame and Info bar: the preview on the right switches along. Gray text in a field is the default; leave it empty to keep it. Countdown: Minutes counts from the moment the scene appears, Fixed time (e.g. 8 PM) counts to your start time.

  5. Save the files

    Download all files (ZIP) saves one ZIP with all five files and a short OBS note. Unzip it into a folder you keep, for example Documents/Overlay. Save this file saves only the part you see.

Part 2: Add it to OBS

  1. Add a browser source

    In OBS Studio click + under Sources, choose Browser and give it a name. Tick Local file and choose a file, for example craftium-manga-starting-soon.html.

  2. Width and height

    Set Width and Height:
    • Starting Soon, Be Right Back, Ending: 1920 × 1080
    • Webcam frame: as shown on the page, for example 960 × 540 (16:9), 800 × 600 (4:3), 600 × 600 (1:1), 540 × 960 (9:16)
    • Info bar: 1920 × 160
    Put the webcam frame over your camera, the camera a little smaller so it sits inside the frame. Put the info bar at the bottom of your game scene.

  3. Fresh start for every scene

    Switch this on, so the entrance and the countdown start fresh each time the scene appears:

    Refresh browser when scene becomes active ON

Part 3: Change something later

  1. Edit and save again

    Open customize.html again: in the same browser your settings are still there. Otherwise click Open a saved file and pick one of your saved overlay files. Save to the same folder and replace the old file.

  2. Refresh in OBS

    Right-click the source in OBS and choose Refresh. The new version shows at once.

Streamlabs Desktop: Add Source → Browser Source, tick Local File, same sizes. Meld Studio and other apps: a browser source with the file and the same sizes.

More on the customize page

Everything you change shows in the preview at once.

SettingWhat it does
Color themeClassic, night or pastel colors of the style.
Overlay languageDefault texts in the overlay in English, German, Spanish, Portuguese or French.
Calm motion (less animation)Less motion: no flickering lines, no floating sound words.
Start timeWith a fixed time: the start time; the scene shows it above the countdown.
Text when the countdown endsShows when the countdown reaches zero.
Camera formatOnly changes the suggested size; the frame fits any size.
Show channel nameName tag at the bottom left of the frame.
Show LIVE stampRed LIVE stamp at the top right, in the overlay language.
Your messages (rotate with your socials)Up to 4 own messages; they take turns with your socials.
Seconds per item3 to 60 seconds per item in the info bar.

Help

The source stays empty or white
  • Local file ticked and the right file chosen?
  • File moved or renamed after adding it? Choose it again.
  • Width and height set?
  • Double-click the file: does it show in your browser?
Every browser source stays empty (Mac)

Also other browser sources? In OBS open Settings → Advanced → Sources, switch off Enable Browser Source Hardware Acceleration and restart OBS.

The countdown starts over

With Refresh browser when scene becomes active the minutes count from the moment the scene appears. For a fixed start choose Fixed time (e.g. 8 PM).

Plain font for a moment

The comic fonts load from Google Fonts. Without internet a simple font shows until they are there.

My settings are gone

A private window or cleared browser data forgets them. Click Open a saved file and pick one of your saved overlay files: everything is back.

Too much motion for my viewers

Switch on Calm motion (less animation) and save the files again.

Still stuck? Write to us via Etsy messages or at craftium.berlin@gmail.com. Tell us your streaming software and what you see; a screenshot helps.

Updates

Updates for version 1.x come as a new customize.html in your Etsy purchases. Open it, click Open a saved file, pick one of your overlay files and save again.

One purchase = one channel (the same channel on Twitch, YouTube and Kick counts as one). Monetized streams are fine. Please do not resell, share or upload the files. Full text: LICENSE.txt in your download.