Como estilizar seu Klaviyo Customer Hub

Estimado 7 minuto de leitura
|
Atualizado 20 de fev. de 2025, 18:59 EST
O que você vai aprender

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. 

Antes de começar

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.

Estilo do Centro de Atendimento ao Cliente da Klaviyo

Estilo do Centro de Atendimento ao Cliente da Klaviyo

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)

A gaveta do Klaviyo Customer Hub é aberta em um exemplo de site de marca e mostra que o comprador está entrando em sua conta de cliente.

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 as principais chamadas à ação

Personalize as principais chamadas à ação

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 "Get started" 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".

A exibição da guia Para o senhor no Klaviyo Customer Hub mostra as principais chamadas à ação para um comprador que não fez login em uma conta.

Para atualizar as principais chamadas à ação para sua interface do Klaviyo Customer Hub, o senhor deve

  1. Abra a guia Klaviyo Customer Hub na navegação à esquerda do site Klaviyo.
  2. Selecione Settings (Configurações ) no canto superior direito.
    O botão Configurações no painel do Klaviyo Customer Hub.
  3. Selecione o conteúdo.
  4. Em Main chamadas à ação, personalize as chamadas à ação para serem exibidas acima do botão Guia de introdução para compradores não autenticados.
    A seção Principais chamadas à ação no menu de configurações de conteúdo na guia Klaviyo Customer Hub em Klaviyo.
  5. Clique em Salvar
Configurações de design

Configurações de design

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

  1. Navegue até o Klaviyo Customer Hub na navegação à esquerda do site Klaviyo.
  2. Selecione Configurações.
  3. Abra o menu Design
    O menu Design nas configurações do Klaviyo Customer Hub em Klaviyo mostra todas as opções de estilo para personalizar uma gaveta do Klaviyo Customer Hub.

O senhor pode ajustar as seguintes configurações de cor e estilo:

  • 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.
    • 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.
  • 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. 
  • layout
    • Estilo
      A forma das bordas do conteúdo bloco, botões e seções no Klaviyo Customer Hub. 
    • 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.
    • Cor de fundo
      A cor de base do Klaviyo Customer Hub abaixo de todo o texto, bloco de conteúdo e extensões.
Lançador de hub widget

Lançador de hub widget

Além de projetar o próprio Klaviyo Customer Hub, o senhor também pode personalizar um lançador de hub widget, que é um pequeno elemento flutuante em seu site no qual os visitantes podem clicar para abrir rapidamente o Klaviyo Customer Hub. Isso geralmente é usado em conjunto com a funcionalidade de bate-papo na Web do Klaviyo Customer Hub. Um widget do hub launcher funciona como um teaser de formulário, acompanhando os visitantes durante toda a jornada deles em seu site. 

O menu de estilo do widget do iniciador de hub na página de configurações de Design mostra um exemplo de iniciador de hub definido como oculto, mas com algum estilo configurado.

O senhor pode personalizar o widget do hub launcher:

  • Visibilidade
    • Quais visitantes do site podem ver e clicar no widget
  • Forma do widget
    • A forma das bordas do widget
  • Localização da página
    • Onde o widget flutua em uma página da Web
  • Espaçamento
    • Distância do canto esquerdo/direito e superior/inferior, dependendo da localização do widget
  • Cor de fundo do widget
    • Cor base do widget
CSS personalizado para o 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 

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.

A seção Custom CSS na parte inferior do menu de configurações do Klaviyo Customer Hub Design em Klaviyo.

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-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

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

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

Recursos adicionais

Esse artigo foi útil?
Use esse formulário somente para fazer comentários sobre artigos. Saiba como entrar em contato com o suporte.

Saiba mais sobre a Klaviyo

Comunidade
Conecte-se com colegas, parceiros e especialistas da Klaviyo para encontrar inspiração, compartilhar percepções e obter respostas para todas as suas perguntas.
Treinamentos ao vivo
Participe de uma sessão ao vivo com especialistas da Klaviyo para aprender sobre as práticas recomendadas, como configurar os principais recursos e muito mais.
Suporte

Acesse o suporte por meio da sua conta.

Suporte por e-mail (teste gratuito e contas pagas) Disponível 24 horas

Chat/assistência virtual
A disponibilidade varia conforme o local e o tipo de plano