Erfahren Sie, wie Sie das Docs Agent-Widget auf Ihren Dokumentationsseiten einbetten.
Der Docs Agent ist ein spezialisiertes, KI-gestütztes Widget, das speziell für Dokumentationsseiten entwickelt wurde. Es bietet Ihren Nutzern sofortige Hilfe, indem es Fragen zu Ihrer Dokumentation über einen interaktiven Dialog im Vollbildmodus beantwortet.
Versuche es jetzt!
Klicken Sie auf die Schaltfläche unten, um den Docs-Agenten auf dieser Seite in Aktion zu sehen.
Der Einstieg in das Docs Agent-Widget ist einfach. Befolgen Sie einfach diese beiden Schritte:
Wenn Ihre Dokumentenseite den Agenten in einem Iframe lädt, stellen Sie sicher, dass der Ursprung der Hostseite in den „allowed_origins“ Ihrer OAuth-Anwendung enthalten ist. Der Widget-Token-Endpunkt validiert diesen Ursprung, bevor er ein Token ausgibt.
Fügen Sie das Skript docs-widget.js zu Ihrer HTML-Seite mit der erforderlichen Konfiguration hinzu. Wenn Sie mehrere Docs-Widgets laden, geben Sie jedem Skript eine eindeutige data-instance-id.
<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>Erstellen Sie eine Schaltfläche oder ein Element, das die Methode open() des Widgets aufruft:
<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>Hier sind einige praktische Beispiele, wie man den Docs Agent integrieren kann:
<!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>Für mehr Kontrolle können Sie Ereignis-Listener zu Ihren vorhandenen Schaltflächen hinzufügen:
// 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(); });});In einer React- oder Next.js-Anwendung:
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> );}Das Docs Agent-Widget akzeptiert mehrere Konfigurationsparameter. Verwenden Sie data-instance-id für deterministische, instanzspezifische Steuerung, wenn Sie mehrere Widgets auf einer Seite einbetten:
data-widget-key: Die Widget-ID Ihres Docs-Widgets — der einzelne Wert, den die meisten Installationen benötigen. Sie löst Ihren Client, Agenten und Konfigurationsserver auf der Serverseite auf.Erweiterte Alternative zu <code>data-widget-key</code> — übergeben Sie diese drei explizit nur für Mehrfachinstanz-Einrichtungen:
data-client-id: Ihre eindeutige Kundenidentifikationsnummer aus dem Companin-Dashboarddata-agent-id: Die ID des Agenten, den Sie verwenden möchten.data-config-id: Konfigurations-ID für die Anpassung von Widgetsdata-locale: Bitte geben Sie den zu übersetzenden Text an.data-dev: Auf 'true' setzen für den Entwicklungsmodus (verbindet sich mit localhost:3001)Sobald das Widget geladen ist, stellt es eine globale API für die programmgesteuerte Steuerung zur Verfügung. Bei Multi-Widget-Setups sollten Instanzregistrierungen (CompaninDocsWidgets.get(instanceId)) gegenüber der ausschließlichen Verwendung der neuesten globalen Referenz bevorzugt werden:
window.CompaninDocsWidget.open();Öffnet den Docs Agent-Dialog im Vollbildmodus.
window.CompaninDocsWidget.close();Schließt den Docs Agent-Dialog und blendet das Widget aus.
Sie können Ihre Auslöser-Schaltflächen nach Belieben gestalten. Hier ist ein Beispiel für eine schwebende Hilfeschaltfläche:
.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);}Stellen Sie sicher, dass das Skript geladen ist, bevor Sie die API aufrufen. Sie können überprüfen, ob das Widget verfügbar ist:
window.addEventListener('load', () => { console.log('Widget loaded:', !!window.CompaninDocsWidget);});Überprüfen Sie, ob Sie einen gültigen data-widget-key bereitgestellt haben (oder im expliziten Format die client-id, agent-id und config-id) und dass er korrekt ist. Wenn mehrere Widgets vorhanden sind, stellen Sie sicher, dass jedes Skript eine eindeutige data-instance-id hat.