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':
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:
Centralizar botão de envio
No seu CSS personalizado, você pode adicionar o seguinte código para centralizar o botão de envio:
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:
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:
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:
Para alterar o tamanho dos botões, você pode adicionar o CSS assim:
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
Atualizado
Isto foi útil?