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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.cosmobots.io/help/bot-builder/canais/chat-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.