Docs Assistant Innebygging

Lær hvordan du bygger inn Docs Assistant-widgeten på dokumentasjonssidene dine.

Oversikt

Docs Assistant er en spesialisert AI-drevet widget designet spesielt for dokumentasjonssider. Den gir øyeblikkelig hjelp til brukerne dine ved å svare på spørsmål om dokumentasjonen din ved hjelp av en fullskjerm interaktiv dialog.

Prøv det nå!

Klikk på knappen nedenfor for å se Docs Assistant i aksjon på denne siden.

Grunnleggende Oppsett

Å komme i gang med Docs Assistant-widgeten er enkelt. Følg bare disse to trinnene:

Trinn 1: Legg til Script

Legg til docs-widget.js scriptet på HTML-siden din med nødvendig konfigurasjon:

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>

Trinn 2: Legg til en Utløserknapp

Opprett en knapp eller element som kaller widgetens open() metode:

index.html

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

Eksempler

Her er noen praktiske eksempler på hvordan du integrerer Docs Assistant:

Eksempel 1: Grunnleggende HTML Integrasjon

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>

Eksempel 2: Tilpasset Knapp med Event Listener

For mer kontroll kan du legge til event listeners til eksisterende knapper:

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

Eksempel 3: React/Next.js Integrasjon

I en React eller Next.js applikasjon:

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

Konfigurasjonsalternativer

Docs Assistant-widgeten aksepterer flere konfigurasjonsparametere:

Påkrevde Parametere

data-client-id: Din unike klientidentifikator fra Companin dashboard
data-assistant-id: ID-en til assistenten du ønsker å bruke
data-config-id: Konfigurasjons-ID for widget-tilpasning

Valgfrie Parametere

data-locale: Språkkode (standard: 'en'). Støtter: en, de, es, fr, it, nb, nl, pt, sv
data-dev: Sett til 'true' for utviklingsmodus (kobler til localhost:3001)

JavaScript API

Når lastet, eksponerer widgeten en global API for programmatisk kontroll:

open()

api.js

window.CompaninDocsWidget.open();

Åpner Docs Assistant dialogen i fullskjermmodus.

close()

api.js

window.CompaninDocsWidget.close();

Lukker Docs Assistant dialogen og skjuler widgeten.

Tilpasset Styling

Du kan style utløserknappene dine som du ønsker. Her er et eksempel på en flytende hjelpeknapp:

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 Praksiser

Plasser utløserknappen på et prominent, lett tilgjengelig sted (f.eks. header, flytende knapp)
Bruk klar, handlingsorientert knapptekst som 'Spør AI' eller 'Trenger du hjelp?'
Sørg for at widget-scriptet lastes før du prøver å kalle API-metodene
Hold klientlegitimasjonen din sikker - eksponer dem aldri i klientside kode

Feilsøking

Widgeten laster ikke?

Sørg for at scriptet er lastet før du kaller API-en. Du kan sjekke om widgeten er tilgjengelig:

debug.js

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

Dialogen åpnes ikke?

Verifiser at du har oppgitt alle påkrevde parametere (client-id, assistant-id, config-id) og at de er korrekte.

← Tilbake Neste: Dokumentasjonsassistent Innebygging →