Como mostrar ou ocultar o launcher em páginas específicas

O que você vai aprender

Como ocultar o launcher (o botão flutuante que abre o chat web ou o Klaviyo Customer Hub) em determinadas páginas do seu site ou exibi-lo apenas em determinadas páginas. Você vai adicionar um pequeno trecho de CSS ao tema do seu site nas páginas que escolher.

Isso funciona tanto se você usar o chat web sozinho quanto como parte do Klaviyo Customer Hub, e independentemente da tela para a qual o seu launcher abrir (chat, Favoritos ou Para você).

Antes de começar

Você vai precisar de:

• Chat web ou Klaviyo Customer Hub ao vivo no seu site
• Acesso para editar o código do tema do seu site
• Permissão para editar as configurações de design do Klaviyo Customer Hub ou do chat web no Klaviyo, se você usar o editor de CSS personalizado para a regra de dispositivos móveis abaixo

No momento, a Klaviyo não tem uma configuração que controle em quais páginas o launcher aparece, então isso é feito com CSS.

O snippet

Este CSS oculta o launcher:

.kl-hub-launcher-container,
.kl-hub-launcher {
  display: none !important;
}

.kl-hub-launcher-container é o contêiner que posiciona o launcher, e .kl-hub-launcher é o próprio botão. Os estilos do Klaviyo são carregados depois dos do seu tema, então mantenha !important ou o launcher vai reaparecer.

Ocultar o launcher em páginas específicas (Shopify)

1. Abra seu tema ativo no editor de código da Shopify.
2. Abra layout/theme.liquid.
3. Cole o código abaixo logo acima da tag de fechamento </head> e substitua os nomes dos modelos pelas páginas em que você quer ocultar o launcher.
4. Clique em Save.

{% if template.name == 'cart' or template.name == 'collection' %}
  <style>
    .kl-hub-launcher-container,
    .kl-hub-launcher {
      display: none !important;
    }
  </style>
{% endif %}

Nomes de modelos comuns:

• index — sua página inicial
• product — páginas de produto
• collection — páginas de coleção
• cart — a página do carrinho
• page — páginas de conteúdo padrão, como Sobre ou Contato
• blog e article — seu blog e suas postagens do blog
• search — resultados da pesquisa

As páginas de checkout do Shopify não usam seu tema, então você não pode segmentá-las dessa forma.

Direcione para uma única página pela URL

Para direcionar uma página específica em vez de todas as páginas de um tipo, verifique o caminho da página em vez do nome do modelo:

{% if request.path == '/pages/contact' %}
  <style>
    .kl-hub-launcher-container,
    .kl-hub-launcher {
      display: none !important;
    }
  </style>
{% endif %}

Mostrar o launcher somente em páginas específicas (Shopify)

Siga as mesmas etapas, mas use unless em vez de if. Isso oculta o launcher em todos os lugares, exceto nas páginas que você listar. Neste exemplo, o launcher só aparece na sua página inicial e nas páginas de produto:

{% unless template.name == 'index' or template.name == 'product' %}
  <style>
    .kl-hub-launcher-container,
    .kl-hub-launcher {
      display: none !important;
    }
  </style>
{% endunless %}

Só oculte o launcher nas páginas em que ele não deve aparecer. Não oculte em todos os lugares e depois tente forçar a exibição em determinadas páginas; a substituição pode entrar em conflito com os estilos da Klaviyo e exibir o launcher incorretamente.

Outras plataformas de e-commerce

A mesma abordagem funciona em qualquer site: adicione o snippet dentro de uma tag style apenas nas páginas em que o launcher deve ficar oculto. Dependendo da sua plataforma, você pode fazer isso em um modelo específico da página, um campo de código personalizado no nível da página ou no seu gerenciador de tag.

Se a sua plataforma adicionar uma classe específica da página à tag body, você pode limitar o snippet a essa classe. Substitua page-cart pela classe que a sua plataforma usa:

body.page-cart .kl-hub-launcher-container,
body.page-cart .kl-hub-launcher {
  display: none !important;
}

Ocultar o launcher no celular

Ocultar o launcher por tamanho de tela não depende da página, então você pode colocar esse CSS nas configurações de design do seu Klaviyo Customer Hub ou do chat web independente. Isso oculta o launcher em janelas do navegador com 767 pixels de largura ou menos. Ajuste a largura para corresponder ao breakpoint para mobile do seu tema:

@media (max-width: 767px) {
  .kl-hub-launcher-container,
  .kl-hub-launcher {
    display: none !important;
  }
}

Se você usa o Klaviyo Customer Hub

1. Navegue até Klaviyo Customer Hub > Design e clique em Editar seu Hub.
2. Selecione Editar estilo na barra lateral esquerda. Em CSS personalizado, clique no ícone de mais se o editor estiver fechado e, em seguida, adicione o CSS acima a qualquer CSS existente. Cole apenas o CSS, sem as tags <style>.
3. Clique em Save. Se um teste de visibilidade estiver em execução, ao salvar você verá um aviso. Escolha Encerrar teste e publicar somente quando você estiver pronto para encerrar o teste e aplicar suas alterações.

Se você usa o chat web independente

1. Navegue até Configurações > chat web > Design.
2. Role até a seção Personalizado e clique em Adicionar CSS personalizado ou edite o CSS que já está lá. Adicione o CSS acima sem as tags <style>.
3. Clique em Save.

O que ocultar o launcher não faz

• Isso não desativa o chat web nem o Klaviyo Customer Hub. Os clientes ainda podem abri-los por links para #k-hub (como um link de Favoritos no seu cabeçalho), blocos de FAQ em páginas de produto e blocos incorporados. Remova ou oculte esses itens separadamente se você não quiser que eles apareçam na página.
• Isso não afeta outros canais. O Customer Agent ainda responde por e-mail, SMS e WhatsApp.
• Isso não controla quem pode usar o chat web. Para desativar o chat web, acesse Configurações > Chat web > Geral. Se você usa o Klaviyo Customer Hub, também pode definir Status de login como Compradores conectados para exigir que a pessoa faça login antes de iniciar o chat. Isso não oculta o inicializador para compradores desconectados. Clique em Save.

Teste suas alterações

Teste como um comprador que atenda às suas configurações de visibilidade do launcher. Abra uma janela de navegação privada e faça login, se necessário. Abra uma página em que o launcher deva ficar oculto e confirme que ele não aparece. Depois, abra uma página em que ele deva aparecer e confirme que ele ainda está lá. Para a regra de mobile, verifique larguras de tela abaixo e acima do breakpoint escolhido. Se o launcher ainda aparecer onde não deveria, verifique se o nome ou o caminho do modelo corresponde exatamente e se o snippet inclui !important.

Perguntas frequentes

Há uma configuração no Klaviyo para escolher em quais páginas o launcher aparece?
No momento, não. Use a abordagem de CSS neste artigo.

Isso vai parar de funcionar quando a Klaviyo atualizar o chat web?
Classes que começam com kl-hub- são estáveis em atualizações normais, então o snippet deve continuar funcionando. Faça um novo teste após grandes reformulações.

Posso ocultar o launcher para determinados clientes em vez de determinadas páginas?
Sim. Em Configurações > Chat web > Geral, use Visibilidade do widget para escolher Todos os compradores ou Apenas compradores conectados e, em seguida, clique em Salvar. As configurações de segmentação do Customer Agent definem para quais segmentos o agente responde; elas não ocultam o inicializador.

Recursos adicionais