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.
O Klaviyo Customer Hub faz parte do site Klaviyo Service e o acesso à versão beta está sendo distribuído gradualmente. Se o senhor ainda não tiver acesso à guia Klaviyo Customer Hub na navegação principal do site Klaviyo, entre na lista de espera do Klaviyo Customer Hub. Observe que o senhor deve estar em um plano pago do Klaviyo Email para ser aprovado. No momento, a participação nessa versão beta está disponível apenas em inglês para aqueles que operam uma Shopify loja on-line. Atualmente, não há suporte para front-ends personalizados sem cabeçalho, mesmo que o senhor use o Shopify como back-end.
Embora esse produto permaneça em versão beta, a funcionalidade não está completa e estará sujeita a alterações frequentes durante o período beta. Ao habilitar o Klaviyo Customer Hub por meio do fluxo de trabalho de integração, o senhor concorda com os termos e condições da versão beta. Embora esse recurso seja gratuito durante o período beta, ele será vendido separadamente no lançamento para disponibilidade geral.
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 HubOpçõ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 habilitado)
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 guiaPersonalize 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".
Para atualizar as principais chamadas à ação para sua interface do Klaviyo Customer Hub, o senhor deve
- Abra a guia Klaviyo Customer Hub na navegação à esquerda do site Klaviyo.
- Clique em Configurações.
- Selecione a guia Conteúdo.
- 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.
- Abra o menu Estilo.
- No menu Estilo, é possível ajustar as seguintes configurações de cor e estilo e visualizar como esses ajustes ficarão na tela da interface do Klaviyo Customer Hub:
-
Fontes
-
Fonte do título
Usada para os títulos em cada guia do Klaviyo Customer Hub. Selecione Inherit from site (Herdar do site ) para replicar automaticamente a fonte usada em outros cabeçalhos do site.
Observe que o senhor também pode adicionar uma fonte personalizada selecionando Configurar fonte personalizada e inserindo seu nome e tamanho. Essa fonte personalizada já deve existir na seção Fonts (Fontes ) da sua conta.
-
Cor do título
Usada para o texto do título em cada guia do Klaviyo Customer Hub. -
Fonte do parágrafo
Usada para o texto de cada seção, bloco de conteúdo e botão. Selecione Inherit from site (Herdar do site ) para replicar automaticamente a fonte usada em outros parágrafos do seu site. -
Cor do parágrafo
Usado para todos os botões, blocos de conteúdo e texto de seção no Klaviyo Customer Hub.
-
Fonte do título
-
Botões
-
Cor do botão
A cor de fundo de todos os botões no Klaviyo Customer Hub. -
Cor do texto do botão
A cor do texto em todos os botões do Klaviyo Customer Hub. -
Maiúsculas e minúsculas do texto do botão
As opções de capitalização para o texto em todos os botões no Klaviyo Customer Hub.
-
Cor do botão
-
Estilo
-
de formaA forma das bordas do bloco de conteúdo, botões e seções no Klaviyo Customer Hub.
-
Cor de fundo
A cor de base do Klaviyo Customer Hub abaixo de todo o texto, bloco de conteúdo e extensões.
-
-
layout
-
Posição na área de trabalho
De onde a gaveta do Klaviyo Customer Hub desliza para fora (lado esquerdo ou direito da janela de visualização). Se sua marca usa uma gaveta de carrinho, considere usar o posicionamento alinhado à esquerda para que não se sobreponha ao Klaviyo Customer Hub.
-
Posição na área de trabalho
-
CSS personalizado
Opcionalmente, é possível aplicar estilos avançados com CSS personalizado. Consulte a seção CSS personalizado abaixo para obter mais detalhes.
-
Fontes
- Clique em Publicar para que as alterações sejam ativadas.
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 que os visitantes podem clicar para abrir rapidamente a interface do Klaviyo Customer Hub. O widget hub funciona de maneira semelhante a um teaser de formulário, acompanhando os visitantes durante toda a sua jornada no seu site.
Para personalizar o widget do hub:
- Selecione Klaviyo Customer Hub no menu de navegação à esquerda em Klaviyo.
- Selecione Design.
- Acesse o menu de widgets.
- O senhor pode personalizar o widget do hub launcher:
-
Visibilidade
Quais visitantes do site podem visualizar e clicar no widget -
Abrir configuração
Qual página é aberta no Klaviyo Customer Hub? -
da formaA forma das bordas do widget -
e de corA cor do widget -
Posição
Onde o widget flutua em uma página da web -
de espaçamentoDistância do canto esquerdo/direito e superior/inferior, dependendo da localização do widget
-
Visibilidade
- Clique em Publicar para visualizar suas alterações em tempo real.
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 classekl-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