Personalizar widget web

A partir de 31 de outubro de 2024, todos os clientes da Chatlayer que usam o canal Web precisarão mudar para o novo widget web, Web V2. Isso significa que o Web V1 será removido da nossa base de código. Saiba tudo sobre migrar do V1 para o V2.

Atenção:

Este artigo refere-se 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.

Existem várias opções para personalizar o widget web no seu site. Algumas alterações precisam ser feitas dentro do widget de chat e outras no código do seu site. Confira os exemplos abaixo para se inspirar em como personalizar o widget web 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 widget web

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

• Se você remover a propriedade CSS 'z-index' do elemento HTML que está sobrepondo o widget, o widget não deverá mais ficar escondido atrás desse elemento.

• Alternativamente, você pode passar um elemento HTML como opção para nosso SDK; esse elemento HTML será então usado como um 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 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 nosso wrapper padrão.

Borda do balão do 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 enviar

No seu CSS personalizado você pode inserir o código a seguir para centralizar o botão de enviar:

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

Abrir widget automaticamente

O widget web é aberto ao ser 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>

Alterar SUA URL DO SDK pela URL do SDK, conforme descrito aqui.

Alterar cores

Para alterar a cor do texto que o usuário escreve e a cor do placeholder, você pode adicionar um CSS personalizado como 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 alterações a partir da aba de cores na tela de configuração. Se desejar adicionar seu CSS personalizado, algo como isto 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 personalizado conforme suas necessidades, nossos clientes Enterprise e Corporate podem enviar seu próprio CSS. Veja a lista a seguir de classes CSS que você pode usar para personalizar seu Web Widget:

• ChatTitle

• ChatTitleBar

• ChatTitleImage

• wrapper

• 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