Cómo mostrar u ocultar el launcher en páginas específicas

Objetivos del artículo

Cómo ocultar el launcher (el botón flotante que abre el chat web o Klaviyo Customer Hub) en ciertas páginas de tu sitio, o mostrarlo solo en ciertas páginas. Agregarás un breve fragmento de CSS al tema de tu sitio en las páginas que elijas.

Esto funciona tanto si usas el chat web por sí solo como si lo usas como parte de Klaviyo Customer Hub, y sin importar a qué pantalla se abra tu launcher (chat, Favoritos o Para ti).

Antes de empezar

Necesitarás lo siguiente:

• Chat web o Klaviyo Customer Hub en vivo en tu sitio
• Acceso para editar el código del tema del sitio
• Permiso para editar la configuración de diseño de Klaviyo Customer Hub o chat web en Klaviyo, si usas el editor de CSS personalizado para la regla móvil a continuación

Actualmente, Klaviyo no tiene una configuración que controle en qué páginas aparece el launcher, así que esto se hace con CSS.

El fragmento

Este CSS oculta el iniciador:

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

.kl-hub-launcher-container es el contenedor que posiciona el launcher y .kl-hub-launcher es el botón en sí. Los estilos de Klaviyo se cargan después de los de tu tema, así que conserva !important o el iniciador volverá a aparecer.

Ocultar el iniciador en páginas específicas (Shopify)

1. Abre el tema activo en el editor de código de Shopify.
2. Abrir layout/theme.liquid.
3. Pega el siguiente código justo encima de la etiqueta de cierre </head> y reemplaza los nombres de las plantillas por las páginas en las que quieras ocultar el iniciador.
4. Haz clic en Guardar.

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

Nombres comunes de plantillas:

• index — tu página de inicio
• product — páginas de producto
• collection — páginas de colección
• cart — la página del carrito
• page — páginas de contenido estándar, como Acerca de o Contacto
• blog y article — tu blog y publicaciones de blog
• search — resultados de la búsqueda

Las páginas de pago de Shopify no usan tu tema, así que no puedes segmentarlas de esta manera.

Dirígete a una sola página por su URL

Para segmentar una página específica en lugar de todas las páginas de un tipo, revisa la ruta de la página en vez del nombre de la plantilla:

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

Mostrar el iniciador solo en páginas específicas (Shopify)

Sigue los mismos pasos, pero usa unless en lugar de if. Esto oculta el iniciador en todas partes, excepto en las páginas que enumeras. En este ejemplo, el iniciador solo aparece en la página de inicio y en las páginas de producto:

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

Solo oculta el iniciador en las páginas en las que no debe mostrarse. No lo ocultes en todas partes y luego intentes forzar que se vuelva a mostrar en ciertas páginas; la anulación puede entrar en conflicto con los estilos de Klaviyo y mostrar el iniciador incorrectamente.

Otras plataformas de ecommerce

El mismo enfoque funciona en cualquier sitio: agrega el fragmento dentro de una etiqueta de estilo solo en las páginas donde el iniciador debe ocultarse. Según tu plataforma, puedes hacerlo en una plantilla específica de página, un campo de código personalizado a nivel de página o tu administrador de etiquetas.

Si tu plataforma agrega una clase específica de la página a la etiqueta body, puedes delimitar el fragmento a esa clase en su lugar. Reemplaza page-cart con la clase que usa tu plataforma:

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

Ocultar el launcher en dispositivos móviles

Ocultar el launcher por tamaño de pantalla no depende de la página, así que este CSS puede ir en la configuración de diseño de Klaviyo Customer Hub o del chat web independiente. Oculta el launcher en ventanas del navegador de 767 píxeles de ancho o menos. Ajusta el ancho para que coincida con el punto de interrupción móvil del tema:

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

Si usas Klaviyo Customer Hub

1. Ve a Klaviyo Customer Hub > Diseño y haz clic en Edita tu Hub.
2. Selecciona Editar estilo en la barra lateral izquierda. En CSS personalizado, haz clic en el ícono de signo más si el editor está cerrado y, después, agrega el CSS de arriba a cualquier CSS existente. Pega solo el CSS, sin etiquetas <style>.
3. Haz clic en Guardar. Si se está ejecutando una prueba de visibilidad, al guardar se abre una advertencia. Elige Finalizar prueba y publicar solo cuando estés listo para finalizar la prueba y aplicar los cambios.

Si usas chat web independiente

1. Ve a Configuración > chat web > Diseño.
2. Desplázate hasta la sección Personalizado y haz clic en Agregar CSS personalizado, o edita el CSS que ya está ahí. Agrega el CSS anterior sin etiquetas <style>.
3. Haz clic en Guardar.

Lo que no hace ocultar el iniciador

• No desactiva el chat web ni Klaviyo Customer Hub. Los compradores pueden seguir abriéndolos desde enlaces a #k-hub (como un enlace de Favoritos en el encabezado), bloques de preguntas frecuentes en las páginas de producto y bloques integrados. Elimínalos u ocúltalos por separado si no los quieres en la página.
• No afecta a otros canales. El Agente de Clientes sigue respondiendo por correo electrónico, SMS y WhatsApp.
• No controla quién puede usar el chat web. Para desactivar el chat web, usa Configuración > Chat web > General. Si usas Klaviyo Customer Hub, también puedes establecer Estado de inicio de sesión en Compradores con sesión iniciada para requerir que inicien sesión antes de chatear. Esto no oculta el iniciador para los compradores que cerraron sesión. Haz clic en Guardar.

Prueba tus cambios

Haz pruebas como un comprador que cumpla con la configuración de visibilidad del iniciador. Abre una ventana de navegación privada e inicia sesión si es necesario. Abre una página donde el iniciador debería estar oculto y confirma que no aparezca. Luego abre una página donde debería aparecer y confirma que siga ahí. Para la regla móvil, revisa los anchos de pantalla tanto por debajo como por encima del punto de quiebre que elegiste. Si el iniciador sigue mostrándose donde no debería, revisa que el nombre o la ruta de la plantilla coincida exactamente y que el fragmento incluya !important.

Preguntas frecuentes

¿Hay alguna configuración en Klaviyo para elegir en qué páginas se muestra el launcher?
Actualmente, no. Usa el enfoque de CSS de este artículo.

¿Esto se romperá cuando Klaviyo actualice el chat web?
Las clases que empiezan con kl-hub- son estables en actualizaciones normales, así que el fragmento de código debería seguir funcionando. Vuelve a hacer pruebas después de rediseños importantes.

¿Puedo ocultar el launcher para ciertos compradores en lugar de ciertas páginas?
Sí. En Configuración > Chat web > General, usa Visibilidad del widget para elegir Todos los compradores o Solo compradores con sesión iniciada y luego haz clic en Guardar. La configuración de segmentación del Agente de Clientes elige a qué segmentos responde el agente; no oculta el launcher.

Recursos adicionales