> For the complete documentation index, see [llms.txt](https://help.cosmobots.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.cosmobots.io/help/bot-builder/canais/chat-widget.md).

# Chat Widget

Chat Widget é onde você ajusta todas as configurações referentes à aparência do seu bot.

Vou te mostrar o passo a passo de como realizar essas edições.

1- Dentro do bot que quer formatar a aparência, clique em Canais:

![](/files/-MPAfYevUuB0hdCZkZzD)

2- Clique em Chat Widget

![](/files/-MPAfblKWhAEfmhqZzad)

Aqui você verá algumas opções, vou te explicar para que serve cada uma delas.

![](/files/-MPBFBUAedCaAmuHGc4c)

Vamos lá!

## **Cabeçalho**

Aqui você pode dar um Titulo, Subtitulo e Nome ao seu bot:

![](/files/-MPAfgGxRKxhuuPKAzKA)

## **Imagens & Backgrounds**

![Imagens & Backgrounds](/files/-MPAmCqj8k3EBRvDIt5k)

Aqui você pode alterar o Logo, Avatar, cores e tipos de Backgrounds e fonte:

![](/files/-MPAiBiaZFwFpdQMnVjs)

## **Bolha do Chat**

![Bolha do Chat](/files/-MPAlSzlsTn8fT5sx1_2)

Aqui você consegue realizar alterações na aparência dos balões de conversa do bot e usuário:

![](/files/-MPAkLb43FyLkuQppgpA)

## **Botão de Popup**

![Botão de Popup](/files/-MPAkuCHgeqT3Oao9yih)

Aqui você terá as configurações referentes ao botão de pop up, sendo elas

* Mudar o formato do botão de Circulo para Barra
* Alterar o preenchimento de cor para imagem ou para texto:
* Cor de Background e Botão:

![](/files/-MPApVgm5QVkpi6XUFyh)

Exemplo de botão personalizado:

![](/files/-MPAv0ghjszAFX3yuRJ7)

## Tipos Especiais de Mensagem

![Tipos Especiais de Mensagem](/files/-MPBBH8C2afJ6IHBxXWJ)

Aqui você configura o seu chat para aceitar anexos(imagens, vídeos e etc) e áudios:

![](/files/-MPBAoRTpo_s-bERsLvx)

## Campos do Formulário de Primeiro Contato

Aqui você pode configurar um formulário para que o usuário preencha antes de iniciar a conversa com o bot.

![](/files/-MPBCy-05TrA_J7Zw4R4)

{% hint style="info" %}
Caso queira desabilitar esse formulário, clique em Desabilitar essa seção:
{% endhint %}

![](/files/-MPBDMdGZM2AevX2DSCv)

{% hint style="info" %}
Para adicionar mais campos ao formulário, clique em + Campo, e selecione o campo que deseja adicionar:
{% endhint %}

![](/files/-MPBDjv5PczmOWQtfgnj)

## Avançado

Caso queira personalizar a aparência, aqui você pode incluir o seu próprio HTML: 

![](/files/-MPBExZQ2B8NInykJm3k)

{% hint style="danger" %}
OBS: Toda vez que realizar uma alteração na aparência do seu bot, será necessário clicar em salvar e publicar a div novamente.
{% endhint %}

## Código do Widget

Aqui é onde você insere o seu Chat no site, veja as instruções no próximo tutorial.