Cree un agente, configure la autenticación OAuth e incruste el widget en su sitio web.
La aplicación del widget está alojada en widget.companin.tech y proporciona una manera fácil de incrustar un Agente de IA de Soporte al Cliente en su sitio web. Para comenzar, necesitará crear un agente y una aplicación OAuth.
El widget es una aplicación ligera y autónoma que se ejecuta en un iframe aislado en tu sitio web. Esta arquitectura asegura que el widget no entre en conflicto con tu CSS o JavaScript existentes, mientras mantiene un excelente rendimiento y seguridad.
⚡ Despliegue Rápido
La mayoría de los desarrolladores tienen el widget funcionando en su sitio en menos de 10 minutos. El proceso de configuración implica solo tres pasos: crear credenciales, configurar la apariencia y agregar una sola etiqueta de script a tu HTML.
Primero, cree un Agente de IA de Soporte al Cliente en su panel:
Tu agente es el cerebro de IA detrás del widget. Procesa los mensajes de los usuarios, mantiene el contexto de la conversación y genera respuestas inteligentes. Cada agente se puede personalizar con instrucciones específicas, rasgos de personalidad y bases de conocimiento para coincidir con tu caso de uso.
Consejo: Dale a tu agente instrucciones claras y específicas sobre su papel y limitaciones. Por ejemplo: "Eres un agente de soporte al cliente útil para un producto SaaS. Puedes responder preguntas sobre características, precios y gestión de cuentas. Para problemas técnicos, dirige a los usuarios a crear un ticket de soporte."
Cree una aplicación OAuth para autenticar su widget:
client_id de la aplicación creadaLa forma más sencilla de integrar el widget es incrustándolo directamente usando un iframe. Este método no requiere inicialización de JavaScript y funciona de inmediato. Para múltiples iframes en una página, mantenga cada incrustación limitada a su propio contenedor y parámetros.
<iframe src="https://widget.companin.tech/embed/session?key=YOUR_WIDGET_KEY&locale=en" style="border:none; width:100%; height:600px; border-radius:8px;" title="Customer Support AI Agent Widget"></iframe>Reemplace YOUR_WIDGET_KEY con la clave de instalación de su widget (el valor wgt_—— — cópielo de la página del Widget o de la página de Instalación en el panel). El parámetro locale se puede establecer para coincidir con el idioma de su sitio.
El método de integración recomendado es usar nuestro cargador de widgets de JavaScript, que proporciona dimensionamiento automático, gestión de configuración y comportamiento responsivo.
Agrega la siguiente etiqueta de script a tu página HTML:
<script src="https://widget.companin.tech/widget.js" data-widget-key="YOUR_WIDGET_KEY" data-instance-id="support-widget" data-locale="en" data-theme="system" async></script>Cada atributo cumple un propósito específico en la configuración de tu widget:
data-widget-key: El ID del Widget de tu widget - El único valor que la mayoría de las instalaciones necesitan. Resuelve tu cliente, agente y configuración del lado del servidor, por lo que no los pegas por separado.Los tres atributos a continuación son una alternativa avanzada a data-widget-key - úsalos para configuraciones de múltiples instancias donde necesites apuntar a un cliente, agente o configuración específica:
data-client-id: Tu ID de cliente OAuth - Esto autentica tu aplicación con nuestra API. Piensa en ello como la contraseña de tu aplicación.data-agent-id: El UUID de tu agente - Esto identifica qué Agente de IA de Soporte al Cliente maneja las conversaciones.data-config-id: El UUID de tu configuración de widget - Esto determina cómo se ve y se comporta tu widget (colores, tamaño, posición, etc.).data-instance-id: ID de instancia única por widget - Requerido al incrustar múltiples widgets en la misma página para evitar colisiones y habilitar el direccionamiento de API por instancia.data-custom-css: Obsoleto. Establecer este atributo registra una advertencia en la consola y no tiene efecto. Establece custom_css en la configuración de tu widget en el panel en su lugar — se carga desde la configuración e inyecta en el iframe automáticamente.data-locale: Código de idioma (por ejemplo, "en", "es", "fr") - Establece el idioma de visualización del widget. El agente aún responderá en cualquier idioma que los usuarios escriban.data-theme: Modo de tema - light, dark, o system (seguir el dispositivo del visitante). Elige qué paleta de colores (configurada en tu panel) muestra el widget. Omítelo para usar tu predeterminado guardado.data-dev: Establecer en "true" para modo de desarrollo (localhost) - Usa esto al probar localmente. Elimina o establece en "false" para producción.El widget se ajustará automáticamente:
start_openstart_open de tu configuracióndata-dev="true" para pruebas en localhost