Découvrez comment intégrer le widget de l'agent Docs sur vos pages de documentation.
L'agent Docs est un widget spécialisé alimenté par l'IA conçu spécifiquement pour les pages de documentation. Il fournit une aide instantanée à vos utilisateurs en répondant aux questions sur votre documentation à l'aide d'un dialogue interactif en plein écran.
Essayez-le maintenant !
Cliquez sur le bouton ci-dessous pour voir l'agent Docs en action sur cette page.
Commencer avec le widget Agent Docs est simple. Il suffit de suivre ces deux étapes :
Si votre page de docs charge l'agent à l'intérieur d'une iframe, assurez-vous que l'origine de la page hôte est incluse dans les allowed_origins de votre application OAuth. Le point de terminaison du jeton de widget valide cette origine avant de délivrer un jeton.
Ajoutez le script docs-widget.js à votre page HTML avec la configuration requise. Si vous chargez plusieurs widgets docs, donnez à chaque script un identifiant d'instance unique :
<script src="https://widget.companin.tech/docs-widget.js" data-widget-key="YOUR_WIDGET_KEY" data-instance-id="docs-help" data-locale="en" async></script>Créez un bouton ou un élément qui appelle la méthode open() du widget :
<button id="help-btn" type="button">Ask Documentation Agent</button><script> const handleOpen = (event) => { console.log('Docs widget opened', event?.context); }; // Generic event API (returns unsubscribe function) const unsubscribeOpen = window.CompaninDocsWidget?.on?.('open', handleOpen); document.getElementById('help-btn')?.addEventListener('click', () => { window.CompaninDocsWidget?.open(); }); // Cleanup on page unload or SPA route change window.addEventListener('beforeunload', () => { if (typeof unsubscribeOpen === 'function') unsubscribeOpen(); });</script>Voici quelques exemples pratiques de la façon d'intégrer l'Agent Docs :
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Documentation</title></head><body> <header> <h1>Product Documentation</h1> <button onclick="window.CompaninDocsWidget.open()"> Need Help? </button> </header> <main> <!-- Your documentation content --> </main> <script src="https://widget.companin.tech/docs-widget.js" data-widget-key="your-widget-key" data-locale="en"> </script></body></html>Pour plus de contrôle, vous pouvez ajouter des écouteurs d'événements à vos boutons existants :
// Wait for the widget to loadwindow.addEventListener('load', () => { const unsubscribeResponse = window.CompaninDocsWidget?.on?.('response', (event) => { console.log('Agent response:', event?.data); }); document.getElementById('help-btn').addEventListener('click', () => { if (window.CompaninDocsWidget) { window.CompaninDocsWidget.open(); } }); window.addEventListener('beforeunload', () => { if (typeof unsubscribeResponse === 'function') unsubscribeResponse(); });});Dans une application React ou Next.js :
import React from 'react';export default function Documentation() { const openDocsAgent = () => { if (window.CompaninDocsWidget) { window.CompaninDocsWidget.open(); } }; return ( <div> <h1>API Documentation</h1> <button onClick={openDocsAgent} className="help-button" > Ask Customer Support AI Agent </button> </div> );}Le widget Agent Docs accepte plusieurs paramètres de configuration. Utilisez data-instance-id pour un contrôle déterministe par instance lors de l'intégration de plusieurs widgets sur une page :
data-widget-key: L'ID de widget de votre widget de documentation — la valeur unique dont la plupart des installations ont besoin. Il résout votre client, agent et serveur de configuration côté serveur.Alternative avancée à <code>data-widget-key</code> — passez ces trois éléments explicitement uniquement pour les configurations multi-instance :
data-client-id: Votre identifiant client unique depuis le tableau de bord Companindata-agent-id: L'ID de l'agent que vous souhaitez utiliserdata-config-id: ID de configuration pour la personnalisation du widgetdata-locale: Code de langue (par défaut : 'en'). Prend en charge : en, de, es, fr, it, nb, nl, pt, svdata-dev: Définir sur 'true' pour le mode développement (se connecte à localhost:3001)Une fois chargé, le widget expose une API globale pour le contrôle programmatique. Pour les configurations multi-widgets, préférez les registres d'instance (CompaninDocsWidgets.get(instanceId)) plutôt que d'utiliser uniquement la dernière référence globale :
window.CompaninDocsWidget.open();Ouvre la boîte de dialogue de l'Agent Docs en mode plein écran.
window.CompaninDocsWidget.close();Ferme la boîte de dialogue de l'Agent Docs et cache le widget.
Vous pouvez styliser vos boutons de déclenchement comme vous le souhaitez. Voici un exemple d'un bouton d'aide flottant :
.my-help-button { position: fixed; bottom: 20px; right: 20px; padding: 12px 24px; background: #2563eb; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: all 0.2s;}.my-help-button:hover { background: #1d4ed8; transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);}Assurez-vous que le script est chargé avant d'appeler l'API. Vous pouvez vérifier si le widget est disponible :
window.addEventListener('load', () => { console.log('Widget loaded:', !!window.CompaninDocsWidget);});Vérifiez que vous avez fourni une clé de widget valide (ou, pour la forme explicite, le client-id, agent-id, et config-id) et qu'elle est correcte. Si plusieurs widgets sont présents, assurez-vous que chaque script a un data-instance-id unique.