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:

Steg 1: Lägg till Script

Lägg till docs-widget.js scriptet på din HTML-sida med nödvändig konfiguration:

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>

Steg 2: Lägg till en Utlösarknapp

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

index.html

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

Exempel

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

Exempel 1: Grundläggande HTML Integration

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>

Exempel 2: Anpassad Knapp med Event Listener

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

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

Exempel 3: React/Next.js Integration

I en React eller Next.js applikation:

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

Konfigurationsalternativ

Docs Assistant-widgeten accepterar flera konfigurationsparametrar:

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 laddad exponerar widgeten ett globalt API för programmatisk kontroll:

open()

api.js

window.CompaninDocsWidget.open();

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

close()

api.js

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:

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

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:

debug.js

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

Dialogen öppnas inte?

Verifiera att du har angett alla nödvändiga parametrar (client-id, assistant-id, config-id) och att de är korrekta.

← Tillbaka Nästa: Docs-assistent Inbäddning →