Como usar o CSS para personalizar o estilo da janela do seu WebChat

O Editor de CSS disponível na configuração de aparência do canal Web Chat permite personalizações avançadas na interface da janela de chat. Ele é indicado quando os ajustes padrão (como cor, avatar e logo) não atendem às necessidades do projeto, seja por requisitos de negócio ou critérios visuais.

⚠️ Atenção: O Editor de CSS atua exclusivamente sobre a janela do chat, não afetando outros elementos da página onde o Web Chat está incorporado.

Caso você queira personalizar o botão flutuante, é necessário aplicar os estilos diretamente no código do seu site.
👉 Veja alguns exemplos de código ao final deste artigo.

A seguir, veja como personalizar visualmente o Web Chat por meio do Editor de CSS, incluindo modificações no cabeçalho, fundo da conversa, balões de mensagem, fonte e campo de digitação.

Onde modificar?

O editor está localizado logo depois do campo de escolha do avatar. Clique na seta para expandi-lo.

Carregando imagem

💡 Dicas

Use exatamente os nomes de classe CSS apresentados nesta documentação e adicione !important quando indicado, caso contrário, as alterações não terão efeito.
Nos exemplos, utilizamos a cor amarela #FFD300 para facilitar a visualização das áreas modificadas.

Cabeçalho (Header)

Alteração	Código CSS	Resultado
Alterar cor de fundo do cabeçalho (a cor que fica de fundo do logo)	.chat-header { background: #FFD300 !important; }
Remover cabeçalho (para não aparecer o logo e nem o espaço destinado a ele, podemos também remover o cabeçalho)	.chat-header { display: none !important; }

Fundo da conversa (background)

Alteração	Código CSS	Resultado
Alterar cor de fundo da conversa	body { background-color: #FFD300 !important; }
Inserir imagem no fundo da conversa. Necessário o link da imagem.	body { background-image: url(link) !important; }

Balões da conversa e fonte

Alteração	Código CSS	Resultado
Alterar tamanho da fonte	.message-thread .message { font-size: 20px !important; }
Alterar cor da fonte	.message-received .message-content { color: #FFD300 !important; }
Alterar cor da fonte da resposta do usuário	.message-sent .message-content { color: #FFD300 !important; }
Alterar cor do balão	.message-received .message-content { background-color: #FFD300 !important; }
Alterar cor do balão de resposta do usuário	.message-sent .message-content { background-color: #FFD300 !important; }

Campo de digitação do usuário e ações

Alteração

Código CSS

Resultado

Remover clip de upload de arquivo

.chat-footer form .clip.enabled {
display: none !important;
}

Remover campo de digitação

.chat-footer {
display: none !important;
}

.message-thread {
margin-bottom: 0px;
}

.message-thread-wrapper {
min-height: calc(100vh - 22px);
}

⚓

Personalizar o botão flutuante: Exemplos de código

👉 Exemplo 1: Alterar e centralizar o ícone do botão flutuante
(Neste exemplo, o botão recebe uma imagem personalizada como ícone, que é centralizada dentro do botão.)

Código CSS:

<body>
    <script src="https://static.zenvia.com/embed/js/zenvia-chat.hlg.min.js"></script>
    <script>
      var chat = new ZenviaChat('59aef0d85ebad512447fb2fa870bbd5a').embedded('button').build();
    </script>

    <style>
        .znv-chat .znv-float-button {
          background-image: url('http://s3-sa-east-1.amazonaws.com/zenvia-smart/omni-chat/1755610140928.png') !important;
          background-size: 100% !important;
          background-position: center !important;
        }
    </style>
</body>

👉 Exemplo 2: Personalizar formato e cores do botão:
(Neste exemplo, você altera o arredondamento do botão, a cor da borda e a cor de fundo.)Código CSS:

<body>
    <script src="https://static.zenvia.com/embed/js/zenvia-chat.hlg.min.js"></script>
    <script>
      var chat = new ZenviaChat('59aef0d85ebad512447fb2fa870bbd5a').embedded('button').build();
    </script>

    <style>
        .znv-chat .znv-float-button {
          border-radius: 20% !important;
          border-color: rgb(0, 145, 255) !important;
          background-color: white !important;
        }
    </style>
</body>