Docs Assistant Inbäddning

Lär dig hur du bäddar in Docs Assistant-widgeten på dina dokumentationssidor.

Översikt

Docs Assistant är en specialiserad AI-driven widget designad specifikt för dokumentationssidor. Den ger omedelbar hjälp till dina användare genom att svara på frågor om din dokumentation med hjälp av en interaktiv helskärms dialog.

Prova nu!

Klicka på knappen nedan för att se Docs Assistant i aktion på denna sida.

Grundläggande Inställning

Att komma igång med Docs Assistant-widgeten är enkelt. Följ bara dessa två steg:

Om din dokumentsida läser in assistenten i en iframe, se till att värdsidans ursprung är inkluderat i din OAuth-applikations allow_origins. Widgettokens slutpunkt validerar detta ursprung innan en token utfärdas.

Steg 1: Lägg till Script

Lägg till docs-widget.js-skriptet på din HTML-sida med den nödvändiga konfigurationen. Om du laddar flera Docs-widgets ska varje skript ha ett unikt 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>

Steg 2: Lägg till en Utlösarknapp

Skapa en knapp eller element som anropar widgetens open() metod:

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

Exempel

Här är några praktiska exempel på hur du integrerar Docs Assistant:

Exempel 1: Grundläggande HTML Integration

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

Exempel 2: Anpassad Knapp med Event Listener

För mer kontroll kan du lägga till event listeners till dina befintliga knappar:

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

Exempel 3: React/Next.js Integration

I en React eller Next.js applikation:

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

Konfigurationsalternativ

Docs Assistant-widgeten accepterar flera konfigurationsparametrar. Använd data-instance-id för deterministisk styrning per instans när du bäddar in flera widgets på samma sida:

Obligatoriska Parametrar

data-client-id: Din unika klientidentifierare från Companin dashboard
data-assistant-id: ID för assistenten du vill använda
data-config-id: Konfigurations-ID för widget-anpassning

Valfria Parametrar

data-locale: Språkkod (standard: 'en'). Stöder: en, de, es, fr, it, nb, nl, pt, sv
data-dev: Sätt till 'true' för utvecklingsläge (ansluter till localhost:3001)

JavaScript-API

När widgeten har laddats exponerar den ett globalt API för programmatisk styrning. I multi-widget-upplägg bör du föredra instansregister (CompaninDocsWidgets.get(instanceId)) i stället för att enbart använda den senaste globala referensen:

open()

window.CompaninDocsWidget.open();

Öppnar Docs Assistant dialogen i helskärmsläge.

close()

window.CompaninDocsWidget.close();

Stänger Docs Assistant dialogen och döljer widgeten.

Anpassad Styling

Du kan styla dina utlösarknappar som 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);}

Bästa Metoder

Placera utlösarknappen på en framträdande, lättillgänglig plats (t.ex. header, flytande knapp)
Använd klar, handlingsorienterad knapptext som 'Fråga AI' eller 'Behöver du hjälp?'
Se till att widget-scriptet laddas innan du försöker anropa dess API-metoder
Håll dina klientuppgifter säkra - exponera dem aldrig i klientside kod

Felsökning

Widgeten laddar inte?

Se till att scriptet är laddat innan du anropar API:n. Du kan kontrollera om widgeten är tillgänglig:

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

Dialogen öppnas inte?

Kontrollera att du har angett alla obligatoriska parametrar korrekt (client-id, assistant-id, config-id). Om flera widgets finns på sidan måste varje skript ha ett unikt data-instance-id.

← Tillbaka Nästa: Översikt →