Export your Botsociety design to Dialogflow

Making progress on that first Botsociety prototype of yours? First off, congrats. You’ve come a long way from using complicated templates and spreadsheets to showcase your conversation designs. And here you are: ready to hand off your work to a developer. Or maybe you’d like to dig into the development of your bot yourself. Either way, go you.

One of the coolest things about Botsociety prototyping is the fact that you can directly connect your designs to popular bot-building platforms like Dialogflow and Rasa.

This streamlined integration allows developers to quickly and easily pick up where prototypes leave off — thereby speeding up the entire hand-off process. This is especially useful if you’re going to be frequently redesigning and polishing your design — which you should be.
But let’s take a deeper look at how this works.

Understanding the Build page

Let’s say you’re in Botsociety’s web app and want to get your bot prototype ready for export to Dialogflow. Click the wrench icon

in the top-right toolbar to proceed to the Build page.

You will now access the build mode.

The Build page is split up into three sections: Messages, Variables, and, on the right, several options related to the code itself.
Now, it’s important to note that you’re not going to be doing any actual coding or building here.
Remember: Botsociety is a conversational design tool. It’s basically a prototyping suite with a host of other features that can assist with development — but it’s not a development tool in itself.
Back to the Build page. Let’s talk about Intents.

Each message in the Messages section has a corresponding dropdown for Intent. Clicking a dropdown and selecting “Create new Intent” allows you to add labels to your intents.

If you’ve used bot-building platforms like Dialogflow before, then that term should be familiar to you. Basically, an Intent represents the goal of a specific message to or from your bot. For example: if a user were to ask “What’s your favorite color?”, the goal of his/her question is to learn your bot’s favorite color. In chatbot design, that goal is what we call an “Intent”.

It’s important to name our Intents. Not only does it help others more easily understand a conversation’s flow, but it also sets developers up for success since they will be adding all sorts of configurations to each individual Intent within Dialogflow.

I’ll start by naming the bot’s welcome message “welcome”. Later on, in Dialogflow, developers can set this as the default welcome Event, so that Mr. Wonka here starts off every customer interaction in the same way.

Next, I’ll name the user’s first message “order”, since the goal of the message, in this scenario, is clearly to initiate a new order process.

I’ll continue down the list making sure all of my Intents are organized and labeled appropriately:

To add a bit of fun, next I have my user request “everlasting gobstoppers”. If you’re familiar with the book or film, Willy Wonka and the Chocolate Factory, you’ll remember that everlasting gobstoppers are special candies that never dissolve or lose flavor no matter how long you chew them. It’s Mr. Wonka’s most prized and “top secret” invention, and ultimately not for sale.

I’ve included “gobstoppers” as an Intent of its own, since this query will lead the bot down a unique conversational path that is separate from “order”. It is separate because you can’t actually order it. Also, this separation will allow developers to add bot responses that are tailored specifically to gobstopper requests.

This is a disruption in Mr. Wonka’s normal ordering process, so he responds accordingly.

Next, I have an unrecognized intent followed by a “fallback” intent. This interaction represents a user query that does not successfully match with a bot’s programmed parameters. In other words, the bot doesn’t understand what the user is saying here.

Since there are no keywords or phrases that my bot understands, it will automatically say “I’m a trifle deaf in one ear…”, prompting the user to try again.

For my last example, I have the user ask for gobstoppers once more. This time using slightly different phrasing, which a developer will immediately know to register as an additional “training phrase” in Dialogflow.

Here, the bot starts yelling in frustration. It’s an ode to the iconic scene in the 1971 Willy Wonka film starring Gene Wilder, and I couldn’t resist including it.
But there’s a problem. What if my user is not a “sir”, but in fact, a “madam”?
Or neither? (Nobody’s judging.)

Building mode: variables

Variables are dynamic words or phrases in a user’s query that will be extracted and interpreted by your bot in order to provide a proper response.

In this particular example, “sir” is dynamic since there are multiple possibilities for user gender. And it will be up to the development team to set up a custom “entity” for that in Dialogflow.

But the least we can do is tag it as a variable here, which we can do by highlighting it, naming it, and pressing enter.

Come to think of it, there are a couple of other dynamic words in my prototype that can be categorized as variables.

Early in the conversation, Mr. Wonka recommends “fizzy lifting drinks” and “snozzberries” (which taste like snozzberries).

I’d like to turn these into variables, so that returning customers can get different recommendations every time.

We’ll label these variables “product_recommendation”. Here’s the finished result:

That’s about all we need on the design front.

Now let’s see how to actually export it to Dialogflow.

Completing the export to Dialogflow

The first thing you’ll need is a golden ticket — er, I mean an API Access Token from Dialogflow.

You can find it on the Settings page of your Dialogflow project, which I’ll assume you already have set up:

Copy it to your clipboard and head back to Botsociety.

On the right side of the Build page, look for the “Setup Dialogflow Keys” link and click it.

A dialog box will pop-up, prompting you to enter your Developer Access Token. Paste your code in and click Save.

Nice. The “Setup Dialogflow Keys” link should now be updated to say “Export to Dialogflow”.

Click it and you’re all set! If you want to view your bot in action, simply head into Dialogflow and view it. 😉

All the intents and variables you created in Botsociety will persist, making the process of going back and forth between design and development a piece of cake.

Pretty sweet, huh? 😅

If you have any question, leave them in the comments below!