Cómo personalizar la posición y el tamaño del widget web de Zendesk

Conseguir que su widget web de Zendesk esté posicionado correctamente puede marcar la diferencia entre un canal de atención al cliente útil y una distracción molesta. Ya sea que lo desee cuidadosamente guardado en la esquina o mostrado de manera prominente, las opciones de posicionamiento varían según el tipo de widget que esté utilizando.

Aquí le mostramos exactamente cómo personalizar la posición y el tamaño para cada variante de widget de Zendesk.

¿Qué widget de Zendesk tiene?

Antes de que pueda ajustar el posicionamiento, necesita saber con qué widget está trabajando. Zendesk ofrece tres tipos principales de widgets, y cada uno tiene diferentes capacidades de personalización.

Web Widget (Messaging) es el estándar actual para las cuentas con Zendesk Suite o Support + Chat en los planes Team y superiores con la mensajería habilitada. Cuenta con una interfaz de chat moderna con burbujas de conversación y admite conversaciones persistentes entre sesiones.

Web Widget (Classic) es la opción heredada para las cuentas que no han habilitado la mensajería. Combina la búsqueda en el centro de ayuda, los formularios de contacto y el chat en vivo opcional en una interfaz tradicional. Esta versión ofrece la API de JavaScript más extensa para la personalización.

Chat-only Web Widget (Classic) aparece si solo tiene el producto Chat sin Support. Es esencialmente el componente de chat sin funciones de emisión de tickets.

Para identificar su widget, revise su Centro de administración. Si ve Channels > Messaging and social > Messaging, tiene el Web Widget de mensajería. Si ve Channels > Classic > Web Widget, está utilizando la versión Clásica.

Fuente: Guía de identificación del widget de Zendesk

Posicionamiento del Web Widget (Messaging)

El Web Widget de mensajería ofrece controles de posicionamiento sencillos a través de la interfaz del Centro de administración.

Para acceder a la configuración de posición:

1. Abra el Centro de administración
2. Haga clic en Channels en la barra lateral
3. Seleccione Messaging and social > Messaging
4. Haga clic en el nombre del canal que desea editar
5. Abra la pestaña Style

Opciones de posición:

El widget de mensajería admite dos posiciones: Bottom right (abajo a la derecha) (predeterminado) o Bottom left (abajo a la izquierda). A diferencia del widget Clásico, no puede colocarlo en la parte superior de la página a través de la interfaz de usuario.

Configuración de desplazamiento:

Puede ajustar la ubicación exacta utilizando valores de desplazamiento. El valor predeterminado es de 16 píxeles desde el borde elegido. Aumente estos valores para mover el widget hacia adentro desde la esquina, o disminúyalos para acercarlo al borde.

Personalización de la apariencia:

Si bien no es estrictamente posicionamiento, estas configuraciones afectan la huella visual del widget:

• Border radius (Radio del borde): ajuste de 0px (esquinas afiladas) a 20px (totalmente redondeado)
• Launcher shape (Forma del lanzador): elija Cuadrado (con curva ajustable), Círculo o Lanzador personalizado
• Size elements (Elementos de tamaño): el tamaño del botón del lanzador es fijo, pero puede agregar texto opcional que aumenta su ancho

Consideraciones para dispositivos móviles:

Habilite Show on mobile (Mostrar en dispositivos móviles) para mostrar el texto del lanzador en los SDK móviles. El widget adapta automáticamente su tamaño para pantallas más pequeñas, pero la posición permanece anclada a la esquina elegida.

Fuente: Configuración de la apariencia del Web Widget

Posicionamiento del Web Widget (Classic)

El widget Clásico proporciona más flexibilidad de posicionamiento que su contraparte de mensajería, incluida la capacidad de colocarlo en cualquier esquina de la pantalla.

Para acceder a la configuración de posición:

1. Abra el Centro de administración
2. Haga clic en Channels en la barra lateral
3. Seleccione Classic > Web Widget
4. Localice el componente Position (Posición)

Posicionamiento en las cuatro esquinas:

El widget Clásico admite las cuatro esquinas:

• Top left (Arriba a la izquierda)
• Top right (Arriba a la derecha)
• Bottom left (Abajo a la izquierda)
• Bottom right (Abajo a la derecha)

Cuando se coloca en la parte superior, el widget se expande hacia abajo cuando se abre. Cuando se coloca en la parte inferior, se expande hacia arriba.

