Widget-Einbindung

So bindest du das Lymbe AI Chat-Widget in deine Website ein – mit einem einzigen Script-Tag.

Übersicht

Das Lymbe AI Widget ist ein leichtgewichtiges Chat-Fenster, das du mit einem einzigen Script-Tag in jede Website einbinden kannst. Es lädt asynchron, beeinträchtigt die Ladezeit deiner Seite nicht und passt sich automatisch an mobile Geräte an.

Installation

Füge das folgende Script-Tag kurz vor dem schließenden -Tag deiner Website ein:

widget-snippet.htmlhtml

<script
  src="https://app.lymbe.ai/widget.js"
  data-bot-id="BOT_ID"
  data-position="bottom-right"
  data-color="#09CC78"
></script>

WichtigErsetze BOT_ID durch die tatsächliche Bot-ID aus deinem Dashboard (Bots → Einstellungen → Widget-Code). Die Bot-ID hat das Format einer UUID, z. B. „a1b2c3d4-e5f6-7890-abcd-ef1234567890".

Script-Attribute

Attribut	Typ	Pflicht	Beschreibung
data-bot-id	string	Ja	Die eindeutige ID deines Bots (UUID)
data-position	string	Nein	Position des Buttons: „bottom-right" (Standard) oder „bottom-left"
data-color	string	Nein	Primärfarbe als Hex-Wert (Standard: #09CC78)
data-locale	string	Nein	Sprache des Widgets: „de" (Standard), „en", „fr", „es", „it"
data-open	boolean	Nein	Widget beim Laden automatisch öffnen (Standard: false)
data-hide-button	boolean	Nein	Floating-Button ausblenden, Widget nur per API steuerbar (Standard: false)
data-z-index	number	Nein	CSS z-index des Widgets (Standard: 9999)
data-delay	number	Nein	Verzögerung in ms bevor der Button erscheint (Standard: 0)

Position & Platzierung

Das Widget wird standardmäßig unten rechts im Browser-Fenster angezeigt. Du kannst die Position über das data-position Attribut ändern:

<!-- Unten rechts (Standard) -->
<script src="https://app.lymbe.ai/widget.js" data-bot-id="BOT_ID" data-position="bottom-right"></script>

<!-- Unten links -->
<script src="https://app.lymbe.ai/widget.js" data-bot-id="BOT_ID" data-position="bottom-left"></script>

Wo einbinden?

Der beste Platz für das Script-Tag ist direkt vor dem schließenden -Tag. So wird das Widget nach dem eigentlichen Seiteninhalt geladen und blockiert nicht das Rendering.

Statische HTML-Seiten – Direkt in jede HTML-Datei vor einfügen
WordPress – Über das Lymbe AI Plugin oder im Theme-Footer (footer.php)
React / Next.js – Im Root-Layout oder über die Script-Komponente
Shopify – Über die Lymbe AI App oder im Theme-Code (theme.liquid)
Google Tag Manager – Als Custom HTML Tag einbinden

Beispiel: Next.js

app/layout.tsxtsx

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="de">
      <body>
        {children}
        <Script
          src="https://app.lymbe.ai/widget.js"
          data-bot-id="DEINE_BOT_ID"
          data-position="bottom-right"
          data-color="#09CC78"
          strategy="lazyOnload"
        />
      </body>
    </html>
  );
}

Beispiel: Google Tag Manager

GTM Custom HTML Taghtml

<script>
  (function() {
    var s = document.createElement('script');
    s.src = 'https://app.lymbe.ai/widget.js';
    s.setAttribute('data-bot-id', 'DEINE_BOT_ID');
    s.setAttribute('data-position', 'bottom-right');
    s.setAttribute('data-color', '#09CC78');
    document.body.appendChild(s);
  })();
</script>

Domain-Whitelist

Aus Sicherheitsgründen funktioniert das Widget nur auf Domains, die du in deinem Dashboard freigegeben hast. Gehe zu Bots → Einstellungen → Domains und füge alle Domains hinzu, auf denen das Widget geladen werden soll.

LocalhostFür die lokale Entwicklung sind localhost und 127.0.0.1 automatisch freigegeben. Du musst sie nicht manuell zur Whitelist hinzufügen.

Domains ohne Protokoll eingeben, z. B. „example.com"
Subdomains werden separat behandelt – „www.example.com" und „example.com" sind zwei verschiedene Einträge
Wildcard-Subdomains werden unterstützt: „*.example.com"
Bis zu 20 Domains pro Bot im Free-Plan, unbegrenzt ab dem Pro-Plan

Content Security Policy (CSP)

Falls deine Website eine Content Security Policy nutzt, musst du folgende Quellen freigeben:

script-src 'self' https://app.lymbe.ai;
style-src 'self' 'unsafe-inline' https://app.lymbe.ai;
connect-src 'self' https://app.lymbe.ai wss://app.lymbe.ai;
frame-src 'self' https://app.lymbe.ai;

VorherigeQuickstart NächsteAnpassungen