Como instalar el script de ChateCommerce en WordPress y WooCommerce (todas las formas)

Si acabas de crear tu cuenta en ChateCommerce y necesitas activar el widget en tu tienda, el primer paso es insertar el script en el footer de tu sitio WordPress. Existen varios métodos para hacerlo, y en esta guía los cubrimos todos: desde la opción más recomendada con un plugin dedicado, hasta la edición directa del tema y la integración desde constructores visuales como Elementor.

Elige el método que mejor se adapte a tu nivel técnico y a la configuración de tu tienda.

¿Por qué el script debe ir en el footer?

Los scripts de widgets de chat y atencion al cliente como el de ChateCommerce deben cargarse en el footer del sitio (antes del cierre de la etiqueta </body>) por tres razones fundamentales:

• Rendimiento: El contenido principal de la pagina carga primero, sin ser bloqueado por el script.
• Compatibilidad: La mayoría de los widgets necesitan que el DOM esté completamente construido para inicializarse correctamente.
• SEO: Google prioriza la velocidad de carga; colocar scripts externos en el footer evita penalizaciones por bloqueo de renderizado.

Método 1: WP Code (recomendado)

WP Code (anteriormente conocido como Insert Headers and Footers) es el plugin más utilizado para insertar scripts en WordPress sin tocar el código del tema. Es la opción más segura porque el código no se pierde al actualizar el tema.

Paso 1: Instalar WP Code

1. En tu panel de administración de WordPress, ve a Plugins > Añadir nuevo.
2. Busca WP Code.
3. Haz clic en Instalar ahora y luego en Activar.

Paso 2: Insertar el script de ChateCommerce

4. En el menú lateral, ve a Code Snippets > Header & Footer.
5. En la sección Footer, pega el script de ChateCommerce que obtuviste desde tu panel de configuración.
6. Haz clic en Guardar cambios.

Tip: El script de ChateCommerce lo encuentras en tu cuenta, en la sección de configuración del widget. Copialo completo, incluyendo las etiquetas <script> de apertura y cierre.

¿Por qué usar WP Code?

• No depende del tema activo: el script sobrevive a actualizaciones y cambios de plantilla.
• Permite activar o desactivar snippets sin eliminarlos.
• Versión gratuita más que suficiente para este caso de uso.

Método 2: Gestor de código del tema (functions.php o editor de archivos)

Este método consiste en insertar el script directamente en el archivo footer.php de tu tema hijo, o encolarlo mediante functions.php. Es adecuado si tienes experiencia técnica y trabajas con un tema hijo activo.

Aviso: Nunca edites el tema padre directamente. Los cambios se perderán con cada actualización. Si no tienes un tema hijo configurado, usa el Método 1.

Opción A: Editar footer.php desde el editor de archivos de WordPress

7. Ve a Apariencia > Editor de archivos de temas.
8. En el panel derecho, selecciona tu tema hijo y abre el archivo footer.php.
9. Ubica la etiqueta </body> y pega el script de ChateCommerce justo antes de ella.
10. Haz clic en Actualizar archivo.

Opción B: Usar wp_footer() en functions.php (mas limpia)

11. Ve a Apariencia > Editor de archivos de temas.
12. Selecciona el archivo functions.php de tu tema hijo.
13. Agrega el script que te da la plataforma ChateComemrce al momento de la integración, y coloca dentro del archivo. bloque de código al final del archivo:

function chatecommerce_widget_script() {

    ?>

    <!-- Pega aqui tu script de ChateCommerce -->

    <script>
      // Tu codigo de ChateCommerce va aqui
    </script>

    <?php

}

add_action( 'wp_footer', 'chatecommerce_widget_script' );

14. Reemplaza el comentario interno con tu script real y haz clic en Actualizar archivo.

Opción C: Editar desde el administrador de archivos del hosting (cPanel / FTP)

15. Accede a tu hosting por cPanel > Administrador de archivos o mediante un cliente FTP como FileZilla.
16. Navega hasta wp-content/themes/tu-tema-hijo/.
17. Abre el archivo footer.php con el editor de texto.
18. Pega el script antes del cierre de </body>.
19. Guarda los cambios.

Método 3: Elementor

Si tu tienda esta construida con Elementor (ya sea la versión gratuita o Elementor Pro), puedes insertar el script de ChateCommerce sin necesidad de plugins adicionales.

Con Elementor Free: a través de WP Code

Elementor Free no incluye un gestor de scripts propio. En este caso, la combinación recomendada es usar WP Code (Método 1), ya que el widget aparecerá en todas las paginas del sitio, incluyendo las creadas con Elementor.

Con Elementor Pro: Custom Code

