Zum Hauptinhalt gehen

Suche

Help Center

Widget Integration

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