Opciones del lanzador del widget web de Zendesk: una guía completa para 2026

Lo que aprenderá sobre las opciones del lanzador del widget

El lanzador es lo primero que ven sus clientes cuando necesitan ayuda. Es ese botón en la esquina de su sitio web que abre la puerta al soporte. Pero aquí está la cuestión: Zendesk le da más control sobre ese botón de lo que la mayoría de la gente cree.

Tiene opciones que van desde configuraciones sencillas sin código hasta implementaciones totalmente personalizadas que se integran perfectamente en su interfaz de usuario existente. Tanto si está utilizando el moderno Messaging Web Widget como el antiguo Classic Web Widget, esta guía le guiará a través de todas las opciones de lanzador disponibles y le ayudará a elegir el enfoque adecuado para sus necesidades.

Analicemos lo que realmente puede hacer con el lanzador de su widget y cómo implementar cada opción.

Comprender las opciones del lanzador del widget web de Zendesk

El lanzador predeterminado

De fábrica, Zendesk le ofrece tres formas de lanzador para elegir en el Centro de administración:

• Cuadrado con un radio de esquina ajustable (0px para esquinas afiladas hasta 20px para totalmente redondeadas)
• Círculo para un aspecto moderno y compacto
• Lanzador personalizado que oculta el botón predeterminado para que pueda construir el suyo propio

El posicionamiento es sencillo: parte inferior izquierda o parte inferior derecha de la ventana del navegador. También puede establecer un espaciado de desplazamiento desde los bordes si necesita evitar conflictos con otros elementos de la interfaz de usuario, como banners de cookies o widgets de chat.

El lanzador predeterminado admite etiquetas de texto opcionales (como "Ayuda" o "Chatee con nosotros") y puede elegir si desea mostrar ese texto en dispositivos móviles. Para la marca, se establece un color primario que se aplica tanto al botón del lanzador como al encabezado del widget, además de los colores de los mensajes y las acciones para la interfaz de conversación.

Cuándo elegir un lanzador personalizado

El lanzador predeterminado funciona bien para la mayoría de los casos de uso. Pero hay situaciones en las que tiene sentido construir un lanzador personalizado:

• Requisitos específicos de marca: Necesita que el lanzador coincida con elementos de diseño únicos que los colores del Centro de administración no pueden lograr
• Ubicación no estándar: Desea que el lanzador esté en un lugar que no sea las esquinas inferiores, o integrado en un elemento de navegación existente
• Desencadenadores complejos: Desea que el widget se abra desde varios elementos de la página, como un enlace "Contáctenos" en su encabezado y un botón flotante
• Insignias de mensajes no leídos: Desea mostrar recuentos de notificaciones en sus propios elementos de la interfaz de usuario

La contrapartida es el tiempo de desarrollo. Los lanzadores personalizados requieren conocimientos de HTML, CSS y JavaScript. También necesitará un mantenimiento continuo si Zendesk actualiza su API.

¿En resumen? Comience con el lanzador predeterminado a menos que tenga un requisito específico que no pueda cumplir.

Configuración del lanzador predeterminado en el Centro de administración

Paso 1: Acceder a la configuración del widget web

Vaya a Centro de administración > Canales > Mensajería y redes sociales > Mensajería, luego haga clic en el nombre de su canal de widget web.

Verá varias pestañas en la parte superior: Aspectos básicos, Estilo, Respuestas, Preferencias e Instalación. Para la configuración del lanzador, necesita la pestaña Estilo.

Paso 2: Personalizar la apariencia del lanzador

En la pestaña Estilo, desplácese hasta la sección Lanzador. Esto es lo que puede configurar:

Posición en la ventana del navegador: Elija la parte inferior derecha o la parte inferior izquierda. Considere qué más vive en las esquinas de su página. Si tiene un banner de cookies u otra herramienta de chat, es posible que deba ajustar los desplazamientos o elegir la esquina opuesta.

