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:

Stap 1: Script Toevoegen

Voeg het docs-widget.js script toe aan je HTML-pagina met de vereiste configuratie:

index.html

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

Stap 2: Trigger Knop Toevoegen

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

index.html

<button onclick="window.CompaninDocsWidget.open()">  Ask Documentation Assistant</button>

Voorbeelden

Hier zijn enkele praktische voorbeelden van hoe je de Docs Assistant integreert:

Voorbeeld 1: Basis HTML Integratie

documentation.html

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

script.js

// Wait for the widget to loadwindow.addEventListener('load', () => {  // Add click handler to your custom button  document.getElementById('help-btn').addEventListener('click', () => {    if (window.CompaninDocsWidget) {      window.CompaninDocsWidget.open();    }  });});

Voorbeeld 3: React/Next.js Integratie

In een React of Next.js applicatie:

Documentation.jsx

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 AI Assistant      </button>    </div>  );}

Configuratie Opties

De Docs Assistant widget accepteert verschillende configuratieparameters:

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

Eenmaal geladen stelt de widget een globale API bloot voor programmatische controle:

open()

api.js

window.CompaninDocsWidget.open();

Opent de Docs Assistant dialoog in volledig scherm modus.

close()

api.js

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:

styles.css

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

debug.js

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

Dialoog opent niet?

Controleer of je alle vereiste parameters hebt opgegeven (client-id, assistant-id, config-id) en dat ze correct zijn.

← Terug Volgende: Docs Assistent Insluiting →