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
• Carrinho (visível somente quando ativado)
• Chat (visível somente quando o chat web está ativado)
• Perfil

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 na Klaviyo, use o botão Visualizar para ver as alterações feitas na interface do hub 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 Website > Klaviyo Customer Hub na navegação à esquerda do Klaviyo.
2. Abra Design > Edite seu Hub
3. No painel lateral direito, em Layout fixo, personalize uma chamada à ação para exibir no bloco Login. Você pode fazer isso para cada aba do painel 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é Klaviyo Customer Hub na aba Site.
2. Selecione Design na navegação do Klaviyo Customer Hub.
3. Na parte superior da página Design, você verá um cartão que exibe o status do seu Hub. Selecione o botão Edite seu Hub para acessar o editor do Klaviyo Customer Hub.
   

4. No editor, selecione o ícone da paleta na navegação da barra lateral esquerda.
5. 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

6. Opcionalmente, você pode aplicar estilos avançados com CSS personalizado. Veja a seção CSS personalizado abaixo para mais detalhes.
7. Consulte o artigo Suporte a idioma e localidade no Klaviyo Customer Hub para obter mais informações sobre como selecionar outro idioma.
8. Clique em Publicar para ativar suas alterações.

Personalizar o widget do Klaviyo Customer Hub

Além de criar o design do próprio Klaviyo Customer Hub, 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 relevantes no momento certo para o comprador, como mensagens de chat recebidas e feedback ao adicionar itens à lista de Favoritos. Recomendamos ativar a interface do widget para gerar engajamento significativo com os clientes, mas isso não é obrigatório para colocar o Hub no ar.

Para personalizar o widget do hub:

1. Acesse o editor do Klaviyo Customer Hub.
2. No painel de controle flutuante acima do seu Hub, alterne o status de Aberto para Fechado. Isso deve abrir o painel deslizante Editar widget .
3. Na seção Configurações do widget, 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.
4. Você também pode configurar o formato, a cor, o ícone e o layout do seu widget.

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