Forma: Seleccione cuadrado, círculo o lanzador personalizado. Si elige cuadrado, aparece un control deslizante para ajustar el radio del borde de 0px (esquinas afiladas) a 20px (totalmente redondeado).

Texto (opcional): Agregue una etiqueta que aparezca junto al botón del lanzador. Algo como "Ayuda" o "Chatee con nosotros" puede aumentar la participación al hacer que el propósito del botón sea más claro.

Mostrar en el móvil: Active o desactive si la etiqueta de texto aparece en dispositivos móviles. En pantallas pequeñas, es posible que prefiera solo el icono para ahorrar espacio.

Paso 3: Establecer colores y marca

Aún en la pestaña Estilo, la sección Marco controla la identidad visual del widget:

Color primario: Esto colorea el botón del lanzador y el encabezado del widget. Ingrese un código hexadecimal o use el selector de color. Si está migrando desde el widget clásico, se establece de forma predeterminada en la configuración de su marca anterior.

Color del mensaje: El color de fondo de las burbujas de mensajes del cliente.

Color de acción: El color de los botones y las opciones seleccionadas en la conversación.

Logotipo (opcional): Cargue un JPG o PNG para que aparezca en la parte superior del marco del widget. Esta es su oportunidad de reforzar el reconocimiento de la marca.

Título: El texto que aparece en la parte superior del widget. Este podría ser el nombre de su empresa o una llamada a la acción como "Contáctenos".

Haga clic en Guardar configuración y sus cambios se activarán inmediatamente en cualquier página en la que esté instalado el widget.

Creación de un lanzador personalizado

Preparación para la implementación personalizada

Antes de escribir cualquier código, debe hacer dos cosas en el Centro de administración:

1. Vaya a la misma pestaña Estilo descrita anteriormente
2. Establezca Forma en Lanzador personalizado

Esto elimina el botón del lanzador predeterminado de su sitio web. El widget todavía está allí, solo que oculto hasta que lo active mediante programación.

Para la implementación técnica, necesitará:

• Acceso para editar el HTML y CSS de su sitio web
• Conocimientos básicos de JavaScript
• Familiaridad con la API del widget web de Zendesk

Construcción del lanzador

Un lanzador personalizado tiene tres componentes:

1. Elemento HTML: El botón o enlace en el que se puede hacer clic que activa el widget
2. CSS: Estilo para que coincida con su marca y posicione el elemento
3. JavaScript: Llamadas a la API para abrir, cerrar y supervisar el estado del widget

Aquí hay una implementación básica:

<!-- Your custom launcher button -->
<button id="custom-launcher">Chat with us</button>

<script>
  // Hide the default launcher (already done in Admin Center, but this ensures it)
  zE('messenger:set', 'hideLauncher', true);

  // Add click handler to your custom button
  document.getElementById('custom-launcher').addEventListener('click', function() {
    zE('messenger', 'open');
  });

  // Optional: Update button text when widget closes
  zE('messenger:on', 'close', function() {
    console.log('Widget closed');
  });
</script>

Puede diseñar el botón como desee con CSS. Colóquelo en cualquier lugar de la página, use los colores de su marca, agregue efectos de desplazamiento o intégrelo en la navegación existente.

Ejemplo de código: Lanzador personalizado básico con insignia de no leído

Un ejemplo más completo que muestra los recuentos de mensajes no leídos:

<button id="custom-launcher">
  Chat with us
  <span id="unread-badge" style="display: none;">0</span>
</button>

<script>
  // Track unread messages
  zE('messenger:on', 'unreadMessages', function(count) {
    const badge = document.getElementById('unread-badge');
    if (count > 0) {
      badge.textContent = count;
      badge.style.display = 'inline';
    } else {
      badge.style.display = 'none';
    }
  });

  // Toggle widget on button click
  let isOpen = false;
  document.getElementById('custom-launcher').addEventListener('click', function() {
    if (isOpen) {
      zE('messenger', 'close');
    } else {
      zE('messenger', 'open');
    }
  });

  // Track widget state
  zE('messenger:on', 'open', function() { isOpen = true; });
  zE('messenger:on', 'close', function() { isOpen = false; });
