Como usar CSS personalizado para estilizar o chat web

O que você vai aprender

Como usar CSS personalizado para mudar a aparência do chat web da Klaviyo — o launcher, a janela de chat, os balões de mensagem e o Composer de mensagens. Você vai aprender quais variáveis de tema e nomes de classe é seguro segmentar e quais vão quebrar quando a Klaviyo lançar uma atualização.

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.

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. Navegue até Klaviyo Customer Hub > Design.
2. Role até a seção Personalizado na parte inferior das configurações de estilo.
3. Clique em Adicionar CSS personalizado ou edite o CSS que já está lá.
4. Clique em Save.

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 ou edite o CSS que já está lá.
4. Clique em Save.

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:

• Seu CSS prevalece. Como ele carrega por último, suas regras substituem os padrões do Klaviyo sem precisar de !important na maioria dos casos.
• 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

A forma mais confiável de redefinir o estilo do chat web é sobrescrever as variáveis de tema da Klaviyo em um bloco :root. Elas são estáveis, fazem a cascata corretamente por toda a interface e têm muito menos chance de quebrar do que segmentar elementos individuais.

: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 {
  background: #2f4f4f;
}

Elementos compartilhados

Estilizar as mensagens do agente e do cliente de formas diferentes

Essa é a solicitação mais comum e precisa de uma abordagem específica. Os balões de agente e comprador compartilham a única mensagem .kl-hub Classe — Não há nenhuma classe estável distinguindo-os, portanto, você não pode selecionar uma diretamente.

Em vez disso, use as variáveis do tema, que já tratam os dois de forma diferente:

:root {
  /* Agent messages */
  --atlas-chat-bubble-background: #f0ebe4;
  --atlas-chat-bubble-text-primary: #2b2b2b;

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

Exemplos

Acerte tudo

:root {
  --atlas-drawer-inset-border-radius: 0;
  --atlas-message-border-radius: 0;
  --atlas-button-border-radius: 0;
  --atlas-input-border-radius-normal: 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

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

O launcher define várias propriedades diretamente no elemento, então as regras do launcher precisam de !important para terem efeito. Este é o único lugar em que isso é exigido com frequência.

Amplie a janela de chat no desktop

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

Se o seu CSS não salvar

Ao salvar, a Klaviyo verifica se o seu CSS é analisado corretamente. Se não for, você verá CSS inválido. Verifique a sintaxe. e suas alterações não serão salvas.

Uma folha de estilos só é rejeitada completamente quando não produz nenhuma regra, o que geralmente significa que o que você colou não é CSS. Causas comuns:

• 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