Como estilizar seu Klaviyo Customer Hub
O que você vai aprender
Saiba mais sobre as opções de design para estilizar a gaveta do Klaviyo Customer Hub e como o senhor pode projetá-la para combinar com a sua marca. Como a interface do Klaviyo Customer Hub está enraizada na experiência do cliente, é uma prática recomendada estilizá-la para que apareça como uma extensão do seu site.
Atualmente, o Klaviyo Customer Hub for Shopify é compatível com vitrines padrão e com o Shopify Headless. Para o WooCommerce, navegue até https://help.klaviyo.com/hc/pt-br/articles/47792369863451
Para obter feedback sobre a funcionalidade do Klaviyo Customer Hub, envie um e-mail para customerhub@klaviyo.com.
Antes de começar
Este guia explica como personalizar o estilo da interface do Klaviyo Customer Hub. Antes de continuar, certifique-se de que o Klaviyo Customer Hub recursos esteja habilitado.
Saiba mais sobre o Klaviyo Customer Hub.
Opções de design do Klaviyo Customer Hub
A gaveta do Klaviyo Customer Hub tem várias guias personalizáveis:
- Para o senhor
- Pedidos
- perfil
- Bate-papo (visível somente quando o bate-papo na Web estiver ativado)
O senhor tem várias opções para personalizar o design em cada uma dessas guias, incluindo a edição de texto, cores, fontes e muito mais. As seleções de personalização de estilo são aplicadas em cascata em todas as guias da gaveta do Klaviyo Customer Hub para garantir uma experiência consistente e de acordo com a marca para os visitantes do site.
Embora a aparência da maioria dos elementos da gaveta do Klaviyo Customer Hub possa ser ajustada, suas posições não podem. No momento, estão disponíveis apenas opções gerais de layout.
Ao editar as configurações de design do Klaviyo Customer Hub em Klaviyo, use o botão View live (Exibir ao vivo ) para ver as alterações feitas na interface do hub em seu site. Observe que, se o Klaviyo Customer Hub estiver ativo, as alterações salvas serão publicadas em seu site.
Personalize uma chamada à ação principal para cada guia
Por padrão, quando um comprador faz login em sua conta de cliente, a Klaviyo exibe "Welcome, first.name" como o título principal na guia Para o senhor da gaveta do Klaviyo Customer Hub. Esse texto não é editável.
No entanto, para compradores não autenticados, o senhor pode escrever seu próprio título de chamadas à ação para ser exibido acima do botão "Sign in" antes que eles entrem. Isso pode ser útil para incentivar visitantes não autenticados a fazer login e se engajar na interface do Klaviyo Customer Hub.
No exemplo abaixo, as principais chamadas à ação dizem "Ganhe recompensas, acompanhe pedidos e salve seu histórico de compras".
Observação: o indicador "rewards available" é exibido automaticamente se você tiver um deles:
- Um cupom estático configurado no Klaviyo Customer Hub, OU
- Se você tiver uma integração de fidelidade ativada (como o Smile).
Para atualizar as principais chamadas à ação para sua interface do Klaviyo Customer Hub, o senhor deve
- Abra a guia Service - Klaviyo Customer Hub na navegação à esquerda do site Klaviyo.
- Clique em Configurações.
- Em Mensagens de boas-vindas, personalize as chamadas à ação a serem exibidas acima do botão "sign in" para compradores não autenticados. O senhor pode fazer isso para cada guia da gaveta do Klaviyo Customer Hub:
- Para o senhor
- Pedidos
- perfil
- Clique em Salvar.
Crie o seu Centro de Atendimento ao Cliente Klaviyo
Para opções de design para personalizar a interface do Klaviyo Customer Hub:
- Navegue até o Klaviyo Customer Hub na navegação à esquerda do site Klaviyo.
- Selecione Design.
- Selecione Hub na parte superior da visualização.
- No menu Style (Estilo), você pode ajustar as configurações de Display Language (Idioma de exibição), Fonts (Fontes), Color (Cor) e Style (Estilo) e visualizar como esses ajustes serão exibidos na tela da interface do Klaviyo Customer Hub
- Opcionalmente, o senhor pode aplicar um estilo avançado com CSS personalizado. Consulte a seção CSS personalizado abaixo para obter mais detalhes.
- Consulte o artigo Suporte de idioma e localidade no Klaviyo Customer Hub para obter mais informações sobre como selecionar outro idioma.
- Clique em Save (Salvar ) para ativar as alterações.
Personalize o Centro do Cliente Klaviyo widget
Além de projetar o próprio Klaviyo Customer Hub, você também pode personalizar o hub widget, que é um pequeno elemento flutuante em seu site no qual os visitantes podem clicar para abrir rapidamente a interface do Klaviyo Customer Hub. O widget apresenta informações oportunas ao seu comprador, como mensagens de bate-papo recebidas e feedback ao adicionar itens à lista de favoritos. Recomendamos que você ative a interface do usuário widget para promover um engajamento significativo com os clientes, especialmente quando o bate-papo na Web e os Favoritos estiverem ativados.
Para personalizar o widget do hub:
- Selecione Klaviyo Customer Hub no menu de navegação à esquerda em Klaviyo.
- Selecione Design.
- Selecione o widget na parte superior da visualização.
- No menu General (Geral ), você pode ajustar quais compradores devem ver o widget e qual Klaviyo Customer Hub View deve abrir quando o widget for clicado.
- Escolha quais compradores devem ver o widget em seu site:
- Todos os compradores (reconhecidos, conectados e desconectados) - O widget aparece para todos.
- Compradores reconhecidos ou conectados - O widget só aparecerá se a Klaviyo reconhecer a pessoa (Identificada) ou se ela estiver conectada (Autenticada). Isso é ideal para reduzir a desordem para novos visitantes e, ao mesmo tempo, manter uma experiência de alto contato para os que retornam.
- Somente compradores conectados - O widget aparece apenas para aqueles com uma sessão da Shopify.
- Escolha quais compradores devem ver o widget em seu site:
- No menu Style (Estilo), você pode ajustar as configurações de Cor e Estilo e visualizar a aparência desses ajustes na tela da interface do widget do Klaviyo Customer Hub.
- No menu Layout, você pode ajustar como o widget é posicionado no seu site.
- Clique em Save (Salvar ) para ativar as alterações.
Personalizar estados adicionais do widget
Você pode personalizar estados adicionais do widget selecionando o cursor ao lado de Icon e navegando para outro estado do widget.
- O estado Adicionar ao carrinho é 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 da parte superior da página de detalhes do produto, quando o botão tradicional Adicionar ao carrinho não estiver 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 suas necessidades de branding não forem atendidas pelas opções de design do Klaviyo Customer Hub, o senhor pode aplicar estilos avançados com CSS personalizado.
Embora o Klaviyo Customer Hub use redefinições de CSS para evitar colisões com o CSS do seu site, talvez seja necessário adicionar CSS personalizado para tratar de casos extremos ou aplicar estilos exclusivos, como gaveta flutuante ou valores de raio de borda personalizados.
A implementação de CSS personalizado para o Klaviyo Customer Hub envolve a edição do código do seu site. Isso só é recomendado para profissionais de marketing tecnicamente experientes ou para aqueles que têm acesso a um desenvolvedor. Embora nosso produto ofereça suporte a CSS personalizado, nossa equipe de suporte não pode ajudar o senhor a adicionar CSS personalizado ao Klaviyo Customer Hub além da orientação geral abordada nesta documentação. Para manter a segurança dos seus dados, a equipe de suporte da Klaviyo não pode abrir seus arquivos HTML.
Aplicar CSS personalizado
Adicione qualquer CSS personalizado diretamente à seção CSS personalizado das configurações de design do Klaviyo Customer Hub e certifique-se de salvar as alterações.
Todos os elementos básicos do Klaviyo Customer Hub têm nomes de classe prefixados com kl-hub-:
- Todos os elementos de texto têm a classe
kl-hub-text, enquanto os cabeçalhos têm a classe kl-hub-heading - Os botões têm a classe
kl-hub-buttone também incluem suas variantes (por exemplo, kl-hub-button-primary, kl-hub-button-secondaryetc.) - 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-blocoe também incluem o nome interno do bloco (por exemplo, kl-hub-content-bloco-reward-programpara um bloco de conteúdo chamado "Reward program").
Esta não é uma lista exaustiva; o senhor 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-, ele poderá ser usado com segurança para CSS personalizado.
Exemplo de CSS
Se o senhor quisesse deixar todos os botões e títulos do Klaviyo Customer Hub em letras maiúsculas, poderia escrever o seguinte CSS personalizado:
.kl-hub-button, .kl-hub-heading {
text-transform: uppercase;
}Recursos adicionais
- Guia de introdução com o Klaviyo Customer Hub na Shopify
Conheça o Klaviyo Customer Hub, uma experiência personalizada exclusiva para os visitantes da loja on-line que os orienta desde a descoberta do produto até a compra e o suporte pós-compra.
- Guia de introdução com web chat
Saiba mais sobre o chat na Web, que é um canal de comunicação bidirecional que você pode adicionar ao seu site. O chat web pode ser configurado por conta própria para você usar com Customer Agent e Helpdesk, mas também foi projetado para ser parte integrante do Klaviyo Customer Hub. O bate-papo na Web permite que sua empresa participe de conversas ao vivo e personalizadas com os visitantes do seu site, para que eles possam obter facilmente respostas para suas perguntas ou assistência para problemas.
- Como criar um bloco de conteúdo para o Klaviyo Customer Hub
Saiba como criar um bloco de conteúdo para seu Klaviyo Customer Hub. Os blocos de conteúdo são blocos altamente personalizáveis e customizáveis que têm acesso a Klaviyo dados do perfil que permitem que o senhor exiba integrações (por exemplo, o O senhor pode usar o saldo de pontos de fidelidade), ofertas personalizadas e muito mais.
- Como configurar o widget Adicionar ao carrinho no Klaviyo Customer Hub
Saiba como exibir um widget interativo Add to Cart 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 da parte superior da página de detalhes do produto, quando o botão tradicional Adicionar ao carrinho não estiver mais visível.