Hilfe-Center
Home KI KI-Telefonassistent

KI-Telefonassistent: Website-Widget einrichten

Für den KI-Telefonassistenten

Mit dem Website-Widget bieten Sie den Besuchern Ihrer Website die Möglichkeit, direkt über eine Schaltfläche („Mit KI sprechen“) einen Anruf mit Ihrem KI-Telefonassistenten zu starten. Der Anruf erfolgt dabei bequem und direkt über den Webbrowser des Besuchers. 

In diesem Artikel erfahren Sie, wie Sie das Widget konfigurieren, an das Design Ihrer Website anpassen und den generierten Code in Ihre Seite einbetten.

Voraussetzungen

  • Sie haben die Ersteinrichtung Ihres KI-Telefonassistenten mit dem Einrichtungsassistenten abgeschlossen.
  • Sie haben Zugriff auf den HTML-Quellcode Ihrer Website oder den Vorlageneditor Ihres CMS.
  • Ihre Website ist mit einer eigenen, registrierten Domain verbunden: Das Widget kann nicht mit einer temporären IONOS-Systemdomain (z. B. *.live-website.com oder *.live-website.com) genutzt werden.

Schritt 1: Konfigurationsoberfläche aufrufen

  • Loggen Sie sich in Ihr IONOS Konto ein.
  • Klicken Sie in der Titelleiste auf Menü > KI-Telefonassistent. Die Konfigurationsoberfläche öffnet sich.
  • Optional: Wenn Sie über mehrere Verträge für KI-Telefonassistenten verfügen, klicken Sie oben links auf die Vertragsauswahl (Dropdown-Menü mit Ihrem aktuellen Vertragsnamen), um die Liste Ihrer Verträge zu öffnen und den gewünschten Assistenten auszuwählen.

Schritt 2: Widget konfigurieren und aktivieren

  • Öffnen Sie in der Konfigurationsoberfläche den Bereich Website-Widget.
  • Tragen Sie unter Zugelassene Domains die Domain Ihrer Website ein.
    • Nur für die Hauptdomain: Geben Sie Ihre Domain im Format www.example.com an (das Widget funktioniert dann nur auf dieser genauen Adresse).
    • Für alle Subdomains: Wenn das Widget auch auf zusätzlichen Subdomains (z. B. shop.example.com oder blog.example.com) aktiv sein soll, nutzen Sie ein Sternchen als Platzhalter: *.example.com.

Hinweis

