Entendemos que nem sempre o design do Web Chat satisfaz as necessidades dos clientes, seja por regra de negócio ou por estética. Para tanto, na configuração da aparência do Web Chat, temos a opção Editor de CSS, que cumpre a missão de executar modificações mais avançadas, além de cor, avatar e logo.
O Editor de CSS na aparência do Web Chat serve apenas para modificar a janela do chat. Para mudar o widget ou o botão de início, por exemplo, dê uma olhada neste artigo.
Onde modificar?
O editor está localizado logo depois do campo de escolha do avatar. Você deve clicar na seta para expandi-lo, como no exemplo a seguir.
Cabeçalho
O cabeçalho, ou header, do Web Chat pode ser modificado de algumas formas. Confira abaixo.
Alterar cor de fundo do cabeçalho
Podemos modificar a cor de fundo do cabeçalho, ou seja a cor que fica de fundo do logo, com o seguinte código CSS:
1 2 3.chat-header { background: #32bbed !important; }
Resultado esperado:
Remover cabeçalho
Se você não quiser que apareça o logo e nem o espaço destinado a ele, podemos também remover o cabeçalho, com o seguinte código CSS:
1 2 3.chat-header{ display: none !important; }
Resultado esperado:
Fundo da conversa
O fundo da conversa, ou background, do Web Chat pode ser modificado de algumas formas.
Alterar cor de fundo da conversa
Podemos modificar a cor de fundo da conversa, com o seguinte código CSS:
1 2 3body{ background-color: #f2ffe6 !important; }
Resultado esperado:
Inserir imagem no fundo da conversa
Podemos modificar o fundo inserindo uma imagem. Para tanto, você precisará do link da imagem. Utilizamos o seguinte código CSS:
1 2 3body{ background-image: url(https://i.pinimg.com/236x/8f/ba/cb/8fbacbd464e996966eb9d4a6b7a9c21e--sultan.jpg) !important; }
){kind=link}
Resultado esperado:
Balões da conversa
Os balões da conversa e sua fonte também podem ser modificados.
Modificar tamanho da fonte
Podemos modificar o tamanho da fonte com o seguinte código CSS:
1 2 3.message-thread .message { font-size: 17px !important; }
Resultado esperado:
Alterar cor da fonte
Podemos modificar a cor da fonte do balão com o seguinte código CSS:
1 2 3.message-received .message-content { color: #7d1e78 !important; }
Resultado esperado:
Alterar cor da fonte da resposta
Podemos modificar a cor da fonte do balão da resposta do usuário com o seguinte código CSS:
1 2 3.message-sent .message-content { color: #32bbed !important; }
Resultado esperado:
Modificar cor do balão
Podemos modificar a cor do balão com o seguinte código CSS:
1 2 3.message-received .message-content { background-color: #32bbed !important; }
Resultado esperado:
Alterar cor do balão de resposta
Podemos modificar a cor do balão da resposta do usuário com o seguinte código CSS:
1 2 3.message-sent .message-content { background-color: #32bbed !important; }
Resultado esperado:
Campo de digitação do usuário e ações
O campo de digitação do usuário pode ser modificado de algumas formas. Confira.
Remover clip de upload de arquivo
Podemos remover o clip de upload de arquivo, caso isso não seja útil na sua regra de negócio, com o seguinte código CSS:
1 2 3.chat-footer form .clip.enabled { display: none !important; }
Resultado esperado:
Remover campo de digitação
Podemos também remover o campo de digitação, com o seguinte código CSS:
1 2 3 4 5 6 7 8 9 10 11.chat-footer { display: none !important; } .message-thread { margin-bottom: 0px; } .message-thread-wrapper { min-height: calc(100vh - 22px); }
Resultado esperado:
O nome das classes CSS devem ser exatamente como escritas nessa documentação, assim como o uso do !important em alguns casos. Caso contrário, o seu código não substituirá o código original do Web Chat e a modificação não será feita.