Widget

Das Genow Widget ist eine Web-Komponente, die für die Einbettung in Websites konzipiert ist. Damit kannst du Genow Agents direkt zu deinen Endnutzern bringen.

Beachte, dass das Widget nur einen Agent anzeigt. Nutzer sehen nur das Eingabefeld und die Antwort. Eine Asset-Auswahl ist nicht möglich - die vorausgewählten Assets werden berücksichtigt. Guided Search-Felder werden derzeit nicht unterstützt.

Bevor du das Widget nutzen kannst, musst du Genow die URL der Seite senden, auf der das Widget eingebettet wird. Das ist erforderlich, damit das Widget für deine Domain korrekt autorisiert werden kann. Ohne diesen Schritt wird das Widget nicht korrekt geladen.

Voraussetzungen: Stelle vor dem Start sicher, dass du die erforderlichen, von Genow bereitgestellten Dateien hast: vue.global.prod.js (Vue 3 Build),
genow-widget.css (Styles) und
genow-widget.umd.min.js (minifiziertes UMD-Bundle inklusive FontAwesome)

Um das Widget zu integrieren, musst du drei Hauptschritte befolgen:

Lade die erforderlichen Ressourcen (CSS, Vue3, UMD-Bundle - siehe oben),
Füge das Custom Element <genow-widget> zu deinem HTML hinzu &
Konfiguriere die Authentifizierung und die Attribute.

(1) Grundlegende Integrationsschritte

Ressourcen laden

Binde die CSS- und JavaScript-Dateien in deine HTML-Struktur ein. Du musst das Widget-CSS, den globalen Vue 3 Build und das Genow Widget UMD-Bundle laden.

<link rel="stylesheet" href="[https://your-cdn.com/genow-widget.css](https://your-cdn.com/genow-widget.css)">

<script src="[https://your-cdn.com/vue.global.prod.js](https://your-cdn.com/vue.global.prod.js)"></script>

<script src="[https://your-cdn.com/genow-widget.umd.min.js](https://your-cdn.com/genow-widget.umd.min.js)"></script>

Das Custom Element hinzufügen

Füge das Custom Element <genow-widget> an der Stelle in dein HTML ein, an der das Widget geladen werden soll. Das Widget ist responsiv und passt sich der Containergröße an, während Overlays über den gesamten Bildschirm angezeigt werden.

<genow-widget
  use-case-id="your-use-case-id"
  api-endpoint="[your-api.com/api](https://your-api.com/api)"
  auth-provider="your-provider"
  auth-token="your-token">
</genow-widget>

Authentifizierung handhaben

Das Widget benötigt ein gültiges Authentifizierungs-Token, um auf deine Daten zuzugreifen.

Token-Management: Tokens müssen von deinem Authentifizierungssystem bezogen werden. Wenn ein Token abläuft, muss es erneuert werden, und das Widget muss möglicherweise neu geladen werden.

Unterstützte Authentifizierungsmethoden:

Firebase (E-Mail/Passwort, Google SSO): nutze auth-provider="Firebase"
Microsoft SSO (EntraID/Azure AD): nutze auth-provider="Microsoft"
Google SAML: nutze auth-provider="Genow"

Implementierungsbeispiel: Du kannst die Widget-Attribute nach der Anmeldung des Nutzers dynamisch über JavaScript aktualisieren.

// After user logs in, get token
const authToken = await getAccessToken(); // Your auth method

// Set token on widget element
const widget = document.querySelector('genow-widget');
widget.setAttribute('auth-token', authToken);
widget.setAttribute('auth-provider', 'Firebase'); // or 'Microsoft' / 'Genow'

(2) Konfiguration und Attribute

Du kannst das Widget über HTML-Attribute konfigurieren. Dynamische Aktualisierungen dieser Attribute über JavaScript werden unterstützt.

Erforderliche Attribute

Attribut	Beschreibung
`use-case-id`	Die ID des Agents, den du anzeigen möchtest.
`api-endpoint`	Die URL deines Genow API-Endpunkts.
`auth-provider`	Der Name des Authentifizierungsanbieters.
`auth-token`	Das aktuelle Authentifizierungs-Token.

Optionale Attribute

