# Botões com link

## Como criar um botão com link

Para fazer o bot exibir botões com links para os clientes, ao criar (ou editar) um botão, você precisa:

Passo 1. Crie um botão e selecione o tipo para **"Padrão"**:

<div data-with-frame="true"><figure><img src="/files/e46e9896a83ca6572b5f06c3478b0f395de2dce4" alt="" width="563"><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/09fb8425cdbefe770aad86ec8a0de33bf18ecf0d" alt="" width="563"><figcaption></figcaption></figure></div>

Passo 2. No **URL** campo, insira:

а) um link direto:

<div data-with-frame="true"><figure><img src="/files/818d536c47547361fc8f0832431aee5a5d7ec491" alt="" width="563"><figcaption></figcaption></figure></div>

b) Uma variável que contenha um link:

<div data-with-frame="true"><figure><img src="/files/e317bf7c5f34f738172d64ffd0c3153021c50afb" alt=""><figcaption></figcaption></figure></div>

Ao clicar no botão, a URL especificada nas configurações será aberta.

{% hint style="warning" %}
Atenção!&#x20;

Cada mensageiro tem suas próprias particularidades. Por exemplo, no Telegram e no Instagram, você só pode adicionar um link a um **botão inline** (botões no texto).

<img src="/files/5042c2ded075652047ee22b8bcdd5f50114bff63" alt="" data-size="original">
{% endhint %}

## Notificação de clique

Para rastrear quando um cliente clica em um link ou botão e configurar ações subsequentes, use a **"Notificação de clique"** caixa de seleção nas configurações do botão.

<div data-with-frame="true"><figure><img src="/files/8e123f5e2dfbbe53bb1486aa36aa72bc29674526" alt="" width="563"><figcaption></figcaption></figure></div>

Marque a caixa de seleção para receber callbacks (notificações de evento) quando um cliente clicar no botão:

<div data-with-frame="true"><figure><img src="/files/4b6bb52707b61191d0f03946b252fa7ac9eaba52" alt="" width="563"><figcaption></figcaption></figure></div>

Em seguida, clique em **"Editar"** ou **"Adicionar"** (dependendo se você está editando um botão existente ou criando um novo).

### Exemplo

Vamos testar o botão. Depois de clicar nele, você deverá ver uma solicitação para seguir o link.

<div data-with-frame="true"><figure><img src="/files/3a185d67fbfb203cb6d74bd9150def3a18f853f8" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="info" %}
O callback não será recebido até que o cliente clique em **"saiba mais"**.
{% endhint %}

Se o cliente seguir o link, um callback na seguinte forma aparecerá na **Clientes** seção no diálogo do cliente:\
`link_was_pressed #{URL}`, onde `link_was_pressed` é o corpo do callback (evento no projeto), e `#{URL}` é o seu link.

<div data-with-frame="true"><figure><img src="/files/63fc815a26fde89d8017d8d9688e9fbfd9331235" alt=""><figcaption></figcaption></figure></div>

Para configurar uma reação ao callback, crie um bloco de gatilho no qual você especifique o callback no campo do gatilho, ou especifique o callback no gatilho da conexão:

**Opção 1.** Crie um bloco de gatilho que será acionado somente se o callback for recebido:

<div data-with-frame="true"><figure><img src="/files/9a1167495dd777c37f56479689567a87b0e6312a" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Neste exemplo, usamos o **"Trigger"** bloco — ele também será acionado somente se o callback especificado for recebido, mas não removerá o cliente do funil principal.<br>

Você também pode usar outro bloco de gatilho.
{% endhint %}

{% hint style="success" %}
Por favor, observe!

O construtor tem um limite de 500 blocos de gatilho por projeto.
{% endhint %}

**Opção 2:** Use um gatilho de conexão

<div data-with-frame="true"><figure><img src="/files/48656011e1b54afa901e3cd73bab719c2d1786ad" alt="" width="563"><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/473c2065c82f3e0376b0eb1f85b0de024257b074" alt="" width="563"><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="/files/d1106b69818abca9884d1929cccbc1b963341fe3" alt="" width="563"><figcaption></figcaption></figure></div>

Embora ambos exijam o callback para serem acionados, eles afetam o fluxo de forma diferente:

* **Opção 1 (bloco de fallback):** Mantém o usuário no mesmo estado.
* **Opção 2 (conexão):** Avança o usuário para o próximo estado do funil.


---

# 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.mavibot.ai/doc/pt/chatbot/builder/botoes/botoes-com-link.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.