Docs Agent Inbedden

Leer hoe u de Docs Agent-widget op uw documentatiepagina's kunt insluiten.

Overzicht

De Docs Agent is een gespecialiseerde AI-gestuurde widget die specifiek is ontworpen voor documentatiepagina's. Het biedt directe hulp aan uw gebruikers door vragen over uw documentatie te beantwoorden met behulp van een interactieve dialoog op volledig scherm.

Probeer het nu!

Klik op de knop hieronder om de Docs Agent in actie te zien op deze pagina.

Basisinstelling

Aan de slag met de Docs Agent-widget is eenvoudig. Volg gewoon deze twee stappen:

Als je docs-pagina de agent binnen een iframe laadt, zorg er dan voor dat de oorsprong van de hostpagina is opgenomen in de toegestane_origins van je OAuth-toepassing. Het widget-token-eindpunt valideert deze oorsprong voordat een token wordt uitgegeven.

Stap 1: Voeg het Script Toe

Voeg het docs-widget.js-script toe aan je HTML-pagina met de vereiste configuratie. Als je meerdere docs-widgets laadt, geef elke script een unieke 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>

Stap 2: Voeg een Triggerknop Toe

Maak een knop of element dat de open() methode van de widget aanroept:

<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>

Voorbeelden

Hier zijn enkele praktische voorbeelden van hoe je de Docs Agent kunt integreren:

Voorbeeld 1: Basis HTML Integratie

<!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>

Voorbeeld 2: Aangepaste Knop met Evenement Luisteraar

Voor meer controle kun je evenementluisteraars toevoegen aan je bestaande knoppen:

// 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();  });});

Voorbeeld 3: React/Next.js Integratie

In een React of Next.js-applicatie:

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>  );}

Configuratieopties

De Docs Agent-widget accepteert verschillende configuratieparameters. Gebruik data-instance-id voor deterministische per-instantie controle bij het inbedden van meerdere widgets op één pagina:

Vereiste Parameters

data-widget-key: De Widget-ID van uw docs-widget — de enige waarde die de meeste installaties nodig hebben. Het lost uw client, agent en configuratieserver aan de serverzijde op.

Geavanceerd alternatief voor <code>data-widget-key</code> — geef deze drie expliciet door alleen voor multi-instance setups:

data-client-id: Je unieke clientidentificatie van het Companin-dashboard
data-agent-id: De ID van de agent die je wilt gebruiken
data-config-id: Configuratie-ID voor widgetaanpassing

Optionele Parameters

data-locale: Taalcode (standaard: 'en'). Ondersteunt: en, de, es, fr, it, nb, nl, pt, sv
data-dev: Stel in op 'true' voor ontwikkelingsmodus (verbindt met localhost:3001)

JavaScript API

Eenmaal geladen, stelt de widget een globale API beschikbaar voor programmatic control. Voor multi-widget setups, geef de voorkeur aan instantie-registers (CompaninDocsWidgets.get(instanceId)) boven alleen het gebruik van de laatste globale referentie:

open()

window.CompaninDocsWidget.open();

Opent de Docs Agent dialoog in volledig scherm.

close()

window.CompaninDocsWidget.close();

Sluit de Docs Agent dialoog en verbergt de widget.

Aangepaste Styling

Je kunt je triggerknoppen op elke gewenste manier stylen. Hier is een voorbeeld van een drijvende helpknop:

.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);}

Best Practices

Plaats de triggerknop op een prominente, gemakkelijk toegankelijke locatie (bijv. header, drijvende knop)
Gebruik duidelijke, actiegerichte knoptekst zoals 'Vraag AI' of 'Heb je hulp nodig?'
Zorg ervoor dat het widget-script wordt geladen voordat je probeert zijn API-methoden aan te roepen
Houd je clientreferenties veilig - stel ze nooit bloot in client-side code

Probleemoplossing

Widget laadt niet?

Zorg ervoor dat het script is geladen voordat je de API aanroept. Je kunt controleren of de widget beschikbaar is:

window.addEventListener('load', () => {  console.log('Widget loaded:', !!window.CompaninDocsWidget);});

Dialoog opent niet?

Controleer of u een geldige data-widget-key hebt opgegeven (of, voor de expliciete vorm, de client-id, agent-id en config-id) en dat deze correct is. Als er meerdere widgets aanwezig zijn, zorg ervoor dat elk script een unieke data-instance-id heeft.

Terug Volgende: Overzicht