Cómo añadir el chat en vivo de Hodhod a tu web, paso a paso

En esta guía vas a configurar el widget de chat en vivo de Hodhod en tu web, desde la creación de la bandeja de entrada en el panel hasta el primer mensaje de un cliente. Solo lleva unos minutos y no hay que instalar nada en tu servidor: basta con pegar un breve fragmento de código en tu web.

Antes de empezar

• Acceso de administrador al panel de Hodhod. Solo los administradores de la cuenta pueden crear bandejas de entrada.
• Una forma de editar el código o la plantilla de tu web. Si tu web funciona con WordPress, la guía para WordPress es todavía más sencilla.

Paso 1: crea una bandeja de entrada de sitio web

En el panel, ve a Ajustes → Entradas y haz clic en «Añadir bandeja de entrada». En la lista de canales, elige «Sitio web» (Create a live-chat widget).

Paso 2: completa el formulario «Canal del sitio web»

• Nombre del sitio web: el nombre que ven los clientes en la parte superior del widget; por ejemplo, el nombre de tu tienda o de tu marca.
• Dominio del sitio web: el dominio en el que funcionará el widget, como example.com.
• Color del widget: elige el color de tu marca para que el widget parezca parte de tu web.
• Cabecera de bienvenida y Bienvenido Tagline: el texto que ven los clientes en la primera pantalla del widget.
• Habilitar bienvenida al canal (opcional): un mensaje que se envía automáticamente al empezar una conversación.

Después, haz clic en «Crear bandeja de entrada».

Paso 3: añade agentes a la bandeja de entrada

A continuación, en «Elegir agentes para la bandeja de entrada», selecciona a las personas que deben responder las conversaciones de esta web y haz clic en «Añadir agentes». Solo los agentes que añadas aquí pueden ver los mensajes de esta bandeja; si tú también quieres responder, añádete.

Paso 4: copia el fragmento de código

La pantalla «¡Tu bandeja de entrada está lista!» muestra el fragmento de código de instalación. Haz clic en «Copiar».

El fragmento tiene este aspecto, salvo que el valor de websiteToken es único para tu bandeja de entrada; por eso, copia siempre el código desde tu propio panel:

<script>
  (function(d,t) {
    var BASE_URL="https://hodhod.chat";
    var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=BASE_URL+"/packs/js/sdk.js";
    g.async = true;
    s.parentNode.insertBefore(g,s);
    g.onload=function(){
      window.chatwootSDK.run({
        websiteToken: 'YOUR_WEBSITE_TOKEN',
        baseUrl: BASE_URL
      })
    }
  })(document,"script");
</script>

¿Necesitas el código más adelante? Abre la bandeja de entrada, busca la vista previa del widget en la pestaña «Ajustes» y cámbiala a «Script».

Paso 5: pega el código en tu web

Pega el código justo antes de la etiqueta de cierre </body> en la plantilla principal de tu web, para que se cargue en todas las páginas:

• Web en HTML estático: en cada página, o en el pie de página común si lo tienes.
• Plantillas PHP: normalmente, footer.php o el archivo de la plantilla principal.
• Aplicaciones de una sola página (React, Vue, etc.): una sola vez en index.html, no dentro de los componentes.
• WordPress: consulta la guía específica para WordPress.
• Shopify, Wix, Squarespace, Webflow o Google Tag Manager: consulta la guía para creadores de sitios web.

El fragmento se carga de forma asíncrona, así que no bloquea la carga de tu página.

Paso 6: pruébalo

Abre tu web (mejor en una ventana privada del navegador). El botón del chat debería aparecer en la esquina inferior. Envía un mensaje de prueba y comprueba que llega a «Conversaciones» en el panel. Eso es todo: tu widget ya está funcionando.

Ajustes recomendados después de la instalación

Ajusta el idioma y el tema del widget a tu web

Por defecto, el widget usa el idioma de tu cuenta y sigue el modo claro u oscuro del sistema del visitante. Para ajustarlo exactamente a tu web, añade esto antes del fragmento principal:

<script>
  window.chatwootSettings = {
    locale: 'en',
    darkMode: 'auto',
  };
</script>

• locale es el idioma del widget; por ejemplo, es en las páginas en español y en en las páginas en inglés.
• darkMode puede ser light, dark o auto.
• Si tu web tiene su propio selector de tema o de idioma, llama a window.$chatwoot.setColorScheme('dark') o a window.$chatwoot.setLocale('es') cuando cambie, para que el widget lo siga al instante.

Muestra la cola y el tiempo de espera estimado

En la bandeja de entrada, en la pestaña «Ajustes», dentro de «Widget features», activa «Show estimated wait time» y «Show live queue position». Así, los clientes que esperan ven cuántas personas tienen delante y cuánto tendrán que esperar aproximadamente. La estimación solo aparece cuando la bandeja tiene suficientes datos recientes para que sea fiable. Estas opciones propias de Hodhod aparecen en inglés en el panel en español.

Otros ajustes que vale la pena revisar

• Pestaña «Horarios»: define el horario de tu equipo para que los clientes sepan cuándo recibirán respuesta fuera de él.
• Pestaña «Pre-formulario de chat»: pide el nombre, el correo electrónico o el teléfono antes de que empiece el chat, si lo necesitas (qué pedir).
• Pestaña «Encuestas de Satisfacción»: activa la encuesta de satisfacción al terminar el chat; también puedes añadir preguntas de seguimiento.
• Pestaña «Configuración» → «Allowed Domains»: asegúrate de que el widget solo funcione en tus propios dominios.
• «Activar caja de recolección de correo electrónico» en la pestaña «Ajustes»: para que los clientes que salen de la página reciban igualmente la respuesta por correo.

Si el widget no aparece

1. Borra la caché. Los plugins de caché o una CDN pueden estar sirviendo una versión antigua de la página.
2. Comprueba dónde está el código. Tiene que estar en una plantilla que se cargue en todas las páginas.
3. Revisa «Allowed Domains». Si definiste una lista, el dominio de tu web (y los subdominios, si hace falta) tiene que estar en ella.
4. Mira la consola del navegador. Pulsa F12, abre la consola y busca errores. Si usas un bloqueador de anuncios, prueba una vez sin él.

¿Sigues sin conseguirlo? Escríbenos desde el widget de la parte inferior de esta página.

Preguntas frecuentes