Crea un agente, configura la autenticación OAuth y embebe el widget en tu sitio web.
La aplicación del widget está alojada en widget.companin.tech y proporciona una forma fácil de integrar un Agente de Soporte al Cliente AI en tu sitio web. Para comenzar, necesitarás 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 su sitio web. Esta arquitectura asegura que el widget no entre en conflicto con su CSS o JavaScript existente, 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 su HTML.
Primero, crea un Agente de Soporte al Cliente AI en tu panel:
Su 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 adaptarse a su caso de uso.
Consejo: Dé a su 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, dirija a los usuarios a crear un ticket de soporte."
Crea una aplicación OAuth para autenticar tu widget:
client_id de la aplicación creadaLa forma más sencilla de integrar el widget es embebié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, mantén cada embebido limitado 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_… — encuéntrelo en la página de Widget o Instalación en el panel de control). El parámetro locale se puede configurar para que coincida con el idioma de su sitio.
El método de integración recomendado es usar nuestro cargador de widgets de JavaScript, que proporciona ajuste automático, gestión de configuración y comportamiento responsivo.
Agregue la siguiente etiqueta de script a su 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" async></script>Cada atributo tiene un propósito específico en la configuración de su widget:
data-widget-key: El ID de Widget de tu widget - El valor único que la mayoría de las instalaciones necesitan. Resuelve tu cliente, agente y servidor de 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 dirigirte a un cliente, agente o configuración específica explícitamente:
data-client-id: Su ID de cliente OAuth - Esto autentica su aplicación con nuestra API. Piense en ello como la contraseña de su aplicación.data-agent-id: El UUID de su agente - Esto identifica qué Agente de IA de Soporte al Cliente maneja las conversaciones.data-config-id: El UUID de su configuración de widget - Esto determina cómo se ve y se comporta su 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. Establezca custom_css en la configuración de su widget en el panel en su lugar — se carga desde la configuración y se 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-dev: Establecer en "true" para modo de desarrollo (localhost) - Use esto al probar localmente. Elimine o establezca en "false" para producción.El widget automáticamente:
start_openstart_open de su configuracióndata-dev="true" para pruebas en localhost