Widget auf Ihrer Website einbetten

Der schnellste Weg, das Univerx-Widget auf Ihrer Website zu betreiben, ist das Einfügen eines einzigen <script>-Tags in Ihr HTML. Keine Build-Tools, kein Paketmanager – es funktioniert auf jeder Website oder in jedem CMS.

Wenn Sie eine JavaScript-Anwendung entwickeln und eine benutzerdefinierte Oberfläche oder feinere Kontrolle benötigen, lesen Sie stattdessen die Client-SDK-Dokumentation.

Voraussetzungen

Sie benötigen die Rolle Admin oder Inhaber in Ihrer Univerx-Organisation.
Sie benötigen ein aktives Widget in Ihrem Dashboard mit mindestens einer zugewiesenen Warteschlange. Siehe Website-Widget einrichten.
Kopieren Sie den Widget-Schlüssel unter Admin-Konsole → Widgets → Ihr Widget → Einbettungscode.

Script-Tag einfügen

Fügen Sie folgenden Ausschnitt direkt vor dem schließenden </body>-Tag auf jeder Seite ein, auf der das Widget erscheinen soll.
```
<script
  src="https://cdn.univerx.ai/widget@latest/index.js"
  defer
></script>
```
Verwenden Sie in der Produktion eine feste Version (z. B. [email protected]), um unerwartete Änderungen durch zukünftige Releases zu vermeiden.
Widget initialisieren

Fügen Sie direkt nach dem Script-Tag ein Initialisierungs-Snippet mit Ihrem Widget-Schlüssel ein:
```
<script>
  window.addEventListener('univerx:ready', function () {
    window.UniversxWidget.init({
      widgetKey: 'IHR_WIDGET_SCHLÜSSEL',
    });
  });
</script>
```
Ersetzen Sie IHR_WIDGET_SCHLÜSSEL durch den aus dem Dashboard kopierten Schlüssel.
Funktionsprüfung

Öffnen Sie die Seite im Browser. In der rechten unteren Ecke sollte eine Support-Schaltfläche erscheinen. Klicken Sie darauf, um zu bestätigen, dass das Widget lädt und sich mit Ihrer Warteschlange verbindet.

Wenn in der Browser-Konsole ein 401 Unauthorized-Fehler erscheint, prüfen Sie:
- Ob der Widget-Schlüssel korrekt ist.
- Ob die Domain, auf der Sie testen, unter Widgets → Ihr Widget → Domains eingetragen ist.

Vollständiges Beispiel

Eine minimale HTML-Seite mit eingebettetem Widget:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <title>Meine Website</title>
  </head>
  <body>
    <h1>Willkommen</h1>

    <!-- Univerx-Widget -->
    <script
      src="https://cdn.univerx.ai/[email protected]/index.js"
      defer
    ></script>
    <script>
      window.addEventListener('univerx:ready', function () {
        window.UniversxWidget.init({
          widgetKey: 'IHR_WIDGET_SCHLÜSSEL',
        });
      });
    </script>
  </body>
</html>

Konfigurationsoptionen

Übergeben Sie zusätzliche Optionen an init(), um Aussehen und Verhalten des Widgets anzupassen.

<script>
  window.addEventListener('univerx:ready', function () {
    window.UniversxWidget.init({
      widgetKey: 'IHR_WIDGET_SCHLÜSSEL',

      // Position der Schaltfläche ('bottom-right' | 'bottom-left')
      position: 'bottom-right',

      // Anzeigesprache überschreiben ('en' | 'de')
      locale: 'de',

      // Benutzerdefinierte Themenfarben
      theme: {
        primaryColor: '#0055FF',
        fontFamily: 'Inter, sans-serif',
      },
    });
  });
</script>

Option	Typ	Standard	Beschreibung
`widgetKey`	`string`	—	Erforderlich. Ihr Widget-Schlüssel aus dem Dashboard
`position`	`'bottom-right' \| 'bottom-left'`	`'bottom-right'`	Ecke, in der die Schaltfläche erscheint
`locale`	`string`	Browser-Sprache	Anzeigesprache überschreiben
`theme.primaryColor`	`string`	Dashboard-Einstellung	Schaltflächen- und Akzentfarbe (Hex oder CSS-Variable)
`theme.fontFamily`	`string`	Geerbt	Schriftart innerhalb des Widgets

Einbettung in gängige Plattformen

Gehen Sie im WordPress-Admin zu Design → Theme-Datei-Editor (oder verwenden Sie ein Plugin wie Insert Headers and Footers).
Fügen Sie beide Script-Tags vor dem schließenden </body>-Tag in der Datei footer.php Ihres Themes ein.
Speichern und prüfen Sie Ihre Website.

Gehen Sie im Shopify-Admin zu Online-Shop → Themes → Aktionen → Code bearbeiten.
Öffnen Sie layout/theme.liquid.
Fügen Sie beide Script-Tags vor dem schließenden </body>-Tag ein.
Speichern Sie die Datei.

Fehlerbehebung

Prüfen Sie im Seitenquelltext, ob das Script-Tag vorhanden ist.
Stellen Sie sicher, dass Sie auf univerx:ready warten, bevor Sie init() aufrufen – ein zu früher Aufruf (bevor das Script geladen wurde) führt zu einem Referenzfehler.
Prüfen Sie die Browser-Konsole auf Fehler.

`401 Unauthorized`

Ihr Widget-Schlüssel ist ungültig oder Ihre Domain ist nicht in der Erlaubnisliste. Gehen Sie zu Admin-Konsole → Widgets → Ihr Widget und fügen Sie den Ursprung Ihrer Website (einschließlich Protokoll, z. B. https://example.com) zur Liste Domains hinzu.

Es sind keine Agenten online oder das Widget ist keiner Warteschlange zugewiesen. Prüfen Sie Admin-Konsole → Warteschlangen und stellen Sie sicher, dass mindestens ein Agent eine aktive Sitzung hat.

Content-Security-Policy-Fehler (CSP)

Fügen Sie die Univerx-CDN- und API-Ursprünge zu Ihrem CSP-Header hinzu:

Content-Security-Policy:
  script-src 'self' https://cdn.univerx.ai;
  connect-src 'self' https://api.univerx.ai;
  frame-src 'self' https://meet.univerx.ai;

Nächste Schritte

Widget einrichten Widgets, Warteschlangen und Vor-Anruf-Formulare in der Admin-Konsole erstellen und konfigurieren.

Client-SDK Erstellen Sie eine vollständig benutzerdefinierte Oberfläche mit dem npm-Paket – für React, Angular, Svelte und mehr.