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


---

# 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://help.hyperflow.global/docs/primeiros-passos/criando-o-primeiro-fluxo.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.