# Widgets

<figure><img src="/files/YhEBcM7SO5pCykfXcMGr" alt="" width="490"><figcaption></figcaption></figure>

É possível inserir em seu site um botão flutuante de cadastro, que possibilita cadastrar o contato no sistema e, conforme a configuração, etiquetar o contato e disparar mensagens automáticas.

## **Adicionando um novo widget:**

1. Acesse a página de Widgets e localize o botão "*Adicionar widget*" no canto superior direito.
2. Clique no botão para abrir a janela de configuração.

## **Configurando o widget:**

* **Título:** Digite o título que você deseja que apareça na janela flutuante. Por exemplo: "LiveTeste".

<figure><img src="/files/EMz2pZGQodSAZF8Ta3wG" alt="" width="486"><figcaption></figcaption></figure>

* **Posição:** Selecione se o botão flutuante ficará à direita ou à esquerda da tela para uma melhor visualização.
* **Etiqueta:** Escolha a etiqueta que irá identificar o novo contato no seu sistema. Isso é útil para segmentar seus contatos e enviar mensagens personalizadas.
* **Fluxo de conversa:** Associe o widget a um fluxo de conversa pré-definido. O fluxo de conversa determinará as próximas ações que serão realizadas após o cadastro, como enviar uma mensagem de boas-vindas.

{% hint style="info" %}
Se o contato já existir e ele estiver com conversa aberta ou no meio do disparo de um fluxo de conversa, o fluxo de conversa configurado no widget não irá ser disparado.&#x20;
{% endhint %}

* **Campo de e-mail:** Marque esta opção se você deseja coletar o endereço de e-mail dos seus visitantes. Se a opção estiver marcada, o campo será disponibilizado para ser preenchido pelo contato; se não estiver, o campo não será apresentado para ser preenchido.
* **Tamanho do botão:** Escolha o tamanho ideal para o botão, considerando o layout da sua página.
* **Delay do fluxo:** Defina o tempo de espera (em minutos) antes de iniciar o *fluxo de conversa*. Isso pode ser útil para evitar que o usuário seja bombardeado com mensagens imediatamente após o cadastro.

{% hint style="info" %}
Esse campo aparecerá apenas se um fluxo de conversa tiver sido selecionado.
{% endhint %}

* **Texto do botão interno:** Personalize o texto do botão que envia o formulário. Por exemplo: "Enviar".

<figure><img src="/files/Dic0UIWnBH2dscurIGuM" alt="" width="486"><figcaption></figcaption></figure>

* **Texto do botão externo:** Defina o texto que será exibido no botão que abre a janela flutuante. Por exemplo: "WhatsApp".

<figure><img src="/files/B0doQhZWios3NPfeuW6S" alt="" width="486"><figcaption></figcaption></figure>

* **Descrição:** Adicione uma breve descrição abaixo do título para fornecer mais informações aos seus visitantes sobre os benefícios de se cadastrar.

<figure><img src="/files/KgJXSJcLOsbAlkewzsWj" alt="" width="486"><figcaption></figcaption></figure>

## Utilizando o widget

Para utilizar um widget, na página de Widgets, na listagem, clique sobre o botão *Código*:

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

Uma janela com o código do widget irá abrir:

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

Copie o código e cole no ***body*** do seu site. Prontinho!&#x20;

## Editando um widget

Para editar um widget, na página de Widgets, na listagem, clique sobre o botão *Editar*:

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

Feito isso, uma janela irá abrir e que possibilitará fazer a edição de todos os campos que foram configurados.

Após a edição, salve, copei o código novamente e substitua o código anterior no ***body*** do site.

{% hint style="warning" %}
Atenção: a atualização da edição não é automática, é obrigatório que o código seja substituído, conforme a orientação acima, em seu site.
{% endhint %}


---

# 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://ajuda.livechat360.com.br/crm/administracao/widgets.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.