> For the complete documentation index, see [llms.txt](https://c2dbr-pt.gitbook.io/c2dbr/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://c2dbr-pt.gitbook.io/c2dbr/configuracoes-chat2desk/widget-no-site-+-live-chat.md).

# Widget no Site + Live Chat

Nesta aba, aprenderemos a configurar o LiveChat para prestar comunicação assertiva aos clientes

O primeiro passo é acessar as configurações seguindo o caminho Configuração > Widget no Site + Live Chat

<figure><img src="https://617700087-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1mdVFjIyp8q7yeGIckbq%2Fuploads%2FZL9bayqRZiei7xxw8rnS%2Fimage.png?alt=media&amp;token=ddffffde-7153-4a07-93e5-370cbf0a573c" alt=""><figcaption></figcaption></figure>

No painel abaixo, precisamos selecionar o canal que deseja configurar como indicado abaixo:

<figure><img src="https://617700087-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1mdVFjIyp8q7yeGIckbq%2Fuploads%2FhWQwZDvW4BqlDshisMa6%2Fimage.png?alt=media&amp;token=d62a964e-0798-41f6-9775-763177c67b46" alt=""><figcaption></figcaption></figure>

Após selecionar o canal é a hora de configurar o Widget.

<figure><img src="https://617700087-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1mdVFjIyp8q7yeGIckbq%2Fuploads%2FKQ6fzLIypj4Jp1hfthox%2Fimage.png?alt=media&amp;token=37a51bde-859a-4f28-a941-a6d5d6396248" alt=""><figcaption></figcaption></figure>

* 1 – Este botão é para habilitar ou desabilitar o Widget
* 2 – Este campo irá mostrar todos os canais que você possui integrado na plataforma, que são visualizados na coluna do item 6.
* 3 – Nesta parte você poderá arrastar os itens do campo 2 para o campo 3 para adicionar ou remover itens do Widgets.
* 4 e 5 – Nesta opção é possível escolher a forma de visualização do Widget tanto na versão desktop para PC, ou para o Mobile.
* 6 – Neste item você poderá visualizar as alterações no Widget.

**Customização:**

Logo abaixo, você poderá escolher o tema do Widget, como no print:

<figure><img src="https://617700087-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1mdVFjIyp8q7yeGIckbq%2Fuploads%2FmcEimdFKul1L4ZnMmPWN%2Fimage.png?alt=media&amp;token=3356338a-c4dd-41b5-bb8d-1505bbdcd68e" alt=""><figcaption></figcaption></figure>

Na tela abaixo, você poderá escolher o ícone no Widget entre os quais já estão definidos ou escolher um próprio, como indicado no item 2. Você também pode escolher a posição onde ficará localizado o Widget no site, seja na versão mobile ou desktop, além da margem (a distância entre o Widget da lateral do site).

<figure><img src="https://617700087-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1mdVFjIyp8q7yeGIckbq%2Fuploads%2FDxWkfhj7R54WO1mJhg25%2Fimage.png?alt=media&amp;token=5e6ca12f-7b8d-415e-918c-80f0faa6b2f7" alt=""><figcaption></figcaption></figure>

É possível escolher se o Widget vai aparecer de forma expandida como no print abaixo, ou de forma encolhida, apenas mostrando o ícone, que ao clicar se expande.

<figure><img src="https://617700087-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1mdVFjIyp8q7yeGIckbq%2Fuploads%2FviDZq5G0A84JReKmLC5Q%2Fimage.png?alt=media&amp;token=161e19aa-792c-4a1f-a640-d1c9354eb84b" alt=""><figcaption></figcaption></figure>

No print abaixo é possível escolher a ordenação dos ícones de forma horizontal ou vertical, abaixo está habilitado o modo horizontal.

<figure><img src="https://617700087-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1mdVFjIyp8q7yeGIckbq%2Fuploads%2F927AY6Zba6TZy4fsEd3L%2Fimage.png?alt=media&amp;token=0008cfb9-0dd6-4de3-aac8-9b6aede7d3a1" alt=""><figcaption></figcaption></figure>

**Chat online**

Nas configurações abaixo, são configurações relacionadas aos Live Chat

<figure><img src="https://617700087-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1mdVFjIyp8q7yeGIckbq%2Fuploads%2FwhN04XELQDUZ8xJIeAUd%2Fimage.png?alt=media&amp;token=1c2b4b93-b7a3-4d75-be7a-fe1cd27e879f" alt=""><figcaption></figcaption></figure>

* **1 – Você pode programar para que o Live Chat se abra automáticamente no site para seu o visitante após determinados segundos.**
* 2 – Ao habilitar ou não, ao abrir o chat ou ao visitante clicar no chat, você poderá programar se a URA, Mensagens de boas vindas será enviadas após o envio da primeira mensagem.
* 3 – Nesta opção, diferente da opção 2, o sistema irá enviar a URA e Mensagens de Boas Vindas ao clicar no bate-papo. Neste caso, é possível habilitar a opção de Deletar Chats Vazios, para que o sistema apague os chats vazios.

<figure><img src="https://617700087-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1mdVFjIyp8q7yeGIckbq%2Fuploads%2FTqGkNIRiK3mt2brVIXUt%2Fimage.png?alt=media&amp;token=c7987083-bf3a-4667-819e-87475b15da8e" alt=""><figcaption></figcaption></figure>

**No print acima, os itens marcados se referem:**

* 1 – É possível escolher a cor do seu Live Chat
* 2 – Você pode renomear e colocar o nome do seu Live Chat
* 3 – Você pode escolher se o nome e a foto irá ser mostrado para seu visitante no chat no Live Chat.

**Campos obrigatórios no Live Chat**

<figure><img src="https://617700087-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1mdVFjIyp8q7yeGIckbq%2Fuploads%2FNIRB6aRVkoaZIyTzgv4k%2Fimage.png?alt=media&amp;token=b72549df-4958-4085-9fe4-fec679554280" alt=""><figcaption></figcaption></figure>

Você poderá colocar campos obrigatórios dentro do Live Chat, tanto dentro do Horário de Atendimento ou Fora do Horário.

É importante observar que é possível colocar campos obrigatórios para ser preenchido em cada caso. Tais campos são os mesmos que estão presente nas Configurações Gerais.

**Código Fonte do Widget:**\
O sistema gera um código fonte em javascript que você facilmente copia e cola em seu footer ou na página onde deseja mostrar o widget.