Ajuste básico de desplazamiento:

El componente Posición incluye controles de desplazamiento para ajustar la ubicación desde la esquina seleccionada. Esto es útil para evitar conflictos con otros elementos fijos en su página.

Personalización avanzada de JavaScript:

Para un control preciso, el widget Clásico acepta la configuración de JavaScript a través de window.zESettings. Este enfoque le permite establecer valores de píxeles exactos e incluso cambiar el posicionamiento dinámicamente según el contenido de la página.

Fuente: Reposicionamiento del Web Widget

Posicionamiento del widget de Chat heredado

Si está utilizando una cuenta de Chat independiente heredada, la configuración de su widget se encuentra en una ubicación diferente.

Para acceder a la configuración de posición:

1. Abra su panel de Chat
2. Navegue a Settings > Widget (Configuración > Widget)
3. Busque el menú desplegable Widget position (Posición del widget)

Opciones disponibles:

El widget de Chat heredado admite las mismas cuatro esquinas que el Web Widget Clásico. Sin embargo, las opciones de personalización son más limitadas. No tendrá acceso a la extensa API de JavaScript que ofrece el widget Clásico.

Nota importante: Muchas cuentas que anteriormente usaban el widget de Chat independiente ahora tienen su configuración administrada dentro de la configuración de Web Widget (Classic) en el producto Support. Si no ve la configuración de posición en Chat, revise Admin Center > Channels > Classic > Web Widget en su lugar.

Fuente: Personalización del widget de Chat heredado

Posicionamiento avanzado con la API de JavaScript

Para los desarrolladores que necesitan un control preciso, la API de JavaScript del Web Widget (Classic) ofrece amplias capacidades de posicionamiento.

La base:

Toda la personalización se realiza a través del objeto window.zESettings, que debe definirse antes de que se cargue el script del widget:

window.zESettings = {
  webWidget: {
    position: {
      vertical: 'top',
      horizontal: 'right'
    },
    offset: {
      horizontal: '20px',
      vertical: '100px'
    }
  }
};

Propiedades de posición:

Escenarios de posicionamiento comunes:

Arriba a la derecha con espacio libre:

window.zESettings = {
  webWidget: {
    position: { vertical: 'top', horizontal: 'right' },
    offset: { horizontal: '30px', vertical: '80px' }
  }
};

Abajo a la izquierda evitando un pie de página:

window.zESettings = {
  webWidget: {
    position: { vertical: 'bottom', horizontal: 'left' },
    offset: { horizontal: '20px', vertical: '100px' }
  }
};

Control de zIndex:

Si su widget aparece detrás de otros elementos como barras de navegación o modales, aumente el valor de zIndex en su configuración de JavaScript:

window.zESettings = {
  webWidget: {
    zIndex: 999999
  }
};

Modo integrado:

Para un control completo sobre la ubicación, puede integrar el widget dentro de un contenedor específico en su página en lugar de hacerlo flotar. Esto requiere JavaScript adicional y se usa normalmente cuando desea que el widget aparezca como parte del diseño de su página en lugar de una superposición.

Fuente: Introducción a la API de Web Widget

Mejores prácticas para el posicionamiento de widgets

Conseguir la posición correcta es más que simplemente elegir una esquina. Aquí hay pautas prácticas para una colocación efectiva del widget.

Considere el diseño de su contenido:

Coloque el widget donde no obstruya la navegación o el contenido importante. La parte inferior derecha es popular porque la mayoría de los usuarios son diestros y muchos sitios web tienen contenido menos crítico en esa área. Sin embargo, si su sitio tiene un pie de página fijo o CTA importantes en la parte inferior derecha, considere la parte inferior izquierda o el posicionamiento superior.

Capacidad de respuesta móvil:

Pruebe la posición elegida en dispositivos móviles reales, no solo en el cambio de tamaño del navegador. El lanzador del widget no debe cubrir los menús de navegación, los banners de consentimiento de cookies o los botones de acción flotantes. En pantallas más pequeñas, es posible que necesite valores de desplazamiento más grandes para evitar la superposición con la interfaz de usuario nativa del navegador.

Consideraciones de accesibilidad:

