KI Chat-Assistent: Website-Widget einrichten und einbinden

Gültig für KI Chat-Assistent (Momentum KI).

Mit dem Website-Widget binden Sie Ihren Assistenten über eine Schaltfläche direkt in Ihre Website ein. Besucher starten den Chat bequem im Browser, ohne Ihre Seite zu verlassen. In diesem Artikel erfahren Sie, wie Sie das Widget gestalten, für Ihre Domain freigeben und den generierten Code in Ihre Seite einbetten.

Einstellungen des Assistenten aufrufen

• Loggen Sie sich in Ihr IONOS Konto ein.
• Klicken Sie in der Titelleiste auf Menü > AI Frontdesk.
• Klicken Sie in der Vertragsübersicht beim gewünschten Vertrag auf Verwalten.

• Öffnen Sie den Bereich Website-Widget. Hier nehmen Sie alle folgenden Einstellungen vor.
   

Kanäle festlegen

Im Abschnitt Kanäle legen Sie fest, ob über dieselbe Schaltfläche ein Sprachanruf, ein Text-Chat oder beides angeboten werden soll. Zur Auswahl stehen die Optionen Nur Anruf, Nur Chat und Chat und Anruf.

• Nur Chat - die Schaltfläche startet ausschließlich den Text-Chat.

• Chat und Anruf - der Text-Chat öffnet sich. Anschließend können Besucher wählen, ob sie schreiben oder per Klick auf das Telefonhörersymbol anrufen möchten. Der Anruf startet dann direkt im Browser.

• Nur Anruf – es wird kein Chat eingebunden und der Anruf startet direkt im Browser.

Damit Besucher über das Widget chatten können, muss Nur Chat oder Chat und Anruf ausgewählt sein.

Anrufweiterleitung aus dem Chat aktivieren

Ihr Assistent kann den Besucher im Chat an einen Ihrer Kontakte übergeben, beispielsweise an den Support oder die Buchhaltung. Er bietet die Übergabe von sich aus an, sobald das Anliegen zu einem Ihrer Kontakte passt, und außerdem dann, wenn der Besucher von sich aus danach fragt.

Aktivieren Sie im Abschnitt Anrufweiterleitung aus dem Chat den gleichnamigen Schalter.

Im Zuge der Übergabe erscheint im Chat der Name des Kontakts und darunter die Schaltfläche Jetzt anrufen. Klickt der Besucher darauf, klingelt das Telefon des Kontakts und der Besucher kann über seinen Browser sprechen.

Darstellung anpassen

Legen Sie im Abschnitt Darstellung fest, wie die Schaltfläche auf Ihrer Website aussieht:

• Wählen Sie unter Position aus, wo die Schaltfläche erscheinen soll: Unten links, Unten mittig oder Unten rechts.
• Legen Sie unter Akzentfarbe die Farbe der Schaltfläche fest. Klicken Sie auf die Farbvorschau (das farbige Quadrat), um eine Farbe auszuwählen, oder tragen Sie einen Hex-Farbcode (z. B. #003d8f) direkt in das Textfeld ein. Ohne eigene Angabe wird die IONOS Markenfarbe verwendet.
• Tragen Sie unter Schaltflächentext den Text ein, der auf der Schaltfläche angezeigt wird (z. B. „Mit KI chatten").

Im Bereich Vorschau sehen Sie live, wie die Schaltfläche mit Ihren Einstellungen aussieht.

Eigenes Icon hochladen

Neben Position, Farbe und Text können Sie auch das Symbol auf der Schaltfläche bestimmen. Unter Icon können Sie ein eigenes Bild hinterlegen. Solange kein Symbol hinterlegt ist, zeigt das Widget das Standardsymbol.

• Klicken Sie im Abschnitt Darstellung unter Icon auf Icon hochladen.
• Wählen Sie im Dateidialog Ihres Betriebssystems die gewünschte Bilddatei aus. Unterstützt werden gängige Grafikformate, darunter JPG, PNG, GIF, ICO und SVG.
• Legen Sie im Fenster Icon zuschneiden den gewünschten Bildausschnitt fest. Der Ausschnitt ist rund. Sie können ihn über den Schieberegler unter dem Bild vergrößern und durch Ziehen mit gedrückter Maustaste an die gewünschte Stelle verschieben.
• Klicken Sie auf Übernehmen.

Das Icon erscheint nun links neben der Schaltfläche, die jetzt Bearbeiten heißt. Es wird auch sogleich im Vorschaubereich angezeigt.

Icon austauschen oder entfernen

Klicken Sie unter Icon auf Bearbeiten. Ein Menü mit zwei Einträgen öffnet sich:

• Icon hochladen – damit wird das hinterlegte Icon ersetzt. Der Ablauf ist derselbe wie beim ersten Hochladen.
• Entfernen – löscht das hinterlegte Icon. Unter Icon steht danach wieder die Schaltfläche Icon hochladen, und das Widget zeigt wieder das Standardsymbol.
   

Domain freigeben

Das Widget wird aus Sicherheitsgründen nur auf von Ihnen freigegebenen Domains geladen.

Tragen Sie im Abschnitt Installation 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: Nutzen Sie ein Sternchen als Platzhalter (*.example.com), damit das Widget auch auf Subdomains (z. B. shop.example.com) aktiv ist.

Änderungen speichern

Um Ihre Änderungen zu übernehmen, klicken Sie oben rechts auf die Schaltfläche Änderungen speichern. Solange Sie nichts geändert haben, ist die Schaltfläche als Keine Änderungen ausgegraut.

Einbettungscode integrieren

Damit das Widget für Ihre Besucher sichtbar wird, fügen Sie den generierten Code in Ihre Website ein.

• Klicken Sie im Abschnitt Installation unter Einbettungscode auf Kopieren.
• Fügen Sie den Code innerhalb des <head>-Tags Ihrer Website ein. Das Skript wird im Hintergrund geladen und verzögert den Seitenaufbau nicht.

Ihr Code enthält anstelle des Platzhalters YOUR_AGENT_ID Ihre individuelle Agent-ID und sieht in etwa so aus:

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

Einstellungen testen

Um Ihre Einstellungen zu testen, binden Sie das Website-Widget auf Ihrer Website ein. Öffnen Sie anschließend Ihre Website und starten Sie über die Schaltfläche selbst einen Chat. So sehen Sie den Assistenten genau so, wie ihn Ihre Besucher erleben.

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)

• 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.

Verwandte Artikel

• KI Chat-Assistent: Erste Schritte

• KI Chat-Assistent: Verhalten und Sprache anpassen

• KI Chat-Assistent: Unternehmenswissen hinterlegen und verwalten

• KI Chat-Assistent: Anliegen einrichten