Im folgenden Artikel, lernst du, wie du deinen AI Chat öffnest, anpasst und auf deiner Website einbauen kannst.
Chat und Chat-Bubble öffnen
Wenn du unter Algorithm den Schalter Enable AI aktiviert hast, ist der Chat stets erreichbar
Zum Ansehen und Bearbeiten des AI Chats klicke im Menü unter AI auf den Bereich “AI Chat”
Per Klick auf Preview Chat öffnet sich der Link zum Chat als großflächige Fullscreen Seite.
Per Klick auf Preview Bubble öffnet sich eine leere Seite mit einem Chat-Bubble Icon in der rechten unteren Ecke.
Chat in Website integrieren
Chat-Bubble einbauen:
Per Klick auf Copy Bubble Snippet kopierst du das Snippet, welches du auf deiner Website einbauen kannst. Hierbei wird deine Standardsprache verwendet. Hast du weitere Sprachen aktiviert, kannst du im Snippet das Sprachkürzel austauschen (de_DE, en_EN, …).Chat Eingabemaske einbauen:
Du möchtest den Chat lieber auf einer eigenen Seite einbauen, damit die Nutzer den Chat im Großformat direkt nutzen können?
Lasse dazu im kopierten Snippet einfach den Baustein data-chat-mode="bubble" weg.Geöffnete Chat-Bubble einbauen:
Um die Chat-Bubble beim Laden deiner Website Seite automatisch zu öffnen anstatt per Klick, kannst du folgenden Befehl in der sogenannte Load Sequenz deiner Website hinzufügen:
Document.querySelector('foxbase-chat').shadowRoot.querySelector('.chat-bubble').click()
Durch das Skript wird der Klick auf die Bubble simuliert und die Nutzer können direkt mit dem geöffneten Chat das Gespräch beginnen.
Chat auf der Ergebnisseite als Teil der Journey integrieren
Eine weitere Möglichkeit, den Chat zu integrieren, ist als Teil der Journey auf der Ergebnisseite. Navigiere dazu im Menü zu “Journey Builder” > “Result Page” > “Top Sections” und füge die Section “AI Search Bar” hinzu. Die Suchmaske des Chats lässt sich so mit einer Ergebnisseite kombinieren. Vorgeschaltet dazu kannst du ein Fragebogen oder Result Page Filter angelegen.
Die Nutzung der AI Search Bar ist nur dann sinnvoll, wenn deine Datenbasis Produkte sind und du eine gefilterte Produktempfehlung auf der Ergebnisseite zeigst. Die Suchanfrage in der AI Search Bar bezieht sich ausschließlich auf die empfohlenen Produkte.
Grundfunktionalitäten vom Chat anpassen
Im folgenden Screenshot siehst du, wie die Chat Einstellungen in der Workbench eingegeben und im AI Chat angezeigt werden.
Header: Titel des AI Chats (Default: “AI Assistant”)
Initial Message: Eingangsnachricht, die der Chat beim Öffnen anzeigen soll (Default: “Hi! How can I assist you today?”)
Placeholder: Platzhalter-Text in der Eingabemaske (Default: “Type in anything”)
Clear Chat Label: Text im Schließen-Button des Chats, befindet sich hinter den 3 “…” (Default: “Clear chat”)
Assistant Avatar Image URL: Bild-URL für einen Chat Avatar
Bubble Open Image URL: Bild-URL für das Icon zum Öffnen des Chats
Bubble Close Image URL: Bild-URL für das Icon zum Schließen des Chats
Hide attribution: Einstellung um die Anzeige Powered by FoxBase unter dem Chat auszublenden
Footer Links: Über Add footer link kannst du einen Link unterhalb des Chats anzeigen, um beispielsweise auf AGB oder Datenschutz zu verlinken
🎨 Styling vom Chat per CSS anpassen
Du findest unter Settings die CSS Maske, um Code-Befehle einzugeben.
Falls du keinen erfahrenen Kollegen im Umgang mit CSS hast und du kurz vor der Integration deines Chats stehst, melde dich bei deinem FoxBase CSM Support.
Schaue in den Chat-Styling-Guide oder nutze den Entwicklermodus deines Browsers, um die CSS Container herauszufinden, die du ansprechen musst.