Lär dig hur du bäddar in Docs Agent-widgeten på dina dokumentationssidor.
Docs Agent är en specialiserad AI-driven widget som är utformad specifikt för dokumentationssidor. Den ger omedelbar hjälp till dina användare genom att svara på frågor om din dokumentation med hjälp av en interaktiv dialog i fullskärm.
Prova det nu!
Klicka på knappen nedan för att se Docs Agent i aktion på denna sida.
Att komma igång med Docs Agent-widgeten är enkelt. Följ bara dessa två steg:
Om din dokument sida laddar agenten inuti en iframe, se till att värd sidans ursprung är inkluderad i din OAuth-applikations tillåtna ursprung. Widget-token slutpunkten validerar detta ursprung innan den utfärdar en token.
Lägg till docs-widget.js-skriptet på din HTML-sida med den nödvändiga konfigurationen. Om du laddar flera docs-widgetar, ge varje skript ett unikt 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>Skapa en knapp eller element som anropar widgetens open() metod:
<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>Här är några praktiska exempel på hur du integrerar Docs Agent:
<!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 mer kontroll kan du lägga till händelselyssnare till dina befintliga knappar:
// 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(); });});I en React- eller Next.js-applikation:
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> );}Docs Agent-widgeten accepterar flera konfigurationsparametrar. Använd data-instance-id för deterministisk per-instanskontroll när du bäddar in flera widgetar på en sida:
data-widget-key: Din dokumentationswidgetens widget-ID — det enda värde de flesta installationer behöver. Det löser din klient, agent och konfigurationsserver på serversidan.Avancerat alternativ till <code>data-widget-key</code> — ange dessa tre uttryckligen endast för flerintegrationsinställningar:
data-client-id: Ditt unika klientidentifierare från Companin-instrumentpanelendata-agent-id: ID för agenten du vill användadata-config-id: Konfigurations-ID för widgetanpassningdata-locale: Språkkod (standard: 'en'). Stöder: en, de, es, fr, it, nb, nl, pt, svdata-dev: Ställ in på 'true' för utvecklingsläge (kopplar till localhost:3001)När den har laddats, exponerar widgeten ett globalt API för programmatisk kontroll. För fler-widgetinstallationer, föredra instansregister (CompaninDocsWidgets.get(instanceId)) framför att bara använda den senaste globala referensen:
window.CompaninDocsWidget.open();Öppnar Docs Agent-dialogrutan i helskärmsläge.
window.CompaninDocsWidget.close();Stänger Docs Agent-dialogrutan och döljer widgeten.
Du kan styla dina utlösarknappar på vilket sätt du vill. Här är ett exempel på en flytande hjälpknapp:
.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);}Se till att skriptet laddas innan du anropar API:et. Du kan kontrollera om widgeten är tillgänglig:
window.addEventListener('load', () => { console.log('Widget loaded:', !!window.CompaninDocsWidget);});Verifiera att du har angett en giltig data-widget-key (eller, för den explicita formen, client-id, agent-id och config-id) och att den är korrekt. Om flera widgets finns, se till att varje skript har ett unikt data-instance-id.