¡Todavía estamos construyendo cosas aquí! Ayúdanos a mejorar reportando errores aquí.
Iniciar sesión

Inicio Rápido

Integra el widget y obtén un token de widget del servidor.

Resumen del Widget

La aplicación widget está alojada en widget.companin.tech y proporciona una forma fácil de incrustar un asistente de IA en su sitio web. Para comenzar, necesitará crear un asistente y una aplicación OAuth.

El widget es una aplicación liviana e independiente que se ejecuta en un iframe aislado en su sitio web. Esta arquitectura garantiza que el widget no entre en conflicto con su CSS o JavaScript existente, manteniendo al mismo tiempo un excelente rendimiento y seguridad.

⚡ Implementación rápida

La mayoría de los desarrolladores ejecutan el widget en su sitio en 10 minutos. El proceso de configuración implica solo tres pasos: crear credenciales, configurar la apariencia y agregar una única etiqueta de secuencia de comandos a su HTML.

1. Crear un Asistente

Primero, cree un asistente de IA en su panel de control:

Tu asistente es el cerebro de IA detrás del widget. Procesa mensajes de usuarios, mantiene el contexto de la conversación y genera respuestas inteligentes. Cada asistente se puede personalizar con instrucciones específicas, rasgos de personalidad y bases de conocimientos para que coincidan con su caso de uso.

  1. Vaya a su panel de control y navegue a la página "Data Sources"
  2. Haga clic en el botón "Add" en la sección Assistants
  3. Complete los detalles del asistente (nombre, descripción, tono, etc.)
  4. Guarde el asistente y anote su ID

Consejo: Déle a su asistente instrucciones claras y específicas sobre su función y limitaciones. Por ejemplo: "Usted es un útil asistente de atención al cliente para un producto SaaS. Puede responder preguntas sobre funciones, precios y administración de cuentas. Para problemas técnicos, indique a los usuarios que creen un ticket de soporte".

2. Crear una Aplicación OAuth

Cree una aplicación OAuth para autenticar su widget:

  1. Vaya a la página "OAuth" en su panel de control
  2. Haga clic en "Create Application"
  3. Complete el nombre y la descripción de la aplicación
  4. Copie el client_id de la aplicación creada

3. Incrustar el Widget vía Iframe

La forma más simple de integrar el widget es incrustarlo directamente con un iframe. Este método no requiere inicialización con JavaScript y funciona de inmediato. Si usas varios iframes en una misma página, mantén cada integración aislada en su propio contenedor y parámetros.

<iframe src="https://widget.companin.tech/embed/session?clientId=YOUR_CLIENT_ID&assistantId=YOUR_ASSISTANT_ID&configId=YOUR_CONFIG_ID&locale=en" style="border:none; width:100%; height:600px; border-radius:8px;" title="Customer Support AI Assistant Widget"></iframe>

Reemplace YOUR_CLIENT_ID y YOUR_ASSISTANT_ID con sus valores reales. El parámetro locale se puede configurar para que coincida con el idioma de su sitio.

Avanzado: Inicialización de JavaScript

El método de integración recomendado es utilizar nuestro cargador de widgets JavaScript, que proporciona dimensionamiento automático, gestión de configuración y comportamiento responsivo.

Integración de guiones

Agregue la siguiente etiqueta de secuencia de comandos a su página HTML:

<script  src="https://widget.companin.tech/widget.js"  data-client-id="YOUR_CLIENT_ID"  data-assistant-id="YOUR_ASSISTANT_ID"  data-config-id="YOUR_CONFIG_ID"  data-instance-id="support-widget"  data-locale="en"  data-dev="false"></script>

Atributos de guión

Cada atributo tiene un propósito específico al configurar su widget:

  • data-client-id: Su ID de cliente de OAuth: esto autentica su aplicación con nuestra API. Piense en ello como la contraseña de su aplicación.
  • data-assistant-id: el UUID de su asistente: identifica qué asistente de IA de atención al cliente maneja las conversaciones.
  • data-config-id: El UUID de la configuración de su widget: esto determina cómo se ve y se comporta su widget (colores, tamaño, posición, etc.).
  • data-instance-id: ID de instancia único por widget: obligatorio al incrustar varios widgets en la misma página para evitar colisiones y habilitar la orientación de API por instancia.
  • data-custom-css: (opcional) reglas CSS en línea que se inyectarán en el <head> del iframe antes de que se procese la aplicación. Utilice esto para anular estilos sin modificar su configuración. La codificación de URL se maneja automáticamente.
  • data-locale: código de idioma (por ejemplo, "en", "es", "fr"): establece el idioma de visualización del widget. El asistente seguirá respondiendo en cualquier idioma en el que escriban los usuarios.
  • data-dev: Establezca en "true" para el modo de desarrollo (localhost). Úselo cuando realice pruebas localmente. Elimínelo o configúrelo en "falso" para producción.

El widget automáticamente:

  • Obtenga la configuración del ID de configuración
  • Tamaño en sí según las dimensiones del widget en la configuración
  • Coloque el botón contraído según la configuración
  • Iniciar abierto o cerrado según la configuración start_open de la configuración

Notas

  • El widget administra automáticamente su propio tamaño según sus ajustes de configuración.
  • La posición del botón contraído se puede personalizar a través de la configuración del widget.
  • El widget respeta la configuración start_open de su configuración.
  • Todo el estilo (colores, fuentes, dimensiones) se controla a través de la configuración del widget.
  • El widget utiliza comunicación postMessage para un comportamiento receptivo.
  • El modo de desarrollo se puede habilitar con data-dev="true" para pruebas de localhost
  • Para el intercambio de tokens del lado del servidor, use /api/v1/auth/widget-token y mantenga el cliente en secreto solo en su servidor.
  • Asegúrese de que el origen de su host (por ejemplo, http://localhost:3000) esté incluido en OAuth permitido_origins al incrustar el widget en un iframe.
← AtrásSiguiente: Referencia API →