Konfiguration

Konfigurieren Sie WidgetClient, indem Sie ein WidgetConfig-Objekt an den Konstruktor übergeben. Alle Optionen außer widgetKey sind optional.

WidgetConfig

Option	Typ	Erforderlich	Standard	Beschreibung
widgetKey	string	Ja	—	Ihr Widget-Installationsschlüssel
baseUrl	string	Nein	https://api.univerx.ai	API-Basis-URL
debug	boolean	Nein	false	Ausführliches Debug-Logging in der Konsole aktivieren
container	string | HTMLElement	Nein	—	Widget in einem bestimmten DOM-Element oder CSS-Selektor mounten
theme	WidgetTheme	Nein	—	Visuelle Anpassung
cursor	CursorConfig	Nein	—	Einstellungen für das Agenten-Cursor-Overlay
onReady	() => void	Nein	—	Wird aufgerufen, wenn das SDK bereit ist
onError	(error: Error) => void	Nein	—	Wird bei unbehandelten Fehlern aufgerufen
onAgentAssigned	(agent: Agent) => void	Nein	—	Wird aufgerufen, wenn ein Agent die Sitzung akzeptiert
onCallStarted	() => void	Nein	—	Wird aufgerufen, wenn der Videoanruf beginnt
onCallEnded	() => void	Nein	—	Wird aufgerufen, wenn der Videoanruf endet
onCobrowseStarted	() => void	Nein	—	Wird aufgerufen, wenn Cobrowsing beginnt
onCobrowseEnded	() => void	Nein	—	Wird aufgerufen, wenn Cobrowsing endet
onCobrowseConsentRequired	(handlers: CobrowsingConsentHandlers) => void	Nein	—	Wird aufgerufen, wenn der Agent Cobrowsing-Zustimmung anfordert

Theme

Steuern Sie das visuelle Erscheinungsbild des Widgets mit WidgetTheme:

const widget = new WidgetClient({
  widgetKey: "your-widget-key",
  theme: {
    primaryColor: "#6366f1",
    position: "bottom-right",
    borderRadius: "12px",
    fontFamily: "Inter, sans-serif",
  },
});

Option	Typ	Beschreibung
primaryColor	string	Markenfarbe für Schaltflächen und Akzente (jeder gültige CSS-Farbwert)
position	"bottom-right" | "bottom-left" | "top-right" | "top-left"	Widget-Position auf dem Bildschirm. Standard ist bottom-right
borderRadius	string	Eckenradius des Widget-Panels (jeder CSS-Wert, z.B. "8px")
fontFamily	string	Im Widget verwendete Schriftart (jeder CSS-Font-Stack)

Cursor-Optionen

Steuern Sie das Agenten-Cursor-Overlay mit CursorConfig:

const widget = new WidgetClient({
  widgetKey: "your-widget-key",
  cursor: {
    enabled: true,
    autoHideDelay: 2000,
    showLabel: true,
    clickAnimation: true,
  },
});

Option	Typ	Standard	Beschreibung
enabled	boolean	true	Agenten-Cursor-Overlay anzeigen oder ausblenden
autoHideDelay	number	2000	Millisekunden, bevor der Cursor ausblendet, nachdem der Agent die Bewegung stoppt
showLabel	boolean	true	Namen des Agenten neben dem Cursor anzeigen
clickAnimation	boolean	true	Ripple-Animation anzeigen, wenn der Agent klickt

Benutzerdefinierter Container

Standardmäßig rendert das Widget eine schwebende Schaltfläche in der durch theme.position definierten Ecke. Um es stattdessen in Ihrem eigenen Element zu mounten, übergeben Sie einen CSS-Selektor oder eine DOM-Referenz:

const widget = new WidgetClient({
  widgetKey: "your-widget-key",
  container: "#support-widget",
  // or: container: document.getElementById("support-widget"),
});

Das Element muss im DOM vorhanden sein, bevor widget.init() aufgerufen wird.

Domain-Allowlisting

Jeder Widget-Schlüssel ist an eine Reihe vertrauenswürdiger Domains gebunden. Anfragen von anderen Ursprüngen werden mit einem 403-Fehler abgelehnt.

So fügen Sie eine Domain hinzu:

1. Öffnen Sie Ihr Univerx-Dashboard und gehen Sie zu Einstellungen → Widgets.
2. Wählen Sie Ihr Widget aus und öffnen Sie den Tab Domains.
3. Geben Sie den vollständigen Ursprung Ihrer Website ein, einschließlich Protokoll (z.B. https://example.com).
4. Verifizieren Sie den Besitz mithilfe des bereitgestellten DNS-TXT-Eintrags oder HTML-Meta-Tags.

Achtung

Die Domain-Verifizierung ist erforderlich, bevor das Widget auf dieser Domain initialisiert werden kann. Nicht verifizierte Domains führen dazu, dass init() mit einem 403-Fehler fehlschlägt.

API-Referenz: WidgetClient Vollständige Methoden- und Event-Referenz mit TypeScript-Signaturen.