Der Name example.com dient in dieser Anleitung nur als Platzhalter. Ersetzen Sie ihn in jedem Fall durch Ihren tatsächlichen, eigenen Domainnamen. Solange dieses Feld leer bleibt oder falsch ausgefüllt ist, bleibt das Widget aus Sicherheitsgründen inaktiv.

  • Wählen Sie unter Position aus, wo die Schaltfläche auf Ihrer Website erscheinen soll. Sie haben die Wahl zwischen Unten links, Unten mittig und Unten rechts.
  • Unter Akzentfarbe können Sie die Farbe für Ihre Schaltfläche festlegen. Klicken Sie dazu auf die Farbvorschau (das farbige Quadrat neben dem Eingabefeld), um eine Farbe bequem über die Farbauswahl zu bestimmen. Alternativ können Sie den gewünschten Hex-Farbcode (z. B. #00188f) direkt in das Textfeld eintragen. Wenn Sie keine Farbe festlegen, wird standardmäßig die IONOS Markenfarbe verwendet.
  • Im Bereich Vorschau können Sie live überprüfen, wie die Schaltfläche mit Ihren gewählten Einstellungen aussieht.
  • Klicken Sie oben rechts auf Änderungen speichern.

Schritt 3: Einbettungscode integrieren

Damit das Widget für Ihre Website-Besucher sichtbar wird, muss der generierte Code-Schnipsel in Ihre Website eingefügt werden.

  • Scrollen Sie im Bereich Website-Widget ganz nach unten zum Punkt Einbettungscode.

  • Klicken Sie auf die Schaltfläche Kopieren, um den angezeigten HTML-Code (beginnend mit <script src=...) in Ihre Zwischenablage zu kopieren.

    Ihr Skript sieht in etwa wie folgt aus. Anstelle des Platzhalters YOUR_AGENT_ID enthält es Ihr individuelles Client-Secret:

    <script
      src="https://ionos.ai-voicereceptionist.com/widget/v1/embed.js" data-agent-id="YOUR_AGENT_ID">
    </script> 

  • Wechseln Sie nun in das Content-Management-System (CMS) oder den Homepage-Baukasten Ihrer Website.

  • Fügen Sie den kopierten Code in den HTML-Quelltext Ihrer Website ein. Platzieren Sie den Code direkt vor das schließende </body> -Tag.

    ... 
    <!-- AI Receptionist Voice Widget -->
       <script
         src="https://ionos.ai-voicereceptionist.com/widget/v1/embed.js"
         data-agent-id="YOUR_AGENT_ID">
       </script>
    </body>
    </html> 

 

Anleitungen für gängige Website-Systeme und CMS

Je nach verwendetem System unterscheidet sich das genaue Vorgehen beim Einfügen von HTML-Code. Nutzen Sie die passende Kurzanleitung für Ihre Plattform:

IONOS MyWebsite

Anders als in der allgemeinen Anleitung oben beschrieben, fügen Sie den Code in Ihrer MyWebsite nicht vor dem Tag </body>, sondern im Bereich <head> (Kopfzeile) ein:

  • Öffnen Sie den Website-Editor Ihrer MyWebsite.
  • Navigieren Sie zu Einstellungen > Head-Code.
  • Fügen Sie das kopierte Skript in das dafür vorgesehene Feld ein.
  • Erstellen Sie eine Datenschutz-Zustimmung (Cookie-Consent-Eintrag) für Ihr Sprach-Widget (siehe Abschnitt Datenschutz weiter unten).
  • Speichern und veröffentlichen Sie Ihre Website, um die Änderungen live zu schalten.
WordPress

Für die Einbettung des Widgets in WordPress empfehlen wir grundsätzlich die Verwendung eines Plugins (Option A). Dies funktioniert mit allen Themes und stellt sicher, dass Ihr Code bei einem Theme-Update nicht verloren geht. Alternativ können Sie den Code bei klassischen Themes direkt in die Theme-Dateien einfügen (Option B).

Option A: Über ein Plugin (Empfohlen für alle Themes)

  • Installieren und aktivieren Sie das Plugin „Insert Headers and Footers".
  • Gehen Sie zu Einstellungen > Insert Headers and Footers und fügen Sie das Skript im Bereich Scripts in Footer ein.
  • Speichern Sie die Änderungen ab.


Option B: Über den Theme-Editor (Nur für klassische Themes)

Hinweise: 

  • Bei modernen Full-Site-Editing-Themes (z. B. Twenty Twenty-Three und neuer) steht keine footer.php zur Verfügung. Nutzen Sie in diesem Fall zwingend Option A.
  • Änderungen in Theme-Dateien werden bei einem Theme-Update überschrieben. Verwenden Sie daher ein Child-Theme, um Ihre Änderungen dauerhaft zu sichern.
  • Gehen Sie in Ihrem WordPress-Dashboard auf Design > Theme-Editor und öffnen Sie die Datei footer.php.
  • Fügen Sie das Skript direkt vor dem schließenden </body>-Tag ein.
  • Speichern Sie die Änderungen ab.
Wix
  • Navigieren Sie in Ihrem Wix-Dashboard zu Einstellungen > Benutzerdefinierter Code.
  • Klicken Sie auf + Benutzerdefinierten Code bearbeiten.
  • Fügen Sie das Skript ein.
  • Wählen Sie die Option Alle Seiten aus.
  • Setzen Sie die Platzierung auf Body - Ende.
  • Klicken Sie auf Anwenden.
Shopify
  • Gehen Sie im Admin-Bereich Ihres Shopify-Shops auf Onlineshop > Themes.
  • Klicken Sie beim aktiven Theme auf die drei Punkte und wählen Sie Code bearbeiten.
  • Öffnen Sie die Datei theme.liquid.
  • Fügen Sie das Skript unmittelbar vor dem schließenden </body>-Tag ein und klicken Sie auf Speichern.
Webflow
  • Rufen Sie in Webflow die Projekteinstellungen (Project Settings) auf und wechseln Sie zum Reiter Custom Code.
  • Fügen Sie das Skript im Bereich Footer Code ein.
  • Veröffentlichen (Publish) Sie Ihre Website.

Wichtiger Hinweise zum Datenschutz

Wenn Sie das Website-Widget nutzen, müssen Sie Ihre Website-Besucher über die Datenverarbeitung informieren. Stellen Sie daher sicher, dass Ihre Datenschutzerklärung einen entsprechenden Abschnitt zum KI-Sprachassistenten enthält.

Einen entsprechenden Textbaustein finden Sie im Artikel KI-Telefonassistent: Wichtige Ergänzung für Ihre Datenschutzerklärung.

Inhalt