{
"title": "Cómo obtener e instalar el código de inserción de tu widget web de Zendesk",
"slug": "zendesk-web-widget-embed-code",
"locale": "es",
"date": "2026-02-26",
"updated": "2026-02-26",
"template": "default",
"excerpt": "Una guía práctica para obtener e implementar el código de inserción del widget web de Zendesk, que abarca las versiones de widget Classic y Messaging con instrucciones específicas de la plataforma.",
"categories": [
"Zendesk",
"Guides"
],
"tags": [
"Zendesk",
"Web Widget",
"Customer Support",
"Embed Code",
"Live Chat"
],
"readTime": 9,
"author": 16,
"reviewer": 14,
"seo": {
"title": "Cómo obtener e instalar el código de inserción de tu widget web de Zendesk",
"description": "Una guía práctica para obtener e implementar el código de inserción del widget web de Zendesk, que abarca las versiones de widget Classic y Messaging con instrucciones específicas de la plataforma.",
"image": "https://wmeojibgfvjvinftolho.supabase.co/storage/v1/object/public/public_assets/blog-gen/banner-fb02f50b-1d43-47cd-9b53-5118c8069821"
},
"coverImage": "https://wmeojibgfvjvinftolho.supabase.co/storage/v1/object/public/public_assets/blog-gen/banner-fb02f50b-1d43-47cd-9b53-5118c8069821",
"coverImageAlt": "Imagen de banner para Cómo obtener e instalar el código de inserción de tu widget web de Zendesk",
"coverImageWidth": 1920,
"coverImageHeight": 1080,
"faqs": {
"heading": "Preguntas Frecuentes",
"type": "blog",
"answerType": "html",
"faqs": [
{
"question": "¿Dónde encuentro el código de inserción de mi widget web de Zendesk?",
"answer": "Puedes encontrar tu código de inserción en el Centro de Administración de Zendesk (Zendesk Admin Center). Navega a Canales > Mensajería (o Canales > Clásico > Widget Web para la versión Clásica), selecciona tu widget, luego desplázate a la sección de Instalación y haz clic en el icono de Copiar."
},
{
"question": "¿Puedo usar el código de inserción del widget web de Zendesk en varios sitios web?",
"answer": "Sí, puedes usar el mismo código de inserción en varios sitios web o páginas. El widget funcionará de forma idéntica dondequiera que esté instalado. Sin embargo, si necesitas diferentes configuraciones para diferentes sitios, crea widgets separados en tu Centro de Administración."
},
{
"question": "¿Funciona el código de inserción del widget web de Zendesk con WordPress?",
"answer": "Sí, el código de inserción funciona con WordPress. Puedes agregarlo a través del archivo footer.php de tu tema, usar la sección de scripts adicionales del Personalizador o instalar un plugin como 'Insert Headers and Footers' para administrar el código sin editar los archivos del tema."
},
{
"question": "¿Cuál es la diferencia entre el código de inserción del widget web de Mensajería y el Clásico de Zendesk?",
"answer": "El widget de Mensajería utiliza un fragmento moderno con la configuración de zEMessenger y admite conversaciones continuas y agentes de IA. El widget Clásico utiliza zESettings y ofrece chats basados en sesiones con formularios más detallados. El proceso de instalación es similar, pero la estructura del código difiere ligeramente."
},
{
"question": "¿Cómo personalizo la apariencia de mi widget web de Zendesk después de instalar el código de inserción?",
"answer": "La mayoría de la personalización se realiza en el Centro de Administración de Zendesk antes de copiar el código. Para cambios avanzados, puedes usar la API de JavaScript para modificar colores, posición y comportamiento programáticamente. Los cambios realizados en el Centro de Administración suelen tardar unos 10 minutos en propagarse a los widgets en vivo."
},
{
"question": "¿Es gratuito el código de inserción del widget web de Zendesk?",
"answer": "El widget web se incluye con todos los planes de Zendesk Suite, que comienzan en $55 por agente por mes (facturación anual). El widget en sí no tiene precios separados, pero necesitas una suscripción activa a Zendesk para generar y usar el código de inserción."
}
],
"supportLink": null
}
}
---
El [widget web de Zendesk](https://www.zendesk.com/embeddables/web-widget/) es una de las formas más rápidas de agregar soporte al cliente a tu sitio web. Es esa pequeña burbuja de chat que ves en la esquina de los sitios, que permite a los visitantes buscar en tu centro de ayuda, iniciar una conversación o enviar un ticket sin salir de la página.
Pero antes de que los clientes puedan usarlo, necesitas obtener el código de inserción y agregarlo a tu sitio. Esta guía te explica exactamente cómo hacerlo, ya sea que estés utilizando el nuevo widget de Mensajería o la versión Clásica.
## Comprender las dos versiones del widget web de Zendesk
Zendesk ofrece dos tipos diferentes de widgets, y saber cuál tienes es importante para la instalación.
El **Widget Web de Mensajería (Messaging Web Widget)** es la versión moderna. Admite conversaciones continuas (los clientes pueden irse y volver al mismo chat), agentes de IA nativos y mensajería en tiempo real. Esto es lo que Zendesk recomienda para las nuevas configuraciones. Puedes obtener más información en la [guía de instalación de Mensajería](https://support.zendesk.com/hc/en-us/articles/4500748175258).
El **Widget Web (Clásico) (Web Widget (Classic))** es la versión heredada. Utiliza chats basados en sesiones y ofrece opciones de formulario más detalladas. Algunas cuentas antiguas de Zendesk todavía usan esto, y es totalmente compatible. Consulta la [documentación del widget Clásico](https://support.zendesk.com/hc/en-us/articles/4408836216218) para obtener más detalles.
Aquí se muestra una comparación:
| Característica | Widget Web de Mensajería | Widget Web (Clásico) |
|---------|---------------------|---------------------|
| Estilo de conversación | Continuo a través de sesiones | Basado en sesiones |
| Soporte de agente de IA | Integración nativa | Limitado |
| Chat en vivo | En tiempo real | En tiempo real |
| Búsqueda en el centro de ayuda | Sí | Sí |
| Formularios de contacto | Simplificado | Formularios detallados completos |
| Dónde configurar | Centro de Administración > Canales > Mensajería | Centro de Administración > Canales > Clásico > Widget Web |
Si no estás seguro de cuál tienes, consulta tu Centro de Administración. La ruta de navegación te lo indica de inmediato. Para obtener más detalles, consulta la [documentación para desarrolladores de Zendesk](https://developer.zendesk.com/embeddables/docs/widget/introduction/).
## Lo que necesitarás antes de comenzar
Antes de obtener tu código de inserción, asegúrate de tener:
- Una cuenta de Zendesk con acceso de administrador
- Acceso al HTML de tu sitio web o al sistema de gestión de contenido
- Un centro de ayuda activado (requerido para la opción de inserción automática del widget de Mensajería)
- Familiaridad básica con dónde colocar scripts en tu sitio
Si estás utilizando WordPress, Shopify u otra plataforma, necesitarás acceso de administrador para editar los archivos del tema o instalar plugins. Para los equipos que buscan agregar respuestas impulsadas por IA a su widget, [eesel AI](https://www.eesel.ai) ofrece una integración de Zendesk que aprende de tu centro de ayuda y tickets anteriores.
## Paso 1: Accede a la configuración de tu widget en Zendesk
Primero, navega al lugar correcto en tu Centro de Administración de Zendesk.
Para el **Widget Web de Mensajería**: Ve a **Centro de Administración > Canales > Mensajería y redes sociales > Mensajería**.
Para el **Widget Web Clásico**: Ve a **Centro de Administración > Canales > Clásico > Widget Web**.
Verás una lista de widgets si tienes varios configurados. Haz clic en el nombre del widget que deseas instalar. Esto abre el panel de configuración donde puedes personalizar la apariencia y el comportamiento antes de generar el código.
## Paso 2: Configura la apariencia y las características de tu widget
Antes de generar el código de inserción, configura cómo quieres que se vea y funcione el widget. Esto te evita tener que actualizarlo más tarde.
**Configuración visual a configurar:**
- **Colores**: Establece el color primario de tu marca para los botones y los encabezados
- **Posición**: Elige la esquina inferior izquierda o la esquina inferior derecha
- **Estilo del lanzador**: Selecciona el icono y el texto que aparece en el botón
- **Logotipo**: Carga el logotipo de tu empresa (los planes Enterprise pueden eliminar la marca Zendesk)
**Componentes funcionales para habilitar:**
- **Búsqueda en el centro de ayuda**: Permite a los clientes encontrar artículos antes de contactarte
- **Formulario de contacto**: Permite el envío de tickets directamente desde el widget
- **Chat en vivo**: Permite conversaciones en tiempo real con agentes
- **Solicitudes de devolución de llamada**: Permite a los clientes solicitar una llamada telefónica (requiere Zendesk Talk)
**Configuración de comportamiento:**
- **Horario comercial**: Establece cuándo aparece el widget o cambia la mensajería
- **Saludos**: Configura mensajes de bienvenida automatizados
- **Capacidad de respuesta móvil**: Asegúrate de que el widget funcione en teléfonos y tabletas
Tómate un momento para previsualizar tus cambios. Zendesk proporciona una vista previa en vivo para que puedas ver exactamente cómo aparecerá el widget a los clientes.
## Paso 3: Genera y copia tu código de inserción
Una vez que estés satisfecho con la configuración, es hora de obtener el código real.
Desplázate hacia abajo hasta la sección **Instalación** y haz clic para expandirla. Verás un fragmento de JavaScript que se parece a esto:
```html
<!-- Start of Zendesk Widget script -->
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=YOUR_WIDGET_KEY"></script>
<!-- End of Zendesk Widget script -->
Haz clic en el icono Copiar para copiar todo el fragmento al portapapeles. Este código contiene tu clave de widget única, que conecta el widget a tu cuenta específica de Zendesk. Para obtener más detalles sobre el proceso de instalación, consulta la guía de instalación de Mensajería de Zendesk.
Si necesitas enviar este código a un desarrollador, haz clic en Enviar el código por correo electrónico a un miembro del equipo en su lugar.
Paso 4: Agrega el código a tu sitio web
Ahora necesitas pegar este código en el HTML de tu sitio web. La ubicación importa: agrégalo justo antes de la etiqueta de cierre </body> en cada página donde quieras que aparezca el widget.
Sitios web HTML estándar
Abre los archivos HTML de tu sitio web y pega el fragmento antes de </body>. Si utilizas un sistema de plantillas, agrégalo a tu plantilla base para que aparezca en todas las páginas.
WordPress
Tienes varias opciones:
- Editor de temas: Ve a Apariencia > Editor de archivos de temas, abre
footer.phpy pega antes de</body> - Personalizador: Algunos temas tienen una sección de "Scripts personalizados" o "Código de pie de página" en Apariencia > Personalizar
- Plugin: Utiliza un plugin como "Insert Headers and Footers" para agregar código sin editar los archivos del tema
Shopify
- Ve a Tienda en línea > Temas
- Haz clic en Acciones > Editar código en tu tema activo
- Abre
theme.liquiden la carpeta Diseño - Pega el fragmento antes de la etiqueta de cierre
</body> - Guarda
Otras plataformas
La mayoría de los sistemas de gestión de contenido tienen una forma de agregar scripts personalizados:
- Wix: Configuración > Código personalizado
- Squarespace: Configuración > Avanzado > Inyección de código
- Webflow: Configuración del proyecto > Código personalizado
Después de agregar el código, guarda tus cambios y borra cualquier caché. Para obtener más orientación específica de la plataforma, consulta la documentación para desarrolladores de Zendesk.
Paso 5: Verifica tu instalación
No asumas que funcionó. Tómate un minuto para verificar que todo funcione correctamente.
Abre tu sitio web en una ventana de incógnito o de navegación privada. Esto asegura que lo estés viendo como lo haría un nuevo visitante, sin que los datos almacenados en caché interfieran.
Comprueba estas cosas:
- El lanzador del widget aparece en la esquina elegida
- Al hacer clic en él, se abre la interfaz del widget
- Tu marca (colores, logotipo) se muestra correctamente
- La búsqueda en el centro de ayuda funciona si está habilitada
- Puedes iniciar un chat o enviar un ticket de prueba
Prueba tanto en el escritorio como en el móvil para garantizar un comportamiento receptivo. El widget debe adaptarse a pantallas más pequeñas sin romper el diseño de tu sitio.
Si el widget no aparece, consulta la consola de desarrollador de tu navegador para ver si hay errores de JavaScript. Los problemas comunes incluyen:
- El script está siendo bloqueado por una política de seguridad de contenido
- Conflictos con otros widgets de chat
- El código se coloca en la ubicación incorrecta
Personaliza tu widget más allá de la configuración básica
Una vez que el widget básico esté funcionando, puedes explorar opciones de personalización avanzadas a través de la API de JavaScript.
Control programático
Puedes controlar el comportamiento del widget con comandos de JavaScript:
// Open the widget
zE('webWidget', 'open');
// Set the visitor's name
zE('webWidget', 'prefill', {
name: 'John Doe',
email: 'john@example.com'
});
Modo integrado (Embedded mode)
Para tener más control sobre la ubicación, utiliza el modo integrado para colocar el widget dentro de un contenedor específico:
window.zEMessenger = {
autorender: false
};
zE('messenger', 'render', {
mode: 'embedded',
widget: {
targetElement: '#support-container'
}
});
Esto es útil para crear páginas de soporte dedicadas o integrar el widget en los paneles de control. Obtén más información en la documentación del modo integrado.
Visitantes autenticados
Si tus usuarios inician sesión en tu sitio web, puedes autenticarlos en el widget para que vean su historial de conversaciones y no necesiten volver a ingresar los detalles de contacto. Esto requiere configurar la autenticación JWT en la configuración de Zendesk.
Solución de problemas comunes de inserción
Incluso con instrucciones claras, a veces las cosas salen mal. Aquí te mostramos cómo solucionar problemas comunes.
El widget no aparece
- Borra tu caché: Los navegadores almacenan en caché en gran medida; intenta una actualización completa (Ctrl+F5 o Cmd+Shift+R)
- Comprueba si hay errores de JavaScript: Abre las herramientas de desarrollo del navegador (DevTools) y busca errores rojos en la consola
- Verifica que el script se haya cargado: En la pestaña Red de DevTools, comprueba si la solicitud de script de Zendesk se realizó correctamente
- Bloqueo del firewall: Asegúrate de que tu firewall permita las solicitudes a
zdassets.comyzendesk.com
Errores de colocación del código
- Asegúrate de que el código esté antes de
</body>, no después - No lo coloques dentro de
<head>(esto puede ralentizar la carga de la página) - Asegúrate de no haber roto accidentalmente la estructura HTML al pegar
Conflictos con otras herramientas
Si utilizas otros widgets de chat (Intercom, Drift, etc.), podrían entrar en conflicto. Utiliza solo un widget de chat por página para evitar confusiones y problemas técnicos.
Problemas de visualización móvil
- Comprueba que la etiqueta meta de la ventana gráfica de tu sitio web esté configurada correctamente
- Asegúrate de que el índice z del widget no esté siendo anulado por tu CSS
- Prueba en dispositivos reales, no solo en emuladores de navegador
Mejora tu widget de Zendesk con soporte de IA
Una vez que tu widget web esté en funcionamiento, es posible que notes que todavía requiere una cantidad significativa de trabajo manual. Los agentes deben responder a cada conversación, y las preguntas simples consumen un tiempo valioso.
Aquí es donde la IA puede ayudar. eesel AI se integra directamente con Zendesk para automatizar las respuestas utilizando tus artículos existentes del centro de ayuda y los datos de tickets anteriores.
Así es como funciona:
- Entrena con tu contenido: eesel aprende de tu centro de ayuda, macros y tickets resueltos
- Redacta respuestas de IA: Cuando los clientes utilizan tu widget web, eesel sugiere respuestas completas para que los agentes las revisen
- Resolución autónoma: Para preguntas comunes, eesel puede responder directamente sin la participación del agente
- Escala de forma inteligente: Los problemas complejos se dirigen automáticamente a los agentes humanos con el contexto completo
La integración se realiza dentro de tu configuración existente de Zendesk. No es necesario reemplazar tu widget web ni cambiar la forma en que los clientes interactúan contigo. eesel simplemente hace que esas interacciones sean más eficientes.
Para los equipos que buscan reducir los tiempos de respuesta manteniendo la calidad, el Agente de IA de eesel AI puede ser un próximo paso práctico después de configurar el widget básico.
Compartir esta entrada
Article by