</script>

Esto le da un lanzador que se comporta como el predeterminado, pero con control total sobre la apariencia y la ubicación.

Opciones de personalización avanzadas

API de temas para Messaging Widget

Más allá de la configuración de color del Centro de administración, el Messaging Widget admite una API de temas de JavaScript para la personalización dinámica. Esto es útil si desea:

• Cambiar los colores según las preferencias del usuario (como el modo oscuro)
• Aplicar diferentes temas en diferentes páginas
• Actualizar la marca dinámicamente sin volver a cargar

La API utiliza el comando set customization:

zE("messenger:set", "customization", {
  theme: {
    primary: "#FE5E41",
    onPrimary: "#FFFFFF",
    message: "#F3C178",
    onMessage: "#5F0F00",
    action: "#B0DB43",
    onAction: "#000000",
    background: "#DFE0E2",
    onBackground: "#F10404"
  }
})

Propiedades clave del tema:

• primary: Color principal de la marca para el lanzador y el encabezado
• onPrimary: Color del texto en los elementos primarios
• message: Fondo de la burbuja de mensaje del cliente
• onMessage: Color del texto en los mensajes del cliente
• action: Colores de los botones y elementos interactivos
• onAction: Color del texto en los botones de acción
• background: Color de fondo del widget
• onBackground: Color del texto en el fondo

No es necesario que especifique todas las propiedades. Cualquiera que omita usa los colores predeterminados, lo que significa que puede anular solo lo que necesita.

Fuente: API de personalización del widget web de Zendesk

Diferencias de la API del widget clásico

Si todavía está utilizando Web Widget (Classic), la estructura de la API es diferente:

• Los comandos usan zE('webWidget:*') en lugar de zE('messenger:*')
• La configuración se define en un objeto window.zESettings antes de que se cargue el widget
• La personalización es más limitada: solo el color del tema y el color del texto del tema
• No hay soporte para el modo integrado

Ejemplo de comando del widget clásico:

zE('webWidget', 'show');
zE('webWidget', 'hide');
zE('webWidget', 'open');
zE('webWidget', 'close');

Fuente: API del widget web (clásico)

Modo integrado

En lugar de un lanzador flotante, puede integrar el widget directamente en un elemento de la página. Esto es útil para páginas de soporte dedicadas donde desea que la interfaz de conversación sea visible de inmediato.

Para usar el modo integrado:

1. Agregue un elemento contenedor a su HTML:

<div id="my-messenger-container"></div>

2. Desactive la representación automática antes de que se cargue el widget:

<script>
  window.zEMessenger = { autorender: false };
</script>

3. Llame al método de renderizado con el modo integrado:

zE("messenger", "render", {
  mode: "embedded",
  widget: {
    targetElement: "#my-messenger-container"
  }
})

El widget se ajusta automáticamente para llenar su contenedor. También puede representar solo la lista de conversaciones o el registro de mensajes por separado si desea un diseño de vista dividida.

Fuente: Documentación del modo integrado

Mejores prácticas para la implementación del lanzador

Capacidad de respuesta móvil

Pruebe su lanzador en dispositivos móviles reales, no solo en las herramientas de desarrollo del navegador. El lanzador predeterminado maneja bien los dispositivos móviles, pero los lanzadores personalizados necesitan una atención cuidadosa:

• Asegúrese de que los objetivos táctiles tengan al menos 44x44 píxeles
• Considere si las etiquetas de texto tienen sentido en pantallas pequeñas
• Pruebe que el widget no oscurezca la interfaz de usuario móvil crítica

Accesibilidad

