3. Collect and display user input
In the previous lesson, we taught the bot to understand the user using Natural Language Processing (NLP). In this lesson, you'll learn how to gather user input for use in the conversation.
Last updated
In the previous lesson, we taught the bot to understand the user using Natural Language Processing (NLP). In this lesson, you'll learn how to gather user input for use in the conversation.
Last updated
On Chatlayer, collecting responses from your users can be done in 3 ways:
by using button clicks, which are better for closed questions, i.e. question with a limited set of possible answers.
by using Collect input blocks, which are better for open questions, i.e. question with an open-ended set of possible answers.
by using entities.
Entities are a special NLP feature to detect information within the user message. You’ll discover more about them in another tutorial.
In this lesson, you’ll learn how to use button clicks and Collect input blocks to save information that can be reused later.
A nice-and-easy way to get input quickly from your users is to add buttons to your chatbot.
We’ll create a block that asks whether if user is a new client, which will then give a different answer.
To add buttons to your bot:
Go to your canvas.
Drag and drop a Message block to your canvas.
The block opens on the right hand side of the screen. Add a Buttons step to your block by clicking on it.
As a Text message, add: Is it your first time shopping with us?
Under it, click on Add button.
Click on Go to.
A Go-to button is a button that, when clicked, goes to another block in the conversation.
Under Title, add I’m new.
Under Go to, create a Message block called ‘Welcome new user’. It is a placeholder where will come back to later in the tutorial.
Repeat the same step to create another button called I’m a client already which goes to a new block that you’ll call Welcome returning user.
Save your changes.
Your buttons are created! Let’s define what happens when they’re clicked now.
Time now to modify elements on your canvas so that the right block leads to the right answer.
Your canvas offers flexible and multiple ways of navigating in it. Learn all about it here.
From the canvas, double click on the last block you created to change its name:
Call it Check user type.
Click the Checkmark icon to save it.
Open Welcome returning user and and change its content to: Great to see you again!
Open Welcome new user and change its content to: Welcome then! It's your very lucky day: we have an extra 5% off for newbies!
The changes should look like so on your canvas:
Good, your user can now click on a button and have a response accordingly. Let’s make sure that this question follows the previous steps of the conversation.
Draw a Go-to connection between Yes to discount and Check user type by holding down the mouse from the bottom-down node of your Yes to discount block.
A Go-to connection between block A and block B means that block B will happen right after block A in the conversation. Go-to connections are respresented as plain arrows on your canvas.
Test your bot. If everything works fine, your conversation should look like so:
You've successfully added buttons to your bot for answering closed questions. Now, let's learn how to pose more open-ended questions.
Remember, our Bee bot project is a lead generation bot. We've reached the part of the bot flow where you'll collect people's details for future use.
On Chatlayer, you can gather open-ended responses during the conversation using Collect input blocks.
Collect input blocks are useful to get input from your user, check it, and save it as a variable that you can re-use later on.
From your canvas, drag and drop a Collect input block.
The block opens to the right-hand side.
Under its Settings, change its name to Ask name.
Come back to the block configuration and add a Text step.
Fill it with the following message: What’s your name?
Under Check if response matches, choose any.
Under Destination variable, create a new variable that you’ll call userName.
Under Go to, create the next block which will be a Collect input block called Ask email.
Save your changes.
Draw a Go-to connection between Welcome new user and Ask name.
Draw a Go-to connection between Welcome returning user and Ask name.
At this stage, your canvas should look like so:
So that the user feels heard, we would like to re-use their name we’ve just collected in the previous block. To do so, we will re-use the {userName} variable.
To reuse a variable inside text:
Open your Ask email block.
Change its content so that it asks Great {userName}, and your email?
Under Check if response matches, select @sys.email.
Chatlayer offers pre-defined entities to recognize emails, phone numbers or URLs. They provide a time-saving way to build your Collect input blocks!
Under Destination variable, create {userEmail}.
As a Go-to, create a placeholder block called Next block.
Save your changes.
Fill your Next block with a placeholder text like This is a next block.
Save your changes.
What you’ve created should look like so on your canvas:
What happens after we implemented something? Testing of course!
You can test your bot from anywhere in the conversation. We’re going to test the small piece of flow we’ve just created only, and see that the variable is indeed understood in the back-end.
To test a bot from the middle of a flow:
Click on the Ask name block.
A toolbar opens. Click on the Test button.
Test your piece of flow with the Collect input blocks. Your conversation should look like this:
The Debugger tab allows you to check your session data and see for yourself that a variable is indeed understood. To do so:
Open the Test your bot window.
Click on the Debugger icon at the top-right corner of the screen.
Read down the Session data and see that {userName} and {userEmail} indeed exist and are filled with the right values.
The Debugger is useful to detect where an issue comes from if something went wrong with the behavior of your bot.
Hurray! You’ve collected a response and used it inside your conversation, just like humans do.
In this lesson, you’ve learned how to:
In the next lesson, we’ll explore how to use variables at any point of the conversation to steer it based on certain conditions.
Your feedback on the tutorial means the world to us! Please, let us know what you think through this short form.
