Wir bauen hier noch Dinge! Sie könnten ein paar raue Kanten bemerken, während wir an Verbesserungen arbeiten. Helfen Sie uns, zu verbessern, indem Sie Bugs melden hier.
Anmelden

Schnellstart

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

Widget-Übersicht

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.

The widget is a lightweight, self-contained application that runs in an isolated iframe on your website. This architecture ensures that the widget won't conflict with your existing CSS or JavaScript, while maintaining excellent performance and security.

⚡ Quick Deployment

Most developers have the widget running on their site within 10 minutes. The setup process involves just three steps: creating credentials, configuring appearance, and adding a single script tag to your HTML.

1. Einen Assistenten erstellen

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

Your assistant is the AI brain behind the widget. It processes user messages, maintains conversation context, and generates intelligent responses. Each assistant can be customized with specific instructions, personality traits, and knowledge bases to match your use case.

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

Tip: Give your assistant clear, specific instructions about its role and limitations. For example: "You are a helpful customer support assistant for a SaaS product. You can answer questions about features, pricing, and account management. For technical issues, direct users to create a support ticket."

2. Eine OAuth-Anwendung erstellen

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

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

3. Das Widget über Iframe einbetten

Der einfachste Weg, das Widget zu integrieren, ist, es direkt über einen Iframe einzubetten. Diese Methode erfordert keine JavaScript-Initialisierung und funktioniert sofort.

HTML5embed.html
<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; position: fixed; bottom: 20px; right: 20px; z-index: 999999; background-color: transparent; width: auto; height: auto; border-radius: 8px;"  title="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

The recommended integration method is using our JavaScript widget loader, which provides automatic sizing, configuration management, and responsive behavior.

Script Integration

Add the following script tag to your HTML page:

HTML5index.html
<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-locale="en"  data-dev="false"></script>

Script Attributes

Each attribute serves a specific purpose in configuring your widget:

  • data-client-id: Your OAuth client ID - This authenticates your application with our API. Think of it as your app's password.
  • data-assistant-id: The UUID of your assistant - This identifies which AI assistant handles the conversations.
  • data-config-id: The UUID of your widget configuration - This determines how your widget looks and behaves (colors, size, position, etc.).
  • data-locale: Language code (e.g., "en", "es", "fr") - Sets the widget's display language. The assistant will still respond in any language users write in.
  • data-dev: Set to "true" for development mode (localhost) - Use this when testing locally. Remove or set to "false" for production.

The widget will automatically:

  • Fetch the configuration from the config ID
  • Size itself according to the widget dimensions in the config
  • Position the collapsed button based on the config settings
  • Start open or closed based on the config's start_open setting

Notizen

  • The widget automatically manages its own sizing based on your configuration settings
  • The collapsed button position can be customized through the widget configuration
  • The widget respects the start_open setting from your configuration
  • All styling (colors, fonts, dimensions) is controlled through the widget configuration
  • The widget uses postMessage communication for responsive behavior
  • Development mode can be enabled with data-dev="true" for localhost testing
← ZurückWeiter: Übersicht →