# 3. Coletar e exibir a entrada do usuário

No Chatlayer, coletar respostas dos seus usuários pode ser feito de 3 maneiras:

* usando cliques em botões, que são melhores para perguntas fechadas, ou seja, perguntas com um conjunto limitado de respostas possíveis.
* usando blocos Collect input, que são melhores para perguntas abertas, ou seja, perguntas com um conjunto de respostas possíveis aberto.
* usando entidades.

{% hint style="success" %}
 [Entidades](https://docs.chatlayer.ai/understanding-users/natural-language-processing-nlp/synonym-entities) são um recurso especial de NLP para detectar informações dentro da mensagem do usuário. Você descobrirá mais sobre elas em outro tutorial.
{% endhint %}

Nesta lição, você aprenderá como usar cliques em botões e blocos Collect input para salvar informações que podem ser reutilizadas mais tarde.

<figure><img src="/files/8d5ee5107663f9a15a0317a73325e0274c1c88e0" alt=""><figcaption><p>O que será construído nesta lição.</p></figcaption></figure>

## Etapa 6: Obter respostas por cliques em botões

Uma maneira fácil e rápida de obter entrada dos seus usuários é adicionar botões ao seu chatbot.

Vamos criar um bloco que pergunta se o usuário é um cliente novo, o que dará então uma resposta diferente.

### Adicionar botões

Para adicionar botões ao seu bot:

1. Vá para o seu canvas.
2. Arraste e solte um **Mensagem** bloco para sua tela de fluxo.

<figure><img src="/files/ef728afdb36d52511d5409ebb6e5f5ec78e175aa" alt="" width="375"><figcaption><p>Adicione um bloco Message ao seu canvas.</p></figcaption></figure>

3. O bloco abre no lado direito da tela. Adicione um **Botões** passo ao seu bloco clicando nele.

<figure><img src="/files/2c8f80d475025dcfa50280fba0fb006d7dc67e8e" alt="" width="375"><figcaption><p>Adicione um passo Buttons ao seu bloco.</p></figcaption></figure>

4. Como um **Mensagem de texto**, adicione: *É a sua primeira vez comprando conosco?*
5. Abaixo disso, clique em **Adicionar botão**.
6. Clique em **Ir para**.

<figure><img src="/files/f9d0a9962f38dfb7bac5bf9b939737b317c1b5a4" alt="" width="375"><figcaption><p>Adicione um botão Go-to ao seu bloco.</p></figcaption></figure>

{% hint style="success" %}
Um [Botão Go-to](https://docs.chatlayer.ai/bot-answers/go-to-connections#go-tos-in-buttons) é um botão que, quando clicado, vai para outro bloco na conversa.
{% endhint %}

7. Em **Título**, adicione *Sou novo*.
8. Em **Ir para**, crie um **Mensagem** bloco chamado 'Welcome new user'. É um espaço reservado ao qual voltaremos mais tarde no tutorial.
9. Repita o mesmo passo para criar outro botão chamado *Eu já sou cliente* que vai para um novo bloco que você chamará *Welcome returning user.*

<figure><img src="/files/4c599b2d4b0f29b3d18a6dc9d8502972c0d97d5e" alt="" width="375"><figcaption><p>Preencha seus botões com um título e um Go-to.</p></figcaption></figure>

10. **Salvar** suas alterações.

Seus botões foram criados! Vamos definir o que acontece quando eles forem clicados agora.

### Definir respostas após cliques

Hora de modificar elementos no seu canvas para que o bloco certo leve à resposta certa.

{% hint style="info" %}
Seu canvas oferece maneiras flexíveis e múltiplas de navegar nele. Saiba tudo sobre isso [aqui](https://docs.chatlayer.ai/bot-answers/bot-canvas/canvas-functionalities).
{% endhint %}

#### Alterar o nome e o conteúdo de um bloco

1. No canvas, clique duas vezes no último bloco que você criou para alterar seu nome:
   * Chame-o de *Verificar tipo de usuário*.
   * Clique no **ícone de** marca de seleção para salvá-lo.

<figure><img src="/files/1852da9b3aec40bb221bc4d8d2a1c2e4d2f40098" alt=""><figcaption><p>Altere o nome do seu bloco diretamente no canvas.</p></figcaption></figure>

2. Abra **Welcome returning user** e altere seu conteúdo para: *Ótimo ver você novamente!*
3. Abra **Welcome new user** e altere seu conteúdo para: *Bem-vindo então! Hoje é seu dia de sorte: temos 5% de desconto extra para novatos!*

As alterações devem ficar assim no seu canvas:

<figure><img src="/files/14b03f24f3731e3ef0dae795bcedb7f34a082166" alt="" width="375"><figcaption><p>Cada botão clicado aciona um bloco diferente.</p></figcaption></figure>

Bom, seu usuário agora pode clicar em um botão e receber uma resposta correspondente. Vamos garantir que essa pergunta siga os passos anteriores da conversa.

#### Desenhar conexões Go-to

1. Desenhe uma conexão Go-to entre **Yes to discount** e **Verificar tipo de usuário** mantendo o mouse pressionado a partir do nó inferior do seu **Yes to discount** bloco.

<figure><img src="/files/cccd63376f03f3f5527d71a69779286621fd2295" alt=""><figcaption><p>Desenhe conexões Go-to a partir do seu canvas.</p></figcaption></figure>

{% hint style="success" %}
Um [conexão Ir-para](https://docs.chatlayer.ai/bot-answers/go-to-connections) entre o bloco A e o bloco B significa que o bloco B acontecerá logo após o bloco A na conversa. Conexões Go-to são representadas como setas simples no seu canvas.
{% endhint %}

2. Teste seu bot. Se tudo funcionar bem, sua conversa deve ficar assim:

<figure><img src="/files/aa02c45dc247c5a9b81366cafc6af8ce391ba91e" alt="" width="280"><figcaption><p>Teste o fluxo dos seus botões.</p></figcaption></figure>

Você adicionou botões ao seu bot com sucesso para responder perguntas fechadas. Agora, vamos aprender como fazer perguntas mais abertas.

## Etapa 7: Usar blocos Collect input

Lembre-se, nosso projeto Bee bot é um bot de geração de leads. Chegamos à parte do fluxo do bot em que você coletará os dados das pessoas para uso futuro.

No Chatlayer, você pode coletar respostas abertas durante a conversa usando blocos Collect input.

<figure><img src="/files/607486f34521279356ac730872408b64fd2360a8" alt="" width="134"><figcaption><p>O bloco Collect input.</p></figcaption></figure>

{% hint style="success" %}
[Coletar entrada](https://docs.chatlayer.ai/bot-answers/dialog-state/user-input-bot-dialog) blocos são úteis para obter entrada do seu usuário, verificar e salvar como uma variável que você pode reutilizar mais tarde.
{% endhint %}

### Adicionar um bloco Collect input

1. No seu canvas, arraste e solte um **Coletar entrada** bloco.

<figure><img src="/files/60f5601913a443131e7649ddc16b2b652527f4d7" alt=""><figcaption><p>Adicione um bloco Collect input ao seu canvas.</p></figcaption></figure>

2. O bloco abre no lado direito.
3. Sob seu **Configurações**, altere seu nome para *Perguntar nome*.

<figure><img src="/files/83ba03b92774555faa07f26f7b7c22f0bd4e14b5" alt="" width="330"><figcaption><p>Altere o nome de um bloco nas suas Configurações.</p></figcaption></figure>

4. Volte à configuração do bloco e adicione um **Passo Text**.
5. Preencha-o com a seguinte mensagem: *Qual é o seu nome?*
6. Em **Verifique se a resposta corresponde**, escolha **qualquer**.
7. Em **Variável de destino**, crie uma nova variável que você chamará `userName`.

<figure><img src="/files/484b76bd799f7f412a68184c11239f8afebf6ae7" alt="" width="323"><figcaption><p>Verifique se a resposta de um Collect input corresponde a uma variável.</p></figcaption></figure>

8. Em **Ir para**, crie o próximo bloco que será um **Coletar entrada** bloco chamado *Perguntar email*.

<figure><img src="/files/03f09623d7324ee18ba47091f518cd6f05772ca2" alt="" width="375"><figcaption><p>Criar um Collect input a partir de um Go to.</p></figcaption></figure>

9. **Salvar** suas alterações.
10. Desenhe uma conexão Go-to entre **Welcome new user** e **Perguntar nome**.
11. Desenhe uma conexão Go-to entre **Welcome returning user** e **Perguntar nome**.

Neste estágio, seu canvas deve ficar assim:

<figure><img src="/files/9810b1af650432d93f1c26656df17d6f623a10a8" alt=""><figcaption><p>Como seu canvas deve estar neste estágio.</p></figcaption></figure>

## Etapa 8: Reutilizar uma variável na conversa

Para que o usuário se sinta ouvido, gostaríamos de reutilizar o nome que acabamos de coletar no bloco anterior. Para isso, reutilizaremos a variável {userName}.

{% hint style="success" %}
[página de Variáveis](https://docs.chatlayer.ai/bot-answers/settings/secure-variables-gdpr) são usados para armazenar qualquer informação que o bot saiba sobre um usuário. Eles podem ser reutilizados dentro do texto usando chaves {}. Saiba mais sobre variáveis [aqui](https://docs.chatlayer.ai/bot-answers/settings/secure-variables-gdpr).
{% endhint %}

Para reutilizar uma variável dentro do texto:

1. Abra seu **Perguntar email** bloco.
2. Altere seu conteúdo para que pergunte *Ótimo {userName}, e seu e-mail?*
3. Em **Verifique se a resposta corresponde**, selecione **@sys.email.**

{% hint style="info" %}
O Chatlayer oferece [pré-definidas](https://docs.chatlayer.ai/bot-answers/dialog-state/user-input-bot-dialog#system-entities-input-type) entidades para reconhecer e-mails, números de telefone ou URLs. Elas fornecem uma forma que economiza tempo para construir seus blocos Collect input!
{% endhint %}

4. Em Variável de destino, crie {userEmail}.

<figure><img src="/files/3cf58435b9a16919a08394c7b529aec3728f5eb3" alt="" width="325"><figcaption><p>Salve o e-mail do usuário em uma variável.</p></figcaption></figure>

5. Como um Go-to, crie um bloco placeholder chamado **Próximo bloco**.

<figure><img src="/files/1c6771b42fca1ca5b735bf3d0c07d9e8b7e29b89" alt="" width="334"><figcaption><p>Crie o próximo bloco a partir do Go to.</p></figcaption></figure>

6. **Salvar** suas alterações.
7. Preencha seu **Próximo bloco** com um texto placeholder como *Este é um bloco seguinte*.
8. **Salvar** suas alterações.

O que você criou deve ficar assim no seu canvas:

<figure><img src="/files/3b413630732e1c2ecf3709470045c3551fc3d691" alt=""><figcaption><p>Como seu canvas deve estar neste estágio.</p></figcaption></figure>

O que acontece depois que implementamos algo? Testes, claro!

### Teste seu Collect input

Você pode testar seu bot de qualquer ponto da conversa. Vamos testar apenas o pequeno trecho do fluxo que acabamos de criar e ver que a variável é de fato compreendida no back-end.

#### Testar a partir do meio de um fluxo

Para testar um bot a partir do meio de um fluxo:

1. Clique em **Perguntar nome** bloco.
2. Uma barra de ferramentas se abre. Clique no **Testar** botão.

<figure><img src="/files/2e7330c4377e5ca71a7bdcbf91fe4890d8e2ecbc" alt="" width="374"><figcaption><p>Teste seu bloco a partir do canvas.</p></figcaption></figure>

3. Teste seu trecho de fluxo com os blocos Collect input. Sua conversa deve ficar assim:

<figure><img src="/files/2a107649bd70ad79c21b623730af2e9b475091c8" alt="" width="280"><figcaption><p>Teste seu fluxo Collect input.</p></figcaption></figure>

#### Verificar a variável na sessão do usuário

A guia Debugger permite verificar os dados da sua sessão e ver por si mesmo que uma variável foi realmente compreendida. Para isso:

1. Abra a janela Test your bot.
2. Clique no ícone Debugger no canto superior direito da tela.

<figure><img src="/files/ff25c59ad7c9d08801a74f22d96b251a992142f6" alt=""><figcaption><p>Abra o Debugger a partir da sua janela de Teste.</p></figcaption></figure>

3. Leia para baixo os **Dados da sessão** e veja que {userName} e {userEmail} realmente existem e estão preenchidos com os valores corretos.

<figure><img src="/files/32e66042e1a35b525d6936fe4df0ae40c9c29119" alt=""><figcaption><p>Verifique suas variáveis no Debugger.</p></figcaption></figure>

{% hint style="success" %}
O [Depurador](https://docs.chatlayer.ai/tips-and-best-practices/solving-bot-issues#debugger-tab) é útil para detectar de onde vem um problema se algo deu errado com o comportamento do seu bot.
{% endhint %}

Viva! Você coletou uma resposta e a usou dentro da sua conversa, exatamente como humanos fazem.

## Recapitulação da Lição 3

Nesta lição, você aprendeu a:

* [ ] Adicione botões ao seu chatbot.
* [ ] Direcione a conversa com base em um clique de botão.
* [ ] Obtenha entrada do usuário usando blocos Collect input e armazene-a como uma variável.
* [ ] Reutilize variáveis dentro da conversa.
* [ ] Desenhe conexões Go-to a partir do seu canvas.
* [ ] Altere o nome de um bloco a partir do seu canvas.
* [ ] Teste seu bot a partir de um determinado bloco na conversa.
* [ ] Use o Debugger para verificar se uma variável está funcionando.

## O que vem a seguir

Na próxima lição, exploraremos como usar variáveis em qualquer ponto da conversa para direcioná-la com base em certas condições.

{% content-ref url="/pages/9a777b4a556d8730484fb248a3d75507efd808da" %}
[4. Conduza a conversa com Condições](/chatlayer-documentation-pt-br/comece-rapidamente/leadzy-tutorial/4.-steer-the-conversation-with-conditions.md)
{% endcontent-ref %}

## 💬 Feedback

{% hint style="warning" %}
Seu feedback sobre o tutorial significa muito para nós! Por favor, conte-nos o que você acha através de [este formulário curto.](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/chatlayer-documentation-pt-br/comece-rapidamente/leadzy-tutorial/3.-collect-and-display-user-input.md?ask=<question>
```

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.