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:

1. 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).
2. En la barra lateral de Settings, bajo Channels (Canales), haz clic en Channels.
3. Busca la tarjeta Website chat widget (Widget de chat del sitio web).
4. 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.
5. 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: Cambie el estilo de todo el widget con un solo clic. Seis temas definen el aspecto, los colores, las esquinas y la fuente a la vez: Classic (el aspecto sólido original: una barra de encabezado de color sobre un panel plano), Glass (un panel esmerilado y translúcido que difumina suavemente la página detrás de él, 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, puede seguir cambiando cualquier color o ajuste individualmente. Los nuevos widgets comienzan con Glass; el cambio es instantáneo en cualquier lugar donde esté incrustado el widget, sin necesidad de realizar cambios de código en su 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 su sitio.
• Nombre para mostrar: Se muestra en el encabezado del widget.
• Logotipo: Suba una imagen que aparezca en la parte superior del chat. Use el logotipo de su empresa o una foto de perfil amigable.
• Icono de inicio: El icono en el propio botón de chat flotante. Elija uno de los iconos integrados (burbuja de chat, avión de papel, signo de interrogación y más), reutilice su logotipo cargado o suba una imagen propia por separado, lo cual es útil si desea 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 su 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. Elija un color de burbuja de bot que sea claramente diferente de su 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 su bot de las suyas. Una burbuja de bot de color gris claro con texto oscuro junto a su color de marca es la combinación segura.
• Posición: Coloque 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 su página.
• Preguntas de inicio: 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 solo toque en lugar de escribir; por ejemplo, “¿Cuáles son sus precios?” o “¿Ofrecen soporte?”, hasta 10.

Comportamiento #

• Mensaje de bienvenida: El primer mensaje que ven los visitantes al abrir el chat (por ejemplo, “¿En qué 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 a participar. 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 oculta automáticamente después de 20 segundos si nadie hace clic en ella (ese número es fijo), y una vez que un visitante hace clic en Ahora no, permanece oculta durante el resto de su visita. La ventana del chat nunca se abre por sí sola: se abre cuando el visitante hace clic en el botón de chat o en la burbuja, y permanece abierta hasta que la cierran.
• 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 sitúa en el medio.

Idiomas #

El widget es multilingüe por sí mismo; no hay nada que activar.

• Detecta el idioma del visitante automáticamente. Primero analiza 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, se mostrará en inglés.
• O elige uno tú mismo. El campo Idioma del widget en la sección Comportamiento está configurado como Automático de forma predeterminada, lo que corresponde a la detección anterior. Elige un idioma ahí y las etiquetas propias del widget (los campos de 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 indiquen la página o el navegador. Utiliza esto cuando el constructor de tu sitio no declare el idioma correcto o cuando desees un idioma fijo para todos los visitantes.
• Idiomas admitidos: Inglés, neerlandés, alemán, francés, español, italiano, portugués, rumano, polaco, árabe, finés y filipino. Esta es la lista para los botones y etiquetas propios del widget.
• Tus mensajes se traducen automáticamente. Cada vez que guardas, tu mensaje de bienvenida, la burbuja emergente proactiva y las preguntas iniciales se traducen a los doce idiomas anteriores. Solo tienes que escribirlos una vez, en el idioma que prefieras.
• Escribe cada mensaje en un solo idioma. Si pones dos idiomas en el mismo campo (por ejemplo, una línea en inglés y otra en italiano), todo el contenido se tratará como un único mensaje y se traducirá tal cual, por lo que un visitante italiano terminará viendo la misma frase 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 responderá en ese mismo idioma, sin importar el idioma en el que se muestren las etiquetas del widget. Si prefieres que siempre responda en un idioma fijo, indícalo en las instrucciones de tu agente.

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 su teléfono) antes de que comience la conversación, para que pueda captar al cliente potencial incluso si abandona el chat a mitad de la sesión.
• Título del formulario y Subtítulo del formulario: Personalice el encabezado y la breve explicación que se muestran encima del formulario.
• Recopilar número de teléfono: Actívelo para solicitar también un número de teléfono; si está desactivado, solo se recopilan el nombre y el correo electrónico.

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.

¿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: Opcionalmente, incluye 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, Instagram o Messenger.
• 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.com o *.example.com); déjalo vacío para permitir cualquier dominio.
• Dirigir estos chats a: Elige la campaña o 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 de widget de chat normal. Consulta Enviar diferentes páginas a diferentes campañas 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 para obtener un enlace compartible que abra ese sitio con tu widget ejecutándose encima; no hay nada que instalar por su parte. Consulta Mostrar el widget en el sitio web de otra persona 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:

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 restricciones geográficas o por país. La Lista blanca de dominios limita qué sitios web pueden incrustar el widget; no hay forma de mostrarlo u ocultarlo según la ubicación del visitante. Si necesitas eso, oculta el fragmento de código de incrustación tú mismo en las páginas o para las audiencias en las que no desees que aparezca.
• Sin incrustación de vídeo dentro del chat.
• Sin temporizador de ocultación automática. La burbuja de invitación desaparece por sí sola después de 20 segundos y ese número no se puede cambiar; la ventana de chat abierta nunca se cierra sola. Si la burbuja se superpone al contenido de tu página, mueve el widget con los desplazamientos de Posición o desactiva la burbuja y mantén solo el botón de inicio.

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.

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.

1. Abre el archivo HTML de tu sitio web en un editor de texto.
2. Busca la etiqueta de cierre </body>; normalmente se encuentra al final del archivo.
3. 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"></script>

4. Reemplaza CONFIG_ID con 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.

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"></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.

1. Abre el panel de Gestión y desplázate hasta Canales e integración.
2. En Enlace de demostración para clientes, escribe la dirección del sitio web (por ejemplo, www.theircompany.com).
3. Haz clic en Copiar para copiar el enlace, o en Abrir para verlo tú primero.
4. 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 tu bandeja de entrada y son respondidos por tu agente, y utilizan créditos como cualquier otra conversación.
• La página no tiene marca. Muestra su sitio web y tu widget, y nada más.
• Algunos sitios web no se pueden enmarcar. Varios sitios (bancos, grandes minoristas, cualquier cosa detrás de configuraciones de seguridad estrictas) bloquean que otras páginas los muestren. Cuando eso sucede, el enlace sigue funcionando: muestra una ventana de navegador simulada neutral en lugar del sitio real, con tu 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.

El enlace de demostración siempre utiliza el enrutamiento predeterminado de tu cuenta, independientemente de cómo esté configurado Dirigir estos chats a. Si quieres que los chats de demostración sean gestionados por un agente específico, establece primero a ese agente como predeterminado en tu widget de chat.

Enviar diferentes páginas a diferentes campañas #

De forma predeterminada, todos los chats que llegan a través de tu widget son gestionados por la misma campaña o agente. Puedes anular esto por página, de modo que los visitantes de tu página de precios hablen con tu campaña de ventas, mientras que los visitantes de 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 la campaña o el agente. En la página de Campañas, abra el menú ⋮ en una campaña y elija Añadir al sitio web. En la página de Agentes, haga clic en el botón </> en la fila, o abra el agente y vaya a su pestaña Puntos de entrada. De cualquier manera, obtendrá un fragmento listo para pegar que ya apunta a esa campaña o 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.

  Añadir al sitio web solo aparece en campañas que están activas y configuradas para gestionar chats entrantes. Una campaña en borrador aún no puede recibir visitantes, por lo que la opción permanece oculta hasta que la publiques. En la página de Agentes, aparece en los agentes activos. Un agente en pausa recibiría el chat pero nunca respondería, por lo que la opción permanece oculta hasta que lo 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, establece Dirigir estos chats a y copia el fragmento de código 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?campaign=CAMPAIGN_ID"></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-campaign="CAMPAIGN_ID" style="width:100%;height:600px;"></div>
<script src="https://api.youraiconnector.com/v1/chat-widget/embed.js" async></script>

Para un agente, la redacción cambia a ?agent=AGENT_ID o data-agent="AGENT_ID".

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 una campaña o agente de tu cuenta, el chat seguirá funcionando, pero volverá a tu enrutamiento predeterminado.
• Alguien que ya esté en medio de una conversación permanecerá 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 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"></script>

Su página debe completar esos valores desde el lado del servidor, a partir de quien haya iniciado sesión.

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 data se 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 ordenador, la segunda inicia una conversación nueva en lugar de ver el chat de la primera. El widget detecta el cambio de persona y se restablece.
• Esto es para el contexto, no para iniciar sesión. Las conversaciones se mantienen separadas como siempre, por lo que pasar un id no permite que nadie abra el chat de otra persona, y alguien que utilice un dispositivo o navegador diferente iniciará una nueva conversación allí.
• Es opcional. Un widget en una página pública normal no necesita nada de esto y se comporta exactamente igual que antes.

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:

1. Abre tu sitio web en un navegador.
2. Haz clic en el botón de chat para abrir el widget.
3. Envía un mensaje de prueba y confirma que recibes una respuesta.
4. 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:

1. Asegúrate de haber reemplazado CONFIG_ID con tu identificador de configuración real.
2. Asegúrate de que la etiqueta del script esté colocada antes de la etiqueta de cierre </body>.
3. Revisa el código en busca de errores de escritura.

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.