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 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 dokumentsida laddar agenten inuti en iframe, se till att värdsideursprunget ingår i din OAuth-applikations allowed_origins. 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-widgets, 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>Ursprungligen har docs-widgeten ingen synlig startknapp — den öppnas endast när din sida anropar API:et. Ge den istället en sökfält: ett kompakt fält fäst i botten av varje sida, som öppnar hela panelen när en besökare klickar på det eller börjar skriva. Allt som redan har skrivits förs in i panelens sökbox.
Slå på det i din instrumentpanel under Widget → Innehåll → Text för sökfält. Texten lagras per språk, så varje lokal får sin egen formulering och besökare ser baren på sitt eget språk.
Widget → Beteende kontrollerar när den visas:
Lämna texten tom och ingen bar visas — widgeten förblir osynlig tills din sida öppnar den med API:et nedan.
Baren döljer sig själv medan panelen är öppen och kommer tillbaka när besökaren stänger den, så den fungerar alltid som vägen tillbaka. Att stänga den med × tar bort den för just den sidvisningen; den återkommer vid nästa sidladdning.
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-instans kontroll när du bäddar in flera widgets på en sida:
data-widget-key: Din docs widgets Widget-ID — det enda värdet de flesta installationer behöver. Det löser din klient, agent och konfigurationsserver på serversidan.Avancerad alternativ till <code>data-widget-key</code> — skicka dessa tre uttryckligen endast för multi-instans installationer:
data-client-id: Din 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: Sätt till 'true' för utvecklingsläge (ansluter till localhost:3001)När den har laddats, exponerar widgeten ett globalt API för programmatisk kontroll. För multi-widget installationer, föredra instansregister (CompaninDocsWidgets.get(instanceId)) över att bara använda den senaste globala referensen:
window.CompaninDocsWidget.open();Öppnar Docs Agent-dialogen i helskärmsläge.
window.CompaninDocsWidget.close();Stänger Docs Agent-dialogen och döljer widgeten.
Du kan styla dina triggerknappar 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 är laddat innan du kallar 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, klient-id, agent-id och konfig-id) och att den är korrekt. Om flera widgets är närvarande, se till att varje skript har en unik data-instance-id.