# Widget de prova social

O widget de prova social simula pedidos ou compras do seu produto no site, exibindo-os como notificações pop-up.

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

#### **Como o widget funciona**

O widget opera com um princípio psicológico simples: quando os visitantes veem outras pessoas fazendo compras, eles também ficam mais inclinados a comprar.

#### **Principais benefícios**

Integrar este widget ao seu site traz várias vantagens estratégicas:

* **Estimule compras por impulso:** atraia instantaneamente novos clientes ao aproveitar a prova social e a tomada de decisão impulsiva. As pessoas são naturalmente atraídas por itens populares e querem imitar as escolhas dos outros.
* **Construa confiança e fidelidade:** exiba um alto volume de pedidos em tempo real para aumentar a credibilidade. É mais provável que os clientes confiem e permaneçam fiéis a empresas que demonstram uma base de usuários ativa e satisfeita.
* **Engaje com atualizações segmentadas:** mantenha os clientes informados sobre eventos importantes e promoções especiais. Você pode personalizar totalmente com que frequência o widget aparece e quem o vê, com base em critérios específicos de público.

## Como criar e configurar o widget

Para criar um widget, vá até a aba correspondente "Widgets".

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

Em seguida, clique no botão **"Criar um widget".**

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

Um menu suspenso aparecerá exibindo os widgets disponíveis para integração ao site; selecione o que você precisa na lista:

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

Em seguida, você será direcionado para a página de configurações do widget:

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

### Informações gerais

#### Nome do widget

Especifique o nome do seu widget no campo de configuração "Nome do widget":

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

{% hint style="info" %}
O nome do widget é um campo obrigatório e será exibido apenas na seção "Widgets"; ele não ficará visível para seus clientes.
{% endhint %}

#### Domínio

Este é o segundo campo obrigatório, no qual você precisa informar o domínio do seu site:

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

Pode ser um site criado no MaviBot, desenvolvido usando a plataforma Tilda ou seu próprio site personalizado.

### Configurações gerais de conteúdo

As configurações gerais de conteúdo determinam o que será exibido nas notificações pop-up do widget no site.

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

{% hint style="info" %}
Preste atenção aos placeholders como \[name], \[city] e outros — você os usará ao criar mensagens dentro do widget, na aba "Opções do widget".
{% endhint %}

#### Placeholder de nome

Os campos de placeholder de nome permitem exibir nomes especificamente masculinos ou femininos no site:

Para alternar os nomes para masculino ou feminino, use o campo correspondente:

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

Você também pode selecionar nomes com base na localização geográfica:

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

Então a seleção dos nomes será ajustada.

#### Placeholder de cidade

Você também pode escolher nomes com base na localização geográfica:

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

#### **Placeholder de valor**

Você pode inserir um valor no bloco de texto do widget, que pode ser um valor fixo ou um número gerado aleatoriamente dentro de um intervalo especificado:

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

Para inserir um valor exato, use o campo vazio à direita:

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

Se você selecionar o tipo "valor de um intervalo", é necessário inserir os valores mínimo e máximo nos campos para gerar um número aleatório dentro desse intervalo:

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

Se necessário, você também pode definir o número de casas decimais para arredondamento:

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

### Placeholder de variável personalizada

Para inserir suas próprias variáveis personalizadas no widget, clique em **"Adicionar variável"** .

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

Você precisará definir o nome da variável usando colchetes na janela modal que será aberta.

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

Em seguida, insira os valores da variável, garantindo que cada novo valor seja escrito em uma **nova linha** sem vírgulas ou outros separadores:

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

Depois, clique em "Salvar" para armazenar os valores no sistema:

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

Em seguida, você verá que a variável personalizada foi salva nas configurações gerais de conteúdo:

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

Para usar a variável depois, insira o nome dela entre colchetes no campo "Texto principal" na seção "Conteúdo":

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

### Condições de acionamento do widget

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

#### Intervalo de tempo

Você pode definir o momento de exibição do widget no site usando a função "Quando mostrar o widget":

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

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

O widget aparecerá no site após a quantidade especificada de segundos, assim que o usuário o abrir.

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/04756ebc0511c4cdda246d12fce731c67cc6d7d4" alt=""><figcaption></figcaption></figure></div>

A condição "Após a rolagem" significa que os widgets começarão a funcionar no site depois que o usuário rolar uma distância correspondente ao número de pixels definido.

