Como Personalizar seu Klaviyo Customer Hub

O que você vai aprender

Saiba mais sobre as opções de design para estilizar a gaveta do seu Klaviyo Customer Hub e como você pode projetá-la para combinar com a sua marca. Como a interface do Klaviyo Customer Hub está integrada à experiência do cliente, é uma boa prática estilizar para que ela pareça uma extensão do seu site.

Antes de começar

Este guia explica como personalizar o estilo da interface do Klaviyo Customer Hub. Antes de prosseguir, verifique se os recursos do Klaviyo Customer Hub estão ativados.

Saiba mais sobre o Klaviyo Customer Hub.

Opções de design do Klaviyo Customer Hub

A gaveta do Klaviyo Customer Hub tem várias abas personalizáveis:

• Para você
• Pedidos
• Perfil
• Chat (visível apenas quando o chat web está ativado)
  
  

Você tem várias opções para personalizar o design em cada uma dessas abas, incluindo editar texto, cores, fontes e muito mais. As seleções de personalização de estilo são aplicadas em cascata em cada aba no painel do Klaviyo Customer Hub para garantir uma experiência consistente e alinhada à sua marca para os visitantes do seu site.

Ao editar as configurações de design do seu Klaviyo Customer Hub no Klaviyo, use o botão Ver ao vivo para ver as alterações feitas na interface do hub no seu site. Observe que, se o seu Klaviyo Customer Hub estiver ativo, as alterações salvas serão publicadas no seu site.

Personalize uma chamada à ação principal para cada guia

Por padrão, quando um cliente faz login na conta de cliente, o Klaviyo exibe “Welcome, first.name” como o cabeçalho principal na aba Para você da gaveta do Klaviyo Customer Hub. Este texto não é editável.

No entanto, para compradores não autenticados, você pode criar seu próprio título de chamadas à ação para exibir acima do botão "Fazer login" antes de eles fazerem login. Isso pode ser útil para incentivar visitantes não autenticados a fazer login e interagir com a interface do Klaviyo Customer Hub.

No exemplo abaixo, a principal chamada à ação diz “Ganhe recompensas, acompanhe os pedidos e salve seu histórico de compras.”

Observação: o indicador "recompensas disponíveis" é exibido automaticamente se você tiver:

1. Um cupom estático configurado no Klaviyo Customer Hub, OU
2. Se você tiver integrações de fidelidade ativadas (como Smile).

Para atualizar a principal chamada à ação da interface do Klaviyo Customer Hub:

1. Abra a aba Service - Klaviyo Customer Hub na navegação à esquerda do Klaviyo.
2. Clique em Configurações.
3. Em Mensagens de boas-vindas, personalize uma chamada à ação para exibir acima do botão "fazer login" para compradores não autenticados. Você pode fazer isso em cada guia da gaveta do Klaviyo Customer Hub:
   • Para você
   • Pedidos
   • perfil
     

4. Clique em Save.

Crie seu Klaviyo Customer Hub

Para opções de design para personalizar a interface do Klaviyo Customer Hub:

1. Navegue até o Klaviyo Customer Hub na barra de navegação à esquerda do Klaviyo.
2. Selecione Design.
3. Selecione Hub na parte superior da visualização.
   
   
   

4. No menu Estilo, você pode ajustar as configurações de Idioma de exibição, Fontes, Cor e Estilo e visualizar como esses ajustes vão ficar na tela da interface do Klaviyo Customer Hub
5. Opcionalmente, você pode aplicar estilos avançados com CSS personalizado. Veja a seção CSS personalizado abaixo para mais detalhes.
6. Consulte o artigo Suporte a idioma e localidade no Klaviyo Customer Hub para obter mais informações sobre como selecionar outro idioma.
7. Clique em Salvar para publicar suas alterações.

Personalizar o widget do Klaviyo Customer Hub

