Cómo añadir un chat en vivo a Shopify, Wix, Squarespace y Webflow

El widget de chat en vivo de Hodhod es un breve fragmento de JavaScript, así que funciona en cualquier creador de sitios web que te permita añadir código personalizado. Esta guía te muestra exactamente dónde pegarlo en Shopify, Wix, Squarespace y Webflow, y cómo añadirlo con Google Tag Manager cuando prefieres no tocar el código de la web.

¿Usas WordPress o WooCommerce? Empieza por la guía de WordPress: hay un plugin ya preparado.

Antes de empezar

Necesitas el código de instalación de tu bandeja de entrada. Si todavía no has creado una bandeja de sitio web, los pasos 1 a 4 de la guía para añadir el chat a tu web te llevarán unos minutos. Puedes volver a copiar el código cuando quieras: abre Ajustes → Entradas → tu bandeja de sitio web y, en la pestaña «Ajustes», cambia la vista previa del widget a «Script».

Los nombres de menús y botones de Shopify, Wix, Squarespace y Webflow que verás a continuación están en inglés y pueden variar si la plataforma se ha actualizado o está configurada en otro idioma.

Shopify

1. En el panel de administración de Shopify, ve a Online Store → Themes.
2. Junto al tema que quieras editar, haz clic en el botón «…» y elige «Duplicate». Trabajar sobre una copia te permite probar con seguridad.
3. En la copia, haz clic otra vez en «…» y elige «Edit code».
4. En la carpeta «Layout», abre theme.liquid.
5. Desplázate hasta el final y pega el código de Hodhod justo encima de la etiqueta de cierre </body>.
6. Guarda, previsualiza la copia y, cuando todo funcione, publícala.

Notas:

• El código vive dentro del tema. Si cambias de tema, añádelo al nuevo. Shopify también avisa de que los cambios en el código del tema pueden perderse al actualizarlo.
• Un tema que solo estás probando no se puede editar.
• El checkout de Shopify es independiente de tu tema, así que el widget aparece en las páginas de tu tienda (inicio, colecciones, productos, carrito), pero no en los propios pasos del pago.

Wix

1. En el panel de tu sitio, ve a Settings y abre «Custom Code» en «Development & integrations».
2. Haz clic en «+ Add Custom Code» y pega el código de Hodhod.
3. Ponle un nombre reconocible, como «Hodhod chat».
4. En «Add Code to Pages», elige «All pages» y, en «Place Code in», elige «Body – end».
5. Decide si el código se carga una vez por visita o en cada página y haz clic en «Apply».

Notas:

• El sitio debe estar publicado y tener un dominio conectado, lo que a su vez requiere un plan Premium.
• Los fragmentos de código están vinculados al dominio: si asignas otro dominio al sitio, se eliminan.
• Wix no ofrece soporte para código de terceros. Si el widget no aparece después de publicar, consulta las directrices de Wix sobre código personalizado por si ha habido restricciones recientes.

Squarespace

1. Abre el panel de tu sitio y ve a Website Tools → Code Injection. (Squarespace ha cambiado el nombre y la ubicación de algunos menús entre versiones, así que busca «Code Injection» si la ruta es distinta.)
2. Pega el código de Hodhod en el campo «Footer».
3. Haz clic en «Save».

Notas:

• Code Injection está disponible en los planes Core, Plus y Advanced (y en algunos planes antiguos), no en Basic.
• El código del pie de página se añade antes de la etiqueta de cierre </body> en todas las páginas.
• Puede que Squarespace no ejecute los scripts inyectados mientras tienes la sesión iniciada, así que comprueba el resultado en una ventana privada del navegador, en tu sitio ya publicado.

Webflow

1. Abre los Site settings de tu proyecto y ve a la pestaña «Custom code».
2. Pega el código de Hodhod en «Footer code», para que se cargue justo antes de la etiqueta de cierre </body>, y haz clic en «Save changes».
3. Publica tu sitio. El código personalizado se ve en la vista previa, pero solo se activa tras publicar.

Notas:

• Para añadir el widget solo a una página, usa los ajustes de esa página, en el cuadro «Before </body> tag».
• Si no encuentras el ajuste, consulta la ayuda de Webflow para ver qué permiten tu plan y tu rol.

Cualquier web, con Google Tag Manager

Si Google Tag Manager ya está en tu web, puedes añadir el widget sin editar la web en absoluto:

1. En Tag Manager, ve a Tags y haz clic en «New».
2. Elige el tipo de etiqueta «Custom HTML» y pega el código de Hodhod.
3. En Triggering, elige «All Pages».
4. Guarda y, a continuación, haz clic en Submit y Publish en el contenedor.

El widget guarda una pequeña cookie en el navegador del visitante para que una conversación pueda continuar de una página a otra. Si tu web pide consentimiento de cookies, usa el activador de tu herramienta de consentimiento para que la etiqueta se ejecute solo después de que se acepten.

Pruébalo

Abre tu web publicada 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 Hodhod.

Si has definido «Allowed Domains» en la pestaña «Configuración» de la bandeja de entrada (opción que aparece en inglés en el panel en español), añade todos los dominios en los que se ejecuta el widget, separados por comas: tu dominio real y también cualquier dominio de vista previa o predeterminado en el que pruebes (por ejemplo, your-store.myshopify.com, yoursite.wixsite.com o yourproject.webflow.io). De lo contrario, el widget permanece oculto en los que falten.

Si el widget no aparece

1. Comprueba que has publicado. Wix y Webflow solo ejecutan el código personalizado en el sitio publicado.
2. Comprueba la ubicación. El fragmento debe estar en la zona de pie de página o «Body – end» que se carga en todas las páginas.
3. Comprueba Allowed Domains. El dominio en el que estás probando debe figurar en la lista.
4. Busca una segunda copia. Si ves dos botones de chat, el código se ha añadido dos veces, por ejemplo en el tema y en un gestor de etiquetas. Quédate con una.
5. Prueba sin bloqueador de anuncios y mira si hay errores en la consola del navegador (F12).

Preguntas frecuentes