El widget ajusta automáticamente los colores para cumplir con las pautas de contraste de WCAG, pero el posicionamiento también es importante para la accesibilidad. Asegúrese de que el lanzador no cubra los indicadores de enfoque ni los enlaces para saltar al contenido. Los usuarios que navegan con el teclado deben poder acceder al widget sin una tabulación excesiva.

Cuándo usar un lanzador personalizado:

Ambos tipos de widgets admiten ocultar el lanzador predeterminado y crear su propio disparador. Esto es útil cuando desea que el widget se abra desde un botón específico en su navegación, o cuando el lanzador flotante entra en conflicto con su sistema de diseño. Recuerde que usar un lanzador personalizado requiere trabajo de desarrollo adicional para manejar los estados de apertura/cierre.

Recomendaciones de prueba:

• Verifique el posicionamiento en diferentes tamaños de pantalla (móvil de 320 px a escritorio de 1920 px)
• Verifique que el widget no se superponga con banners de cookies, modales de verificación de edad o ventanas emergentes promocionales
• Pruebe con el contenido real de su sitio web, no solo con una página en blanco
• Considere cómo funciona la posición con el comportamiento de desplazamiento de su sitio

Solución de problemas comunes de posicionamiento

Incluso con configuraciones claras, el posicionamiento del widget a veces no funciona como se espera. Aquí le mostramos cómo solucionar los problemas más comunes.

El widget no aparece en la posición esperada:

Primero, verifique que está editando la configuración para el tipo de widget correcto. Los cambios en el widget de mensajería no afectarán al widget Clásico y viceversa. Borre la memoria caché de su navegador y revise el widget en una ventana de incógnito para descartar JavaScript en caché.

Conflictos de z-index:

Si el widget aparece detrás de otros elementos como barras de navegación o modales, aumente el valor de zIndex en su configuración de JavaScript. Comience con 999999 y ajuste hacia abajo si eso causa otros problemas. Algunas herramientas de terceros usan valores de z-index extremadamente altos, por lo que es posible que deba experimentar.

Problemas de posicionamiento móvil:

Los navegadores móviles manejan las unidades de ventana gráfica de manera diferente a los de escritorio. Si sus valores de desplazamiento funcionan en el escritorio pero no en el móvil, intente usar el posicionamiento basado en porcentajes o pruebe diferentes valores de píxeles específicamente para las ventanas gráficas móviles. El widget de mensajería tiene una configuración móvil dedicada, pero el widget Clásico requiere consultas de medios CSS para el posicionamiento específico para móviles.

Los cambios no se reflejan en su sitio web:

La configuración del widget puede tardar unos minutos en propagarse. Si ha esperado y aún no ve los cambios, verifique que está viendo una página donde el widget esté realmente instalado. El fragmento de widget debe estar presente en la página para que cualquier configuración surta efecto.

Consideraciones de caché y CDN:

Si usa una CDN o una capa de almacenamiento en caché, su JavaScript de widget podría estar en caché. Purgue su caché de CDN después de realizar cambios de posicionamiento. Para el widget Clásico, los cambios en window.zESettings surten efecto inmediatamente al cargar la página, por lo que el almacenamiento en caché es menos problemático que con los cambios en el Centro de administración.

Mejore su widget de Zendesk con IA

Una vez que haya posicionado su widget a la perfección, considere cómo la IA puede ayudarlo a manejar las conversaciones que llegan a través de él. Si bien Zendesk ofrece funciones de IA integradas, es posible que desee más flexibilidad en la forma en que automatiza las respuestas y enruta las conversaciones.

Aquí es donde un compañero de equipo de IA puede complementar su estrategia de widgets. En lugar de simplemente recopilar tickets, puede tener un agente de IA que realmente resuelva los problemas comunes directamente en la conversación. La IA aprende de sus tickets anteriores y del contenido del centro de ayuda, por lo que las respuestas coinciden con la voz y las políticas de su marca.

Si está buscando ir más allá de la funcionalidad básica de chatbot, considere explorar opciones de soporte impulsadas por IA que se integran con Zendesk. La configuración de IA correcta puede manejar las preguntas de rutina automáticamente mientras escala sin problemas los problemas complejos a su equipo humano.

Para los equipos que desean una solución de IA completa, un chatbot de IA entrenado en su base de conocimientos específica puede proporcionar respuestas más precisas que las alternativas genéricas. Consulte las opciones de precios para ver qué se adapta a su volumen de soporte.