Como usar CSS personalizado para estilizar o chat web

O que você vai aprender

Como usar CSS personalizado para alterar a aparência do chat web da Klaviyo — o inicializador, a janela de chat, os balões de mensagem e o Composer de mensagens. Você vai aprender quais variáveis de tema e ganchos de classe usar e como evitar seletores que podem mudar quando a Klaviyo atualizar a interface.

Este artigo se aplica se você usa o chat web sozinho ou como parte do Klaviyo Customer Hub. A interface de chat é a mesma nos dois casos, então o mesmo CSS funciona para ambos.

Antes de começar

Você vai precisar de:

• Uma função de Proprietário, Administrador ou Gerente
• Familiaridade com seletores CSS e propriedades personalizadas (variáveis CSS)

Antes de escrever CSS personalizado, verifique se as configurações de design integradas já fazem o que você precisa. Cores, fontes, formato do botão e posição do launcher são configuráveis sem código, e essas configurações permanecem após atualizações do Klaviyo. Use CSS personalizado apenas para o que as configurações de design não cobrem.

Para ocultar o launcher em determinadas páginas do seu site ou mostrá-lo apenas em determinadas páginas, consulte Como mostrar ou ocultar o launcher em páginas específicas.

Onde adicionar seu CSS personalizado

O local onde você encontra o editor de CSS personalizado depende da sua configuração.

Se você usa o Klaviyo Customer Hub

1. Acesse Klaviyo Customer Hub > Design e clique em Edite seu Hub.
2. Selecione Estilo na barra lateral esquerda e role até CSS personalizado.
3. Clique no botão + ao lado de Custom CSS e insira seu CSS ou edite o CSS que já está lá.
4. Clique em Save. Se um teste de visibilidade estiver em execução, ao salvar você o encerra antecipadamente. Clique em Finalizar teste e publicar apenas se você estiver pronto para encerrar o teste.

Se você usa o chat web independente

1. Navegue até Configurações > chat web > Design.
2. Role até a seção Personalizado na parte inferior das configurações de estilo.
3. Clique em Adicionar CSS personalizado e insira seu CSS ou edite o CSS que já está lá.
4. Clique em Save.

Depois de salvar, verifique o chat no seu site em larguras de desktop e de celular. Abra e feche o iniciador, envie uma mensagem e verifique os estados da resposta e do botão de envio. Para desfazer uma alteração, remova o CSS afetado e salve novamente.

Como o CSS personalizado é aplicado

Seu CSS é adicionado a uma tag style na sua vitrine, depois dos próprios estilos da Klaviyo. Duas coisas decorrem disso:

• Regras posteriores podem substituir regras anteriores. Seu CSS é carregado depois dos estilos da Klaviyo, mas a especificidade do seletor, os estilos inline e as animações ainda podem ter precedência. Use !important apenas quando necessário.
• Seu CSS não está com escopo definido para o chat. Ele se aplica à sua página inteira. Sempre defina o escopo dos seletores para um elemento do chat em vez de escrever regras genéricas como button { … }, que afetariam toda a sua vitrine.

Comece com variáveis do tema

Comece substituindo as variáveis de tema do Klaviyo em um bloco :root. Isso permite que você altere cores e formas compartilhadas sem precisar definir cada elemento individualmente. Essas mudanças também podem afetar outras partes do Klaviyo Customer Hub. As tabelas abaixo mostram os padrões básicos da folha de estilos; suas configurações de design podem substituir esses valores.

:root {
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-message-border-radius: 4px;
}

Variáveis de mensagens na conversa

As mensagens do comprador (de saída) reutilizam intencionalmente as cores da sua marca: o balão usa --atlas-button-primary e o texto usa --atlas-text-primary-inverse, ambos definidos por você nas configurações de design.

Variáveis de cor e de superfície

Variáveis de forma e espaçamento

Variáveis de tipografia

Vários deles já são definidos nas suas configurações de design. Definir fontes e cores na IU das configurações de design é preferível — use as variáveis para valores que a IU não expõe.

Direcione elementos com ganchos de classe