Além de criar o Klaviyo Customer Hub em si, você também pode personalizar o widget do hub, que é um elemento pequeno e flutuante no seu site que os visitantes podem clicar para abrir rapidamente a interface do Klaviyo Customer Hub. O widget apresenta informações em tempo real para seu cliente, como mensagens de chat recebidas e feedback ao adicionar itens à lista de Favoritos. Recomendamos ativar a IU do widget para gerar engajamento significativo com os clientes, especialmente quando o chat web e os Favoritos estão ativados.

Para personalizar o widget do hub:

1. Selecione Klaviyo Customer Hub na navegação à esquerda da Klaviyo.
2. Selecione Design.
3. Selecione widget na parte superior da visualização.

4. No menu Geral, você pode ajustar quais compradores devem ver o widget e qual visualização do Klaviyo Customer Hub deve ser aberta quando o widget for clicado.
   • Escolha quais compradores devem ver o widget no seu site:
     • Todos os compradores (reconhecidos, com login e sem login) – O widget aparece para todos.
     • Compradores reconhecidos ou com login – O widget só aparece se o Klaviyo reconhecer a pessoa (Identified) ou se ela tiver feito login (Authenticated). Isso é ideal para reduzir a desordem para visitantes totalmente novos, mantendo uma experiência mais personalizada para quem retorna.
     • Apenas compradores com login – O widget só aparece para quem tem uma sessão da Shopify com atividade.
5. No menu Estilo, você pode ajustar as configurações de cor e estilo e visualizar como esses ajustes ficarão na tela da interface do widget do Klaviyo Customer Hub
6. No menu Layout, você pode ajustar como o widget é posicionado no seu site.
7. Clique em Salvar para publicar suas alterações.

Personalizar estados adicionais do widget

Você pode personalizar estados adicionais do widget selecionando o acento circunflexo ao lado de Ícone e navegando para outro estado do widget.

• O estado Adicionar ao carrinho fica visível nas páginas de detalhes do produto. O widget personalizável incentiva os compradores a fazer uma compra ou salvar um produto para mais tarde quando eles tiverem rolado para baixo, passando do topo da página de detalhes do produto, quando o botão tradicional Adicionar ao carrinho não fica mais visível. Saiba mais sobre como configurar o widget Adicionar ao carrinho no Klaviyo Customer Hub.

CSS personalizado para o Klaviyo Customer Hub

Se as opções de design do Klaviyo Customer Hub não atenderem às suas necessidades de marca, você pode aplicar estilos avançados com CSS personalizado.

Embora o Klaviyo Customer Hub use redefinições de CSS para evitar conflito com o CSS do seu site, talvez você precise adicionar CSS personalizado para lidar com casos extremos ou aplicar um estilo exclusivo, como gaveta flutuante ou valores personalizados de raio da borda.

Aplicar CSS personalizado

Adicione qualquer CSS personalizado diretamente à seção CSS personalizado das suas configurações de design do Klaviyo Customer Hub e não se esqueça de salvar suas alterações.

Todos os elementos básicos no Klaviyo Customer Hub têm nomes de classe com o prefixo kl-hub-:

• Todos os elementos de texto têm a classe kl-hub-text, enquanto os títulos têm a classe kl-hub-heading
• Os botões têm a classe kl-hub-button e também incluem suas variantes (por exemplo, kl-hub-button-primary, kl-hub-button-secondary etc.).
• A própria gaveta do Klaviyo Customer Hub tem a classe kl-hub-drawer
• As entradas de texto têm a classe kl-hub-input
• Todos os blocos de conteúdo têm a classe kl-hub-content-block e também incluem o Nome interno do bloco (por exemplo, kl-hub-content-block-reward-program para um bloco de conteúdo chamado "Programa de recompensas")

Esta não é uma lista exaustiva; você pode encontrar mais inspecionando o Klaviyo Customer Hub com o depurador do seu navegador. Se um elemento tiver uma classe que comece com kl-hub-, é seguro usar para CSS personalizado.

Exemplo de CSS

Se você quiser colocar todos os botões e títulos no Klaviyo Customer Hub em letras maiúsculas, pode escrever o seguinte CSS personalizado:

.kl-hub-button, .kl-hub-heading {

    text-transform: uppercase;
}

Recursos adicionais