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.

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.

What will be built in this lesson.

Step 6: Get responses from button clicks

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.

Add buttons

To add buttons to your bot:

1. Go to your canvas.

2. Drag and drop a Message block to your canvas.

Add a Message block to your canvas.

1. The block opens on the right hand side of the screen. Add a Buttons step to your block by clicking on it.

Add a Buttons step to your block.

1. As a Text message, add: Is it your first time shopping with us?

2. Under it, click on Add button.

3. Click on Go to.

Add a Go-to button to your block.

A Go-to button is a button that, when clicked, goes to another block in the conversation.

1. Under Title, add I’m new.

2. Under Go to, create a Message block called ‘Welcome new user’. It is a placeholder where will come back to later in the tutorial.

3. 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.

Fill your buttons with a title and a Go-to.

1. Save your changes.

Your buttons are created! Let’s define what happens when they’re clicked now.

Define responses after clicks

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.

Change a block’s name and content

1. 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.

Change your block name directly from the canvas.

1. Open Welcome returning user and and change its content to: Great to see you again!

2. 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:

Each button clicked triggers a different block.

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 Go-to connections

1. 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.

Draw Go-to connections from your canvas.

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.

1. Test your bot. If everything works fine, your conversation should look like so:

Test your buttons flow.

You've successfully added buttons to your bot for answering closed questions. Now, let's learn how to pose more open-ended questions.

Step 7: Use Collect input blocks

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.

The Collect input block.

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.

Add a Collect input block

1. From your canvas, drag and drop a Collect input block.

Add a Collect input block to your canvas.

1. The block opens to the right-hand side.

2. Under its Settings, change its name to Ask name.

Change a block name from its Settings.

1. Come back to the block configuration and add a Text step.

2. Fill it with the following message: What’s your name?

3. Under Check if response matches, choose any.

4. Under Destination variable, create a new variable that you’ll call userName.

Check if a Collect input responses matches a variable.

1. Under Go to, create the next block which will be a Collect input block called Ask email.

Create a Collect input from a Go to.

1. Save your changes.

2. Draw a Go-to connection between Welcome new user and Ask name.

3. Draw a Go-to connection between Welcome returning user and Ask name.

At this stage, your canvas should look like so:

What your canvas should look like at this stage.

Step 8: Re-use a variable in the conversation

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.

Variables are used to store any information the bot knows about a user. They can be reused inside text by using curly braces {}. Learn more about variables here.

To reuse a variable inside text:

1. Open your Ask email block.

2. Change its content so that it asks Great {userName}, and your email?

3. 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!

1. Under Destination variable, create {userEmail}.

Save the user email under a variable.

1. As a Go-to, create a placeholder block called Next block.

Create the Next block from the Go to.

1. Save your changes.

2. Fill your Next block with a placeholder text like This is a next block.

3. Save your changes.

What you’ve created should look like so on your canvas:

What your canvas should look like at this stage.

What happens after we implemented something? Testing of course!

Test your Collect input

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.

Test from the middle of a flow

To test a bot from the middle of a flow:

1. Click on the Ask name block.

2. A toolbar opens. Click on the Test button.

Test your block from the canvas.

1. Test your piece of flow with the Collect input blocks. Your conversation should look like this:

Test your Collect input flow.

Check the variable in the user session

The Debugger tab allows you to check your session data and see for yourself that a variable is indeed understood. To do so:

1. Open the Test your bot window.

2. Click on the Debugger icon at the top-right corner of the screen.

Open the Debugger from your Test window.

1. Read down the Session data and see that {userName} and {userEmail} indeed exist and are filled with the right values.

Check your variables in the Debugger.

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.

Lesson 3 recap

In this lesson, you’ve learned how to:

• Add buttons to your chatbot.

• Steer the conversation based on a button click.

• Get user input by using Collect input blocks, and store it as a variable.

• Reuse variables inside the conversation.

• Draw Go-to connections from your canvas.

• Change a block’s name from your canvas.

• Test your bot from a certain block in the conversation.

• Use the Debugger to check that a variable is working.

Coming next

In the next lesson, we’ll explore how to use variables at any point of the conversation to steer it based on certain conditions.

4. Steer the conversation with Conditions

💬 Feedback

Your feedback on the tutorial means the world to us! Please, let us know what you think through this short form.