Overlay Effects

Overlay Media

Use effects to play media in connected overlay widgets.

Engine v2

Play GIF overlay

Plays a GIF in connected overlay widgets.

Play a GIFAdvanced Script

effects.gif("https://files.kicklet.app/the-file.gif", { duration: 5 });

API reference

effects.gif

effects.gif(url, options?)

Input

url

string

GIF URL or uploaded file URL.

optionsoptional

object

Playback options.

durationoptional

number

Playback duration in seconds.

Output

void

The overlay effect is queued as a side effect.

Play sound overlay

Plays a sound in connected overlay widgets.

Play a soundAdvanced Script

effects.sound("https://files.kicklet.app/the-file.mp3", { duration: 5, volume: 10 });

API reference

effects.sound

effects.sound(url, options?)

Input

url

string

Audio URL or uploaded file URL.

optionsoptional

object

Playback options.

durationoptional

number

Playback duration in seconds.

volumeoptional

number

Playback volume.

Output

void

The overlay effect is queued as a side effect.

Play sound and GIF overlay

Plays a sound and GIF together in connected overlay widgets.

Play sound and GIFAdvanced Script

effects.soundGif(
  "https://files.kicklet.app/the-sound.mp3",
  "https://files.kicklet.app/the-gif.gif",
  {
      duration: 5,
      volume: 10,
  },
);

API reference

effects.soundGif

effects.soundGif(soundUrl, gifUrl, options?)

Input

soundUrl

string

Audio URL or uploaded file URL.

gifUrl

string

GIF URL or uploaded file URL.

optionsoptional

object

Playback options.

durationoptional

number

Playback duration in seconds.

volumeoptional

number

Playback volume.

Output

void

The overlay effect is queued as a side effect.

Press CTRL + I in the Advanced Editor to open the asset picker for uploaded files.

Engine v1

{{kicklet.PlayGif "https://files.kicklet.app/the-file.gif" 5}}
{{kicklet.PlaySound "https://files.kicklet.app/the-file.mp3" 5 10}}
{{kicklet.PlaySoundGif "https://files.kicklet.app/the-sound.mp3" "https://files.kicklet.app/the-gif.gif" 5 10}}

Custom Overlay Events

Custom events send JSON-serializable data to overlay widgets.

Engine v2

Send custom overlay event

Sends a custom JSON-serializable event to connected overlay widgets.

Custom eventAdvanced Script

events.custom("shop-effect", {
  viewer: sender.username,
  item: "confetti",
});

API reference

events.custom

events.custom(name, payload?)

Input

name

string

Custom event name.

payloadoptional

objectarraystringnumberbooleannull

Event payload available to overlay code.

Output

void

The custom event is queued as a side effect.

Engine v1

{{kicklet.CustomEvent "shop-effect" (dict "viewer" sender.String "item" "confetti")}}

Text-to-Speech

Use TTS effects when a connected overlay should speak a message.

Engine v2

Play text to speech

Speaks text in connected overlay widgets with the selected voice.

Text-to-speechAdvanced Script

effects.tts("en_US-amy-medium", "Hello, this is a test message.");

API reference

effects.tts

effects.tts(voiceId, text)

Input

voiceId

string

Voice ID such as en_US-amy-medium.

text

string

Text to speak.

Output

void

The text-to-speech effect is queued as a side effect.

Engine v1

{{kicklet.TTS "en_US-amy-medium" "Hello, this is a test message."}}

Async overlay wrappers

Async wrapper for effects.gif(url, options?).

API reference

async.effects.gif

async.effects.gif(url, options?)

Input

url

string

GIF URL or uploaded file URL.

optionsoptional

object

Playback options.

durationoptional

number

Playback duration in seconds.

Output

void

The overlay effect is queued as a side effect.

Async wrapper for effects.sound(url, options?).

API reference

async.effects.sound

async.effects.sound(url, options?)

Input

url

string

Audio URL or uploaded file URL.

optionsoptional

object

Playback options.

durationoptional

number

Playback duration in seconds.

volumeoptional

number

Playback volume.

Output

void

The overlay effect is queued as a side effect.

Async wrapper for effects.soundGif(soundUrl, gifUrl, options?).

API reference

async.effects.soundGif

async.effects.soundGif(soundUrl, gifUrl, options?)

Input

soundUrl

string

Audio URL or uploaded file URL.

gifUrl

string

GIF URL or uploaded file URL.

optionsoptional

object

Playback options.

durationoptional

number

Playback duration in seconds.

volumeoptional

number

Playback volume.

Output

void

The overlay effect is queued as a side effect.

Async wrapper for effects.tts(voiceId, text).

API reference

async.effects.tts

async.effects.tts(voiceId, text)

Input

voiceId

string

Voice ID such as en_US-amy-medium.

text

string

Text to speak.

Output

void

The text-to-speech effect is queued as a side effect.

Async wrapper for events.custom(name, payload?).

API reference

async.events.custom

async.events.custom(name, payload?)

Input

name

string

Custom event name.

payloadoptional

objectarraystringnumberbooleannull

Event payload available to overlay code.

Output

void

The custom event is queued as a side effect.

Available voice IDs:

LanguageArabic (1)Catalan (2)Chinese (1)Czech (1)Danish (1)Dutch (4)English (27)Farsi (2)Georgian (1)German (1)Hungarian (3)Icelandic (4)Italian (2)Kazakh (3)Luxembourgish (1)Nepali (1)Polish (4)Portuguese (3)Romanian (1)Russian (4)Serbian (1)Slovak (1)Slovenian (1)Spanish (7)Swahili (1)Swedish (1)Telugu (3)Turkish (3)Ukrainian (1)Vietnamese (1)

id	name	gender
en_GB-alan-medium	Alan	M
en_GB-alba-medium	Alba	F
en_GB-aru-medium	Aru	M
en_GB-cori-high	Cori	F
en_GB-jenny_dioco-medium	Jenny_dioco	F
en_GB-northern_english_male-medium	Northern_english_male	M
en_GB-semaine-medium	Semaine	F
en_GB-southern_english_female-low	Southern_english_female	F
en_GB-vctk-medium	Vctk	F
en_US-amy-medium	Amy	F
en_US-arctic-medium	Arctic	M
en_US-bryce-medium	Bryce	M
en_US-danny-low	Danny	M
en_US-hfc_female-medium	Hfc_female	F
en_US-hfc_male-medium	Hfc_male	M
en_US-joe-medium	Joe	M
en_US-john-medium	John	M
en_US-kathleen-low	Kathleen	F
en_US-kristin-medium	Kristin	F
en_US-kusal-medium	Kusal	M
en_US-l2arctic-medium	L2arctic	M
en_US-lessac-high	Lessac	F
en_US-libritts-high	Libritts	F
en_US-libritts_r-medium	Libritts_r	F
en_US-ljspeech-high	Ljspeech	F
en_US-norman-medium	Norman	M
en_US-ryan-high	Ryan	M