Breve Visão Geral

O artigo de instruções a seguir explica como a aparência do ActionBot pode ser alterada usando CSS.

Antes de alterar o CSS
Se você planeja adicionar seu próprio logotipo e ícones de bot, recomendamos primeiro carregá-los na Biblioteca de Recursos.

1. Carregar todos os arquivos para a Biblioteca de Ativos
2. Copiar o ID
3. Salve os IDs copiados em algum lugar para adicioná-los ao CSS mais tarde

Tutorial em vídeo

Confira este vídeo para obter um tutorial rápido sobre o ActionBot CSS.

Estilo ActionBot usando CSS

Para alterar a aparência do ActionBot,

1. Ir para o Editor
2. Abra o ActionBot (Todos os itens → ActionBot)
3. Go the Bot
4. Clique em Personalizar a aparência do seu bot
5. Clique em Personalizações Avançadas para abrir o Editor de CSS

Alterando a cor do cabeçalho da caixa de diálogo do chat

Seletor de CSS: .chat-wrapper .chat-header

Exemplo de CSS:

.chat-wrapper .chat-header {

background: red !important;
border: red !important;

}

Alterando a cor do texto da mensagem de diálogo

Seletor de CSS: .message .message-text

Exemplo de CSS:

.message .message-text {

cor: vermelho !important;

}

Alterando a cor de fundo da bolha de mensagem

Seletores CSS:

• .message .message-text
• .message .message-text-arrow::before
• .message .message-text-arrow::after
• .message.user-message .message-text
• .message.user-message .message-text-arrow::before
• .message.user-message .message-text-arrow::after

Exemplo de CSS:

.message .message-text {

background: red !important;

}

.message .message-text-arrow::before {

background: red !important;

}

.message .message-text-arrow::after {

background: red !important;

}

Para alterar a mensagem do usuário:

.message.user-message .message-text {

background: red !important;

}

.message.user-message .message-text-arrow::before {

background: red !important;

}

.message.user-message .message-text-arrow::after {

background: red !important;

}

Removendo a sombra das mensagens

Para remover a sombra por trás da caixa de mensagem, adicione a seguinte linha nas instruções:

• .message .message-text
• message .message-text-arrow::before
• .message .message-text-arrow::after

Exemplo de CSS:

.message .message-text {

box-shadow: 0 0px 0px 0 rgba(0,0,0,0) !important;

}

.message .message-text-arrow::before {

box-shadow: 0 0px 0px 0 rgba(0,0,0,0) !important;

}

.message .message-text-arrow::after {

box-shadow: 0 0px 0px 0 rgba(0,0,0,0) !important;

}

Alterando a cor do texto da mensagem de erro

Seletor de CSS: .message .message-text-error

Exemplo de CSS:

.message .message-text-error {

cor: vermelho !important;

}

Alterando o logotipo do cabeçalho

Seletor de CSS: .chat-wrapper .chat-header .chat-logo

Exemplo de CSS:

.chat-wrapper .chat-header .chat-logo {

background: url(https://.....image...) centro de atenção no-repetição !important;
background-size: 82px !important;
largura: 82px !important

}

Alterando a cor do botão ENVIAR

Seletores CSS:

• .input-send .message-btn
• .input-send .message-btn:disabled
• .input-send .message-btn:hover

Exemplo de CSS:

.input-send .message-btn {

background-color: red !important;

}

.input-send .message-btn:disabled {

background-color: red !important;

}

.input-send .message-btn:hover {

background-color: orange !important;

}

Alterando o ícone do ActionBot Bot

Seletores CSS:

• .message-bot-icon
• .message-bot-icon-error

Exemplo de CSS:

.message-bot-icon {

background-image: url(https://.....image...)!important;

}

.message-bot-icon-error {

background-image: url(https://.....image...)!important;

}

Alterando a cor do ícone "remover mensagem"

Seletores CSS:

• .message.can-be-removed .chat-message-remove
• .message.can-be-removed .chat-message-remove:hover

Exemplo de CSS:

.message.can-be-removed .chat-message-remove {

background-color: red !important;
cor: vermelho !important;

}

.message.can-be-removed .chat-message-remove:hover {

background-color: red !important;
cor: vermelho !important;

}

Alterando a cor do ícone de "recomeçar"

Seletores CSS:

• .chat-wrapper .chat-btn-over
• .chat-wrapper .chat-btn-over:hover

Exemplo de CSS:

.chat-wrapper .chat-btn-over {

background-color: orange !important;
cor: preto !important;

}

.chat-wrapper .chat-btn-over { 

background-color: orange !important; 
cor: preto !important; 

}

Alterando a cor do ícone "abrir chat ao vivo"

Seletores CSS:

• .chat-wrapper .chat-btn-live-chat
• .chat-wrapper .chat-btn-live-chat:hover

Exemplo de CSS:

.chat-wrapper .chat-btn-live-chat {

background-color: orange !important;
cor: preto !important;

}

.chat-wrapper .chat-btn-live-chat:hover { 

background-color: green !important; 
cor: preto !important; 

}

Alterando a cor de todos os botões de ação superiores

Seletores CSS: .chat-wrapper .chat-action-btn

Exemplo de CSS:

.chat-wrapper .chat-action-btn {

background-color: orange!important;
cor: preto !important;

}

Alterando a cor do botão de rolagem para baixo

Seletores CSS: .chat-wrapper .chat-scroll-button-inner

Exemplo de CSS:

.chat-wrapper .chat-scroll-button-inner {

background-color: red !important;

}

Alterando a cor de fundo

Seletores CSS: .chat-wrapper .chat-body

Exemplo de CSS:

.chat-wrapper .chat-body {

background-color: purple !important;

}

Alterando a cor da sugestão do Chat ao Vivo

Seletores CSS: .chat-wrapper .live-chat-suggestion

Exemplo de CSS:

.chat-wrapper .live-chat-suggestion {

background-color: orange !important
cor: preto!important
}

Alterando a borda da mensagem do usuário

Seletor de CSS: .message.user-message .message-text

Exemplo de CSS:

.message.user-message .message-text {

borda: 2px preto sólido;
}

Alterando a borda da mensagem sugerida

Seletor de CSS: .chat-wrapper .suggestion-box-text

Exemplo de CSS:

.chat-wrapper .suggestion-box-text {

borda: 2px azul sólido;
}

Alterando a cor do ícone do Chat ao Vivo

Seletores CSS: .chat-wrapper .chat-action-btn .chat-action-btn-icon

Exemplo de CSS:

.chat-wrapper .chat-action-btn .chat-action-btn-icon {

fill: red !important;
}

Alterar posição do contêiner ActionBot

Para alterar a posição do contêiner, vá para o CSS principal do Editor:

1. Ir para o Editor
   
2. Clique em Personalizar
   
3. Vá para a guia CSS
   

O seletor para qualquer coisa relacionada ao contêiner do Bot é: .wm-chatbot .wm-chatbot-container

Assim, você pode combinar o CSS para a posição na tela e a altura e largura no mesmo seletor. O posicionamento absoluto define a posição da caixa do bot a partir das margens superior, direita, inferior e esquerda da página da web.

Exemplo de CSS:

.wm-chatbot .wm-chatbot-container {

altura: 800px !important;
largura: 800px !important;
position: absolute !important;
top: 200px !important;
left: 0px !important;

}