Cómo añadir un chat en vivo a WordPress (sin programar)

Si tu web funciona con WordPress o WooCommerce, instalar el chat en vivo de Hodhod te llevará un par de minutos. En esta guía verás tres métodos: el recomendado usa el plugin gratuito Chat en vivo Hodhod, y los otros dos consisten en pegar el código con el plugin WPCode o directamente en tu tema.

Antes de empezar: copia el código desde el panel

Primero, crea una bandeja de entrada de sitio web en el panel de Hodhod; tienes el paso a paso (con capturas) en la guía para añadir el chat a tu web. Necesitarás el código de instalación, que aparece al crear la bandeja. Puedes volver a copiarlo cuando quieras: abre Ajustes → Entradas → tu bandeja de sitio web y, en la pestaña «Ajustes», cambia la vista previa del widget de «Previsualizar» a «Script».

Método 1 (recomendado): el plugin Chat en vivo Hodhod

El plugin oficial de Hodhod añade el widget a todas las páginas de tu web, te permite elegir su aspecto y lo carga sin ralentizar tus páginas.

1. Descarga el plugin: hodhod-live-chat-1.0.1.zip.
2. En el escritorio de WordPress, ve a Plugins → Añadir plugin y haz clic en «Subir plugin».
3. Elige el archivo zip que descargaste, haz clic en «Instalar ahora» y después en «Activar plugin».
4. Ve a Ajustes → Chat en vivo Hodhod.
5. Pega el código completo del panel de Hodhod en «Código o token del sitio» y haz clic en «Guardar cambios».

Y listo: el plugin extrae del código el token del sitio, y el botón del chat aparece en todas las páginas, incluidas las de producto, carrito y pago de WooCommerce. En esa misma página también puedes configurar:

• Posición: abajo a la derecha o abajo a la izquierda.
• Botón de chat: un botón redondo o un botón con tu propio texto.
• Tema: según el dispositivo del visitante, siempre claro o siempre oscuro.
• Idioma: por defecto, el widget sigue el idioma de tu web (con diseño de derecha a izquierda en persa y árabe); también puedes usar el idioma del navegador del visitante o elegir uno concreto.
• Velocidad de la página: la opción «Cargar el chat después de la página» (activada por defecto) carga el widget cuando el visitante hace scroll, toca la pantalla o pulsa una tecla por primera vez, o unos segundos después de que se cargue la página, así que no afecta a la velocidad de tu web.
• Usuarios conectados: si tus clientes inician sesión (por ejemplo, en su cuenta de WooCommerce), activa «Enviar el nombre y el correo de los usuarios conectados a Hodhod» y pega en «Clave secreta» la clave del campo «Secret Key», que está en la sección «Identity Validation» de la pestaña «Configuración» de esa misma bandeja (esta sección de Hodhod aparece en inglés en el panel en español). Así tu equipo sabe con quién está hablando, y los clientes siguen en la misma conversación aunque cambien de dispositivo. La clave se queda en tu servidor y nunca se envía al navegador.

Método 2: el plugin WPCode

Si ya usas WPCode (nombre completo: «WPCode – Insert Headers and Footers + Custom Code Snippets») para añadir código a tu web, puedes pegar ahí el código de Hodhod:

1. En el escritorio de WordPress, ve a Plugins → Añadir plugin.
2. Busca «WPCode» y, a continuación, instala y activa «WPCode – Insert Headers and Footers».
3. En el menú lateral, ve a Code Snippets → Header & Footer.
4. Pega el código de Hodhod en el cuadro Footer.
5. Haz clic en «Save Changes».

A partir de ahora, el código se carga en todas las páginas de tu web y se mantiene aunque actualices tu tema o cambies a otro.

Método 3: edita el archivo de tu tema

Si prefieres no instalar ningún plugin, puedes pegar el código directamente en el archivo del pie de página de tu tema:

1. En el escritorio, ve a Apariencia → Editor de archivos de temas.
2. Abre footer.php en la lista de archivos.
3. Pega el código de Hodhod justo antes de </body> y haz clic en «Actualizar archivo».

Dos notas importantes: si editas el tema principal (y no un tema hijo), la próxima actualización del tema borrará este cambio, así que crea un tema hijo o usa el método 1. Los temas de bloques más recientes (como Twenty Twenty-Four) no tienen footer.php, por lo que con ellos solo funcionan los métodos 1 y 2.

Después de instalarlo: pruébalo

Abre tu web en una ventana privada del navegador y desplázate un poco: el botón del chat aparecerá en la parte inferior de la página. Envía un mensaje de prueba y comprueba que llega a «Conversaciones» en el panel de Hodhod.

Cómo solucionar los problemas más comunes

El widget no aparece

Casi siempre es cosa de la caché. Borra la caché de plugins como WP Rocket, LiteSpeed Cache o W3 Total Cache —y la de tu CDN, si usas una— y vuelve a probar. Con el plugin de Hodhod, comprueba también que la casilla «Mostrar el widget de chat en mi sitio» esté marcada y que el código del sitio esté guardado.

El widget tarda en aparecer

Con el plugin de Hodhod es intencionado: el chat espera a la primera interacción del visitante, o unos segundos, para que tu contenido se cargue primero. Si quieres que aparezca en cuanto se cargue la página, desmarca «Cargar el chat después de la página». Con los métodos 2 y 3, algunos plugins de optimización de velocidad retrasan la ejecución de los scripts hasta la primera interacción (por ejemplo, con una opción como «Delay JavaScript execution»); si quieres que el widget se vea desde el primer momento, excluye sdk.js de esa opción.

Mi web es multilingüe

Con el plugin de Hodhod, deja el idioma en «Igual que este sitio»: con plugins como WPML o Polylang, el widget sigue el idioma de cada página. Con los métodos 2 y 3, añade antes del código principal window.chatwootSettings con el locale de cada página; tienes los detalles en la guía de instalación.

Preguntas frecuentes