Konfiguration

Passen Sie das Erscheinungsbild und Verhalten des Widgets an.

Init-Optionen#

Option	Standard	Beschreibung
agentId	erforderlich*	Die eindeutige ID Ihres Agenten. *Für Widgets nur mit menschlichem Support genügt `channelId` allein.
channelId	—	ID des Widget-Kanals. Bestimmt, welche Widget-Einstellungen (Styling, Outbound-Tooltips/-Banner) gelten, wenn ein Agent mehrere Widgets betreibt, und ist die einzige Kennung für Widgets nur mit menschlichem Support. Mindestens eines von `agentId` / `channelId` ist erforderlich.
position	bottom-right	`bottom-right` oder `bottom-left`
primaryColor	#3B82F6	Markenfarbe für die Widget-Schaltfläche und die Kopfzeile
title	Support	Text des Kopfzeilentitels
greeting	auto	Begrüßungsnachricht (standardmäßig aus den Dashboard-Einstellungen geladen)
language	page	Sprache des Widgets als BCP-47-Code (`de`, `pt-BR`). Bestimmt die Oberfläche, die Begrüßung und die Schnellfragen. Ohne Angabe folgt das Widget dem `<html lang>` der Seite: Eine Seite, deren `lang` nicht `en` ist, startet jetzt in dieser Sprache – unabhängig vom Browser des Besuchers. Ein bloßes `<html lang="en">` gilt als Template-Standard und wird ignoriert: Besucher behalten das bisherige Verhalten (gemerkte Wahl, dann Browsersprache). Mit `'browser'` wird `<html lang>` komplett ignoriert und das reine Browser-Verhalten wiederhergestellt. Zur Laufzeit per `Respondo.setLanguage('fr')` änderbar – praktisch für Sprachumschalter, die die Seite nicht neu laden.
placeholder	—	Benutzerdefinierter Platzhaltertext für die Eingabe
quickQuestions	—	Array vorgeschlagener Fragen, die vor der ersten Nachricht angezeigt werden
logoUrl	—	URL Ihres Logos, das in der Widget-Kopfzeile angezeigt wird
avatarUrl	—	URL des Avatars des KI-Agenten, der neben den Nachrichten angezeigt wird
identity	—	Voreingestellte Nutzeridentität zur Init-Zeit (dieselben Felder wie `identify()`)
localStorageKey	—	localStorage-Schlüssel, aus dem die `userId` automatisch gelesen wird (für GTM- / No-Code-Setups)
chatSize	default	`compact`, `default` oder `large` — Abmessungen des Chat-Fensters
launcherSize	default	`small`, `default` oder `large` — Größe der Launcher-Schaltfläche
offsetBottom	20	Abstand vom unteren Rand (px)
offsetSide	20	Abstand vom linken/rechten Rand (px)
borderRadius	20	Eckenradius des Chat-Fensters (px)
zIndex	999999	CSS-z-index für den Widget-Container
customCSS	—	Benutzerdefiniertes CSS, das für fortgeschrittenes Styling in das Shadow DOM des Widgets injiziert wird
testMode	false	Konversationen als Test markieren (aus den Hauptansichten ausgeblendet)

Vollständige Konfiguration#

Vollständige Konfigurationjavascript

Respondo.init({
  agentId: 'YOUR_AGENT_ID',
  channelId: 'YOUR_CHANNEL_ID',
  position: 'bottom-right',        // 'bottom-right' | 'bottom-left'
  primaryColor: '#2563eb',
  language: 'de',                  // BCP-47; Standard: <html lang> (en = schwaches Signal), 'browser' ignoriert es
  title: 'Hilfe-Center',
  greeting: 'Wie können wir helfen?',
  placeholder: 'Fragen Sie einfach ...',
  logoUrl: 'https://yoursite.com/logo.png',
  avatarUrl: 'https://yoursite.com/avatar.png',
  quickQuestions: [
    'Wie fange ich an?',
    'Welche Preispläne gibt es?',
    'Wie kontaktiere ich den Support?'
  ],
  testMode: false,
  localStorageKey: 'myapp_user_id', // userId automatisch aus localStorage lesen (GTM / No-Code)
  chatSize: 'default',              // 'compact' | 'default' | 'large'
  offsetBottom: 20,                 // Abstand vom unteren Rand (px)
  identity: {                      // optional: bei Init setzen, wenn der Nutzer bereits bekannt ist
    email: 'user@example.com',
    name: 'John Doe',
    userId: 'usr_123',
    properties: {                  // benutzerdefinierte Kontakteigenschaften
      account_type: 'enterprise',
      region: 'eu-west'
    }
  }
});

Die meisten Einstellungen (Farbe, Logo, Begrüßung, Schnellfragen) werden über das Kanäle-Dashboard verwaltet. Das Widget ruft diese beim Laden ab — Sie benötigen nur das agentId/channelId-Paar aus dem Einbettungscode.