> For the complete documentation index, see [llms.txt](https://ajuda.livechat360.com.br/crm/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ajuda.livechat360.com.br/crm/administracao/widgets.md).

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