RomAIx•4w ago

Custom Extensions Like Confetti Effect

Hi there! A while back I saw the usage of confetti as an effect using custom extensions. I was wondering if there are other ways to do these custom effects like fireworks, balloons, stars, etc Any ideas if that is possible to do with extensions or is it only possible to do the confetti for now? Appreciate any help! 🤙

1 Reply

Tico | Voiceflow Assistant•4w ago

Absolutely – the “confetti” demo is just one example of an effect extension.
Effect extensions let you run any client-side JavaScript as soon as the assistant emits a matching trace, so you’re free to trigger balloons, fireworks, star bursts, page scrolls… whatever you can code. How it works
1. In Voiceflow add a Custom Action (or Function) step and set a unique name/payload – e.g. celebrate: "fireworks".
2. On your site define an effect extension:

const fireworksExtension = {
  name: 'fireworks',
  type: 'effect',
  match: ({ trace }) => trace.payload?.celebrate === 'fireworks',
  effect: () => {
    // run your animation – you can use a small canvas lib or GSAP, etc.
    launchFireworks();
  }
};

const fireworksExtension = {
  name: 'fireworks',
  type: 'effect',
  match: ({ trace }) => trace.payload?.celebrate === 'fireworks',
  effect: () => {
    // run your animation – you can use a small canvas lib or GSAP, etc.
    launchFireworks();
  }
};

3. Register it (alongside the confetti one if you like) when you load the widget:

window.voiceflow.chat.load({
  verify: { projectID: 'YOUR_PROJECT_ID' },
  url: 'https://general-runtime.voiceflow.com',
  versionID: 'production',
  assistant: { extensions: [confettiExtension, fireworksExtension] }
});

window.voiceflow.chat.load({
  verify: { projectID: 'YOUR_PROJECT_ID' },
  url: 'https://general-runtime.voiceflow.com',
  versionID: 'production',
  assistant: { extensions: [confettiExtension, fireworksExtension] }
});

There’s no hard limit on the number or type of effect extensions you include – each extension simply listens for the trace pattern you define in match and then runs whatever JavaScript you put in effect. Resources
• Docs – Custom Forms & Extensions: https://docs.voiceflow.com/docs/custom-forms-and-extensions
• Sample extensions repo (includes the confetti example): https://github.com/voiceflow-gallagan/vf-extensions-demo/ So feel free to swap the confetti logic for a fireworks canvas, floating balloons, sparkle CSS, etc. – if you can trigger it with JavaScript, an effect extension can run it.

Custom Extensions Like Confetti Effect

Did you find this page helpful?