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

Qué aprenderás

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

Esto funciona tanto si utilizas el chat web por sí solo como si lo usas como parte de Klaviyo Customer Hub, y sea cual sea la pantalla a la que se abra el lanzador (chat, Favoritos o Para ti).

Antes de empezar

Necesitarás:

• Chat web o Klaviyo Customer Hub activo en tu sitio web
• Acceso para editar el código del tema del sitio
• Permiso para editar la configuración de diseño de Klaviyo Customer Hub o del chat web en Klaviyo, si utilizas el editor de CSS personalizado para la regla de móvil que aparece 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 lanzador, 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 mantén !important o el lanzador volverá a aparecer.

Ocultar el launcher 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 código de abajo justo encima de la etiqueta </head> de cierre y sustituye los nombres de plantilla por las páginas en las que quieras ocultar el launcher.
4. Pulsa Guardar.

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

Nombres de plantilla comunes:

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

Las páginas de pago de Shopify no usan el tema, por lo que no puedes segmentarlas de esta manera.

Segmenta una sola página por su URL

Para dirigirte a una sola página específica en lugar de a todas las páginas de un tipo, comprueba la ruta de la página en lugar 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 lanzador solo en páginas específicas (Shopify)

Sigue los mismos pasos, pero usa unless en lugar de if. Esto oculta el launcher en todas partes excepto en las páginas que incluyas en la lista. En este ejemplo, el launcher 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 %}

Oculta el lanzador únicamente en las páginas donde no debería mostrarse. No lo ocultes en todas partes e intentes luego forzarlo para ciertas páginas; la anulación puede entrar en conflicto con los estilos de Klaviyo y mostrar el lanzador de forma incorrecta.

Otras plataformas de comercio electrónico

El mismo enfoque funciona en cualquier sitio: añade el fragmento dentro de una etiqueta style solo en las páginas en las que se debe ocultar el launcher. Según tu plataforma, puedes hacerlo en una plantilla específica de la página, un campo de código personalizado a nivel de página o tu gestor de etiquetas.

Si tu plataforma añade una clase específica de página a la etiqueta body, puedes acotar el fragmento a esa clase. Sustituye page-cart por la clase que usa tu plataforma:

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

Ocultar el iniciador en dispositivos móviles

Ocultar el iniciador según el tamaño de pantalla no depende de la página, así que este CSS puede incluirse en los ajustes de diseño de Klaviyo Customer Hub o del chat web independiente. Oculta el lanzador en las ventanas del navegador de 767 píxeles de ancho o menos. Ajusta el ancho para que coincida con el punto de corte 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 icono de más si el editor está cerrado y, a continuación, añade el CSS anterior a cualquier CSS existente. Pega solo el CSS, sin etiquetas <style>.
3. Pulsa Guardar. Si se está ejecutando una prueba de visibilidad, al guardar se abre una advertencia. Selecciona 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 Personalizar y haz clic en Añadir CSS personalizado, o edita el CSS que ya está allí. Añade el CSS anterior sin etiquetas <style>.
3. Pulsa Guardar.

Qué no hace al ocultar el iniciador

• No desactiva el chat web ni Klaviyo Customer Hub. Los compradores aún pueden abrirlos desde enlaces a #k-hub (como un enlace de Favoritos en el encabezado), bloques de preguntas frecuentes en las páginas de productos y bloques insertados. Elimínalos u ocúltalos por separado si no quieres que estén en la página.
• No afecta a otros canales. Customer Agent sigue respondiendo en email, 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 configurar Estado de inicio de sesión como Compradores con sesión iniciada para exigir que inicien sesión antes de chatear. Esto no oculta el iniciador a los compradores que no hayan iniciado sesión. Pulsa Guardar.

Prueba los cambios

Haz la prueba como comprador que cumple los ajustes de visibilidad del lanzador. Abre una ventana de navegación privada e inicia sesión si es necesario. Abre una página en la que el lanzador deba estar oculto y confirma que no aparece. Luego, abre una página en la que deba aparecer y confirma que sigue ahí. Para la regla de móvil, comprueba los anchos de pantalla tanto por debajo como por encima del punto de interrupción que hayas elegido. Si el lanzador sigue mostrándose donde no debería, comprueba que el nombre o la ruta de la plantilla coincidan exactamente y que el fragmento incluya !important.

PREGUNTAS FRECUENTES

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

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

¿Puedo ocultar el iniciador para ciertos compradores en lugar de para ciertas páginas?
Sí. En Configuración > Chat web > General, utiliza Visibilidad del widget para elegir Todos los compradores o Solo compradores con sesión iniciada y, después, haz clic en Guardar. Los ajustes de segmentación de Customer Agent eligen a qué segmentos responde el agente; no ocultan el iniciador.

Recursos adicionales