20. En el panel de WordPress, ve a Elementor > Custom Code.
21. Haz clic en Add New.
22. Asigna un nombre descriptivo, por ejemplo: Widget ChateCommerce.
23. En el campo de codigo, pega el script de ChateCommerce.
24. En la opción Location, selecciona Body – End (equivalente al footer).
25. En Conditions, elige Entire Site para que aparezca en toda la tienda.
26. Publica el codigo.

Tip: Si quieres que el widget solo aparezca en páginas de la tienda (producto, carrito, checkout), puedes configurar las condiciones de Elementor Pro para limitarlo a esas paginas especificas.

Método 4: Divi Builder

Si tu tienda usa el tema Divi de Elegant Themes:

27. Ve a Divi > Opciones del tema.
28. Abre la pestaña Integración.
29. Activa la casilla Activar código de cabecera y pie de página.
30. En el campo Añadir código al <body>, pega el script de ChateCommerce.
31. Guarda los cambios.

Método 5: Personalización del tema (Customizer de WordPress)

WordPress incluye una sección de personalización que, dependiendo del tema, puede permitir insertar scripts:

32. Ve a Apariencia > Personalizar.
33. Busca una sección llamada CSS adicional o Configuración avanzada (varia según el tema).
34. Algunos temas premium incluyen campos para scripts en el header/footer directamente en el Customizer.

Aviso: Este método no es recomendable para scripts JavaScript porque el campo de CSS adicional solo acepta estilos, no código JS. Usalo únicamente si tu tema incluye un campo específico para scripts de footer.

Método 6: Plugins de gestión de etiquetas (Google Tag Manager)

Si ya utilizas Google Tag Manager (GTM) en tu tienda, puedes insertar el script de ChateCommerce directamente desde GTM sin necesidad de tocar el codigo de WordPress:

35. Accede a tu cuenta de Google Tag Manager.
36. Ve a Etiquetas > Nueva.
37. Selecciona el tipo de etiqueta HTML personalizado.
38. Pega el script de ChateCommerce.
39. En Activadores, selecciona All Pages (o el conjunto de paginas que prefieras).
40. Guarda y publica el contenedor.

Esta opción es ideal si tu equipo de marketing gestiona múltiples scripts y prefiere centralizar todo desde GTM.

Verificación: como confirmar que el script está instalado correctamente?

Una vez instalado el script por cualquiera de los métodos anteriores, sigue estos pasos para verificar que funciona:

41. Abre tu tienda en una pestaña de incógnito.
42. Revisa que el widget de ChateCommerce aparezca visible en la esquina de la pantalla.
43. Si no aparece, abre las herramientas de desarrollador del navegador (F12), ve a la pestaña Consola y busca errores relacionados con el script.
44. También puedes ir a Ver código fuente (Ctrl+U) y buscar el texto del script para confirmar que está siendo cargado en el HTML de la página.

Desde tu panel de ChateCommerce tambien podras confirmar si el widget está activo y recibiendo visitas.

Resumen comparativo de métodos

Preguntas frecuentes

El script de ChateCommerce afecta la velocidad de mi tienda?

No de forma significativa. El script está diseñado para cargarse de manera asíncrona, lo que significa que no bloquea el renderizado de la página. Colocarlo en el footer refuerza aún más este comportamiento.

Necesito instalar el script en todas las páginas de WooCommerce?

Si. Para que el widget esté disponible en toda la experiencia de compra (inicio, categorías, fichas de producto, carrito y checkout), se recomienda instalarlo en todo el sitio. Algunos métodos como Elementor Pro te permiten segmentar por paginas si lo prefieres.

¿Qué pasa si tengo cache activa en mi WordPress?

Después de instalar el script, limpia la caché de tu sitio (desde tu plugin de cache o desde el hosting) para asegurarte de que los visitantes carguen la versión actualizada del sitio con el widget activo.

¿Puedo instalar el script sin un tema hijo?

Si, usando WP Code o Elementos Pro (Métodos 1 y 3), ya que no dependen del tema activo. Si prefieres editar archivos del tema directamente, siempre crea primero un tema hijo para no perder los cambios.

Conclusión

Instalar el widget de ChateCommerce en tu tienda WordPress y WooCommerce es un proceso sencillo que puedes completar en pocos minutos. El método más recomendado para la mayoría de los usuarios es WP Code: es seguro, no requiere conocimientos técnicos y el script se mantiene activo independientemente de los cambios de tema.

Si ya usas Elementor Pro, Divi o Google Tag Manager, aprovecha las opciones nativas de cada herramienta para mantener tu configuración organizada.

Una vez activado el widget, tu tienda estará lista para recibir consultas, automatizar respuestas y convertir más visitas en ventas con ChateCommerce.