> 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

Olá Cosmonauta! Aqui vamos falar sobre o chat do seu bot

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:

![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPAfYevUuB0hdCZkZzD%2FCanais.gif?alt=media\&token=8cf3ef4a-7397-4d88-b280-d653e2684b96)

2- Clique em Chat Widget

![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPAfblKWhAEfmhqZzad%2FChat%20widget.gif?alt=media\&token=44ddf4b5-14f4-453c-9520-25232c4ee3c3)

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

![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPBFBUAedCaAmuHGc4c%2Fimage.png?alt=media\&token=538f24f1-d94d-49b6-8861-f7b68131af3d)

Vamos lá!

## **Cabeçalho**

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

![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPAfgGxRKxhuuPKAzKA%2FCabe%C3%A7alho.gif?alt=media\&token=7f6c477b-924a-49bc-9370-4abf144a575d)

## **Imagens & Backgrounds**

![Imagens & Backgrounds](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPAmCqj8k3EBRvDIt5k%2Fimagens%20e%20back.png?alt=media\&token=b85d8a48-f624-4fe9-bad1-8a8c9c31676f)

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

![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPAiBiaZFwFpdQMnVjs%2FImg%20e%20background.gif?alt=media\&token=6899ab4e-da85-48c3-abf6-8fe5537cfd87)

## **Bolha do Chat**

![Bolha do Chat](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPAlSzlsTn8fT5sx1_2%2Fbolha.png?alt=media\&token=5eb75de8-154b-4ab5-a410-cb8dea2bbe66)

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

![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPAkLb43FyLkuQppgpA%2FGIF%2022-12-2020%2015-40-22.gif?alt=media\&token=3efb62cd-90d8-4eed-9652-b4e7cc9cafe6)

## **Botão de Popup**

![Botão de Popup](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPAkuCHgeqT3Oao9yih%2Fimage.png?alt=media\&token=3b7d0059-e6ec-4359-9422-0dc920ac354a)

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:

![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPApVgm5QVkpi6XUFyh%2FBot%C3%A3o%20de%20pop%20up.gif?alt=media\&token=4fd262f2-62be-4212-be4e-f26f879aad6c)

Exemplo de botão personalizado:

![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPAv0ghjszAFX3yuRJ7%2Fimage.png?alt=media\&token=db054314-63f0-488a-b7c6-3fb9b1bb1afb)

## Tipos Especiais de Mensagem

![Tipos Especiais de Mensagem](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPBBH8C2afJ6IHBxXWJ%2Fclip.png?alt=media\&token=62e83c0a-cc15-44a5-a3a3-38b2a5774ff5)

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

![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPBAoRTpo_s-bERsLvx%2Fespeciais.gif?alt=media\&token=0dc98abb-bdf3-4699-b74a-e70ecbf6184b)

## 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.

![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPBCy-05TrA_J7Zw4R4%2Fform%20primeiro%20contato.gif?alt=media\&token=00481efe-aa02-4969-8b1a-c845d3287e3e)

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

![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPBDMdGZM2AevX2DSCv%2Fdesabilitar.PNG?alt=media\&token=6ce0924e-9961-4089-83b2-bdbd77ed1c92)

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

![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPBDjv5PczmOWQtfgnj%2F%2Bcampo.PNG?alt=media\&token=f17d4c3c-d375-4ded-9539-a407fc07ceb6)

## Avançado

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

![](https://1728608858-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LSnqDgLbXBccdKMOdEJ%2F-MPAJuv1Qwroj3VAzKZs%2F-MPBExZQ2B8NInykJm3k%2Fhtml.gif?alt=media\&token=86189b40-3e8f-4e9c-8012-ef7787d40cb5)

{% 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.