Getting Started: Designing a VUI Conversation Mock with Botmock

Obaid Ahmed
botmock
Published in
5 min readSep 20, 2018

With a Conversation Mock Project on Botmock you directly design the conversation messages between the bot and the user in sequence. You can actually see (in the case of a visual bot like Facebook Messenger) or hear (in the case of voice bots like Amazon Alexa) how the conversation will play out as you design it.

Conversation mocks are good when you already know the flow of your conversation and don’t need to create a map for it. For an alternative (and more agile) way of developing a bot, you can try the Conversation Flow editor instead. Check out the article Getting Started: Designing a Conversation Flow with Botmock to learn more about the flow editor.

If you already have a Conversation Flow project, you don’t need to create a mock from scratch for it. You can export it as a mock. First, create a Preview for your conversation flow project. Then, click the Preview menu while in the conversation flow editor. Select Export from the list of previews. The preview will be exported as a new Conversation Mock Project.

Sign in or Sign up:

Sign in into you Botmock account. If you don’t have an account, you can sign up for a FREE 15-day trial with Botmock here. It will only take a few minutes and you will be all set.

1. Setting up your first project

When you first sign, you will see a screen like this:

This is you main Project dashboard. From here you can create, edit and organize your projects into folders.

Click the CREATE NEW PROJECT button to start your first project. You will be presented with a screen to choose your project type:

Click the CREATE NEW MOCK button. On the following screen, enter a project name and select a platform. Let’s name our bot ‘Jeopardy Bot’ and select Amazon Alexa as the targeted platform.

Click the CREATE PROJECT to begin editing your conversation mock!

2. Interface Basics

The main editor interface is very simple:

Project menu

Here you can accomplish project related tasks like Invite a team member, add a New Board, add Comments etc.

Board menu

At the top right side of the Main board, there are some small buttons (icons) you can use to:

  • Delete a project
  • Change the bot’s name and avatar
  • Preview the conversation
  • Share a link for the board to the pubic
  • Duplicate the board
  • Turn the privacy on/off

Hover your mouse over an icon to see what it does.

Main board (message area)

This is the main are where the conversation takes place. You add your messages here by clicking the ADD NEW MESSAGE button.

What types of messages you can add will depend on what platform you choose for the project. For example, if you select the Facebook Messenger platform, you can add almost any type of message supported by Botmock: Text, Image, Button, Carousel, List, Location, Webview etc. But if you select a voice platform like Amazon Alexa, you will only see two types of messages: User Reply and Text (bot response).

Creating an Amazon Alexa voice assistant

For this exercise, we will create a simple Jeopardy Bot that the user can interact with.

Setting up the board (optional):

Click the Settings icon on the Board menu (it’s the second icon that looks like a gear). The Board Settings window will pop up:

We will name it ‘Jeopardy Bot’ and leave the Reply Frequency as default. For the avatar we choose our logo. Click SAVE CHANGES to finish. After the saving is done, you will be returned to the board.

Add a message

Click the ADD NEW MESSAGE button select User Reply form the Component type pop up window. Your Mock board should look like this now:

Double click the ‘User said…’ message or click the Edit icon to edit the message. On the EDIT MESSAGE window that pops up, we will ask Alexa to start the game. Note that, you can upload your own audio file (MP3) for the voice. If no file is provided, Botmock will use it’s built-in text-to-speech converter to create the audio.

Click SAVE to finish editing and save the message.

Add few bot messages using the above method so that your board looks like this:

Add few more messages and we are done:

Now you can Preview/Play the bot (with the voice over) by clicking the Preview icon from the Board menu. You can also export it as a video, share you board and do other things from the Board menu (see section 2. Interface Basics above for more information on the Board menu).

Check out more articles like these on Botmock help docs.

--

--

Obaid Ahmed
botmock

Entrepreneur and a self proclaimed pakistani food aficionado. Founder of @botmock. Recipient of #OBJ40under40.