# 1. Novo bot, novo bloco

{% hint style="warning" %}
&#x20;Para começar, você precisa de uma conta Chatlayer. **Ainda não tem uma conta?** [Crie uma conta de teste aqui](https://chatlayer.ai/try-now/). Está tendo um problema com sua conta? Entre em contato com nossa equipe de suporte em <support@chatlayer.ai>.
{% endhint %}

Neste capítulo vamos construir o início da conversa.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FjyNOzc74oowF4Ess5Mvd%2FChooChoo%20tutorial%20rework%20(4)%20(1).jpg?alt=media&#x26;token=2f73298a-4bc4-4612-ab6c-f38e573cf084" alt="" width="375"><figcaption><p>O que construiremos na Lição 1 do Leadzy.</p></figcaption></figure>

## Passo 1: Crie um novo bot

Para criar um novo bot:

1. Ir para [app.chatlayer.ai](http://app.chatlayer.ai) e faça login usando suas credenciais.
2. No canto superior direito da tela, clique em **Novo bot** botão.
3. Digite *Leadzy* como nome, para que você possa encontrá-lo facilmente novamente.
4. Selecione **Inglês** como seu idioma principal.

{% hint style="success" %}
O [idioma primário](https://docs.chatlayer.ai/understanding-users/multilanguage-bots#primary-language-vs.-secondary-languages) é o idioma que seu bot usará. Se você quiser que seu bot seja multilíngue, você poderá alterar isso depois.
{% endhint %}

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FLRjb0eDCdLvoKDT2DElV%2FScreenshot%202024-03-19%20at%2016.20.06.png?alt=media&#x26;token=5b05d0f6-5f7d-4be3-bdec-57116307c3f2" alt=""><figcaption><p>Crie um novo bot e chame-o de Leadzy.</p></figcaption></figure>

5. Clique em **Criar**.

Seu bot é aberto, mostrando:

* Seu bot [canvas](https://docs.chatlayer.ai/bot-answers/bot-canvas) no meio da tela, que é uma representação visual da arquitetura do seu chatbot. Um monte de [blocos de conversa padrão](https://docs.chatlayer.ai/bot-answers/dialog-state#default-blocks) aparecem neste canvas, mas não vamos nos preocupar com isso agora.
* O [**Fluxos**](https://docs.chatlayer.ai/bot-answers/bot-canvas/how-to-organize-your-flows) de conversa à esquerda.&#x20;
* O menu geral do seu chatbot bem à esquerda.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2F1CyrofALcafzo6LLsAiR%2FScreenshot%202024-03-19%20at%2016.21.56.png?alt=media&#x26;token=79503f1b-29e4-424f-ad34-a79ed6eb0381" alt=""><figcaption><p>A visualização do canvas quando você abre seu chatbot.</p></figcaption></figure>

{% hint style="info" %}
Para navegar pela tela, você pode dar zoom in ou out usando a roda de rolagem, ou com seu trackpad. Você também pode clicar e arrastar para se deslocar pela árvore de blocos.
{% endhint %}

{% hint style="success" %}
**Fluxos** são uma forma de agrupar blocos que tratam do mesmo tópico ou caso de uso. Saiba mais sobre eles [aqui](https://docs.chatlayer.ai/bot-answers/bot-canvas/how-to-organize-your-flows).
{% endhint %}

Seu chatbot foi criado com sucesso!

## Passo 2: Edite um bloco de Mensagem

Agora é hora de fazer seu chatbot dizer algo.

{% hint style="success" %}
Um **Mensagem** **bloco** é um tipo de mensagem onde seu bot irá exibir algo para o usuário. Saiba mais sobre blocos [aqui](https://docs.chatlayer.ai/bot-answers/dialog-state).
{% endhint %}

### Edite o bloco de Introdução

Para começar, vamos modificar seu bloco de introdução.

{% hint style="success" %}
O **Introdução** bloco é um bloco padrão que serve como a primeira mensagem que seus usuários verão. É onde seu bot se apresenta e explica suas funcionalidades. Introduções são cruciais para definir expectativas apropriadas para o bot.
{% endhint %}

Para editar o **Introdução** bloco:

1. Do seu canvas, clique no **Introdução** bloco.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FmqSyA3hKFWfAxbLb8uP0%2FScreenshot%202024-02-01%20at%2015.16.12.png?alt=media&#x26;token=9737b18c-0ce3-4c74-a9a7-50ae00c5ce3b" alt=""><figcaption><p>Seu bloco de Introdução é onde a conversa começa. Ele vem preenchido com uma mensagem padrão.</p></figcaption></figure>

2. O bloco abre no lado direito da tela. Embaixo de **Mensagem de texto**, exclua a mensagem padrão e substitua-a por:

*Olá! Sorte sua, hoje temos 15% de desconto em toda a seleção! Você tem interesse em receber um código de desconto por e-mail?*

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FgRnJvEVRWVq2xDcRtgpM%2FScreenshot%202024-02-01%20at%2015.22.09.png?alt=media&#x26;token=68bd1380-2e53-4737-9f74-399ade4a1cbc" alt=""><figcaption><p>Edite a mensagem dentro do seu bloco de Introdução.</p></figcaption></figure>

3. Clique **Salvar**.

Seu bloco de Introdução agora está modificado e você pode vê-lo no seu canvas.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FqnSpT02GqbSto00FztEZ%2FScreenshot%202024-03-06%20at%2015.01.29.png?alt=media&#x26;token=156ba6d6-71b1-4686-9196-3307ba77ca7f" alt=""><figcaption><p>Seu bloco de Introdução após a modificação.</p></figcaption></figure>

### Adicione mensagens alternativas

Para tornar a conversa natural, gostaríamos de ter diferentes formas de transmitir a mesma mensagem de introdução.

{% hint style="success" %}
Uma mensagem alternativa é uma mensagem de texto que será alternada aleatoriamente com outra para que a conversa pareça mais humana.
{% endhint %}

Para adicionar mensagens alternativas a uma mensagem do bot:

1. Abra seu bloco de Introdução clicando nele.
2. Em **Mensagem de texto**, clique em **+** **Adicionar mensagem alternativa**, e cole a seguinte mensagem:

   *Olá! Boas notícias! Atualmente estamos oferecendo 15% de desconto em toda a nossa seleção! Você gostaria de receber um código por e-mail?*
3. Faça o mesmo para outra mensagem alternativa:

   *Notícia empolgante! Atualmente temos uma oferta especial de 15% de desconto em toda a nossa seleção! Você teria interesse em receber um código de desconto por e-mail?*

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FBRfbxyDBCCuLAYdtZHoj%2FScreenshot%202024-02-01%20at%2015.24.35.png?alt=media&#x26;token=46dbc617-d8b9-4e93-83c8-eba650ad41e1" alt=""><figcaption><p>Adicione mensagens alternativas.</p></figcaption></figure>

4. Clique **Salvar**.

Agora vamos ver como podemos testar se o bot se comporta como esperado.

## Passo 3: Teste seu bot

O Chatlayer oferece uma maneira simples de testar seu bot sempre que você fizer uma modificação.

### Execute testes no Emulador

Para testar seu bot:

1. Clique no botão de play no canto superior direito do canvas do seu bot.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2F7A62dqAzCOS7jWm6Jkzw%2FScreenshot%202024-02-02%20at%2009.23.59.png?alt=media&#x26;token=61d787b3-a4a2-4209-8880-04e1d2abc04d" alt="" width="225"><figcaption><p>Teste seu bot.</p></figcaption></figure>

2. Um **Teste seu bot** uma janela aparece no lado direito. Ela inicia automaticamente a conversa, o que significa que o bot exibirá seu **Introdução** bloco. A partir daí, digite algo como resposta, por exemplo ‘*Sim, adoraria ter um código de desconto*’.
3. Pressione Enter no seu teclado para enviar sua mensagem.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FIl6R9JpKFLhWSI52aJ5E%2FScreenshot%202024-02-02%20at%2009.27.03.png?alt=media&#x26;token=330f849b-0565-4fc1-8c9c-d6504c4d6b1a" alt="" width="285"><figcaption><p>Teste seu bot com esta frase. Este é o resultado esperado.</p></figcaption></figure>

4. O bot não entendeu você — e isso é absolutamente normal! Por enquanto, tudo o que ensinamos ao nosso bot é dizer uma saudação.
5. Clique no botão Reiniciar conversa no canto superior direito da janela de teste.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2F1lkN443NWBUWu1vohjGK%2FScreenshot%202024-02-02%20at%2009.28.33.png?alt=media&#x26;token=2bd3bacd-e0ff-4cda-a332-56e6d74faa23" alt="" width="291"><figcaption><p>Reinicie a conversa para executar um novo teste.</p></figcaption></figure>

6. Observe que a mensagem de Introdução exibida agora está diferente. Isso porque foram adicionadas mensagens alternativas a ela, e elas são exibidas de forma aleatória.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2Fa2eGAcXashURDq4eKnmo%2FScreenshot%202024-03-06%20at%2015.07.43.png?alt=media&#x26;token=f553ed2a-90c4-49dd-a5de-b731a23f3101" alt="" width="355"><figcaption><p>Ao executar vários testes, você notará que as mensagens se alternam porque você adicionou mensagens alternativas.</p></figcaption></figure>

Você acabou de executar um teste com sucesso: seu bot tem o comportamento esperado!

### Execute testes no sandbox do WhatsApp

Dada a alta demanda pelo WhatsApp entre nossos clientes, o Chatlayer fornece um método fácil para testar suas conversas diretamente na plataforma.

{% hint style="info" %}
Por que executar testes em um sandbox do WhatsApp? Cada canal tem suas [limitações](https://docs.chatlayer.ai/channels/multi-channel#channel-comparison), portanto você vai querer garantir que seus testes sejam executados sem problemas nos canais que você escolher.
{% endhint %}

Para executar testes dentro do sandbox do WhatsApp:

1. Abra seu **Teste seu bot** janela.
2. No canto superior esquerdo da janela de Teste, selecione **sandbox do WhatsApp**.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FiM2fYgfqAxvIEfyCSFb3%2FScreenshot%202024-02-02%20at%2009.44.19.png?alt=media&#x26;token=fee387d4-d3eb-4a82-b76f-52144fdb126b" alt=""><figcaption><p>Teste seu bot no WhatsApp usando o sandbox do WhatsApp.</p></figcaption></figure>

3. Um código QR é exibido na tela, com um link abaixo. Ou:
   * Escaneie o código QR com seu telefone, para que o aplicativo do WhatsApp no seu telefone abra.
   * Clique no link abaixo do código QR, para que você possa abrir o aplicativo web do WhatsApp.
4. Qualquer que seja sua escolha, clique em **Continuar** para conversar.
5. Envie a mensagem começando com ‘join’ que está pré-preenchida no campo de texto.
6. Você receberá uma confirmação de que está tudo pronto no sandbox. Diga algo ao bot para iniciar a conversa conforme você a projetou.

<figure><img src="https://181262846-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LLTwFwbOqJj4dDhg8Ju%2Fuploads%2FXyDJD1hXMx2lErDUBSpa%2FScreenshot%202024-02-02%20at%2009.47.26.png?alt=media&#x26;token=962421b9-7d72-45d6-ab98-30b77f5a55ee" alt=""><figcaption><p>Siga estes passos para iniciar uma conversa no sandbox do WhatsApp.</p></figcaption></figure>

Nosso bot também está funcionando no WhatsApp, viva!

## Recapitulação da Lição 1

Parabéns, você acabou de dar seus primeiros passos! Nesta lição, você aprendeu a:

* [ ] Criar um novo bot a partir da página inicial do Chatlayer.
* [ ] Editar um bloco de Mensagem e adicionar mensagens alternativas a ele para que pareça natural. Para fazer isso, pegamos como exemplo o bloco padrão de Introdução.
* [ ] Testar suas alterações na janela de Teste.
* [ ] Executar testes no WhatsApp usando o sandbox do WhatsApp.

## O que vem a seguir

Em seguida, ensinaremos seu bot a entender as respostas dos usuários.

{% content-ref url="2.-understand-your-users" %}
[2.-understand-your-users](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/comece-rapidamente/leadzy-tutorial/2.-understand-your-users)
{% 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 %}