Instrucciones paso a paso para agregar el widget de chat de IcloneU a tu sitio web o app, con una guía para cada plataforma.
6 min de lectura
PrincipianteActualizado el octubre 4, 2026
Agregar el widget de chat de IcloneU a tu sitio web permite que tus visitantes hablen con tu Clon sin salir de tu sitio. Elige tu plataforma abajo y sigue los pasos para insertar el widget.
Nota
En todas las plataformas pegas el mismo fragmento: un pequeño script que contiene tu clave de widget. Copia ese fragmento antes de empezar: abre Claves API en la barra lateral izquierda, selecciona tu llave, haz clic en Insertar y usa Copiar script en la pestaña Chat web. Luego sigue los pasos de tu plataforma.
Agrega el widget a tu sitio
📝 Cómo agregar el chat a tu app de Blazor
La navegación mejorada de Blazor actualiza la página sin recargarla completamente, lo que requiere algunos pasos adicionales en comparación con un sitio HTML estándar. Sigue estos pasos para que el widget persista en todas las navegaciones.
Abre tu archivo App.razor — este es el componente raíz que se renderiza en cada página de tu app.
Dentro de la etiqueta <body>, después de tu componente <Routes />, agrega el div de anclaje y los dos scripts que se muestran a continuación.
Reemplaza YOUR_API_KEY con tu API key real del diálogo de conexión.
<!-- Coloca este bloque en App.razor, dentro de <body>, después de <Routes /> --> <div id="chat-placeholder" data-permanent></div> <script> (function () { // Preserva el DOM del widget durante la navegación mejorada de Blazor. // Antes del morphing: mueve los nodos a un fragmento para protegerlos. // Después del morphing: restaura los nodos y el stylesheet en la página. function waitForBlazor(callback) { if (window.Blazor && typeof window.Blazor.addEventListener === 'function') { callback(); } else { setTimeout(function () { waitForBlazor(callback); }, 50); } } waitForBlazor(function () { Blazor.addEventListener('enhancednavigationstart', function () { var ph = document.getElementById('chat-placeholder'); if (!ph || ph.children.length === 0) return; window.__chatWidgetFragment = document.createDocumentFragment(); while (ph.firstChild) { window.__chatWidgetFragment.appendChild(ph.firstChild); } }); Blazor.addEventListener('enhancedload', function () { var ph = document.getElementById('chat-placeholder'); if (!ph || !window.__chatWidgetFragment) return; ph.appendChild(window.__chatWidgetFragment); window.__chatWidgetFragment = null; // Restaura el stylesheet si el morphing de Blazor lo eliminó if (!document.getElementById('icloneu-chat-styles')) { var link = document.createElement('link'); link.id = 'icloneu-chat-styles'; link.rel = 'stylesheet'; link.type = 'text/css'; link.href = 'https://icloneu.ai/css/IcloneUChat.css'; document.head.appendChild(link); } }); }); })(); </script> <!-- IcloneU Chat Widget --> <script> // Opcional: identifica a tu usuario para vincular el historial de conversaciones. // window.IcloneUUser = { userId: 'YOUR_USER_ID' }; </script> <script> (function () { if (window.__icloneuWidgetLoaded) return; window.__icloneuWidgetLoaded = true; var s = document.createElement('script'); s.src = 'https://icloneu.ai/embed.js?key=YOUR_API_KEY'; document.body.appendChild(s); })(); </script>
⚠️¿Por qué no basta con pegar el script en <head>? Blazor modifica el DOM en cada navegación. Colocar el anclaje del widget y los scripts dentro de <body> después de <Routes /> — y usar Blazor.addEventListener en lugar de document.addEventListener — es lo que permite que el widget sobreviva los cambios de página sin reinicializarse.
💡Continuidad de la conversación: Como los nodos del widget se mueven en lugar de destruirse durante la navegación, la conversación activa y todos los mensajes se conservan exactamente como el usuario los dejó al cambiar de página.
🐙 Cómo Agregar Chat a Tu Sitio GitHub Pages
Sigue estos pasos para agregar el widget de chat a tu sitio web de GitHub Pages:
Navega a tu repositorio de GitHub para tu sitio Pages
Localiza tu archivo HTML principal o plantilla de diseño (usualmente index.html o _layouts/default.html para Jekyll)
Haz clic en el botón Edit (icono de lápiz) para editar el archivo
Encuentra la sección <head> y pega el script de chat justo antes de la etiqueta de cierre </head>
Desplázate hacia abajo y haz clic en Commit changes
Tu sitio se reconstruirá y desplegará automáticamente con el widget de chat
⚠️Sitios Jekyll: Si estás usando Jekyll, agrega el script a tu archivo _layouts/default.html o _includes/head.html para asegurar que aparezca en todas las páginas.
💡Consejo: GitHub Pages puede tomar algunos minutos para reconstruir y desplegar tus cambios. Revisa la pestaña Actions para monitorear el progreso del despliegue.
🌐 Cómo Agregar Chat a Tu Sitio Web GoDaddy
Sigue estos pasos para agregar el widget de chat en todo tu sitio web de GoDaddy:
Inicia sesión en tu cuenta de GoDaddy y abre tu Creador de Sitios Web
Haz clic en Editar Sitio Web para abrir el editor
Haz clic en el icono de Configuración (icono de engranaje) en el menú superior
Selecciona SEO del menú de configuración
Desplázate hacia abajo hasta la sección Etiquetas de Encabezado
Pega el script de chat en el cuadro Etiquetas de Encabezado
Haz clic en Listo y luego Publicar tu sitio
⚠️Método Alternativo: También puedes agregar elementos HTML personalizados a páginas individuales usando el widget HTML del menú de contenido, pero esto solo agregará chat a páginas específicas.
💡Consejo: La función de Etiquetas de Encabezado asegura que el chat aparezca en todas las páginas de tu sitio web. Asegúrate de publicar tu sitio para que los cambios entren en vigor.
💻 Cómo Agregar Chat a Tu Sitio Web HTML
Sigue estos pasos para agregar el widget de chat a tu sitio web HTML:
Abre tu(s) archivo(s) HTML en un editor de texto o editor de código
Localiza la sección <head> de tu documento HTML
Pega el script de chat justo antes de la etiqueta de cierre </head>
Guarda el archivo HTML
Sube el archivo actualizado a tu servidor web
⚠️Para Múltiples Páginas: Si tu sitio web tiene múltiples páginas HTML, necesitarás agregar el script a cada página individualmente, o considera usar un sistema de plantillas o includes del lado del servidor para evitar repetición.
💡Consejo: Coloca el script en un archivo de encabezado compartido o plantilla si estás usando un generador de sitios estáticos como Jekyll, Hugo, o herramientas similares.
⬜ Cómo Agregar Chat a Tu Sitio Squarespace
Sigue estos pasos para agregar el widget de chat en todo tu sitio web de Squarespace:
Inicia sesión en tu cuenta de Squarespace y abre el editor de tu sitio web
Ve a Configuración → Avanzado → Inyección de Código
Pega el script de chat en la sección Header
Haz clic en Guardar para aplicar los cambios
Tu widget de chat ahora aparecerá en todas las páginas de tu sitio
⚠️Instalación Específica por Página: También puedes agregar el código a páginas individuales yendo a Páginas → Configuración de Página → Avanzado → Inyección de Código del Encabezado de Página, pero esto solo agregará chat a esa página específica.
💡Consejo: La Inyección de Código está disponible en planes Business y superiores. Si tienes un plan Personal, necesitarás actualizar para usar esta función.
🛒 Cómo Agregar Chat a Tu Tienda Shopify
Sigue estos pasos para agregar el widget de chat en toda tu tienda de Shopify:
Inicia sesión en tu panel de Administración de Shopify
Ve a Tienda Online → Temas
Haz clic en Acciones → Editar Código para tu tema activo
En la sección Layout, haz clic en theme.liquid
Pega el script de chat justo antes de la etiqueta de cierre </head>
Haz clic en Guardar para aplicar los cambios
⚠️Método Alternativo: También puedes usar la API de Script Tag de Shopify o instalar apps que permiten inyección de código personalizado sin editar archivos del tema directamente.
💡Consejo: Siempre haz una copia de seguridad de tu tema antes de editar código. Puedes duplicar tu tema desde el menú Acciones.
🌊 Cómo Agregar Chat a Tu Sitio Webflow
Sigue estos pasos para agregar el widget de chat en todo tu sitio web de Webflow:
Inicia sesión en tu Diseñador de Webflow
Haz clic en el panel de Páginas (icono de páginas en la barra lateral izquierda)
Haz clic en el icono de engranaje junto al nombre de tu sitio en la parte superior
Ve a la pestaña Código Personalizado
Pega el script de chat en la sección Código del Head
Haz clic en Guardar Cambios
Publica tu sitio para que los cambios surtan efecto
⚠️Instalación Específica por Página: También puedes agregar código personalizado a páginas individuales seleccionando una página y yendo a Configuración de Página → Código Personalizado, pero esto solo agregará chat a esa página específica.
💡Consejo: Las funciones de código personalizado requieren un plan pagado de Webflow. El widget de chat aparecerá en tu sitio publicado, no en la vista previa del Diseñador.
🎨 Cómo Agregar Chat a Tu Sitio Wix
Sigue estos pasos para agregar el widget de chat en todo tu sitio web de Wix:
Inicia sesión en tu Editor de Wix y abre el sitio web que quieres editar
Haz clic en el botón Configuración en el menú superior
Selecciona Código Personalizado de la sección Avanzado
Haz clic en + Agregar Código Personalizado
Pega el script de chat en el cuadro de código
Establece el Tipo de Código como HTML
Elige Head como la ubicación de colocación
Selecciona Todas las Páginas para chat en todo el sitio
Haz clic en Aplicar para guardar los cambios
⚠️Método Alternativo: También puedes agregar el código a páginas individuales yendo a Configuración de Página → SEO y Meta → Código Personalizado, pero esto solo agregará chat a esa página específica.
💡Consejo: Asegúrate de publicar tu sitio después de agregar el código para que los cambios surtan efecto en tu sitio web en vivo.
📝 Cómo Agregar Chat a Tu Sitio WordPress
Sigue estos pasos para agregar el widget de chat en todo tu sitio web de WordPress:
Desde tu panel de administración de WordPress, navega a Apariencia → Editor de Temas (o Editor de Archivos del Tema)
Encuentra y haz clic en el archivo header.php en la lista de archivos del tema
Pega el script de chat justo antes de la etiqueta de cierre </head>
Haz clic en Actualizar Archivo para guardar los cambios
⚠️Método Alternativo: Si no ves la opción del Editor de Temas, o prefieres no editar los archivos del tema directamente, puedes instalar un plugin como Insert Headers and Footers para agregar el script de forma segura sin modificar tu tema.
💡Consejo: Usar un plugin es más seguro porque tus cambios no se perderán cuando actualices tu tema.
Reconoce a tus visitantes con sesión iniciada
De fábrica el widget trata a cada visitante como un desconocido. El bloque window.IcloneUUser que viene comentado en el fragmento deja que tu página diga quién es el visitante, y hay una pestaña entera para volver comprobable esa afirmación: abre Claves API en la barra lateral, selecciona la llave, haz clic en Insertar en la barra de herramientas y cambia a la pestaña Identidad. Su propio resumen es la descripción más corta de lo que hace: «Reconoce a tus usuarios con sesión iniciada en el chat. Tu sitio le dice al widget quién es el visitante y una firma (o tu tienda Shopify conectada) comprueba la identidad - los visitantes verificados reciben respuestas personalizadas, incluida la información de sus propios pedidos.»
Hay tres niveles de afirmación y solo dos son prueba. La pestaña presenta los dos últimos como Verificación de identidad (el secreto en sí), Identidad firmada (cualquier sitio web) y Tienda Shopify.
Sin firmar — el bloque simple, window.IcloneUUser = { userId: 'ID_DE_USUARIO' }, con correo, nombre y teléfono opcionales. Vincula la conversación a un contacto para que el historial quede bajo una sola persona, y nada más. Cualquiera puede escribir lo mismo en la consola de su navegador, así que IcloneU lo trata como una afirmación, no como un hecho: las preguntas sobre pedidos siguen pasando por el código de un solo uso.
Firmada — haz clic en Generar secreto para darle a esta llave un secreto de identidad. Tu servidor calcula un HMAC-SHA256 sobre userId + ':' + email.toLowerCase() + ':' + phone, en hexadecimal y con los campos ausentes como cadenas vacías, y la página escribe el resultado en el bloque como signature. La pestaña imprime esa fórmula arriba del fragmento para que quien programe tu backend la tenga exacta. Fíjate en que el teléfono va dentro de la firma a propósito: los contactos se agrupan por correo y por teléfono, así que un teléfono manipulable en una identidad por lo demás firmada podría colarse en el historial de compras de otro cliente.
Tienda Shopify — sin secreto y sin backend. Pega el bloque de Liquid de esa misma pestaña en theme.liquid en lugar del fragmento normal, y manda el id de Shopify y el correo del cliente con sesión iniciada. IcloneU comprueba ese par contra la API de administración de tu tienda conectada y, cuando coincide, descarta el correo y el teléfono de la página y se queda con los de la tienda, para que solo lleguen a tu lista de contactos datos avalados por la tienda.
Qué te da de verdad una identidad comprobada
Una prueba le gana al visitante la misma sesión verificada de 24 horas que escribe el código de un solo uso dentro del chat — ni más ni menos. Dentro de esa ventana puede preguntar por sus propios pedidos sin código, y las búsquedas en la tienda apuntan al correo verificado en vez de a lo que se haya tecleado en el chat. La pestaña lo dice igual de claro: «Los visitantes verificados se vinculan con tus contactos y pueden preguntar por sus propios pedidos sin un código de verificación adicional. Los visitantes sin una firma válida se atienden con normalidad - simplemente no se consideran verificados.» Pon un correo en el bloque firmado si quieres eso: el correo es lo que usa la búsqueda de pedidos para encontrarlos.
El secreto de identidad es un secreto de servidor
La advertencia de la propia pestaña es la regla: «Guarda este secreto solo en tu servidor - nunca en el JavaScript de la página. Rotarlo o desactivarlo invalida de inmediato las firmas calculadas con el valor anterior.» Quien lo tenga puede firmar la identidad que quiera, incluidas las de tus clientes. Por eso solo el dueño de la cuenta y los miembros del equipo cuyo rol puede administrar el Chat web ven el secreto y los botones Generar secreto, Copiar secreto, Rotar secreto y Desactivar; cualquier otra persona que abra la pestaña lee «Solo los miembros que pueden administrar el Chat web pueden ver o cambiar el secreto de identidad. Pídeselo al dueño de la cuenta si lo necesitas.»Rotar secreto lo reemplaza en el mismo lugar —la llave del widget no cambia y no vuelves a pegar el fragmento— pero toda firma que tu backend haya calculado con el valor viejo deja de verificar en el instante en que haces clic, así que despliega primero el valor nuevo. Desactivar apaga por completo las identidades firmadas de esta llave y el widget sigue funcionando sin firma. Nada de esto es cómo se rota la llave de widget hk- en sí — eso sigue siendo borrar y volver a crear, y se cubre en Rota o revoca una llave.
Ten claro lo que esto no es
Vale la pena decir tres límites antes de apoyarte en esto. Una prueba mala falla en silencio. Una firma que no verifica —un secreto viejo después de una rotación, una fórmula con un carácter de más— no se rechaza: al visitante se le baja calladamente a sin firmar y se le atiende con normalidad. Es a propósito, para que un error nunca rompa tu chat, pero también significa que una integración rota se ve igual que una que funciona. La señal a la que hay que estar atento es que a tus clientes con sesión iniciada les vuelvan a pedir un código de un solo uso. La firma no caduca. Prueba que la afirmación salió de tu servidor, no que se hizo hace un momento, así que quien pueda leer la página de un usuario con sesión iniciada puede reutilizarla. No hay modo estricto. Las afirmaciones sin firma siguen vinculando contactos como antes; activar la verificación en una llave no hace que se empiecen a rechazar las que no la traen.
Dos pestañas distintas que se llaman Identidad
Esta vive en el cuadro Insertar de la página Claves API y trata de comprobar quién es tu visitante. El editor de Clones tiene su propia pestaña Identidad, que trata de quién es tu Clon: su nombre, su rol y su personalidad. No tienen nada que ver entre sí.
¿Te resultó útil esta guía?
¡Gracias por tu comentario!
Última actualización: octubre 4, 2026 · Conexiones de plataforma
