Widget de chat
Guía de integración del widget de chat para sitios web
Añada un widget de chat fácil de usar a su sitio web que permita a los visitantes comunicarse directamente a través de la interfaz de su sitio. El proceso de integración es sencillo y dotará a su sitio web de funciones de mensajería integradas.
Creación y configuración del widget de chat
Cómo llegar:
- Haz clic en Settings (Configuración) cerca de la parte inferior de la barra lateral izquierda. (En un teléfono, primero toca el icono de menú ☰ en la esquina superior para abrir la barra lateral).
- En la barra lateral de Settings, bajo Channels (Canales), haz clic en Channels.
- Busca la tarjeta Website chat widget (Widget de chat del sitio web).
- Si aún no tienes un widget, haz clic en Connect (Conectar) para crear uno con un nombre para mostrar y un mensaje de bienvenida.
- Una vez creado, haz clic en Manage (Gestionar) en cualquier momento para abrir el panel de configuración completo.
Los cambios que guardes se aplicarán automáticamente a tu widget en vivo; no es necesario volver a pegar el código de instalación después de realizar un cambio.
Una Vista previa en vivo se encuentra justo al lado de la configuración: una página web de muestra con su widget real ejecutándose en ella, que muestra sus colores, posición, logotipo, icono del lanzador y ventana emergente proactiva exactamente como los verán los visitantes. Sigue sus ediciones a medida que las realiza, por lo que no tiene que guardar para ver cómo se ve un cambio de color o tema. Incluso puede hacer clic en el botón de chat dentro de la vista previa para abrir el widget y probarlo.
Qué puedes personalizar
El panel de gestión está organizado en cuatro secciones.
Apariencia
- Tema de estilo: Cambia el estilo de todo el widget con un solo clic. Seis temas definen el aspecto, los colores, las esquinas y la fuente en conjunto: Classic (el aspecto sólido original: una barra de encabezado de color sobre un panel plano), Glass (un panel translúcido y esmerilado que difumina suavemente la página detrás, con el encabezado y el cuadro de mensaje flotando como tarjetas redondeadas en su interior), Midnight (Glass en colores oscuros), Bloom (rosa suave, extra redondeado), Ember (Glass en naranja cálido) y Mono (blanco y negro, esquinas afiladas). Un tema es un punto de partida; después de elegir uno, aún puedes cambiar cualquier color o ajuste individualmente. Los nuevos widgets comienzan en Glass; el cambio es instantáneo en todos los lugares donde el widget esté incrustado, sin necesidad de realizar cambios de código en tu sitio.
- Esquinas y fuente: Dos ajustes de estilo independientes. Esquinas establece qué tan redondeados están el panel, las burbujas y los botones (Redondeado, Suave o Afilado), y Fuente elige el tipo de letra que ven los visitantes (Predeterminada, Serif, Redondeada o Mono); las fuentes provienen de lo que ya está en el dispositivo del visitante, por lo que no se carga nada adicional en tu sitio.
- Nombre para mostrar: Se muestra en el encabezado del widget.
- Logotipo: Sube una imagen que aparezca en la parte superior del chat. Usa el logotipo de tu empresa o una foto amigable.
- Icono del lanzador: El icono en el botón de chat flotante. Elige uno de los iconos integrados (burbuja de chat, avión de papel, signo de interrogación y más), reutiliza tu logotipo cargado o sube una imagen propia por separado; es útil si deseas una foto de un miembro real del equipo saludando a los visitantes.
- Colores: Cinco colores, cada uno nombrando la parte del widget que pinta. Color de marca es el botón flotante, el encabezado y los mensajes del propio visitante, con Texto de marca para el texto que se encuentra sobre él. Burbuja del bot es el fondo de las respuestas de tu bot y del indicador de escritura, con Texto de la burbuja del bot para las palabras dentro de ellos y los puntos de escritura animados. Ventana de chat es el panel detrás de todos los mensajes. Elige un color de burbuja de bot que sea claramente diferente de tu color de marca; si ambos coinciden, ambos lados de la conversación aparecerán del mismo color y los visitantes no podrán distinguir las respuestas de tu bot de las suyas. Una burbuja de bot gris claro con texto oscuro junto a tu color de marca es la combinación segura.
- Posición: Coloca el botón de chat flotante en la esquina inferior derecha o inferior izquierda, con un desplazamiento horizontal y vertical (en píxeles) si se superpone con algún otro elemento de tu página.
- Preguntas iniciales: Sugerencias de respuesta rápida (chips en los que se puede hacer clic) que se muestran en el chat para que los visitantes puedan comenzar con un toque en lugar de escribir; por ejemplo, “¿Cuáles son sus precios?” o “¿Ofrecen soporte?”, hasta 10.
- Línea de pie de página: Una pequeña línea opcional de tu propio texto debajo del cuadro de mensaje, por ejemplo, “Con tecnología de tu agencia”. Está desactivada de forma predeterminada y no se muestra nada debajo del cuadro de mensaje mientras esté desactivada. Actívala, escribe tu texto (hasta 40 caracteres) y, si lo deseas, añade un enlace que comience con
https://; los visitantes que hagan clic en el texto abrirán esa página en una nueva pestaña. Las agencias lo usan para poner su propio nombre en los widgets que crean para sus clientes.
Comportamiento
- Mensaje de apertura: El primer mensaje que ven los visitantes al abrir el chat (por ejemplo, “¿Cómo puedo ayudarte?”).
- Sonido: Reproducir un sonido cuando llega un mensaje nuevo al chat.
- Solicitar permiso de notificaciones: Opcionalmente, pedir a los visitantes que permitan las notificaciones del navegador, para que reciban alertas de las respuestas incluso cuando hayan cambiado de pestaña.
- Burbuja emergente proactiva: Una pequeña burbuja opcional que aparece junto al botón de chat para invitar a los usuarios. Actívala para configurar su mensaje, el texto de los botones de aceptar/rechazar y cuántos segundos esperar antes de que aparezca. La burbuja se cierra sola después de 20 segundos si el visitante no hace clic en ella. Es el único texto que muestra el widget junto al botón de chat: no existe una configuración para una etiqueta permanente junto al botón.
- Velocidad de respuesta de la IA: Un control deslizante entre Más lenta (más humana: la IA se toma un momento antes de responder) y Velocidad máxima (más robótica: las respuestas llegan lo más rápido posible). La opción Equilibrada se encuentra en el medio. El primer mensaje de una respuesta llega con el retraso que establece el control deslizante, y el indicador de escritura aparece poco antes.
- Mostrar una nota de ocupado mientras la IA trabaja: Desactivado por defecto. Cuando una respuesta tarda más de unos segundos, por ejemplo, porque tu agente está buscando algo en otro sistema, los visitantes ven una línea corta junto a los puntos de escritura: “Trabajando en tu respuesta” después de 5 segundos, “Buscando eso para ti” después de 15, luego “Sigo en ello, casi listo” y una disculpa por la espera si tarda más. Las respuestas rápidas solo muestran los puntos. La línea sigue el idioma del widget y solo aparece mientras tu IA está trabajando realmente en una respuesta, nunca cuando la IA está desactivada para ese chat o una persona ha tomado el control.
Idiomas
El widget es multilingüe por sí mismo; no hay nada que activar.
-
Detecta automáticamente el idioma del visitante. Primero busca el idioma que tu página declara en su HTML (
<html lang="it">), y si no lo encuentra, recurre al idioma del navegador del visitante. Si ninguno de los dos es un idioma que admitamos, las etiquetas propias del widget se mostrarán en el idioma en el que escribiste tu mensaje de bienvenida, y tu mensaje de bienvenida, la burbuja emergente y las preguntas iniciales aparecerán exactamente como los escribiste. -
No se confía en un idioma de página que contradiga tu saludo. Algunos creadores de sitios web colocan
lang="en"en todas las páginas, independientemente del idioma del sitio. Cuando la página declara un idioma y tú escribiste tu mensaje de bienvenida en otro, el widget trata el valor de la página como un valor predeterminado del creador: en su lugar, sigue el idioma del navegador del visitante y, si no es un idioma que admitamos, utiliza el idioma en el que escribiste. Una página que cambia su valorlangcuando el visitante elige un idioma en tu sitio siempre se sigue. Si prefieres no depender de nada de esto, fija el idioma en la sección Comportamiento. -
O elige uno tú mismo. El campo Idioma del widget en la sección Comportamiento está configurado como Automático de forma predeterminada, que es la detección mencionada anteriormente. Elige un idioma allí y las etiquetas propias del widget (los campos Nombre, Correo electrónico y Teléfono del formulario del visitante y su texto de ejemplo, el aviso de privacidad, los botones) permanecerán en ese idioma independientemente de lo que digan la página o el navegador. Utiliza esto cuando el creador de tu sitio no declare el idioma correcto o cuando desees un idioma fijo para cada visitante.
-
Idiomas admitidos: inglés, neerlandés, alemán, francés, español, italiano, portugués, rumano, polaco, árabe, finés, filipino, esloveno, tailandés, bengalí, japonés, noruego (bokmål) y turco. Esta es la lista para los botones y etiquetas propios del widget.
-
Los idiomas de derecha a izquierda se presentan de derecha a izquierda. Para los visitantes que hablan árabe, hebreo, persa y urdu, toda la ventana de chat se refleja: el encabezado, las burbujas de mensaje, los puntos de escritura, el formulario del visitante y el cuadro de mensaje comienzan desde la derecha. El botón de burbuja permanece en la esquina que elegiste. Los visitantes que hablan hebreo, persa y urdu ven las etiquetas en inglés (o en el idioma que fijaste), pero el diseño sigue su idioma. Un mensaje escrito en una dirección diferente, como una respuesta en inglés en un chat en árabe, se sigue leyendo en el orden correcto.
-
Tus mensajes se traducen por ti. Cada vez que guardas, tu mensaje de bienvenida, la burbuja emergente proactiva y las preguntas iniciales se traducen a los dieciocho idiomas mencionados anteriormente. Solo tienes que escribirlos una vez, en el idioma que prefieras: el idioma en el que escribiste se reconoce a partir del propio texto, esa versión se mantiene palabra por palabra y todos los demás idiomas son una traducción de ella. No importa en qué idioma esté configurada tu cuenta.
-
Escribe tu propia versión para un idioma. La sección Traducciones del panel Gestionar, justo debajo de Comportamiento, te permite reemplazar la traducción automática con tu propia redacción, por ejemplo, español formal (“usted”) donde la automática es informal. Elige un idioma en Idioma y luego completa cualquiera de los siguientes campos: Mensaje de bienvenida, Mensaje emergente, el Texto de aceptación y Texto de rechazo de la ventana emergente (que se muestran mientras la burbuja emergente está activa) y Preguntas iniciales. Cada campo muestra la traducción automática en gris; Empezar desde la traducción automática la copia para que puedas editarla a partir de ahí. Todo lo que dejes en blanco mantendrá la traducción automática. Los idiomas que has escrito tú mismo aparecen primero, marcados como Tu propia redacción, y Eliminar mi redacción en (idioma) vuelve a la traducción automática para ese idioma. Tu propia redacción se mantiene cuando editas el texto original más tarde; solo se vuelven a realizar las traducciones automáticas.
-
Los botones emergentes también se traducen. Los botones de Aceptar y Rechazar de la burbuja emergente proactiva se traducen junto con tus otros mensajes, por lo que un visitante de habla hispana ya no verá botones en inglés.
-
Escribe cada mensaje en un solo idioma. Si pones dos idiomas en el mismo campo (una línea en inglés y una línea en italiano, por ejemplo), todo se trata como un solo mensaje y se traduce tal cual, por lo que un visitante italiano termina viendo la misma oración dos veces. Escríbelo una vez, en el idioma que prefieras.
-
La IA responde en el idioma del visitante. Independientemente del idioma en el que alguien escriba, tu agente responde en ese mismo idioma, sin importar en qué idioma se muestren las etiquetas del widget. Si prefieres que siempre responda en un idioma fijo, indícalo en las instrucciones de tu agente.
-
Establece el idioma por página en el código de inserción. ¿Ejecutas un widget en un sitio en inglés y una copia traducida del mismo? Añade
data-langa la etiqueta script del widget en cada página.data-lang="es"muestra el widget en español en esa página, independientemente de lo que diga el navegador;data-lang="page"hace que siga el valor<html lang="...">propio de la página (por lo quelang="es-MX"da español), incluso cuando tu mensaje de bienvenida está escrito en otro idioma. Tiene prioridad sobre el campo Idioma del widget, que a su vez tiene prioridad sobre la detección automática. Por ejemplo:
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" data-lang="page" defer></script>
Mantén el código de inserción del panel Gestionar tal como está y solo añade el atributo data-lang. Para un panel de chat integrado, coloca data-lang en el <div data-chat-widget="…"> en su lugar.
Consejo: si tu sitio web no establece un atributo lang en su etiqueta <html>, añádelo. Es la señal más fiable que tenemos para elegir el idioma correcto, especialmente para los visitantes que navegan desde el extranjero.
Captación de leads y privacidad
- Recopilar información del visitante: Desactivado por defecto. Cuando está activado, se solicita a los visitantes su nombre y correo electrónico (y opcionalmente el teléfono) antes de que comience la conversación, para que captures al cliente potencial incluso si abandonan el chat a mitad.
- Título del formulario y Subtítulo del formulario: Personaliza el encabezado y la breve explicación que se muestran sobre el formulario.
- Recopilar número de teléfono: Actívalo para solicitar también un número de teléfono; si está desactivado, solo se recopilan el nombre y el correo electrónico.
- Recopilar apellido: Desactivado por defecto. Actívalo para añadir un campo obligatorio de Apellido justo después del nombre. Se guarda en el contacto como su apellido, por lo que tu IA y cualquier cosa que busque en tus propios sistemas tendrá el nombre completo desde el primer mensaje. A los visitantes que ya rellenaron el formulario antes de que activaras esto no se les volverá a preguntar.
- Correos electrónicos de respuesta no leída a los visitantes: un visitante que dejó una dirección de correo electrónico y no ha visto tu respuesta después de 15 minutos recibe un correo electrónico que le indica que vuelva al chat. Desactívalo en Configuración → Notificaciones → Visitantes del widget de chat. Consulta Correos electrónicos a los visitantes del widget de chat.
Un visitante dejó un número de teléfono y ya no está en su sitio web: ¿puedo continuar por WhatsApp? Sí. Abra su chat y elija Continuar en WhatsApp en el menú de tres puntos (WhatsApp Web o WhatsApp Business debe estar conectado). Your AI Connector crea una conversación de WhatsApp vinculada para la misma persona, copia su nombre, correo electrónico y detalles, y la IA transfiere lo que dijeron en su sitio, por lo que nadie tiene que repetirse. El chat del sitio web permanece donde está y ambos chats se señalan mutuamente en Conversaciones vinculadas en el panel de contacto. Consulte Interfaz de chat.
Un visitante dejó su correo electrónico y nunca reservó. ¿Puedo hacer un seguimiento por correo electrónico? Sí, con una automatización. Un paso de Crear contacto con el Canal configurado como Correo electrónico convierte la dirección que dejó el visitante en un contacto de correo electrónico en su Canal de correo electrónico conectado, y un paso de Enviar mensaje después se envía como un correo electrónico; las respuestas llegan a Chats para su agente de correo electrónico. La receta completa, incluyendo cómo detener la secuencia una vez que indiquen que han reservado, se encuentra en Automatizaciones → Ejemplo: seguimientos por correo electrónico para clientes potenciales de chat en el sitio web.
¿Puede el agente de IA ofrecer el cambio a WhatsApp por sí mismo? Sí, y no necesita ninguna función adicional: una línea en las instrucciones del agente es suficiente. Cree un enlace corto para su número de WhatsApp con un mensaje predeterminado como “Hola, estaba chateando en su sitio web y quiero continuar aquí”, luego dígale al agente cuándo enviarlo, por ejemplo: “Si el visitante necesita irse, quiere continuar más tarde o pregunta por WhatsApp, ofrézcale continuar allí y envíe este enlace: (su enlace corto)”. Los enlaces en el widget se pueden pulsar, por lo que el visitante llega a WhatsApp con su número seleccionado y el mensaje preescrito, y su primer mensaje abre una conversación de WhatsApp en su bandeja de entrada. Si el visitante dejó el número de teléfono desde el que escribe (con código de país) en el formulario del widget, Your AI Connector vincula las dos conversaciones automáticamente y la IA en WhatsApp ya conoce el chat del sitio web, exactamente igual que con Continuar en WhatsApp. Si no se recopiló ningún número de teléfono, los dos chats no se vinculan, así que mantenga el mensaje predeterminado lo suficientemente específico para que el agente de WhatsApp sepa de dónde vino la persona.
- Requerir reconocimiento de la política de privacidad: Opcionalmente, requiera que los visitantes acepten su política de privacidad antes de chatear y establezca la URL a la que apunta.
¿Qué almacena el widget en el navegador del visitante y necesito ponerlo detrás de un banner de cookies? No se almacena nada simplemente por cargar una página. El widget no escribe cookies ni utiliza almacenamiento del navegador hasta que el visitante decide chatear: envía un primer mensaje, completa el formulario de información del visitante o acepta su política de privacidad. A partir de ese momento, mantiene un ID de conversación aleatorio y una copia de la conversación en ese navegador, como almacenamiento de origen en su propio dominio, para que el chat siga ahí cuando regresen. No carga scripts de análisis o seguimiento ni establece cookies de terceros. Debido a que no se escribe nada hasta que el visitante solicita chatear, entra en la categoría de almacenamiento estrictamente necesario para un servicio solicitado por el visitante, por lo que puede cargarlo sin necesidad de bloquearlo detrás de un banner de consentimiento. Si su sitio utiliza una herramienta de consentimiento de todos modos, está bien mantener el widget detrás de ella; el chat simplemente aparecerá una vez que el visitante acepte.
Canales e integración
- Botón de adjuntos: Permite a los visitantes enviar imágenes y archivos en el chat.
- Selector de emojis: Añade un selector de emojis junto al cuadro de mensaje.
- Enlaces a canales: Incluye opcionalmente enlaces a WhatsApp, Instagram o Messenger para que los visitantes puedan continuar la conversación en la plataforma que prefieran. Esto solo aparece una vez que hayas conectado un número de WhatsApp (WhatsApp Business o WhatsApp Web), Instagram o Messenger. Al activar el enlace de WhatsApp, se rellena automáticamente con tu número conectado; el enlace sigue siendo editable, por lo que después de cambiar de número puedes escribir el nuevo allí.
- Botones de acción: Una fila de accesos directos en la parte superior del chat que llevan al visitante a otro lugar en lugar de a una conversación; consulta Botones de acción a continuación.
- Lista blanca de dominios: Restringe qué sitios web pueden integrar tu widget. Añade los dominios donde lo hayas instalado (p. ej.,
example.como*.example.com); déjalo vacío para permitir cualquier dominio. - Países bloqueados: Mantén el widget alejado de los visitantes en países a los que no prestas servicio. Los visitantes cuya ubicación de red esté en un país que selecciones nunca verán el widget, y cualquier chat que intenten iniciar será rechazado. Déjalo vacío para permitir el acceso a todos. Consulta Cómo evitar bots y el consumo de créditos a continuación.
- Dirigir estos chats a: Elige el agente que debe gestionar los chats que provienen del código que estás a punto de copiar. Déjalo en Predeterminado de la cuenta para usar tu enrutamiento normal del widget de chat. Consulta Enviar diferentes páginas a diferentes agentes a continuación.
- Fragmento de integración: Elige Burbuja flotante o Integrado y copia el código de instalación (consulta a continuación).
- Enlace de demostración para clientes: Pega cualquier dirección de sitio web y haz clic en Crear enlace para obtener un enlace compartible que abre ese sitio con tu widget ejecutándose encima, sin necesidad de instalar nada por su parte. Cada enlace que creas aparece en una lista y puedes desactivar cada uno de ellos. Consulta Mostrar el widget en el sitio web de otra persona a continuación.
- Enlace para compartir: Un enlace listo para usar que abre tu asistente en su propia página, a pantalla completa, sin necesidad de un sitio web. Cópialo y envíalo a cualquier parte. Consulta Compartir un enlace directo al chat a continuación.
En la parte inferior del panel, la acción Delete chat widget (Eliminar widget de chat) elimina el widget de tu sitio web inmediatamente; esto no se puede deshacer y los visitantes ya no verán la burbuja de chat.
Botones de acción
Algunos visitantes no quieren chatear. Quieren tu número de teléfono, tu dirección o tu correo electrónico, y lo quieren con un solo toque. Los botones de acción son una fila de accesos directos en la parte superior del panel de chat exactamente para eso.
Añade hasta seis. Cada uno tiene una etiqueta (las palabras en el botón) y un destino, y el destino depende de la acción que elijas:
| Acción | Qué obtiene el visitante | Qué debes rellenar |
|---|---|---|
| Llamar | Se abre su marcador telefónico con tu número listo | Tu número de teléfono, p. ej., +1 555 123 4567 |
| Enviar SMS | Su aplicación de mensajería abre un nuevo mensaje de texto para ti | Tu número de teléfono |
| WhatsApp abre un chat contigo | Tu número de WhatsApp o un enlace wa.me que ya tengas |
|
| Correo electrónico | Su aplicación de correo abre un nuevo mensaje para ti | Tu dirección de correo electrónico |
| Indicaciones | Google Maps se abre con tu ubicación | Tu dirección o un enlace de mapas que ya tengas |
| Enlace | La página se abre en una nueva pestaña | Cualquier dirección web completa que comience con https:// |
Estos botones no utilizan créditos. Pulsar uno no envía un mensaje y no inicia una conversación; simplemente lleva al visitante a donde pidió ir. Solo una conversación real con tu agente de IA utiliza créditos, exactamente igual que antes.
Algunas cosas que vale la pena saber:
- Los botones permanecen visibles mientras el visitante chatea. Alguien puede hacer dos preguntas y aun así pulsar Indicaciones después sin recargar la página.
- Tus etiquetas se muestran exactamente como las escribiste. A diferencia de tu mensaje de bienvenida y las preguntas iniciales, las etiquetas de los botones no se traducen automáticamente, así que si atiendes a visitantes en varios idiomas, mantén las etiquetas cortas y claras (o escríbelas en tu idioma principal).
- Rellena un botón correctamente o no se guardará. Si un número de teléfono, dirección de correo electrónico o enlace no es válido, el panel lo indicará y bloqueará Guardar cambios en lugar de publicar un botón que no haría nada en tu sitio.
- No son respuestas a preguntas frecuentes. Los botones de acción solo envían a las personas a otro lugar; no responden con texto predefinido. Las preguntas son trabajo de tu agente de IA, y las responde desde tu base de conocimientos. Si quieres sugerir qué preguntar, utiliza las preguntas iniciales en Apariencia.
Lo que no puede personalizar
El panel de gestión (Manage) contiene el conjunto completo de opciones. En particular:
- Sin CSS ni hojas de estilo personalizadas. El estilo es el que ofrecen los selectores de tema, esquina, fuente y color; no puedes insertar tu propio CSS en el widget, y las reglas de tu página no afectarán a su interior.
- Sin texto de marcador de posición personalizado en el cuadro de mensaje.
- Sin incrustación de vídeo dentro del chat.
Si alguna de estas limitaciones supone un obstáculo para usted, la incrustación en línea le ofrece el mayor control: el widget se coloca en un contenedor dentro de su propia página, el cual usted mismo dimensiona y posiciona.
Cómo evitar bots y el consumo de créditos
Cada respuesta de IA cuesta créditos, por lo que un script (o una persona aburrida) que abre chat tras chat en tu sitio web es lo único contra lo que un widget público tiene que defenderse. El widget maneja la mayor parte por sí solo, y dos configuraciones en el panel de Gestión te permiten ajustarlo para tu sitio.
- Lista blanca de dominios. Solo los sitios web que incluyas en la lista pueden mostrar el widget. Cualquiera que copie tu código de inserción en otro sitio no obtendrá nada.
- Países bloqueados. Los visitantes cuya ubicación de red esté en un país que bloquees nunca verán el widget, y cualquier chat que intenten iniciar será rechazado. La ubicación proviene de la conexión del visitante: alguien que usa una VPN aparecerá como si estuviera en el país de la VPN, y a un visitante cuya ubicación no se pueda determinar se le permitirá el acceso en lugar de bloquearlo. Tu propia vista previa dentro de la aplicación seguirá funcionando incluso si bloqueas el país en el que te encuentras.
- Nuevas conversaciones por conexión. Una conexión (en la práctica, un hogar o una dirección de oficina) puede abrir 20 nuevas conversaciones por día en un widget. Los visitantes que regresan y continúan su chat existente no cuentan, solo cuentan las conversaciones nuevas, por lo que un script que sigue iniciando chats nuevos para obtener respuestas de IA se agotará después de 20, mientras que los visitantes reales nunca lo notarán. Si muchas personas comparten una conexión en tu sitio (un campus, un centro de llamadas), aumenta el número a través de la API REST con
max_new_chats_per_ip_daily;0desactiva la verificación. - Verificación humana (opcional). Los visitantes pasan una rápida verificación de Cloudflare Turnstile antes de que se envíe su primer mensaje, por lo que un script no puede iniciar chats en absoluto. La mayoría de las personas nunca hacen clic en nada; Cloudflare solo muestra una casilla de verificación cuando no está seguro. Utiliza tus propias claves gratuitas de Turnstile, consulta Añadir una verificación humana a continuación.
- Límites integrados. Además de eso, cada sesión de navegador tiene un límite en la cantidad de mensajes que puede enviar por minuto y por día, y el agente que responde al chat deja de responder a un visitante una vez que alcanza el Máximo de mensajes de IA por chat establecido en sus Límites de respuesta.
Nada de esto identifica dispositivos o personas: el widget no almacena nada en el navegador de un visitante hasta que decide chatear (ver arriba), y no hay toma de huella digital (fingerprinting).
Añadir una verificación humana (Cloudflare Turnstile)
Activa esto cuando los bots sigan abriendo chats en tu sitio web y la configuración anterior no sea suficiente. La verificación se ejecuta una vez, justo antes de que se envíe el primer mensaje de un visitante. Un visitante que apruebe puede seguir chateando durante 24 horas sin volver a verla, y cualquiera que regrese a una conversación anterior aún puede leerla antes de la verificación.
- Inicia sesión en tu cuenta de Cloudflare (una cuenta gratuita es suficiente) y abre Turnstile.
- Haz clic en Add widget, asígnale un nombre y añade todos los dominios en los que se ejecuta tu widget de chat (por ejemplo,
yourshop.com). Deja el modo de widget en Managed. - Copia la Site key y la Secret key que te muestra Cloudflare.
- En la aplicación, abre el panel Manage de tu widget de chat, activa Human check before chatting, pega ambas claves y guarda.
Qué esperar:
- La verificación permanece desactivada hasta que se completen ambas claves, por lo que activarla sin claves nunca bloqueará a los visitantes.
- Si un visitante falla la verificación o la deja sin resolver, su mensaje no se envía y obtiene un botón de Reintentar.
- La verificación solo aparece en los dominios que añadiste en Cloudflare. En cualquier otro dominio, Cloudflare la rechaza y nadie en ese sitio puede enviar un mensaje, así que añade todos los dominios antes de activarla.
- Si tu sitio web utiliza una Política de Seguridad de Contenido (CSP), permite
https://challenges.cloudflare.compara scripts y marcos, o la verificación no podrá cargarse. - Las claves pertenecen a tu propia cuenta de Cloudflare y la clave secreta nunca se envía a los navegadores de tus visitantes.
Instrucciones de instalación
Para añadir el widget de chat a tu sitio web, añade una línea de código al HTML de tu sitio.
- Abre el archivo HTML de tu sitio web en un editor de texto.
- Busca la etiqueta de cierre
</body>; normalmente se encuentra al final del archivo. - Pega esta línea de código justo antes de la etiqueta
</body>, para que el resto de la página se cargue primero:
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>
- Reemplaza
CONFIG_IDcon tu identificador de configuración único, que se muestra en la sección Canales e incrustaciones (Channels & Embed) del panel de administración. Este identificador es específico para tu cuenta y conecta el widget con tu sistema de mensajería.
El fragmento no ralentizará su sitio: es un cargador diminuto y el widget en sí se descarga en segundo plano sin bloquear la página. Si aun así desea que el widget espere hasta que la página haya terminado de cargarse por completo, puede envolver la misma URL de esta manera:
<script>
window.addEventListener('load', function () {
var s = document.createElement('script');
s.src = 'https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID';
s.async = true;
document.body.appendChild(s);
});
</script>
Y si lo que desea retrasar es la pequeña burbuja de invitación en lugar de la carga del widget, ese es el retraso de la Burbuja emergente proactiva en la sección Comportamiento anterior; no se necesita código.
Instalación en Shopify
- En tu panel de administración de Shopify, ve a Tienda online > Temas.
- En el tema marcado como tu tema actual (publicado), haz clic en el botón … y elige Editar código. Editar un borrador o una copia del tema no cambia nada en tu tienda activa.
- Abre layout/theme.liquid y desplázate hasta la etiqueta de cierre
</body>cerca de la parte inferior. - Pega tu línea de instalación justo encima de
</body>y haz clic en Guardar:
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>
Si instalaste el widget antes de que la línea de instalación incluyera defer, el editor de código de Shopify mostrará un subrayado rojo debajo. Ese subrayado es una advertencia del comprobador de código de Shopify sobre líneas de script sin defer o async, no un error: el tema se guarda correctamente y el widget sigue funcionando. Añadir defer como se muestra arriba hace que el subrayado desaparezca y no cambia nada en el comportamiento del widget, por lo que no es necesario volver a instalarlo en otros sitios.
Aquí tiene un ejemplo completo de cómo debería verse su archivo HTML con el widget de chat implementado:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<!-- Your existing website content would be here -->
<!-- Chat Widget Integration -->
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>
</body>
</html>
Incrustación en línea en una página (avanzado)
Si prefieres que el chat aparezca como parte de tu página —por ejemplo, dentro de una sección dedicada de “Contáctanos”, una pestaña de ayuda o una barra lateral— en lugar de como una burbuja flotante en la esquina, cambia Fragmento incrustado (Embed snippet) a En línea (Inline) en el panel de administración y copia el fragmento en línea.
Se ve así:
<div data-chat-widget="CONFIG_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>
El <div> es el punto de montaje: el panel de chat se renderiza dentro de él y llena sus dimensiones. Dale estilo al div como quieras (dale una altura fija, colócalo dentro de un contenedor flex, ponlo en una celda de cuadrícula, etc.) y el panel de chat lo seguirá.
Solo necesitas una etiqueta <script> en la página, incluso si estás integrando varios widgets de chat. El script escanea la página en busca de cada <div data-chat-widget="…"> y monta un panel de chat en cada uno.
Cuándo elegir entre integrado (inline) o flotante:
- La burbuja flotante es adecuada para un botón de “¿Necesitas ayuda?” siempre disponible en todo el sitio.
- La integración en línea es adecuada cuando el chat debe vivir en un lugar específico (una página de soporte, una barra lateral de base de conocimientos, una pestaña de ayuda en la aplicación) y sentirse como una parte nativa de esa página.
La incrustación en línea reutiliza la misma configuración que la burbuja flotante (logotipo, mensaje de bienvenida, captura de clientes potenciales, preguntas iniciales, etc.), por lo que no tienes que configurar nada dos veces.
Mostrar el widget en el sitio web de otra persona
Puedes mostrar tu widget de chat ejecutándose en un sitio web que no controlas; sin código y sin necesidad de acceso a su sitio. Es la forma más rápida de mostrar a un cliente potencial cómo se vería el asistente en sus propias páginas.
- Abre el panel de Gestión y desplázate hasta Canales e integraciones (Channels & Embed).
- En Enlace de demostración para el cliente (Client demo link), escribe la dirección del sitio web (por ejemplo,
www.theircompany.com). - Opcional: debajo del campo, elige el Agente que debería responder en esta demostración; por ejemplo, un agente que hayas creado a partir del sitio web del cliente potencial para que hable sobre sus servicios, precios y preguntas frecuentes. Déjalo en Predeterminado de la cuenta (Account default) para usar el enrutamiento normal de tu widget de chat.
- Haz clic en Crear enlace (Create link). El enlace se copiará automáticamente y aparecerá en la lista debajo del campo, con botones para Copiar (Copy) y Abrir (Open), junto con el agente que utiliza.
- Envía el enlace a quien quieras mostrárselo.
Al abrir el enlace, se carga ese sitio web con tu widget de chat flotando encima, exactamente como se vería si estuviera instalado. Cualquier persona con el enlace puede abrirlo; no hay nada en lo que iniciar sesión.
Algunas cosas que vale la pena saber:
- Los chats de la demostración son reales. Los mensajes que un visitante envía en una demostración llegan a su bandeja de entrada y son respondidos por su agente, y utilizan créditos como cualquier otra conversación.
- La página no tiene marca. Muestra su sitio web y su widget, y nada más.
- Algunos sitios web no se pueden enmarcar. Varios sitios (bancos, grandes minoristas, cualquier sitio con configuraciones de seguridad estrictas) impiden que otras páginas los muestren. Cuando esto sucede, el enlace sigue funcionando: muestra una ventana de navegador simulada y neutral en lugar del sitio real, con su widget activo encima para que la demostración siga cumpliendo su función.
- No cambia su sitio web. No se instala nada y no se modifica nada: la demostración solo existe dentro de ese enlace.
- Desactive un enlace cuando termine la demostración. Haga clic en Desactivar junto al enlace en la lista y confirme. A partir de ese momento, cualquiera que lo abra verá una página indicando que el enlace se ha desactivado. Su widget y sus otros enlaces de demostración seguirán funcionando. Un enlace que se ha desactivado no se puede volver a activar; cree uno nuevo en su lugar.
- Enlaces copiados antes del 25 de septiembre de 2026. Los enlaces de demostración creados antes de que existiera la lista no aparecen en ella. Seguirán funcionando hasta que haga clic en Desactivar esos enlaces debajo de la lista, lo que los desactivará todos a la vez (y Volver a activarlos revierte la acción).
Un enlace de demostración creado sin un agente utiliza el enrutamiento predeterminado de su cuenta, sin importar cómo esté configurada la opción Enrutar estos chats a. Con un agente seleccionado, cada chat proveniente de ese enlace se asigna a dicho agente y es respondido por él. El widget mantiene su propia apariencia, nombre y mensaje de apertura. El enlace lo incluye como &agent=AGENT_ID; añadir esto manualmente a un enlace antiguo también funciona (use &, no ?, porque el enlace ya contiene un ?).
Si más adelante eliminas el agente que utiliza un enlace de demostración, el enlace seguirá funcionando: sus chats se dirigirán al enrutamiento predeterminado de tu cuenta y la lista mostrará “agente eliminado, usa el predeterminado” junto a él. Eliminar el agente que es el predeterminado de tu widget de chat no afecta a los enlaces vinculados a otro agente.
Compartir un enlace directo al chat
A veces no hay un sitio web donde poner el widget; quieres darle a alguien un enlace y que hable con tu asistente de inmediato. Cada widget de chat tiene uno:
- Abre el panel de gestión y desplázate hasta Canales e integración.
- Busca Enlace para compartir (se encuentra justo debajo del enlace de demostración para clientes).
- Haz clic en Copiar para obtener el enlace, o en Abrir para probarlo tú mismo.
Al abrirlo, no se muestra nada más que tu asistente, ocupando toda la pantalla: sin sitio web detrás, sin burbuja en la que hacer clic primero, nada que instalar. Ponlo en tu biografía de Instagram, en un código QR en un folleto, en una firma de correo electrónico o en un mensaje de WhatsApp para un posible cliente.
El enlace para compartir sigue el enrutamiento predeterminado de su widget de chat. Para abrir un agente específico, añada ?agent=AGENT_ID al final del enlace; cada chat proveniente de él se asignará entonces a ese agente y será respondido por él, mientras que la página mantiene el nombre y el mensaje de apertura de su widget.
Algunas cosas que vale la pena saber:
- Los chats desde el enlace son reales. Llegan a tu bandeja de entrada, tu agente los responde y utilizan créditos como cualquier otra conversación.
- La página no lleva nuestra marca. Muestra tu asistente y nada más, y se mantiene fuera de los resultados de búsqueda.
- Funciona en tu propia dirección. Si tu proveedor ejecuta la aplicación en su propio dominio, el enlace también utiliza esa dirección, por lo que no aparece nada desconocido en él.
- Un visitante por enlace, por navegador. Quien lo abre mantiene la misma identidad en ese navegador, por lo que volver más tarde continúa la misma conversación en lugar de iniciar la de un extraño. Un navegador diferente, o el enlace de un widget diferente, es un visitante diferente.
Enviar diferentes páginas a diferentes agentes
De forma predeterminada, todos los chats que llegan a través de tu widget son gestionados por el mismo agente. Puedes anular esto por página, de modo que los visitantes en tu página de precios hablen con tu agente de ventas, mientras que los visitantes en tu página de ayuda hablen con tu agente de soporte, todo desde el mismo widget de chat.
Hay dos formas de obtener el código:
-
Desde el agente. En la página de Agentes de IA, haz clic en el botón </> en la fila, o abre el agente y ve a su pestaña Puntos de entrada. De cualquier manera, obtendrás un fragmento listo para pegar que ya apunta a ese agente.
La pestaña Puntos de entrada de un agente también tiene un panel de Widget de chat para sitio web que muestra cuántos chats de sitio web está gestionando ya ese agente. Los chats desde un elemento incrustado llegan directamente al agente, por lo que no necesita crear una regla de punto de entrada para ellos; un agente sin ninguna regla sigue respondiendo a su elemento incrustado.
El botón </> solo aparece en los agentes activos. Un agente en pausa recibiría el chat pero nunca respondería, por lo que la opción está oculta hasta que la vuelvas a activar. No hay ningún canal que configurar para un agente: un agente puede atender un chat desde cualquier canal.
-
Desde la configuración del widget. En Configuración → Canales → Gestionar en tu widget de chat, configura Dirigir estos chats a y copia el fragmento que aparece debajo. Cambiar el menú desplegable reescribe el fragmento.
El fragmento flotante lleva el destino en la dirección:
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID?agent=AGENT_ID" defer></script>
El fragmento integrado lo lleva en el <div>, por lo que una página puede contener varios chats que se dirigen a diferentes lugares:
<div data-chat-widget="CONFIG_ID" data-agent="AGENT_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>
Los fragmentos copiados antes de que se retiraran las campañas contienen ?campaign= o data-campaign= en su lugar. Siguen funcionando, por lo que no hay nada que volver a pegar.
Algunas cosas que vale la pena saber:
- Usa el botón de copiar en lugar de escribir el ID a mano. Si el ID no coincide con un agente de tu cuenta, el chat seguirá funcionando pero volverá a tu enrutamiento predeterminado.
- Alguien que ya esté en medio de una conversación permanece con quien la inició, incluso si más tarde llega a una página que apunta a otro lugar. Esto evita que una conversación cambie de personalidad a mitad de camino.
- Un destino específico de página tiene prioridad sobre el valor predeterminado de tu cuenta y sobre los activadores de palabras clave.
Indique al widget quién es el visitante (avanzado)
Si coloca el widget de chat dentro de un área de miembros, un portal de clientes o una aplicación donde los usuarios ya han iniciado sesión, su sitio ya sabe quiénes son. Puede transferir esa información al widget para que no se le soliciten al visitante detalles que ya le ha proporcionado, y para que su IA pueda utilizar lo que ya sabe sobre ellos.
Añada un pequeño bloque de configuración antes del script del widget:
<script>
window.chatWidgetSettings = {
visitor: {
id: "12345",
name: "Maria",
email: "maria@example.com",
phone: "+391234567890"
},
data: {
plan: "Professional",
customer_since: "2024",
last_order: "A-2291"
}
};
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>
Su página debe completar esos valores desde el lado del servidor, a partir de quien haya iniciado sesión.
Para guardar también un apellido, añade last_name junto a name en el bloque visitor (data-visitor-last-name en un embed integrado). Es opcional: un nombre y un correo electrónico siguen siendo suficientes para omitir el formulario, independientemente de si Recopilar apellido está activado o no.
Ocurren dos cosas:
- Se omite el formulario “Antes de empezar…”. Con un nombre y un correo electrónico proporcionados, el visitante pasa directamente a la conversación, y esos detalles se guardan en su contacto exactamente como si los hubiera escrito él mismo.
- Todo lo que se encuentra bajo
datase entrega a su IA. Cualquier cosa que coloque allí (plan, número de pedido, fecha de renovación, saldo de crédito, cuántos puestos tiene) se convierte en parte de lo que la IA sabe sobre esa persona, por lo que puede responder a “¿cuándo se renueva mi plan?” sin pedirle primero que explique quién es. Utilice los nombres de campo que tengan sentido para usted; aparecerán en el contacto bajo Campos personalizados. Hasta 20 valores, enviados actualizados con cada mensaje, por lo que si el plan cambia a mitad de la conversación, la IA verá el nuevo.
Para incrustaciones en línea, puede colocar la misma información en el <div>, lo cual es útil cuando una página contiene varios chats:
<div data-chat-widget="CONFIG_ID"
data-visitor-name="Maria"
data-visitor-email="maria@example.com"
data-visitor-data='{"plan":"Professional"}'
style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>
Si su sitio solo sabe quién es el visitante después de que la página se haya cargado (por ejemplo, una aplicación de una sola página donde el inicio de sesión ocurre sin recargar la página), llame a esto siempre que tenga los detalles, y el widget se actualizará solo:
<script>
window.chatWidget.setVisitor({
visitor: { id: "12345", name: "Maria", email: "maria@example.com" },
data: { plan: "Professional" }
});
</script>
Algunas cosas que vale la pena saber:
- Si dos personas diferentes inician sesión en el mismo equipo, la segunda comienza una conversación nueva en lugar de ver el chat de la primera. El widget detecta el cambio de persona y se restablece.
- Por sí solo, esto es para el contexto, no para iniciar sesión. Las conversaciones se mantienen separadas como siempre, por lo que pasar un
idno permite que nadie abra el chat de otra persona, y alguien que use un dispositivo o navegador diferente iniciará una nueva conversación allí. Para trasladar la conversación entre dispositivos, firme elidcomo se describe a continuación. - Es opcional. Un widget en una página pública normal no necesita nada de esto y se comporta exactamente igual que antes.
Reanudar la misma conversación en cualquier dispositivo (ID de visitante firmado)
Si sus clientes tienen cuentas, puede hacer que su chat los siga: inician sesión en un teléfono, continúan en una computadora portátil, y es la misma conversación con el mismo contacto en su bandeja de entrada, y la IA sigue sabiendo todo lo que se dijo. Para ello, Your AI Connector necesita una prueba de que el visitante es realmente quien su página dice que es; de lo contrario, cualquiera podría escribir un número de cliente en su navegador y leer el chat de ese cliente. La prueba es una firma que usted calcula en su servidor.
- En el panel Gestionar del widget, en Canales e integración, busque Visitantes con sesión iniciada y haga clic en Generar secreto. Copie el secreto de identidad. Guárdelo solo en su servidor; nunca lo incluya en la propia página.
- Cuando su servidor renderice una página para un cliente con sesión iniciada, calcule un HMAC-SHA256 del ID de ese cliente usando el secreto, como una cadena hexadecimal en minúsculas:
// Node.js
const hash = require("crypto").createHmac("sha256", IDENTITY_SECRET).update(customerId).digest("hex");
// PHP
$hash = hash_hmac('sha256', $customerId, IDENTITY_SECRET);
# Python
import hmac, hashlib
hash = hmac.new(IDENTITY_SECRET.encode(), customer_id.encode(), hashlib.sha256).hexdigest()
- Coloque el ID y el hash en el bloque de configuración, junto al nombre y correo electrónico que ya pasa:
<script>
window.chatWidgetSettings = {
visitor: {
id: "12345",
hash: "3f2a…e91c",
name: "Maria",
email: "maria@example.com"
}
};
</script>
<script src="https://api.youraiconnector.com/v1/chat-widget/CONFIG_ID" defer></script>
La incrustación en línea toma el mismo valor que data-visitor-hash en el <div>, y window.chatWidget.setVisitor({ visitor: { id, hash } }) funciona para aplicaciones que inician sesión de personas sin recargar la página.
Qué sucede una vez que se verifica la firma:
- El chat del cliente se almacena en su cuenta en lugar de en el navegador, por lo que es la misma conversación en todos los dispositivos y navegadores donde hayan iniciado sesión, y un solo contacto en su bandeja de entrada.
- Sus mensajes anteriores se cargan en el nuevo dispositivo y la IA continúa desde donde los dejaron.
- Si la firma es incorrecta, el widget se comporta silenciosamente como antes, como un chat normal por navegador, e imprime el motivo en la consola del navegador para que un desarrollador pueda detectarlo. Sus visitantes nunca verán un error.
- El ID se compara exactamente como usted lo envió, así que firme el mismo valor que pasa como
idy use el mismo ID para la misma persona en todas partes.
Dos cosas que debe saber:
- Regenerar en el panel Administrar le proporciona un nuevo secreto. Las páginas que sigan firmando con el anterior volverán a los chats normales por navegador hasta que su servidor use el nuevo secreto. Las conversaciones existentes se mantienen; están vinculadas al ID del cliente, no al secreto.
- Una conversación que alguien tuvo antes de iniciar sesión, como visitante anónimo, sigue siendo un chat separado. La conversación basada en la cuenta comienza con el primer mensaje que envían mientras están conectados.
Cambie la configuración del widget desde su propio código (API)
Todo lo que se encuentra en el panel Administrar del widget también puede cambiarse a través de la API REST, lo cual es útil si administra muchos sitios web o desea desactivar automáticamente el botón de adjuntos para un cliente. Envíe una PATCH a https://api.youraiconnector.com/v1/chat-widget-configs/CONFIG_ID con su clave de API y solo los campos que desea cambiar; por ejemplo, {"show_upload_button": false} oculta el botón de adjuntos, {"show_emoji_button": false} oculta el selector de emojis y {"launcher_icon": "chat-dots"} cambia el icono del lanzador. CONFIG_ID es el mismo identificador que en su script de incrustación. La lista completa de campos aceptados (nombre, mensaje de apertura, colores, icono del lanzador, dominios permitidos, formulario de información del visitante, aviso de privacidad, tema, esquina y estilo de fuente) se encuentra en la Referencia de la API bajo Chat Widget. Los sitios web aplican el cambio la próxima vez que se carga la página.
Qué esperar después de la instalación
Una vez que hayas añadido el script a tu sitio web, el widget de chat creará automáticamente un botón de chat en la esquina de tu sitio web (por defecto, en la parte inferior derecha). El widget permanece en una posición fija mientras los usuarios se desplazan por tus páginas, asegurando que siempre sea accesible.
Cuando los visitantes hacen clic en este botón, se expande en una ventana de chat completa donde pueden iniciar una conversación, mostrando tu mensaje de apertura. Si la opción Recopilar información del visitante está activada, aparece primero un pequeño formulario solicitando su nombre y correo electrónico (y opcionalmente el teléfono) antes de que puedan escribir.
La interfaz de chat se adapta automáticamente a diferentes tamaños de pantalla, por lo que funciona perfectamente tanto en dispositivos de escritorio como móviles.
Cómo probar tu implementación
Después de añadir el widget a tu sitio, comprueba que funciona:
- Abre tu sitio web en un navegador.
- Haz clic en el botón de chat para abrir el widget.
- Envía un mensaje de prueba y confirma que recibes una respuesta.
- Repite el proceso en un dispositivo o navegador diferente para confirmar que funciona en todas partes.
Si el widget de chat no aparece en tu sitio, comprueba lo siguiente:
- Asegúrate de haber reemplazado
CONFIG_IDcon tu identificador de configuración real. - Asegúrate de que la etiqueta de script esté colocada antes de la etiqueta de cierre
</body>. - Revisa el código en busca de errores de escritura.
- En Shopify, asegúrate de haber editado el tema publicado y de haber hecho clic en Guardar. Una edición realizada en un borrador o en un tema duplicado nunca llega a tu tienda activa.
Detrás de un cortafuegos corporativo
Si el widget se carga para el público pero no para el personal en la red de la oficina, es casi seguro que la red está bloqueando el dominio desde el que se carga. Pida a su equipo de TI que permita, a través de HTTPS normal en el puerto 443:
- El dominio en su fragmento de incrustación: la dirección en la línea
<script src="...">que copió del panel de gestión. api.youraiconnector.com: el widget también envía sus mensajes aquí.
No es necesario abrir nada más: no se requieren puertos adicionales ni reglas de entrada. Si después de esto el widget sigue sin aparecer, abra la consola de desarrollador de su navegador en la página y envíenos lo que informa; una solicitud bloqueada indica el dominio que fue rechazado, lo cual suele ser la respuesta completa.