Cómo instalar el asistente en tu web

Una vez configurado tu asistente, instalarlo es pegar un pequeño snippet en tu web. Aquí tienes el código, las instrucciones por plataforma y cómo comprobar que funciona.

Opción 1: Script (recomendado)

En el menú lateral, en Canales, abre Sitio web y, en la sección Instalar en tu web, copia el bloque Código de inserción entero (botón Copiar). Son dos etiquetas <script>, así:

<script>window.ChatME={chatbotId:"TU_ID_DE_CHATBOT",mode:"popup",baseUrl:"https://app.chatme.es"}</script>
<script
  src="https://app.chatme.es/widget/chatbot.js"
  data-chatbot-id="TU_ID_DE_CHATBOT"
  data-mode="popup"
  data-base-url="https://app.chatme.es"
  data-no-optimize="1"
  data-no-defer="1"
  async
></script>

Pega las dos etiquetas juntas, tal cual, justo antes del cierre </body> en cada página donde quieras que aparezca el asistente.

El código sigue el Modo del widget que tienes guardado en Apariencia, que es donde se elige, con su vista previa en vivo; encima del código verás cuál es, por ejemplo «Modo: Popup · cámbialo en Apariencia». Si eliges En línea, el código dice inline en lugar de popup y no va antes de </body>: pégalo dentro de un bloque propio (un bloque HTML o Embed de tu editor, o un <div>), en el sitio de la página donde quieras el asistente; aparece dentro de ese bloque.

Si ya tienes el código pegado en tu web y cambias el modo en Apariencia:

• De Popup a En línea: el cambio se ve en tu web al momento, sin tocar nada, al final de la página (donde está pegado el código, antes de </body>). Copia el código nuevo y pégalo en un bloque propio donde quieras el asistente.
• De En línea a Popup: un código En línea ya pegado sigue en línea hasta que lo sustituyas. Cópialo de nuevo y sustituye el anterior.

No quites ninguna línea; cada una tiene su función:

• window.ChatME repite el ID de tu asistente en una línea aparte. Si un plugin de optimización junta los scripts de tu web en un solo archivo, esta línea se conserva y el asistente sigue sabiendo cuál es.
• data-no-optimize="1" y data-no-defer="1" piden a LiteSpeed Cache que no combine ni retrase este script. WP Rocket y Autoptimize no leen estos atributos: en ellos, excluye chatme en los ajustes de JavaScript del plugin.

Opción 2: iframe

Si tu editor no te deja pegar scripts pero sí un iframe (un bloque HTML o Embed que acepta código <iframe>), usa el iframe. En Sitio web → Instalar en tu web, elige <iframe> en Tipo de inserción y copia el Código de inserción (botón Copiar). Se parece a esto (es un ejemplo; copia siempre el de tu panel):

<iframe
  src="https://app.chatme.es/widget/embed/TU_ID_DE_CHATBOT?mode=popup"
  width="400"
  height="600"
  frameborder="0"
  allow="clipboard-write"
  style="border-radius: 16px; box-shadow: 0 4px 24px rgba(0,0,0,.12);"
></iframe>

El iframe es autocontenido y no necesita configuración extra; ajusta el ancho (width) y el alto (height) a tu gusto. Muestra siempre el chat dentro de su recuadro, aunque en Apariencia tengas «Popup»: pégalo en el sitio de la página donde quieras que se vea.

Si tu web no admite código (Canva y similares)

Algunos creadores de webs no dejan pegar ni scripts ni iframes; por ejemplo, las webs hechas con Canva. En ellas el asistente no puede ir dentro de la página, pero sí puedes enlazarlo con un botón:

1. En Sitio web, en la tarjeta Tu enlace para clientes, copia tu enlace (app.chatme.es/c/…).
2. En tu editor, añade un botón o un texto, por ejemplo «Pregunta a nuestro asistente», y ponle ese enlace. En Canva: selecciona el elemento → Más (…) → Enlace → pega el enlace.
3. Publica de nuevo tu web para que el botón funcione.

En Canva un botón no puede quedarse flotando en la pantalla: ponlo en las secciones que más se ven, como la primera y la de contacto. Si tu web ya tiene un botón de WhatsApp o de Instagram, también puedes conectar al asistente WhatsApp o Instagram (planes Pro y E-commerce) y así responde ahí sin tocar la web. Más ideas para tu enlace en Compartir tu enlace directo.

Instrucciones por plataforma

Estas ubicaciones son para Popup. Con En línea, usa un bloque HTML/Embed en la página donde quieras el chat.

En WordPress, evita pegarlo directamente en footer.php: una actualización del tema podría sobrescribirlo. Usa un plugin de scripts.

Dominios permitidos

Por defecto el asistente funciona en cualquier dominio. Para limitarlo a tu web (y que nadie copie tu snippet en otro sitio), añade tus dominios en Sitio web → Instalar en tu web → Dominios permitidos y pulsa Guardar:

miempresa.com, www.miempresa.com, app.miempresa.com

Déjalo en blanco para permitir todos los dominios.

La lista se aplica al código script. El iframe y tu enlace para clientes funcionan en cualquier web.

Comprobar que funciona

1. Abre tu web en el navegador (evita el modo incógnito para no tener problemas de cookies).
2. Espera 2–3 segundos a que cargue el script.
3. Verás la burbuja flotante en la esquina inferior (o donde la hayas configurado). Con En línea, el chat aparece dentro del bloque donde pegaste el código.
4. Haz clic, escribe una pregunta y comprueba que responde.

Si no aparece el asistente

La causa más habitual, sobre todo en WordPress, es un plugin que optimiza el JavaScript (LiteSpeed Cache, WP Rocket, Autoptimize y similares). Estos plugins pueden combinar los scripts de tu web en un solo archivo; muchas webs tienen esa opción activada (a veces la activa el propio hosting). Al hacerlo pueden perder la etiqueta que lleva el ID de tu asistente: el asistente no aparece y la página no muestra ningún error. En la consola del navegador (F12 → Console) verás un aviso que empieza por [Chatbot] No chatbot id found.

Cómo arreglarlo:

1. Vuelve a copiar el código de Sitio web → Instalar en tu web y sustituye el que tienes pegado. El código actual ya lleva la línea window.ChatME y los atributos data-no-optimize="1" y data-no-defer="1"; si pegaste el tuyo hace tiempo, puede que no los tenga.
2. Purga toda la caché del plugin de optimización y recarga la página.
3. Si usas WP Rocket o Autoptimize, o si sigue sin aparecer, excluye chatme de la optimización de JavaScript en los ajustes del plugin (combinar, diferir o retrasar JS) y vuelve a purgar la caché. Los atributos data-no-optimize y data-no-defer solo los lee LiteSpeed Cache.

Otras comprobaciones:

• Abre la consola del navegador (F12 → Console) y busca errores en rojo o avisos que empiecen por [Chatbot].
• Verifica que el snippet está en <body> y no en <head>.
• Comprueba que el data-chatbot-id es correcto (cópialo de nuevo desde el panel).
• Si limitaste los dominios, asegúrate de que el dominio actual está en la lista (incluido www. si lo usas).
• Otras cachés (W3 Total Cache, Cloudflare) también pueden servir una versión antigua de la página: purga la caché tras pegar el snippet.

¿Sigues sin verlo?

Abre el Asistente ChatME en tu panel y pega el error de la consola: te ayuda a diagnosticarlo. También puedes empezar por la guía de primeros pasos si aún no has terminado de configurarlo.