Skip to content
Voiceflow
0:53:06
488
21
3
Last update : 28/08/2024

Voiceflow Chat Extensions: Level Up Your Webchat 🚀

Introduction 👋

This isn’t your average chatbot! We’re diving into Voiceflow’s powerful chat extensions to build next-level user experiences. Get ready to create dynamic, interactive elements within your chat widgets.

Why Chat Extensions? 🤔

  • Beyond Basic Customization: Unlock a new level of control over your chat widget’s look and feel.
  • Seamless Integrations: Connect your chat widget with external systems and data sources for a unified experience.
  • Enhanced User Engagement: Create interactive elements like seat pickers, file uploads, and more, making your chatbots truly stand out.

Two Types of Chat Extensions 🧰

1. Response Extensions 💬

  • What they do: Render custom elements within your chat widget, such as forms, calendars, or interactive maps.
  • Example: Imagine a user booking a flight. A response extension could display a dynamic seat map directly within the chat, allowing users to select their preferred seats visually.

2. Effects Extensions ✨

  • What they do: Trigger actions outside the chat widget, interacting with your website or web application.
  • Example: Think confetti 🎉 after a successful purchase! An effects extension can trigger this animation on your website, responding to events within the chat.

Building a Seat Picker Extension: A Real-World Example ✈️

Let’s break down how we built a custom seat picker for a JetBlue flight booking chatbot:

  • Custom Action: We used Voiceflow’s “Custom Action” feature to send data (like the number of seats to book) to our extension.
  • Seat Map Library: We integrated a JavaScript library called “Seat Chart” to create the visual seat map within the chat widget.
  • Dynamic Data: We fetched real-time data (e.g., reserved seats) from an external API to ensure the seat map stayed accurate.
  • User Interaction: We handled user interactions (seat selections, cancellations) within the extension and sent the results back to the Voiceflow chatbot for confirmation and processing.

Key Takeaways and Practical Tips 💡

  • Think Beyond the Chatbox: Chat extensions blur the lines between chatbots and full-fledged web applications.
  • Start Small, Think Big: Experiment with simple extensions first, then gradually explore more complex integrations.
  • Don’t Reinvent the Wheel: Leverage existing JavaScript libraries and APIs whenever possible to save time and effort.

Resources to Explore 📚

  • Voiceflow Documentation: https://docs.voiceflow.com/ – Your go-to resource for all things Voiceflow, including in-depth guides on chat extensions.
  • Voiceflow Community: 👾 https://link.voiceflow.com/community – Connect with other Voiceflow developers, share ideas, and get help with your projects.
  • Seat Chart Library: [Link to Seat Chart Library]- The JavaScript library used in our seat picker example.

What Will You Build? 🚀

Chat extensions give you the power to create truly unique and engaging chatbot experiences. Start exploring the possibilities today!

Other videos of

Play Video
Voiceflow
0:08:44
280
12
2
Last update : 23/10/2024
Play Video
Voiceflow
0:03:41
459
17
2
Last update : 16/10/2024
Play Video
Voiceflow
0:05:51
446
10
1
Last update : 16/10/2024
Play Video
Voiceflow
0:03:29
362
13
1
Last update : 16/10/2024
Play Video
Voiceflow
0:03:11
125
9
0
Last update : 16/10/2024
Play Video
Voiceflow
0:33:35
172
12
0
Last update : 10/10/2024
Play Video
Voiceflow
0:05:41
479
31
2
Last update : 10/10/2024
Play Video
Voiceflow
0:11:33
569
21
4
Last update : 09/10/2024
Play Video
Voiceflow
0:03:17
294
13
2
Last update : 09/10/2024