# Widget de callback

Nesta seção, você aprenderá como configurar e instalar o widget de retorno de chamada no seu site. Este widget de feedback permite que os visitantes entrem em contato facilmente com sua empresa e façam perguntas, ajudando você a:

* Melhorar a interação com o cliente,
* Oferecer suporte rápido,
* Coletar feedback e sugestões valiosos para aumentar a satisfação do usuário.

## Configurações

{% hint style="warning" %}

## Observe

Certifique-se de que [a integração de telefonia](/doc/pt/integrations/other.md) esteja ativada antes de configurar o widget de feedback. Isso é necessário para a instalação. 
{% endhint %}

### Informações principais

#### **Configurações de informações principais**

Esta seção contém dois campos obrigatórios para configurar seu widget.

1. **Nome**\
   Insira um nome para o widget, que será exibido no seu site. Este campo é obrigatório.
2. **Domínio no qual o widget será usado**\
   Insira o domínio do site onde o widget será incorporado. Este campo também é obrigatório. Você pode especificar um site criado em:
   * **MaviBot**
   * **Tilda**
   * Seu próprio **site personalizado**

**Configurações avançadas**\
Na seção de informações principais, você também pode ativar **notificações de retorno de chamada** nas configurações avançadas.

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

{% hint style="info" %}
Os retornos de chamada do widget de feedback não correspondem aos retornos de chamada da telefonia conectada.
{% endhint %}

Você pode configurar mais tarde a resposta do chatbot aos retornos de chamada recebidos.

Você também pode optar por mostrar ou ocultar o logo "Usamos o MaviBot" usando esta caixa de seleção.

### Condições de disparo

<div data-with-frame="true"><figure><img src="/files/35e688fd4859982a3388400ccf301de0f293583f" alt="" width="521"><figcaption></figcaption></figure></div>

#### Intervalo de tempo

Você pode definir o momento em que o widget aparecerá no site. Para isso, use o recurso “Quando exibir o widget”.

1. **Imediatamente**\
   Esta configuração exibirá o widget assim que o usuário abrir o site.
2. **Após um atraso**

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

O widget aparecerá um número especificado de segundos após o usuário abrir o site.

O intervalo de tempo é definido em segundos, com valor mínimo de 1 segundo e máximo de 15 segundos.

3. **Após rolagem**

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

O **Condição "Após rolagem"** significa que, assim que o usuário rolar o site — seja até o final ou apenas uma pequena parte — o widget aparecerá no site após o número de segundos especificado.&#x20;

O valor mínimo do intervalo de tempo é de 1 segundo; o máximo é de 15 segundos.

### Condições de exibição no site

Você pode configurar o widget para ser exibido com ou sem condições específicas. Vamos explorar as condições disponíveis.

1. Parâmetros UTM

{% hint style="info" %}
Para saber mais sobre parâmetros UTM e como usá-los, recomendamos a leitura do artigo, **"**[**Como transferir parâmetros UTM**](/doc/pt/faq/questions/...transferir-rotulos-utm.md)**."**
{% endhint %}

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

Insira o nome do parâmetro necessário no campo correspondente.

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

Em seguida, selecione o operador que corresponde à tag e ao valor:

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

{% hint style="info" %}
Qual é a diferença entre "contém/não contém" e "é igual a/não é igual a"?

A principal diferença é que **"contém/não contém"** verifica se o parâmetro UTM inclui (ou não inclui) um valor específico em qualquer parte dele.

\
Em contrapartida, o operador **"é igual a"** exige uma correspondência exata, ou seja, o sistema procura uma igualdade estrita do valor do parâmetro UTM (e, consequentemente, "não é igual a" é o oposto).
{% endhint %}

Depois, insira o valor necessário para o parâmetro UTM:

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

2. País

Você também pode selecionar a condição "País", que exibe o widget com base no país do IP do usuário.
\
Escolha o país necessário na lista, bem como o tipo de operador ("é" ou "não é").

3. **Dispositivo do usuário**

Se necessário, defina a condição "Dispositivo" para exibir o widget com base no tipo de dispositivo do usuário.

As configurações também incluem um recurso para adicionar vários valores e controlar a exibição do widget. Para fazer isso, basta clicar em **"+ Adicionar valor"** e definir uma ou mais condições adicionais.

### Telefonia

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

## Horário de trabalho

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

O horário de trabalho desempenha um papel fundamental para as caixas de seleção **"Desativar widget fora do horário comercial"** e **"Desativar retornos automáticos fora do horário comercial"**"

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

Quando essas caixas de seleção estão ativadas, o widget ficará inativo e/ou o recurso de retorno automático não funcionará fora do horário de trabalho da sua equipe.

\
Isso é muito conveniente, porque seus clientes não ficarão se perguntando por que solicitaram um retorno e não receberam nenhum.

O **"Ativar retornos agendados em um horário conveniente"** a caixa de seleção também usa o horário de trabalho: ela permite que o sistema ofereça ao cliente o horário disponível mais próximo para uma ligação, de acordo com o horário de trabalho estabelecido.

<figure><img src="/files/6392b03d2fe9353a9af6a131039f6155c9ffb111" alt=""><figcaption></figcaption></figure>

Para configurar o horário comercial, basta usar as seguintes configurações:

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

Você pode configurar cada dia da semana individualmente alternando o botão para a posição desativada.

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

## Aparência

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

As configurações de aparência podem ser divididas em configurações do botão e do widget.

### Configurações do botão

1. Tamanho do botão: você pode escolher entre tamanhos de botão grande, médio e pequeno do widget.

<figure><img src="/files/01ccc9fb16c0e810f075c23cfe393f727d2d59af" alt=""><figcaption></figcaption></figure>

2. Texto do botão

