Der livestep Chatbot lässt sich auf zwei Arten in deine Website einbinden: als Bubble oder als Embed-Variante direkt im Seiteninhalt.
- Bubble: Der Chatbot erscheint als schwebende Sprechblase unten rechts auf der Seite und öffnet sich beim Anklicken.
- Embed: Der Chatbot ist fest an einer bestimmten Stelle auf der Seite sichtbar – z. B. in einem bestimmten Abschnitt oder einer Sidebar.
Welche Variante verwendet wird, legst du im Konfigurations-Skript fest.
Die Einbindung ist ganz einfach: Du fügst ein JavaScript-Snippet in den <head> oder ans Ende des <body>-Tags deiner Seite ein. Zusätzlich ist bei der Embed-Variante ein spezieller HTML-Tag erforderlich, um den Chat an der gewünschten Stelle sichtbar zu machen.
Einbindung
<script type="module" src="https://embed.livestep.ai/loader/c/DEIN-WIDGET/loader.js">Embed
Du kannst den Tag überall in deinem HTML platzieren – z. B. direkt im <body>, in einer Sidebar oder am unteren Rand deiner Seite. An genau dieser Stelle wird dann der Chat sichtbar.
<livestep-fullchatbot></livestep-fullchatbot>Content Security Policy (CSP)
Wenn deine Website eine Content Security Policy verwendet, musst du bestimmte Freigaben definieren, damit der livestep Chatbot korrekt funktioniert.
Apache
Content-Security-Policy:
default-src 'self';
script-src 'self' 'unsafe-inline' https://*.livestep.ai;
style-src 'self' 'unsafe-inline';
connect-src 'self' https://*.livestep.ai wss://*.livestep.ai;
img-src 'self' data:;NGINX
add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' https://*.livestep.ai; style-src 'self' 'unsafe-inline'; connect-src 'self' https://*.livestep.ai wss://*.livestep.ai; img-src 'self' data:;" always;Falls du eine restriktivere CSP verwendest oder zusätzliche Dienste auf deiner Seite eingebunden sind, musst du diese Regeln ggf. erweitern. Teste die Konfiguration immer im Browser-Dev-Tool unter „Netzwerk“ oder „Konsole“ auf CSP-Verletzungen (Fehler mit Content Security Policy).