#### Intervalo de tempo

Também há a seguinte condição de acionamento:

1. Duração da exibição:
   * Defina o valor em segundos.
   * Isso determina por quanto tempo o widget permanecerá visível antes que a notificação desapareça.
2. Intervalo entre atrasos
   * Defina o valor em segundos.
   * Isso determina o intervalo entre as exibições do widget — depois que uma notificação aparece, a próxima só será exibida após o número especificado de segundos ter passado.

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

#### Definir uma condição

&#x20;Vamos analisar mais de perto as condições disponíveis.

1. Parâmetros UTM

{% hint style="info" %}
Para saber o que são tags UTM e como usá-las, recomendamos ler o artigo "[Como transferir tags UTM](/doc/pt/faq/questions/...transferir-rotulos-utm.md)."
{% endhint %}

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

Insira o nome da tag necessária no campo designado:

<div data-with-frame="true"><figure><img src="/files/889f31fad2716fbdcc442445798daaa71b660f82" 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/9faa0000b6036f16f394924d67caa1cbb2f6004b" alt=""><figcaption></figcaption></figure></div>

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

A principal diferença é que o operador "contém/não contém" verifica se a tag UTM inclui (ou não inclui) um determinado valor.<br>

Já o operador "é igual" exige correspondência exata, ou seja, o sistema procura uma tag UTM que corresponda exatamente ao valor especificado (e, de forma correspondente, "não é igual" funciona de maneira oposta).
{% endhint %}

Em seguida, insira o valor necessário para a tag UTM:

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

2. País

Você também pode escolher a condição "País", que exibirá o widget com base no país do visitante conforme o IP.

Selecione o país desejado na lista, bem como o tipo de operador ("é" ou "não é"):

3. Dispositivo

Se necessário, aplique a **"Dispositivo"** condição para mostrar o widget de acordo com o tipo de dispositivo usado pelo visitante para acessar o site:

As configurações também incluem um recurso para adicionar vários valores para exibir o widget. Basta clicar em "+ Adicionar valor" e definir uma ou mais condições adicionais, conforme necessário:

## Opções do widget

Depois de concluir a configuração do widget, vá para as **"Opções do widget"** :

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

Nesta aba, você pode definir as configurações de aparência e conteúdo do widget que serão exibidas para seus usuários.

### Conteúdo

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

Você pode inserir o texto estático ou variáveis dinâmicas (por exemplo, `[name]`, `[sum]`, `[city]`) no **Título** e **Texto principal** Nos campos. Quando o widget estiver ativo, o sistema substituirá automaticamente essas variáveis pelos valores reais configurados nas configurações do seu widget.

#### Ícone

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

O ícone será exibido dentro da notificação pop-up:

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

### Aparência

As configurações de aparência geralmente incluem opções para selecionar cores de uma ampla paleta, ajustar o arredondamento dos cantos e configurar os níveis de sombra e transparência:

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

1. Paleta de cores: escolha cores para qualquer elemento do widget — do texto ao fundo do ícone. E você também pode selecionar gradientes.
2. O alinhamento do texto pode ser definido em relação ao centro, à direita ou à esquerda:

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

2. Configurações dos cantos da notificação: você pode escolher cantos arredondados, quadrados ou totalmente circulares para a mensagem no site:

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

#### Ocultar o botão de fechar do widget

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

Esta caixa de seleção ocultará o botão de fechar (×) no canto do widget.

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

### Posição do widget no site

Por padrão, as notificações estão configuradas para aparecer no canto inferior direito da tela. Se necessário, você pode alterar a posição do widget no seu site usando as configurações abaixo.

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

A posição do widget é calculada a partir das bordas inferior e direita da tela. Para movê-lo em direção à borda esquerda, defina o campo **"Margem direita"** para **60%**.

## Como incorporar o widget no site

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

Você será levado à lista de widgets existentes, onde precisará clicar em **"Código de incorporação no site"** botão:

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

Uma janela modal será aberta exibindo o código do script:

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

Copie o script gerado e, em seguida, vá para as configurações do site do domínio que você especificou anteriormente na configuração do widget.

Depois, cole o script no código HTML dentro da seção:

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

{% hint style="info" %}
Para incorporar o widget em um site Tilda, copie o script do widget usando o botão "Embedcode on website" e depois adicione-o à página do seu site.
{% endhint %}

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


---

# 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/proof.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.