Schnellstart

Betten Sie das Widget ein und erhalten Sie ein Widget-Token vom Server.

Die Widget-App wird auf widget.companin.tech gehostet und bietet eine einfache Möglichkeit, einen KI-Assistenten in Ihre Website einzubetten. Um zu beginnen, müssen Sie einen Assistenten und eine OAuth-Anwendung erstellen.

Das Widget ist eine leichte, eigenständige Anwendung, die in einem isolierten Iframe auf Ihrer Website ausgeführt wird. Diese Architektur stellt sicher, dass das Widget nicht mit Ihrem vorhandenen CSS oder JavaScript in Konflikt gerät und gleichzeitig eine hervorragende Leistung und Sicherheit gewährleistet.

⚡ Schnelle Bereitstellung

Bei den meisten Entwicklern läuft das Widget innerhalb von 10 Minuten auf ihrer Website. Der Einrichtungsprozess umfasst nur drei Schritte: Anmeldeinformationen erstellen, Erscheinungsbild konfigurieren und ein einzelnes Skript-Tag zu Ihrem HTML hinzufügen.

1. Einen Assistenten erstellen

Erstellen Sie zunächst einen KI-Assistenten in Ihrem Dashboard:

Ihr Assistent ist das KI-Gehirn hinter dem Widget. Es verarbeitet Benutzernachrichten, verwaltet den Konversationskontext und generiert intelligente Antworten. Jeder Assistent kann mit spezifischen Anweisungen, Persönlichkeitsmerkmalen und Wissensdatenbanken individuell an Ihren Anwendungsfall angepasst werden.

Gehen Sie zu Ihrem Dashboard und navigieren Sie zur "Data Sources"-Seite
Klicken Sie die "Add"-Schaltfläche im Assistants-Bereich
Füllen Sie die Assistentendetails aus (Name, Beschreibung, Ton, etc.)
Speichern Sie den Assistenten und notieren Sie sich die ID

Tipp: Geben Sie Ihrem Assistenten klare und spezifische Anweisungen zu seiner Rolle und seinen Einschränkungen. Zum Beispiel: „Sie sind ein hilfreicher Kundendienstassistent für ein SaaS-Produkt. Sie können Fragen zu Funktionen, Preisen und Kontoverwaltung beantworten. Bei technischen Problemen weisen Sie Benutzer an, ein Support-Ticket zu erstellen.“

2. Eine OAuth-Anwendung erstellen

Erstellen Sie eine OAuth-Anwendung, um Ihr Widget zu authentifizieren:

Gehen Sie zur "OAuth"-Seite in Ihrem Dashboard
Klicken Sie "Create Application"
Füllen Sie den Anwendungsnamen und die Beschreibung aus
Kopieren Sie die client_id aus der erstellten Anwendung

3. Das Widget über Iframe einbetten

Die einfachste Integration erfolgt über ein direkt eingebettetes Iframe. Diese Methode benötigt keine JavaScript-Initialisierung und funktioniert sofort. Bei mehreren Iframes auf derselben Seite sollte jedes Embed auf seinen eigenen Container und eigene Parameter begrenzt sein.

<iframe src="https://widget.companin.tech/embed/session?clientId=YOUR_CLIENT_ID&assistantId=YOUR_ASSISTANT_ID&configId=YOUR_CONFIG_ID&locale=en" style="border:none; width:100%; height:600px; border-radius:8px;" title="Customer Support AI Assistant Widget"></iframe>

Ersetzen Sie YOUR_CLIENT_ID und YOUR_ASSISTANT_ID durch Ihre tatsächlichen Werte. Der locale-Parameter kann so eingestellt werden, dass er der Sprache Ihrer Website entspricht.

Erweitert: JavaScript-Initialisierung

Die empfohlene Integrationsmethode ist die Verwendung unseres JavaScript-Widget-Loaders, der automatische Größenanpassung, Konfigurationsverwaltung und Reaktionsverhalten bietet.

Skriptintegration

Fügen Sie Ihrer HTML-Seite das folgende Skript-Tag hinzu:

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

Skriptattribute

Jedes Attribut dient einem bestimmten Zweck bei der Konfiguration Ihres Widgets:

data-client-id: Ihre OAuth-Client-ID – Dies authentifiziert Ihre Anwendung mit unserer API. Betrachten Sie es als das Passwort Ihrer App.
data-assistant-id: Die UUID Ihres Assistenten – Dies gibt an, welcher KI-Assistent des Kundensupports die Gespräche abwickelt.
data-config-id: Die UUID Ihrer Widget-Konfiguration – Dies bestimmt, wie Ihr Widget aussieht und sich verhält (Farben, Größe, Position usw.).
data-instance-id: Eindeutige Instanz-ID pro Widget – Erforderlich beim Einbetten mehrerer Widgets auf derselben Seite, um Kollisionen zu vermeiden und das API-Targeting pro Instanz zu ermöglichen.
data-custom-css: (optional) Inline-CSS-Regeln, die vor dem Rendern der App in den <head> des Iframes eingefügt werden. Verwenden Sie dies, um Stile zu überschreiben, ohne Ihre Konfiguration zu ändern. Die URL-Kodierung erfolgt automatisch.
data-locale: Sprachcode (z. B. „en“, „es“, „fr“) – Legt die Anzeigesprache des Widgets fest. Der Assistent antwortet weiterhin in jeder Sprache, in der Benutzer schreiben.
data-dev: Für den Entwicklungsmodus (localhost) auf „true“ setzen – Verwenden Sie dies beim lokalen Testen. Für die Produktion entfernen oder auf „false“ setzen.

Das Widget wird automatisch:

Rufen Sie die Konfiguration von der Konfigurations-ID ab
Passt die Größe entsprechend den Widget-Abmessungen in der Konfiguration an
Positionieren Sie die minimierte Schaltfläche basierend auf den Konfigurationseinstellungen
Öffnen oder schließen Sie den Start basierend auf der start_open-Einstellung der Konfiguration

Notizen

Das Widget verwaltet seine eigene Größe automatisch basierend auf Ihren Konfigurationseinstellungen
Die Position der minimierten Schaltfläche kann über die Widget-Konfiguration angepasst werden
Das Widget berücksichtigt die Einstellung start_open aus Ihrer Konfiguration
Der gesamte Stil (Farben, Schriftarten, Abmessungen) wird über die Widget-Konfiguration gesteuert
Das Widget nutzt die PostMessage-Kommunikation für Reaktionsverhalten
Der Entwicklungsmodus kann mit data-dev="true" für Localhost-Tests aktiviert werden
Verwenden Sie für den serverseitigen Token-Austausch /api/v1/auth/widget-token und bewahren Sie das Client-Geheimnis nur auf Ihrem Server auf.
Stellen Sie sicher, dass Ihr Host-Ursprung (z. B. http://localhost:3000)) in OAuthallowed_origins enthalten ist, wenn Sie das Widget in einen Iframe einbetten.

← Zurück Weiter: API-Referenz →