# 3. Collect and display user input 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. {% hint style="success" %} [Entities](https://docs.chatlayer.ai/understanding-users/natural-language-processing-nlp/synonym-entities) are a special NLP feature to detect information within the user message. You’ll discover more about them in another tutorial. {% endhint %} In this lesson, you’ll learn how to use button clicks and Collect input blocks to save information that can be reused later.

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

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

4. As a **Text message**, add: *Is it your first time shopping with us?* 5. Under it, click on **Add button**. 6. Click on **Go to**.

{% hint style="success" %} A [Go-to button](https://docs.chatlayer.ai/bot-answers/go-to-connections#go-tos-in-buttons) is a button that, when clicked, goes to another block in the conversation. {% endhint %} 7. Under **Title**, add *I’m new*. 8. Under **Go to**, create a **Message** block called ‘Welcome new user’. It is a placeholder where will come back to later in the tutorial. 9. 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.

10. **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. {% hint style="info" %} Your canvas offers flexible and multiple ways of navigating in it. Learn all about it [here](https://docs.chatlayer.ai/bot-answers/bot-canvas/canvas-functionalities). {% endhint %} #### 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.

2. Open **Welcome returning user** and and change its content to: *Great to see you again!* 3. 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.

{% hint style="success" %} A [Go-to connection](https://docs.chatlayer.ai/bot-answers/go-to-connections) 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. {% endhint %} 2. 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. ## 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.

{% hint style="success" %} [Collect input](https://docs.chatlayer.ai/bot-answers/dialog-state/user-input-bot-dialog) blocks are useful to get input from your user, check it, and save it as a variable that you can re-use later on. {% endhint %} ### Add a Collect input block 1. From your canvas, drag and drop a **Collect input** block.

Add a Collect input block to your canvas.

2. The block opens to the right-hand side. 3. Under its **Settings**, change its name to *Ask name*.

4. Come back to the block configuration and add a **Text step**. 5. Fill it with the following message: *What’s your name?* 6. Under **Check if response matches**, choose **any**. 7. Under **Destination variable**, create a new variable that you’ll call `userName`.

Check if a Collect input responses matches a variable.

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

9. **Save** your changes. 10. Draw a Go-to connection between **Welcome new user** and **Ask name**. 11. 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. {% hint style="success" %} [Variables](https://docs.chatlayer.ai/bot-answers/settings/secure-variables-gdpr) 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](https://docs.chatlayer.ai/bot-answers/settings/secure-variables-gdpr). {% endhint %} 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.** {% hint style="info" %} Chatlayer offers [pre-defined](https://docs.chatlayer.ai/bot-answers/dialog-state/user-input-bot-dialog#system-entities-input-type) entities to recognize emails, phone numbers or URLs. They provide a time-saving way to build your Collect input blocks! {% endhint %} 4. Under Destination variable, create {userEmail}.

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

6. **Save** your changes. 7. Fill your **Next block** with a placeholder text like *This is a next block*. 8. **Save** your changes. What you’ve created should look like so on your canvas:

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.

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

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

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

{% hint style="success" %} The [Debugger](https://docs.chatlayer.ai/tips-and-best-practices/solving-bot-issues#debugger-tab) is useful to detect where an issue comes from if something went wrong with the behavior of your bot. {% endhint %} 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. {% content-ref url="4.-steer-the-conversation-with-conditions" %} [4.-steer-the-conversation-with-conditions](https://docs.chatlayer.ai/start-quickly/leadzy-tutorial/4.-steer-the-conversation-with-conditions) {% endcontent-ref %} ## 💬 Feedback {% hint style="warning" %} Your feedback on the tutorial means the world to us! Please, let us know what you think through [this short form.](https://forms.office.com/Pages/ResponsePage.aspx?id=ropROyGJe0qEl2GddWziDlEYn6XpsIRDjnCtdRk8L21UMFZMMlAzN0tHOTI4UjMxVTgzTVAwTE5aOCQlQCN0PWcu) {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.chatlayer.ai/start-quickly/leadzy-tutorial/3.-collect-and-display-user-input.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.