Skip to content
Craftium

Setup guide: Kiko 3D Mascot

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

Before you start

  • A free StreamElements account, logged in with the channel you stream on.
  • 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 Fields code.
  • A computer with Chrome, Edge or Firefox and a graphics card from the last years: Kiko is real 3D. The StreamElements editor does not work well on phones.
  • For avatar mode: OBS Studio 28 or newer (OBS WebSocket is built in) and your webcam as a source in OBS.

Set up Kiko in StreamElements

  1. Open Overlays

    Log in at streamelements.com and click Overlays in the menu on the left. Already using another Craftium widget? Put Kiko 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: 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 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 size

    A new custom widget is only 290 × 180 pixels. Open Position, size and style and set the box where Kiko should stand, for example 500 × 700 in a lower corner.

    Kiko fills the box. With speech bubbles on, the top part stays free for the bubble. A box wider than tall works too, Kiko then stands in the middle.

  7. Save and test

    Click Save. Kiko loads, a few seconds the first time. Then click Test: Kiko says hi, Test: new sub or Test: raid.

    Test buttons work after the first save and only in the editor. To see them and the setup hints in OBS, switch on Test buttons and setup hints also in OBS.

What Kiko does

Co-host or avatar: under What Kiko does, co-host needs no camera: Kiko stands next to you, moves on his own and reacts to your stream. Avatar makes Kiko you: he follows your face from the camera in OBS (see avatar mode). Framing shows the full body, upper body or head, Liveliness when idle sets how often he looks around, nods and smiles.

Moves for your events: under Events: what Kiko does pick one of 19 moves for each event: follow, sub, gifted subs, bits, tip, raid and a channel points reward (its name goes under Reward names). Nothing switches an event off. Bits, tips and raids have a minimum.

Speech bubble: with Kiko talks in a speech bubble on events on, Kiko thanks the viewer by name in a manga bubble, in English, German, Spanish, Portuguese or French. Events wait in line, one bubble at a time.

Chat command: viewers type !kiko wave, !kiko dance, !kiko thumbs up, !kiko clap, !kiko jump … German names work too (!kiko winken). Who can use it and Cooldown for viewers keep it calm; you and your mods have no cooldown. Only you and your mods: !kiko stop, !kiko autopilot off and !kiko autopilot on.

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. Leave Shutdown source when not visible and Refresh browser when scene becomes active switched off, otherwise Kiko reloads at every scene switch.

Streamlabs Desktop: Add Source → Browser Source, same link and the same settings (co-host mode; avatar mode needs OBS Studio).

Avatar mode: connect OBS

  1. In OBS open Tools → WebSocket Server Settings, tick Enable WebSocket server and copy the password with Show Connect Info.
  2. In the widget settings switch on Connect to OBS, paste the password under OBS WebSocket password and set What Kiko does to avatar. Save.
  3. Your webcam must be a source in the scene that is live. It may be hidden. Kiko finds it by himself; if you have several cameras, write the name under Avatar: camera source name.
  4. Kiko follows your head, eyes, blinking and mouth. When you leave the picture he switches to autopilot and comes back when you do.

Face tracking runs on your computer: OBS hands the camera picture to the widget on the same machine, no camera image is sent anywhere.

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 speech bubblesEnglish, Deutsch, Español, Português or Français.
FramingFull body, upper body or head.
Seconds per bubble2 to 15 seconds per bubble; events wait in line.
Bubble size50 to 150 % of the bubble size.
Color themeClassic, night or pastel colors of the bubble.
Calm modeBubbles fade in softly instead of popping.
Avatar: mirror your movementsOn: Kiko moves like your mirror image. Off: like seen from the camera.
Avatar: microphone name for the mouthEmpty = automatic. Only needed if the mouth follows the wrong audio source.

Help

Kiko does not show up
  • All four tabs replaced and Save clicked?
  • Box bigger than 290 × 180?
  • Internet on? Kiko loads from craftium-3d.pages.dev; if that fails, the editor shows a hint.
  • In OBS: browser source at 1920 × 1080 with the link of the right overlay?
An event came in, but Kiko did nothing

Check the move of that event under Events: what Kiko does (not Nothing) and its minimum. Bubbles wait in line.

The chat command does nothing

Is the word under Command the one you type? Check Who can use it and the cooldown. Unknown moves are ignored on purpose, so chat spam does nothing.

The avatar does not follow my face

The editor shows what is missing: OBS WebSocket server off, wrong password or no camera in the live scene. Good light on your face helps.

Kiko stutters

Kiko is real 3D. Close other heavy programs; on a laptop, stream on mains power.

Still stuck?

Write to us via Etsy messages or at craftium.berlin@gmail.com. Tell us your mode, your streaming software and what you see. Never send 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