> 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

Insira em seu site um botão flutuante de cadastro para capturar leads, etiquetá-los e enviar mensagens automáticas.

<figure><img src="https://920770335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGYj93MEsVgt6SU5U8KFq%2Fuploads%2Fv7myW3R5yE9xTYxJEACC%2Fimage.png?alt=media&amp;token=3bb30487-a925-43d7-8f32-83eaf2a037e0" 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="https://920770335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGYj93MEsVgt6SU5U8KFq%2Fuploads%2FiLZ6uTWP0Z6i2mONLsl8%2Fimage.png?alt=media&amp;token=ee04495a-3b75-4217-adc2-089403cd8640" 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="https://920770335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGYj93MEsVgt6SU5U8KFq%2Fuploads%2FI92MWSuMJc3YLqIFfaqc%2Fimage.png?alt=media&amp;token=65b870c6-5c1d-4907-8758-2dd5fb86b728" 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="https://920770335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGYj93MEsVgt6SU5U8KFq%2Fuploads%2FvqRceF0ZRodJdEkejs4B%2Fimage.png?alt=media&amp;token=f811a0af-1f40-4275-872d-91fb52761f16" 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="https://920770335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGYj93MEsVgt6SU5U8KFq%2Fuploads%2FKDHOVewXpZF41RB0hFwv%2Fimage.png?alt=media&amp;token=69e684b5-595f-4a5a-9d70-76d2e833fd97" 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="https://920770335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGYj93MEsVgt6SU5U8KFq%2Fuploads%2F4DzH3cKsZwv5aENciWcM%2Fimage.png?alt=media&amp;token=d42bdb0f-9adf-4d17-ada4-7c554c3286c5" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://920770335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGYj93MEsVgt6SU5U8KFq%2Fuploads%2FZQZY8AcU7iDSrwVbhXPI%2Fimage.png?alt=media&amp;token=6ed55993-d9c9-41af-9e67-addfd2220890" 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="https://920770335-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGYj93MEsVgt6SU5U8KFq%2Fuploads%2F2NBxoWvpeS85Oh1DFKTQ%2Fimage.png?alt=media&amp;token=308c854a-2d7b-4693-8ab9-632da22f52ce" 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 %}