Skip to main content

Using Colang Components in VoiceFlow

· 4 min read
Razvan Dinu

In this article, we look at how Colang components can be used inside a VoiceFlow design.


When designing your virtual assistants, certain components are hard to design, and they usually require the help of a developer. This can slow down the designing process and limit the experience of your test users.

Let's assume we're building a booking assistant. We can easily design the main flows using VoiceFlow, e.g., making a booking, rescheduling, or canceling. But the step at which the user is asked to choose a time slot is hardly a simple one. When given some options or asked about the what's best for them, the users could answer in many different ways: "Next week", "In the afternoon", or they could say the suggested timeslot does not work, and it's up to the assistant to adapt. This type of complex behavior, with literally thousands of possible paths, can be modeled efficiently in Colang. And in this particular case, this is exactly what the co/timeslot does.


Let's see how to integrate a Colang component into a VoiceFlow design. You can download the example design, join the VoiceFlow project (link will expire in 72 hours) or you can check it out live.

Colang Component Flow

First, we've created a generic Colang Component Flow that we can reuse multiple times in the same project and even across projects:

Timeslot Component

Next, this is the main topic for our design which calls the timeslot component when the user requests a booking:

The code block before the Colang Component flow only sets the id of the component:

Also, notice how after the component is done, we continue the flow by asking the name of the reservation.

Chitchat Component

Chitchat is an essential part of a human-to-human conversation. Integrating chitchat into your designs will make them feel more natural. However, chitchat can occur almost at any time in the conversation. A good pattern to deal with it is to have it as a fallback mechanism when no intent is recognized:

In this case, we also pass the last user utterance to the component:

Example conversation

Let's look at how a sample conversation could go:

First, we see the welcome message from our design. And if the user engages in some chitchat, e.g., "Hi! How are you doing", "Are you a bot?", then the bot can handle that accordingly. Next, the user requests a booking. After the confirmation message "Sure, I can help with making a booking", our design passes the control to the Colang component, which can handle the negotiation until a suitable timeslot is found:

The default behavior uses a hard-coded schedule, but this can be easily adjusted.

Lastly, after the Colang component finished choosing the timeslot, the control is passed back to our design, which continues to ask the name for the booking:


If you want to customize the behavior of the Colang component, you can clone the component and change the messages or even the logic:

Wrap up

Using Colang components from your VoiceFlow designs is a powerful tool. It enables you to add advanced capabilities to your bot with minimal effort. "The right tool for the right job" is an old saying, and it also holds for conversation design. We believe Colang is the right tool for modeling advanced conversational components.

What conversational behavior have you found hard to design using your current tools?