Instalar el widget de chat en otras plataformas
Dónde pegar el script de intoCHAT en Wix, Webflow, Squarespace, Framer, Bubble, Joomla, Drupal, Ghost, Magento, VTEX y otras, con guías paso a paso.
intoCHAT funciona en cualquier plataforma que te permita añadir un script a tus páginas. La regla es siempre la misma: pega la etiqueta script de la pestaña Share en un campo que inserte código al final del body, en todas las páginas.
La regla general
- Busca un campo llamado código del pie de página, final del body o similar. Un campo de cabecera o head también sirve, porque el widget espera a que cargue la página, pero el final del body es el lugar recomendado.
- Aplica el código a todas las páginas.
- Publica la web. La mayoría de los creadores web solo añaden el código personalizado a la web publicada, no a la vista previa del editor.
- Si la plataforma modifica tus etiquetas script y elimina el atributo
data-chatbot-id, usa Google Tag Manager.
El código y su único atributo se explican en Instalar con una etiqueta script.
Creadores web y CMS
| Plataforma | Dónde va el código | Guía |
|---|---|---|
| Wix | Ajustes → Código personalizado, todas las páginas, posición Cuerpo - final | Wix |
| Webflow | Site settings → Custom code → Footer code, y después publicar | Webflow |
| Squarespace | Código personalizado → Inserción de código → Pie de página | Squarespace |
| Framer | Project Settings → Custom Code → Add Script, final del body, ejecución Once | Framer |
| Bubble | Settings → SEO / metatags → campo body | Bubble |
| Joomla | Un módulo Custom en una posición visible en todas las páginas, creado con un editor que conserve los scripts | Joomla |
| Drupal | Una librería de tu tema que carga el script en el footer | Drupal |
| Ghost | Settings → Advanced → Code injection → Site footer | Ghost |
| WordPress | El plugin oficial | Documentación de WordPress |
Tiendas online
| Plataforma | Dónde va el código | Guía |
|---|---|---|
| Shopify | theme.liquid, justo encima de </body> | Documentación de Shopify |
| WooCommerce | El plugin oficial de WordPress | WooCommerce |
| Magento | Content → Design → Configuration → Footer → Miscellaneous HTML | Magento |
| VTEX | Una etiqueta de HTML personalizado en Google Tag Manager, o el código de tu storefront | VTEX |
En todas estas tiendas, Connect your website en la pestaña Actions también puede darle al agente búsqueda de productos en directo a partir de los datos públicos de la tienda. Consulta Conectar tu tienda.
Frameworks
| Plataforma | Dónde va el código | Guía |
|---|---|---|
| Next.js | next/script en el layout raíz | Next.js |
| React | index.html, o un componente con useEffect | React |
Ambos se explican en Next.js y React.
Google Tag Manager
Google Tag Manager elimina los atributos data como data-chatbot-id de las etiquetas script dentro de etiquetas de HTML personalizado, así que el código normal se carga sin saber qué agente mostrar. Usa en su lugar este código en una etiqueta de HTML personalizado, con el ID de tu agente, y actívala con un activador DOM preparado:
<script>
(function () {
if (document.getElementById('intochat-embed')) return;
var s = document.createElement('script');
s.id = 'intochat-embed';
s.src = 'https://www.intochat.ai/api/embed.js';
s.setAttribute('data-chatbot-id', 'YOUR_AGENT_ID');
document.body.appendChild(s);
})();
</script>
La comprobación del principio evita que el script se cargue otra vez si la etiqueta se activa dos veces en la misma página. Tienes todos los pasos en la guía de Google Tag Manager.
Tu plataforma no aparece
- Si permite añadir HTML o un script al final del body, la etiqueta script funciona.
- Si solo admite código en el head, pega ahí la etiqueta script. También funciona en el head.
- Si no admite ningún código personalizado, enlaza la página de chat de tu agente desde un botón o un elemento del menú.