Attribut	Beschreibung	Standard
`selected-knowledge-asset-ids`	Kommagetrennte Liste (z. B. “asset1, asset2”) der abzufragenden Assets.	Alle Standard-Assets
`selected-thread-id`	Lädt einen bestimmten Konversations-Thread vor.	-
`threads-page-size`	Anzahl der zu ladenden Threads.	1
`llm`	Name des LLM-Modells (z. B. “gemini-2.5-pro”).	-
`locale`	Sprache (“en” oder “de”).	“en”
`environment`	”production” oder “development”.	“production”
`use-shadow-dom`	Kapselt Styles. Setze den Wert auf “false”, wenn globale Styles das Widget beeinflussen sollen.	”true”

(3) Erweiterte Anpassung

Benutzerdefiniertes CSS
Benutzerdefinierte Übersetzungen

Wenn use-shadow-dom aktiviert ist (Standard), musst du das Attribut custom-css verwenden, um Styles zu überschreiben. Du kannst bestimmte CSS-Variablen für das Theming überschreiben.

custom-css="
  #widget-root {
    --primary-color: #007bff;
    --primary-color-light: #00aaff;
    --primary-color-dark: #004cff;
  }
"

Du kannst den Standardtext überschreiben, indem du einen JSON-String an das Attribut custom-translations übergibst.

custom-translations='{
  "en": {
    "chat_search": {
       "initial": {
         "input_placeholder": "Ask the Genow Widget..."
       }
    }
  },
  "de": {
    "chat_search": {
       "initial": {
         "input_placeholder": "Frage das Genow Widget..."
       }
    }
  }
}'

Beispiel

Anzeigen Vollständiges Beispiel

    <link rel="stylesheet" href="https://your-cdn.com/genow-widget.css">
<script src="https://your-cdn.com/vue.global.prod.js"></script>
<script src="https://your-cdn.com/genow-widget.umd.min.js"></script>

<genow-widget
  use-case-id="your-use-case-id"
  api-endpoint="your-api.com/api"
  auth-provider="your-provider"
  auth-token="your-token"
  use-shadow-dom="true"
  custom-css="
    #widget-root { 
      --primary-color: #007bff;
      --primary-color-light: #00aaff;
      --primary-color-dark: #004cff;
    }
  "
  custom-translations='{
    "en": {
      "chat_search": {
        "initial": {
          "input_placeholder": "Ask the Genow Widget..."
        }
      }
    },
    "de": {
      "chat_search": {
        "initial": {
          "input_placeholder": "Frage das Genow Widget..."
        }
      }
    }
  }'>
</genow-widget>

Fehlerbehebung

Browser-Kompatibilität: Das Widget unterstützt moderne Browser (Chrome, Firefox, Safari, Edge) und erfordert aktiviertes JavaScript.

Wenn du auf Probleme stößt, überprüfe bitte Folgendes:

Widget lädt nicht: Überprüfe die Skriptpfade für Vue und das UMD-Bundle.
Authentifizierungsfehler: Überprüfe die Gültigkeit deines Tokens und ob der Anbietername mit der Backend-Konfiguration übereinstimmt.
Styling-Konflikte: Wenn die Styles falsch aussehen, versuche, Shadow DOM zu aktivieren oder dein custom-css anzupassen.
CORS-Fehler: Stelle sicher, dass dein API-Endpunkt Anfragen von deiner Domain zulässt.

Wenn du mehrere Widget-Instanzen auf derselben Seite hast, stelle sicher, dass jede ihre eigene Konfiguration hat. Sie arbeiten unabhängig voneinander.

Willkommen

Agents erstellen und verwalten

Berechtigungen

Genow-Plattform einrichten und verwalten

Einstellungen & Anpassungen

(1) Grundlegende Integrationsschritte

Ressourcen laden

Das Custom Element hinzufügen

Authentifizierung handhaben

(2) Konfiguration und Attribute

Erforderliche Attribute

Optionale Attribute

(3) Erweiterte Anpassung

Beispiel

Fehlerbehebung

​(1) Grundlegende Integrationsschritte

Ressourcen laden

Das Custom Element hinzufügen

Authentifizierung handhaben

​(2) Konfiguration und Attribute

​Erforderliche Attribute

​Optionale Attribute

​(3) Erweiterte Anpassung

​Beispiel

​Fehlerbehebung

(1) Grundlegende Integrationsschritte

(2) Konfiguration und Attribute

Erforderliche Attribute

Optionale Attribute

(3) Erweiterte Anpassung

Beispiel

Fehlerbehebung