<figure><img src="/files/3ec1ef9f1952c471971074a35280298e55d86f39" alt=""><figcaption></figcaption></figure>

Você pode substituir o ícone de telefone por qualquer texto desejado.

<div><figure><img src="/files/84c5fdc2cfb194269f38677abed7b75d7b2901fe" alt="" width="135"><figcaption></figcaption></figure> <figure><img src="/files/128fa92799e0690e98bb20005c767012b9e7139f" alt=""><figcaption></figcaption></figure></div>

3. Cor do botão: use a ampla paleta de cores para escolher a cor que melhor atenda às suas necessidades.

<div><figure><img src="/files/b89d6e8b95a597c84cc98066587e0f7cb5c03d25" alt=""><figcaption></figcaption></figure> <figure><img src="/files/530ed51fbf4906c538f453af7d6aecd9afc85517" alt=""><figcaption></figcaption></figure></div>

4. Cor do texto do botão: se você preencher o campo vazio para o texto exibido no ícone do widget, poderá alterar o esquema de cores do texto.

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

5. A animação do botão ajuda a melhorar a aparência do seu site e deixá-lo mais dinâmico.

<figure><img src="/files/0b1aabfa9c2568662532b019209f945ba49fba8a" alt=""><figcaption></figcaption></figure>

Como fica cada animação do botão:

<div><figure><img src="/files/c002fbe8b9865708aaa6bddfd25d47529598e797" alt="" width="188"><figcaption><p>Pulso</p></figcaption></figure> <figure><img src="/files/53764922243ea757dee7bcd1c00c64cc45a8388c" alt="" width="188"><figcaption><p>Sacudir</p></figcaption></figure> <figure><img src="/files/024599122a07969e91de25bba27f7287d9a3bf22" alt="" width="188"><figcaption><p>Ripple</p></figcaption></figure></div>

### Configurações do widget

Depois de configurar as opções de aparência do botão, vamos passar para o conteúdo e a aparência do próprio widget.

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

Você pode preencher os campos de texto dentro do widget:

1. Título

<figure><img src="/files/303297a482ee926080d659c03521be587b602414" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/638f9d8d29fba8035770b2aa23871930f08858b8" alt=""><figcaption></figcaption></figure>

2. Subtítulo

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

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

{% hint style="info" %}
Este campo é obrigatório.
{% endhint %}

3. Texto do widget exibido após o início do timer

<figure><img src="/files/102d3b838e444700bf7fb36b931cf16d46d6e3d7" alt=""><figcaption></figcaption></figure>

O texto aparecerá no widget somente depois que o cliente clicar no botão "Ligue para mim de volta" (ou em qualquer outro texto de botão) durante a contagem regressiva do timer.

Você define o timer do widget usando esta configuração:

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

4. Texto do botão

<figure><img src="/files/035410d528dbfb9506aaf1101a2cdeb09a829e41" alt=""><figcaption></figcaption></figure>

Você pode alinhar o texto dentro do widget ao centro, à esquerda ou à direita usando estes botões, como em qualquer editor de texto.

<figure><img src="/files/380caf7fa0246345e75e77b71564e9d7bbafd38a" alt=""><figcaption></figcaption></figure>

Usando a ampla paleta de cores, você pode ajustar o tom ou o gradiente do plano de fundo, as cores dos botões e até definir um padrão.

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

## Como incorporar um widget no seu site

Depois de configurar todas as opções e personalizar a aparência do widget de acordo com o seu design exclusivo, clique no botão **"Adicionar widget"** na parte inferior da tela.

Você será levado à lista de widgets prontos, onde deverá clicar no botão **"Inserir código no site"** .

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

Depois disso, uma janela modal com o script será aberta.

<figure><img src="/files/8922ec832e06692157969efcb4d0892f350d3af2" alt=""><figcaption></figcaption></figure>

Copie o script e vá para as configurações do site onde você inseriu o domínio nas configurações do widget.

Em seguida, insira o código no **cabeçalho HTML** seção.

{% hint style="info" %}
Para incorporar o widget em um site Tilda, copie também o script do widget usando o botão “Inserir código no site” e depois instale-o no site.
{% endhint %}

Pronto! A configuração e a instalação do widget no site estão concluídas!

## Retornos de chamada

**Retornos de chamada disponíveis:**

1. widget\_callback\_later widget\_id: 1 em 23.04.2024 18:00 - um retorno de chamada adiado, em que <mark style="color:verde;">**widget\_callback\_later**</mark>  é o tipo de retorno de chamada; <mark style="color:amarelo;">**widget\_id: 1 em 23.04.2024 18:00**</mark> - indica o ID do widget junto com a data e a hora em que a ligação deve ser feita ao cliente.
2. widget\_callback\_need\_call widget\_id: 1 em 23.04.2024 18:00 - indica que o cliente precisa de uma ligação, em que\ <mark style="color:verde;">**widget\_callback\_need\_call**</mark>  é o tipo de retorno de chamada; <mark style="color:amarelo;">**widget\_id: 1 em 23.04.2024 18:00**</mark> - mostra o ID do widget e a data e hora agendadas para a ligação.
3. widget\_callback\_now widget\_id: 1 - retorno de chamada indicando a necessidade imediata de ligar para o cliente, em que<mark style="color:verde;">**widget\_callback\_now**</mark>  é o tipo de retorno de chamada;  <mark style="color:amarelo;">**widget\_id: 1**</mark>   é o ID do widget;
4. widget\_callback\_need\_call - retorno de chamada indicando que é necessária uma ligação. Este retorno de chamada é enviado se a configuração correspondente estiver ativada.
5. widget\_callback\_now - retorno de chamada indicando a ligação atual.


---

# 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/websites/widgets/widget-de-callback.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.