Docs Assistant Insluiting

Leer hoe je de Docs Assistant widget insluit op je documentatiepagina's.

Overzicht

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

Probeer het nu!

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

Basis Setup

Aan de slag gaan met de Docs Assistant widget is eenvoudig. Volg gewoon deze twee stappen:

Als uw documentenpagina de assistent in een iframe laadt, zorg er dan voor dat de oorsprong van de hostpagina is opgenomen in de allow_origins van uw OAuth-toepassing. Het widgettokeneindpunt valideert deze oorsprong voordat een token wordt uitgegeven.

Stap 1: Script Toevoegen

Voeg het docs-widget.js-script toe aan je HTML-pagina met de vereiste configuratie. Als je meerdere docs-widgets laadt, geef elk script een unieke data-instance-id:

<script src="https://widget.companin.tech/docs-widget.js" data-client-id="YOUR_CLIENT_ID" data-assistant-id="YOUR_ASSISTANT_ID" data-config-id="YOUR_CONFIG_ID" data-instance-id="docs-help" data-locale="en"></script>

Stap 2: Trigger Knop Toevoegen

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

<button id="help-btn" type="button">Ask Documentation Assistant</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 Assistant integreert:

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-client-id="your-client-id"    data-assistant-id="your-assistant-id"    data-config-id="your-config-id"    data-locale="en">  </script></body></html>

Voorbeeld 2: Aangepaste Knop met Event Listener

Voor meer controle kun je event listeners toevoegen aan je bestaande knoppen:

// Wait for the widget to loadwindow.addEventListener('load', () => {  const unsubscribeResponse = window.CompaninDocsWidget?.on?.('response', (event) => {    console.log('Assistant 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 openDocsAssistant = () => {    if (window.CompaninDocsWidget) {      window.CompaninDocsWidget.open();    }  };  return (    <div>      <h1>API Documentation</h1>      <button        onClick={openDocsAssistant}        className="help-button"      >        Ask Customer Support AI Assistant      </button>    </div>  );}

Configuratie Opties

De Docs Assistant-widget accepteert meerdere configuratieparameters. Gebruik data-instance-id voor deterministische besturing per instantie wanneer je meerdere widgets op één pagina insluit:

Vereiste Parameters

data-client-id: Je unieke client identificatie van het Companin dashboard
data-assistant-id: De ID van de assistent die je wilt gebruiken
data-config-id: Configuratie-ID voor widget aanpassing

Optionele Parameters

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

JavaScript-API

Zodra geladen, stelt de widget een globale API beschikbaar voor programmatische besturing. Bij multi-widget-opstellingen gebruik je bij voorkeur instantieregisters (CompaninDocsWidgets.get(instanceId)) in plaats van alleen de meest recente globale referentie:

open()

window.CompaninDocsWidget.open();

Opent de Docs Assistant dialoog in volledig scherm modus.

close()

window.CompaninDocsWidget.close();

Sluit de Docs Assistant dialoog en verbergt de widget.

Aangepaste Styling

Je kunt je trigger knoppen op elke gewenste manier stylen. Hier is een voorbeeld van een zwevende hulpknop:

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

Beste Praktijken

Plaats de trigger knop op een prominente, gemakkelijk toegankelijke locatie (bijv. header, zwevende knop)
Gebruik duidelijke, actiegerichte knoptekst zoals 'Vraag AI' of 'Hulp nodig?'
Zorg ervoor dat het widget script laadt voordat je probeert de API methodes aan te roepen
Houd je client referenties veilig - stel ze nooit bloot in client-side code

Probleemoplossing

Widget laadt niet?

Zorg ervoor dat het script geladen is 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 je alle vereiste parameters correct hebt opgegeven (client-id, assistant-id, config-id). Als er meerdere widgets zijn, moet elk script een unieke data-instance-id hebben.

← Terug Volgende: Overzicht →