> For the complete documentation index, see [llms.txt](https://docs.chatlayer.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chatlayer.ai/chatlayer-documentation-pt-br/channels/all-channels/web/webwidget/customize-web-widget.md).

# Personalizar widget da web

{% hint style="danger" %}
**A partir de 31 de outubro de 2024, todos os clientes da Chatlayer que usam o canal Web precisarão migrar para o** [**novo widget da web, Web V2**](/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2.md)**.** Isso significa que o Web V1 será removido da nossa base de código. Saiba tudo sobre [a migração da V1 para a V2](/chatlayer-documentation-pt-br/channels/all-channels/web/web-v2/from-web-v1-to-v2.md).
{% endhint %}

{% hint style="warning" %}
Atenção:

Este artigo se refere ao nosso widget web legado, que será descontinuado no futuro.

Todos os widgets web recém-criados devem seguir o [documentação do Web V2](https://docs.chatlayer.ai/channels/web-v2).
{% endhint %}

Há várias opções para personalizar o web widget no seu site. Algumas alterações precisam ser feitas dentro do widget de chat, e algumas delas no código do seu site. Confira os exemplos abaixo para se inspirar sobre como personalizar o web widget para a sua marca.

## Alterar largura / altura da janela de chat

Você pode alterar a largura / altura do seu widget no wrapper do seu site:

```css
body .chatlayer-chatbox-wrapper{
 width: 350px;
 max-width: 100%;
 max-height: 560px;
}
```

## Sobreposição do web widget

Se você estiver enfrentando um caso em que o seu site está sobre o web widget e ele não está visível corretamente, você pode alterar isso com o z-index:

* Se você remover a propriedade CSS 'z-index' desse elemento HTML que está sobrepondo o widget, o widget não ficará mais oculto atrás desse elemento.
* Como alternativa, você pode passar um elemento HTML como opção para o nosso SDK; esse elemento HTML será então usado como contêiner para exibir o widget de chat.\
  Um exemplo de uso de um elemento wrapper, assumindo que sua página contenha um elemento HTML com o id 'chatlayer-sdk-wrapper':<br>

```markup
<script src=“YOUR_CHATBOX_URL" onload=‘chatlayer({ wrapper: document.querySelector('#chatlayer-sdk-wrapper') })’ async></script>
```

Isso permitirá que você aplique CSS diretamente ao '#chatlayer-sdk-wrapper' para posicioná-lo na sua página, em vez de usar o nosso wrapper padrão.

## Borda do balão de chat

Você pode estilizar o balão com uma borda extra na cor de sua escolha usando o seguinte no CSS personalizado (disponível apenas para clientes Enterprise e Corporate) no seu widget de chat:

```css
.chatBalloon-user{
 border: 1px solid red;
}
```

## Centralizar botão de envio

No seu CSS personalizado, você pode adicionar o seguinte código para centralizar o botão de envio:

```css
.ChatInputContainer{
 display: flex;
 align-items: center;
}
```

## Abrir widget automaticamente

O web widget é aberto quando clicado, mas também pode abrir automaticamente. Isso pode ser alterado no HTML da sua página. No exemplo abaixo, o chatbot abre a cada 10 segundos:

```markup
<script>
 const initChatlayer = () => {
 const chatlayerInstance = chatlayer();
 chatlayerInstance.open();

 setInterval(()=>{
      chatlayerInstance.open();
 }, 10000)
  }

</script>
<script src="<YOUR_SDK_URL>" referrerpolicy="no-referrer-when-downgrade" onload='initChatlayer()' async></script>
```

Altere `SUA URL DO SDK` com a URL do SDK, conforme descrito [aqui](https://docs.chatlayer.ai/channels/webwidget#embedding-the-web-widget-on-your-website).

## Alterar cores

Para alterar a cor do texto que o usuário digita e a cor do placeholder, você pode adicionar um CSS personalizado como o abaixo:

```css
.ChatInputText-textarea:focus{ 
color: #404040; 
} 
.ChatInputText-textarea{ 
border-color: #DCDCDC; 
} 
.ChatInputText-textarea::placeholder{ 
color: #767676; 
}
```

Para alterar a cor do balão de chat, você já pode fazer essas mudanças na aba de cores na tela de configuração. Se quiser adicionar o seu CSS personalizado, algo assim funcionaria:

```css
.chatBalloon-bot{ 
background-color: #E8F5FA; 
color: #404040; 
font-size: 14px; 
font-family: "Open Sans"; 
} 
.chatBalloon-user{ 
background-color: #E8F5FA; 
color: #404040; 
font-size: 14px; 
font-family: "Open Sans"; 
}
```

Para alterar o tamanho dos botões, você pode adicionar o CSS assim:

```css
.SendIconImage { 
height: 2em; 
padding: 1em; 
}
```

## CSS personalizado

Para deixar seu Chat Widget com uma aparência personalizada conforme suas necessidades, nossos clientes Enterprise e Corporate podem enviar seu próprio CSS. Consulte a lista a seguir de classes CSS que você pode usar para personalizar o seu Web Widget:

* ChatTitle
* ChatTitleBar
* ChatTitleImage
* contêiner
* BotImage
* userImage
* container
* chatBalloon-default
* chatBalloon-user
* chatBalloon-bot
* chatBalloon-agent
* ChatInputContainer
* ChatInputText-container
* ChatInputText-textarea
* chatQuickReplies-container
* buttons-image
* buttons-textimage
* buttons-default
* chatTemplate-buttonTemplate-container
* chatTemplate-buttonTemplate-buttons-default
* chatTemplate-buttonTemplate-buttons-unknown
* chatTemplate-buttonTemplate-buttons-header
* chatTemplate-listTemplate-button
* chatTemplate-listTemplate-container
* chatTemplate-element-container
* chatTemplate-element-column
* chatTemplate-element-image
* chatTemplate-element-title
* chatTemplate-element-subtitle
* chatTemplate-element-button
* chatTemplate-chatImage-container
* chatTemplate-chatVideo-container
* chatTemplate-chatAudio-container
* chatTemplate-chatClarousel-element-container
* chatTemplate-chatCarousel-element-image
* chatTemplate-chatCarousel-element-title
* chatTemplate-chatCarousel-element-subtitle
* chatTemplate-chatCarousel-element-button
* chatTemplate-chatCarousel-element-prevButton
* chatTemplate-chatCarousel-element-prevButtonIcon
* chatTemplate-chatCarousel-element-nextButton
* chatTemplate-chatCarousel-element-nextButtonIcon


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.chatlayer.ai/chatlayer-documentation-pt-br/channels/all-channels/web/webwidget/customize-web-widget.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.