Personalizar widget da web

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

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.

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:

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':

<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:

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

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

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

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:

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

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

.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