Inside Component

Add Source Dialog

The Add Source dialog creates or edits one source inside a selected box. A source is the actual thing the box will show or play when the box is triggered.

How To Open It

Select a box on the overlay stage, then open the box inspector and click Add source in the Sources section. Existing sources can also be edited from that same list.

The dialog saves the source into the selected box. It does not create a new box, move the box, or change the overlay URL.

Source Tabs

Each tab creates a different kind of source. Pick the tab that matches what the selected box should show or play, then fill in the tab-specific options below.

Defined Sources Tab

Add Source dialog showing defined source cards

Use this tab when the source already exists in the reusable source library.

UI option
What it means
Defined Sources
Searches reusable sources by name, type, or media file.
Source cards
Each card is a reusable source that can be attached to the selected box. Click the card you want, then save it into the box.

Text Source Tab

Add Source dialog showing the Text Source tab

Use this tab for captions, labels, chat callouts, or any overlay text.

UI option
What it means
Source Name
The label shown in the box source list. If left blank, NekoBot infers a name from the text.
Text
The text rendered inside the box. Argument Control can be used when the displayed text should include chat, event, or trigger data.
Argument Control
Trigger Option
Typography
Animation

Media Source Tab

Add Source dialog showing the Media Source tab

Use this tab for images, videos, and audio cues. Media can come from a normal URL, a local upload, or a trigger argument such as {{message.imageUrl}} when the trigger event provides the media URL dynamically.

Add Source dialog showing a media URL with preview and media options
UI option
What it means
Source Name
The label shown in the box source list. If left blank, NekoBot infers a name from the file, URL, or trigger-mapped value.
Media URL, trigger argument, or upload
Accepts an HTTP media URL, one Argument Control mapping, or a local upload selected with the folder button.
Trigger argument mapping
Type {{ to insert a trigger token through the Argument Control. A trigger-mapped media source must be one token by itself, for example {{message.imageUrl}}, so NekoBot can treat the trigger value as the media URL.
Media type
Forces the source to Image, Video, or Audio when NekoBot cannot infer the type reliably from the file, URL, or trigger argument.
Folder button
Opens the local file picker for uploading media.
Clear button
Removes the selected uploaded file when one is attached.
Trigger Option
Animation
Media
Chroma
Preview

URL Source Tab

Add Source dialog showing the URL Source tab

Use this tab for browser-rendered widgets or pages that should appear inside a box.

UI option
What it means
Source Name
The label shown in the box source list. If left blank, NekoBot infers a name from the URL.
URL
The external page to render inside the box.
Trigger Option

TTS Source Tab

Add Source dialog showing the TTS Source tab

Use this tab for generated voice audio. It depends on enabled TTS models and, when required by the selected model, a saved cloned voice.

UI option
What it means
Source Name
The label shown in the box source list. If left blank, NekoBot infers a name from the TTS message.
Model
The TTS model that should generate the voice line.
Voice
The saved voice used by the selected model. Some models require a cloned voice before the source can be saved.
Instruction
Optional speaking guidance for models that support instructions.
Message
The text the TTS source should speak. Argument Control can be used for chat-driven TTS.
Argument Control
Speed
Controls generated speech speed.
Volume
Controls playback volume for the generated voice line.

Common Options

These options appear on multiple source tabs. Tab sections link to the specific shared option they use.

Trigger Option

Add Source dialog showing Trigger Option settings

Used by Text, Media, and URL sources. Trigger Option controls how long the source stays active after it appears.

UI option
Choices
Trigger Option
Open this group when the source needs custom timing instead of the box default.
Toggle
When checked, the source stays visible or active until the trigger toggles it again. Use this for persistent labels, widgets, or effects that should be manually turned off.
Timer (ms)
How long the source remains active before hiding. The value is milliseconds, so 5000 means five seconds.
Auto duration
For media sources, NekoBot can use detected audio or video duration when the file exposes it.

Typography

Add Source dialog showing Typography settings

Used by Text sources. Typography controls how text sources are rendered inside the box.

UI option
Choices
Typography
Open this group to override text styling for this source.
Font family
The CSS font family used for the text, such as Arial.
Font size
The text size in pixels.
Bold
Choose Yes for bold text or No for normal weight.
Italic
Choose Yes for italic text or No for upright text.

Animation

Add Source dialog showing Animation settings

Used by Text, Image, and Video sources. Animation controls how a visual source enters and exits the overlay.

UI option
Choices
Animation
Open this group to set animation type and speed.
Animation IN
The entry animation. Choices include Fade, Slide top, Slide left, Zoom, and Bounce.
Animation IN speed (ms)
How long the entry animation takes in milliseconds.
Animation OUT
The exit animation. Choices match Animation IN.
Animation OUT speed (ms)
How long the exit animation takes in milliseconds.

Media

Add Source dialog showing Media settings

Used by Video and Audio sources. Media settings control playback behavior.

UI option
Choices
Media (Video) / Media (Audio)
The group label changes based on the selected media type.
Volume
Playback volume from silent to full volume.
Loop media
When enabled, the media repeats until the source hides or is toggled off.

Chroma

Add Source dialog showing Chroma settings

Used by Image and Video sources. Chroma removes a keyed color, usually a green background, from the source.

UI option
Choices
Enable Chroma
Turns chroma keying on for the source.
Key color
The color to remove. Green is common for meme and green-screen video assets.
Color Picker (in "Key color")
Click the Key color swatch, then sample the background directly from the preview pane when the color picker or eyedropper is open. This is the easiest way to match the real chroma color instead of guessing.
Similarity
How broadly NekoBot matches colors near the key color. Higher values remove more related shades.
Smoothness
Softens the keyed edge. Increase it when the cutout edge looks harsh.

Preview

Add Source dialog showing the preview pane

Used by previewable sources. Preview shows what the source will look or sound like before saving.

UI option
Choices
Preview
The preview pane appears beside the editor when a source can be rendered before saving.
Resize preview
Drag the separator to give the preview or editor more room.
Playback controls
Media previews may show play or pause controls while the source is loaded.

Actions

UI option
What it means
Cancel
Closes the dialog without saving changes.
Save source
Validates the selected tab, saves the source into the box, and returns to the overlay editor.