> For the complete documentation index, see [llms.txt](https://help.hyperflow.global/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.hyperflow.global/docs/primeiros-passos/criando-o-primeiro-fluxo.md).

# Criando o primeiro fluxo

Aqui na Hyperflow você construir um fluxo simples com muita agilidade! Para demonstrar essa criação na prática, sugerimos que você faça um pequeno exercício criativo.

O passo a passo está a seguir, mas recomendamos que você o faça com o [**Builder** ](https://builder.hyperflow.global/)já aberto e [logado ](/docs/primeiros-passos/acessando-a-plataforma.md)e reproduza cada passo conforme organizado aqui. Vamos lá?

{% hint style="info" %}
💡 **Dica**: ao longo do artigo, os GIF's permitem visualizar cada etapa na prática!
{% endhint %}

### 👉 Meu primeiro bot

#### Criando o primeiro aplicativo

Para aprender a criar seu primeiro app, siga o passo a passo:

<figure><img src="/files/9VJJjHLSzWCbkWemfVFm" alt=""><figcaption></figcaption></figure>

1. Acesse seu [**Builder Hyperflow**](https://builder.hyperflow.global/);
2. Clique em 🚀 **Aplicativos**;

{% hint style="info" %}
💡 **Dica**: você pode criar infinitos apps, dependendo da sua necessidade.
{% endhint %}

3. Clique em **+ Criar aplicativo**;

{% hint style="success" %}
🍕 Nesse exemplo, vamos fazer um bot para uma pizzaria&#x20;
{% endhint %}

4. Dê um **nome** para o seu bot, que será visível somente para administradores. Aqui sugerimos **HyperPizza**;
5. Crie uma **breve descrição**, por exemplo, **Teste HyperPizza**
6. Clique em **Continuar**;
7. Clique em **Criar aplicativo do zero**;

**Pronto**! Você criou seu primeiro app. Agora vamos configurá-lo?

#### Criando o primeiro fluxo

<figure><img src="/files/V8q3gXT6ErRY19q7yTA0" alt=""><figcaption></figcaption></figure>

1. Clique no card **HyperPizza**;
2. Clique em **Fluxos**;
3. Clique em **+Criar fluxo**;
4. Dê um **nome** para seu fluxo. Pode ser **Boas vindas**;

{% hint style="info" %}
Criar **tags** te ajuda na navegação e organização. Por isso, sempre insira tags nos seus projetos! Isso vai te ajudar a encontrar um fluxo com rapidez sempre que precisar.
{% endhint %}

<figure><img src="/files/UVgfiuBgeVzedCQSPIxn" alt=""><figcaption></figcaption></figure>

5. Crie **tags**, dando um **Enter a cada nova tag** inserida. Nossa sugestão são as tags:

* Atendimento;
* Pedidos;
* Teste.

6. Insira a **descrição** do fluxo. Aqui você pode usar **Fluxo de atendimento HyperPizza**;
7. Ative a opção **Permitir transmissão**;
8. Clique em **Criar**;

Pronto! Você já criou o primeiro fluxo e pode começar a editá-lo!

**Criando o primeiro módulo**

{% hint style="info" %}
**O primeiro módulo é padrão**, um nó de início que ativa o bot quando o cliente manda mensagem.
{% endhint %}

<figure><img src="/files/KwMclQp01bsyJvjV0lUH" alt=""><figcaption></figcaption></figure>

1. No **Menu** de módulos, à esquerda da tela, procure por **Enviar mensagem**;
2. **Clique e arraste o módulo** para a tela;
3. Dê um **clique duplo no módulo** para editá-lo;

{% hint style="info" %}
Aqui você consegue criar uma mensagem personalizada para cada canal. Pode também criar uma resposta padrão para todos os canais, usando o **Default**.
{% endhint %}

#### A primeira mensagem padrão

<figure><img src="/files/eOTZvBtmaoQImevFFMJN" alt=""><figcaption></figcaption></figure>

1. Selecione a aba **Default**;
2. Adicione um elemento **Texto**;
3. Na caixa de diálogo, escreva:&#x20;

`“Olá, seja bem-vindo(a) à HyperPizza! 🍕`

`A pizza mais saborosa da região.`

`Como posso te chamar?”`&#x20;

4. Ative a opção **Aguardar resposta do usuário**;
5. Clique em **Salvar Mudanças**;
6. **Conecte o início do fluxo ao novo módulo**, ligando os pontos.

#### Criando a primeira variável

<figure><img src="/files/QUCZ604M88zYIXv7ZP7W" alt=""><figcaption></figcaption></figure>

1. Agora, no **Menu** de módulos, procure por **Variável de usuário**;
2. Selecione, arraste e solte-o na tela;
3. Dê um **clique duplo no módulo** para configurá-lo.
4. Na caixa **Variável**, escreva **nome**;
5. Em Valor, escreva **{{input.text}}**;
6. Marque a opção **Continuar automaticamente**;
7. &#x20;Clique em **Salvar mudanças**;
8. **Conecte os módulos** Enviar Mensagem e Variável do Usuário;

{% hint style="info" %}
💡 Isso vai fazer com que o fluxo busque o nome do cliente, oferecendo um atendimento personalizado.
{% endhint %}

#### Criando a resposta à variável

<figure><img src="/files/KN9YbR4aVbigfokBnjHM" alt=""><figcaption></figcaption></figure>

1. &#x20;**Adicione mais um Enviar Mensagem** no fluxo;
2. &#x20;**Clique duplo no novo módulo**;
3. &#x20;**Adicione** um elemento de **Texto**.
4. &#x20;Insira a resposta:

`Que bom falar com você, {{user.nome}}!`

`Qual pizza você quer hoje?`

#### Criando botões

<figure><img src="/files/04seF1AckdpLGfzuBROc" alt=""><figcaption></figcaption></figure>

1. Clique em **Adicionar Botão**;
2. Preencha com **Calabresa**;
3. &#x20;Adicione outros dois botões: **Frango com catupiry** e **Marguerita**;
4. &#x20;**Salve** as mudanças.

#### Criando a resposta de confirmação

<figure><img src="/files/2ZQv0OJn1c1uXPw4NB3V" alt=""><figcaption></figcaption></figure>

1. &#x20;**Conecte** o Variável de Usuário ao módulo que criou;
2. Adicione mais um **Enviar Mensagem**;
3. &#x20;Mais um elemento de Texto. Insira o seguinte texto:

`Pedido anotado com sucesso! 🍕`

8. **Salve** as mudanças;
9. &#x20;Agora, **conecte** cada um dos sabores de pizza ao módulo que acabou de criar.

#### Publicando seu primeiro fluxo

<figure><img src="/files/uUYEYEvdPsch7ttbZL6k" alt=""><figcaption></figcaption></figure>

1. Clique em **Publicar**;
2. &#x20;Escolha um nome. Sugerimos **Teste**;
3. &#x20;E a **descrição**: Meu primeiro chatbot;
4. &#x20;Clique em **Publicar**;
5. A mensagem Fluxo publicado com sucesso vai aparecer.

🎉 **Pronto! Você acabou de criar seu primeiro chatbot!**��

Este é apenas um fluxo simples frete às infinitas possibilidades da **Hyperflow**. Em um caso real, você poderia pedir o endereço do cliente, perguntar a forma de pagamento, ou mesmo integrar com um banco de dados para que, assim que o cliente entrasse em contato, o bot já buscasse na API nome, endereço, forma de pagamento, entre outros.

Agora, se quiser testar esse bot que acabou de criar, dá uma olhadinha no tutorial em [**Número de teste para WhatsApp**](/docs/canais-de-atendimento/whatsapp/numero-de-teste-para-whatsapp.md)**.**

E aí, ficou com alguma dúvida? Lembre-se, você sempre pode acionar o nosso [**suporte**](https://hyperflow.global/contato/)!

<br>