Su lanzador debe funcionar para todos:

• Agregue atributos aria-label adecuados a los lanzadores personalizados
• Asegúrese de que la navegación con el teclado funcione (Tab para enfocar, Enter/Espacio para activar)
• Pruebe con lectores de pantalla para verificar que el widget se anuncia correctamente
• Mantenga un contraste de color suficiente (mínimo WCAG AA)

Evitar conflictos de interfaz de usuario

Las esquinas inferiores de los sitios web son bienes raíces abarrotados. Antes de colocar su lanzador:

• Compruebe si hay banners de consentimiento de cookies
• Busque herramientas de chat en vivo de otros proveedores
• Considere sus propios elementos de navegación
• Use la configuración de desplazamiento para crear espacio

Impacto en el rendimiento

El widget de Zendesk se carga de forma asíncrona, por lo que no bloqueará la representación de su página. Pero los lanzadores personalizados que verifican el estado del widget o se actualizan con frecuencia pueden agregar sobrecarga. Mantenga sus controladores de eventos simples y elimine cualquier actualización rápida.

Mejora de su widget con eesel AI

Una vez que tenga su lanzador configurado, la siguiente pregunta es qué sucede cuando los clientes hacen clic en él. Ahí es donde podemos ayudar.

En eesel AI, nos integramos con la mensajería de Zendesk para proporcionar respuestas impulsadas por IA a través de su widget web. Así es como funciona:

Conecta eesel a su cuenta de Zendesk y nuestra IA aprende de sus tickets anteriores, artículos del centro de ayuda, macros y cualquier documentación conectada. Cuando los clientes inician una conversación a través de su widget, eesel puede manejar la respuesta inicial, responder preguntas comunes y solo escalar a agentes humanos cuando sea necesario.

La IA mantiene la voz de su marca porque está entrenada sobre cómo escribe realmente su equipo. Y sigue aprendiendo: cuando corrige una respuesta o actualiza su documentación, eesel incorpora esos comentarios automáticamente.

Esto funciona con cualquier configuración de lanzador, ya sea que esté utilizando el botón predeterminado o una implementación totalmente personalizada. La IA se encuentra detrás de la interfaz del widget que ven sus clientes, por lo que obtiene el beneficio de la automatización sin cambiar la configuración de su frontend.

Para los equipos que buscan reducir el volumen de tickets manteniendo la calidad, combinar un lanzador bien diseñado con respuestas impulsadas por IA puede reducir significativamente la carga de soporte. Según los datos de referencia de Zendesk, el autoservicio y la automatización eficaces pueden reducir el volumen de tickets hasta en un 25%.

Elegir la opción de lanzador adecuada para sus necesidades

Aquí está la versión corta de cómo decidir:

Use el lanzador cuadrado o circular predeterminado si:

• Desea una configuración rápida con un mantenimiento mínimo
• Las opciones de marca estándar son suficientes
• No está seguro de lo que necesita todavía

Construya un lanzador personalizado si:

• Tiene requisitos específicos de marca
• Necesita una ubicación no estándar o múltiples puntos de activación
• Desea mostrar insignias de notificación personalizadas

Use el modo integrado si:

• Está construyendo una página de soporte dedicada
• Desea que la interfaz de conversación sea visible de inmediato
• Necesita un diseño de vista dividida con la lista de conversaciones y los mensajes uno al lado del otro

Empiece de forma sencilla. El lanzador predeterminado está bien para la mayoría de los equipos, y siempre puede actualizar a una implementación personalizada más adelante. Lo importante es poner el soporte frente a sus clientes rápidamente, luego iterar en función de lo que aprenda.

Recuerde: el lanzador es solo la puerta de entrada. Lo que importa es lo que sucede al otro lado. Ya sea que se quede con la configuración predeterminada o construya algo completamente personalizado, asegúrese de que la experiencia de conversación ofrezca valor una vez que los clientes crucen esa puerta.