Quando uma variável do tema não for suficiente, direcione os elementos diretamente. A Klaviyo garante os nomes de classe abaixo.

Elementos do chat

A janela de chat também tem uma classe que nomeia a tela atual — .kl-hub-route-chat para o próprio chat. No chat web independente, isso é sempre .kl-hub-route-chat. No Klaviyo Customer Hub, isso muda conforme o cliente navega (.kl-hub-route-home, .kl-hub-route-orders, e assim por diante), o que permite que você delimite o CSS para uma única tela.

O botão de envio não tem uma classe dedicada. Direcione-o pelo Composer:

.kl-hub-chat-input-wrapper .kl-hub-button-primary:not(:disabled) {
  --atlas-button-primary: #2f4f4f;
}

Elementos compartilhados

Estilizar as mensagens do agente e do cliente de formas diferentes

Mensagens de texto entre agente humano e comprador compartilham a .kl-hub-message classe. O Customer Agent e as respostas automatizadas também usam isso. Não há uma classe estável que selecione apenas um tipo de remetente.

Use variáveis de tema para estilizar de forma diferente os balões do agente humano e do comprador. O Customer Agent e as respostas automatizadas não têm balão e usam --atlas-text-primary como cor do texto. Defina o escopo das variáveis para .kl-hub-message para manter essas mudanças dentro dos contêineres de mensagens:

.kl-hub-message {
  /* Human-agent messages */
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-chat-bubble-text-primary: #2b2b2b;

  /* Customer Agent and automated replies */
  --atlas-text-primary: #2b2b2b;

  /* Shopper messages */
  --atlas-button-primary: #1f3a3d;
  --atlas-text-primary-inverse: #ffffff;
}

Exemplos

Deixe a janela de chat, os balões de mensagem, os botões e os campos de entrada quadrados

:root {
  --atlas-drawer-inset-border-radius: 0;
  --atlas-message-border-radius: 0;
  --atlas-button-border-radius-normal: 0;
  --atlas-button-border-radius-small: 0;
  --atlas-button-border-radius-tiny: 0;
  --atlas-input-border-radius-normal: 0;
  --atlas-input-border-radius-small: 0;
}

Títulos e botões em maiúsculas

.kl-hub-heading,
.kl-hub-button {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

Deixe o inicializador maior com uma sombra personalizada

O launcher usa regras de CSS mais específicas e animações de tamanho, então este exemplo usa !important. Fixar a largura e a altura dele também impede que ele se expanda para notificações ou conteúdo de Adicionar ao carrinho. Verifique esses estados para ver se há conteúdo cortado antes de manter essas substituições de tamanho.

.kl-hub-launcher {
  width: 72px !important;
  height: 72px !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
}

Amplie a janela de chat no desktop

@media (min-width: 900px) {
  .kl-hub-drawer.kl-hub-route-chat {
    width: 480px !important;
  }
}

Solucionar problemas de CSS personalizado

No chat web independente, a Klaviyo verifica seu CSS antes de salvar. Se a verificação falhar, você verá CSS inválido. Verifique a sintaxe. e suas alterações não serão salvas.

Essa verificação rejeita uma folha de estilos não vazia quando o navegador não consegue interpretar nenhuma regra. Você pode limpar o campo e salvar para remover seu CSS personalizado. Se você vir o erro, verifique se há:

• Colar texto simples, HTML ou uma tag de estilo em vez de regras de CSS
• Colar parte de uma declaração em vez de uma regra completa
• Uma folha de estilo na qual toda regra tem um erro de sintaxe

O que o CSS personalizado não pode fazer

• Alterar texto. O CSS personalizado não pode editar o texto. Para isso, use as configurações de design e conteúdo.
• Reordenar ou reposicionar elementos além do que o layout de CSS permite. A estrutura do chat não é personalizável.
• Direcione os balões do agente e do comprador separadamente pela classe. Use variáveis de tema, conforme descrito acima.
• Resista automaticamente a reformulações. Os ganchos de classe e as variáveis são estáveis em atualizações normais, mas uma reformulação significativa pode exigir que você revise seu CSS. Teste novamente após grandes lançamentos.

Recursos adicionais