Tus clientes no deberían tener que buscar una página de “Contacto” oculta a tres clics de profundidad. El widget embebido de Heedback pone el soporte, las conversaciones y el contenido de autoservicio justo donde los usuarios ya están — en tu sitio web o aplicación. En esta guía, te acompañamos en la instalación, configuración y pruebas para que puedas estar operativo en menos de diez minutos.

Requisitos previos

Antes de comenzar, asegúrate de tener:

Una cuenta de Heedback con al menos una organización configurada
Acceso al HTML de tu sitio web, o la capacidad de modificar el punto de entrada de tu framework frontend (React, Vue, Next.js, etc.)
El código de inserción del widget de tu organización, disponible en Configuración → Widget en el panel de Heedback

Paso 1: Copia el fragmento de código

Ve a Configuración → Widget en tu panel de Heedback. Encontrarás una etiqueta de script lista para usar con este aspecto:

<script
  src="https://widget.heedback.com/embed.js"
  data-org-id="your-org-id"
  async
></script>

Este fragmento carga el widget de forma asíncrona, por lo que no bloquea la renderización de tu página. Cópialo — lo pegarás en tu sitio en el siguiente paso.

HTML plano: Pega el fragmento justo antes de la etiqueta de cierre </body> en tu archivo HTML principal. Eso es todo — el widget aparecerá en cada página que incluya este script.

React / Next.js: Añade el script a tu layout raíz o usa un hook useEffect para inyectarlo dinámicamente. Si usas el App Router de Next.js, colócalo en app/layout.tsx usando el componente <Script> con strategy="afterInteractive".

Vue / Nuxt: En Nuxt, añade el script a nuxt.config.ts en el array app.head.script. En una app Vue estándar, inyéctalo en tu index.html o móntalo en el hook del ciclo de vida onMounted de App.vue.

Single-page apps: El widget persiste entre cambios de ruta automáticamente. No se necesita ningún manejo especial para la navegación del lado del cliente.

Paso 3: Configura la apariencia

De vuelta en Configuración → Widget, puedes personalizar cómo se ve y se comporta el widget:

Color de marca: Establece un color primario que coincida con tu marca. El botón del widget, los encabezados y los elementos de acento adoptarán este color.
Posición: Elige la ubicación inferior derecha o inferior izquierda. La inferior derecha es la convención que la mayoría de usuarios espera, pero elige la que evite superposición con otros elementos de tu interfaz.
Mensaje de bienvenida: Escribe un saludo corto que aparece cuando los usuarios abren el widget por primera vez. Mantenlo cálido y accionable — algo como “¡Hola! ¿Cómo podemos ayudarte hoy?”
Logo: Sube el logo de tu empresa para que aparezca en el encabezado del widget y mantener la coherencia de marca.

Los cambios se guardan al instante y se reflejan en tu sitio en producción sin necesidad de redesplegar.

El widget no es solo un cuadro de chat. Dependiendo de tu plan y configuración, los clientes pueden:

Iniciar o continuar conversaciones: Mensajería en tiempo real con tu equipo de soporte, con historial completo conservado entre sesiones.
Explorar tu base de conocimiento: Los artículos de tu centro de ayuda se muestran directamente dentro del widget, permitiendo a los usuarios autoservirse sin salir de tu aplicación.
Buscar respuestas: Una barra de búsqueda integrada consulta tu base de conocimiento para que los clientes encuentren artículos relevantes antes de abrir una conversación.
Enviar solicitudes de funciones: Si has activado los tableros de funciones, los usuarios pueden explorar y votar ideas sin salir de tu sitio.
Ver anuncios: Las entradas del changelog pueden aparecer en el widget, manteniendo a los clientes informados sobre nuevas funciones y correcciones.

Paso 5: Identifica a los usuarios con sesión iniciada

Por defecto, los visitantes del widget son anónimos. Para asociar conversaciones con usuarios conocidos — de modo que tu equipo vea nombres, correos electrónicos e historial — pasa los datos del usuario a través de la API de JavaScript:

<script>
  window.heedbackSettings = {
    user: {
      id: "usr_abc123",
      email: "jane@example.com",
      name: "Jane Doe",
    },
  };
</script>

Coloca esto antes del script de inserción. Cuando un usuario con sesión iniciada abre el widget, sus conversaciones se vinculan a su perfil en Heedback. Esto elimina la necesidad de que los usuarios se identifiquen manualmente y da a tus agentes contexto completo desde el primer mensaje.

Paso 6: Prueba antes de ir a producción

Antes de publicar en producción, verifica que el widget funciona correctamente:

Abre tu sitio en una ventana de incógnito para simular un visitante nuevo. El botón del widget debería aparecer en la posición configurada.
Envía un mensaje de prueba y confirma que llega a tu bandeja de Heedback.
Responde desde el panel y verifica que la respuesta aparece en el widget en tiempo real.
Prueba en móvil — el widget es responsivo y se adapta automáticamente a pantallas más pequeñas.
Revisa conflictos de z-index — si el widget aparece detrás de modales o encabezados fijos, contacta a soporte para orientación sobre sobrescrituras CSS.

Consejos y buenas prácticas

No ocultes el widget detrás de un menú. El objetivo es el acceso instantáneo. Déjalo visible flotando en cada página.
Usa usuarios identificados siempre que sea posible. Las conversaciones anónimas generan fricción cuando los usuarios regresan — pierden el historial y tus agentes pierden contexto.
Mantén tu base de conocimiento actualizada. El valor de autoservicio del widget depende del contenido que tiene detrás. Los artículos desactualizados erosionan la confianza.
Monitorea el engagement del widget en tu panel de analíticas de Heedback. Rastrea cuántos usuarios lo abren, cuántos se autoservicio vía artículos y cuántos inician conversaciones.

Funciones relacionadas

Base de conocimiento — Los artículos que tu widget muestra provienen de aquí. Un centro de ayuda bien organizado hace que el widget sea drásticamente más útil.
Respuesta automática con IA — Activa respuestas impulsadas por IA para que los clientes obtengan respuestas instantáneas incluso cuando tu equipo no está disponible.
Soporte multilingüe — Sirve el widget en el idioma preferido de tus clientes automáticamente.
Notificaciones — Asegúrate de que tu equipo reciba alertas en el momento en que un cliente se comunique a través del widget.

Cómo añadir el widget embebido a tu sitio web