KI-Chat in Ihre Website einbinden
Fügen Sie jeder Website in wenigen Minuten einen intelligenten KI-Chatbot hinzu. Kopieren Sie eine Codezeile, fügen Sie sie ein und erleben Sie, wie Ihre Website mit rund um die Uhr verfügbarem, intelligentem Kundensupport zum Leben erwacht. Keine Programmierkenntnisse erforderlich.
Was ist Widget-Einbettung?
Stellen Sie es sich so vor, als würden Sie einen intelligenten Helfer auf Ihre Website setzen. Wenn Besucher auf Ihre Seite kommen, sehen sie eine freundliche Chat-Schaltfläche. Sie klicken darauf und schon — sprechen sie mit Ihrem KI-Chatbot, der alles über Ihr Unternehmen weiß. Entdecken Sie Anwendungsfälle aus der Praxis aus verschiedenen Branchen oder kostenlos loslegen.
Sie erstellen einen Chatbot
Erstellen Sie einen KI-Assistenten, der Ihre Produkte, Dienstleistungen und FAQ kennt. Dauert etwa 5 Minuten.
Kopieren Sie den Einbettungscode
Wir geben Ihnen eine einfache Codezeile. Sie sieht so aus: <script src="...">
Auf Ihrer Website einfügen
Fügen Sie diesen Code in das HTML Ihrer Website ein. Das Chat-Widget erscheint sofort. Ihre Besucher können jetzt mit Ihrer KI chatten!
Keine technischen Kenntnisse erforderlich
Wenn Sie Text kopieren und einfügen können, können Sie unser Chat-Widget einbinden. Wir haben es so gestaltet, dass jeder — selbst völlige Anfänger — KI-Chat zu seiner Website hinzufügen kann. Die meisten Menschen sind in unter 10 Minuten fertig.
4 Möglichkeiten, Ihr Chat-Widget anzuzeigen
Wählen Sie, wie der Chat auf Ihrer Website erscheint. Jeder Stil eignet sich am besten für unterschiedliche Situationen — wählen Sie den, der zum Design Ihrer Seite passt.
Bubble-Modus
Eine schwebende Chat-Schaltfläche in der Ecke Ihrer Seite. Klicken Sie darauf und das Chat-Fenster öffnet sich. Das ist der klassische Stil, den Sie auf den meisten Websites sehen — vertraut und einfach zu bedienen.
Sidebar-Modus
Der Chat gleitet als Panel von der Seite herein. Ideal für Websites, auf denen Kunden chatten möchten, während sie stöbern. Der Chat bleibt neben Ihren Inhalten sichtbar.
Push-Modus
Wie die Sidebar, aber der Chat schiebt tatsächlich Ihre Website-Inhalte zur Seite, um Platz zu schaffen. Nichts wird verdeckt — Ihre Seite passt sich an, sodass Chat und Inhalt nebeneinander angezeigt werden.
Drawer-Modus
Der Chat gleitet wie eine Schublade von unten herein. Perfekt für mobile Websites, auf denen Bildschirmplatz kostbar ist. Fühlt sich auf Smartphones und Tablets natürlich an.
So binden Sie Ihr Chat-Widget ein (5 Minuten)
Folgen Sie diesen einfachen Schritten, um KI-Chat zu Ihrer Website hinzuzufügen. Keine Programmiererfahrung nötig — wenn Sie kopieren und einfügen können, schaffen Sie das!
Erstellen Sie Ihren KI-Chatbot
Zunächst benötigen Sie einen Chatbot zum Einbinden. Nutzen Sie unseren einfachen Assistenten, um einen zu erstellen — geben Sie ihm einfach einen Namen, fügen Sie Ihre Website-URL hinzu (damit er Ihr Unternehmen kennenlernt) und wählen Sie eine Persönlichkeitsvorlage. Der gesamte Vorgang dauert etwa 5 Minuten.
Tipp: Profi-Tipp: Fügen Sie Ihre sitemap.xml hinzu, um alle Ihre Seiten vollständig abzudecken. Ihr Chatbot lernt automatisch aus allem auf Ihrer Seite.
Öffnen Sie den Widget-Konfigurator
Sobald Ihr Chatbot erstellt ist, rufen Sie die Seite Ihres Chatbots auf und klicken Sie auf die Schaltfläche „Widget“. Damit öffnen Sie unseren visuellen Konfigurator, in dem Sie genau sehen können, wie Ihr Chat auf Ihrer Website aussehen wird — in Echtzeit!
Tipp: Der Konfigurator zeigt rechts eine Live-Vorschau. Jede Änderung erscheint sofort, sodass Sie frei experimentieren können.
Wählen Sie Ihren Anzeigemodus
Wählen Sie, wie der Chat auf Ihrer Website erscheinen soll. Der Bubble-Modus zeigt eine schwebende Schaltfläche (am beliebtesten). Die Sidebar gleitet von der Seite herein. Der Push-Modus verschiebt Ihre Inhalte, um Platz zu schaffen. Der Drawer zieht von unten herauf (ideal für Mobilgeräte).
Display Modes:
• Bubble - Floating chat button in corner
• Sidebar - Slide-in panel from left/right
• Push - Pushes your page content aside
• Drawer - Pulls up from the bottomTipp: Unsicher, welchen Sie wählen sollen? Beginnen Sie mit dem Bubble-Modus — er ist das vertrauteste Muster für Website-Besucher und funktioniert sowohl auf Desktop als auch auf Mobilgeräten hervorragend.
Passen Sie das Erscheinungsbild an
Stimmen Sie den Chat auf Ihre Marke ab! Wählen Sie Ihre Markenfarbe (für die Schaltfläche und Akzente), wählen Sie die Position (unten rechts ist am gängigsten) und passen Sie die Sidebar-Breite an, wenn Sie Sidebar-Modi verwenden.
Tipp: Möchten Sie noch mehr Anpassung? Erstellen Sie ein Chat-Theme, um Willkommens-Modals, Einstiegsvorschläge, Hintergrundmuster und mehr hinzuzufügen. Themes können über mehrere Chatbots hinweg wiederverwendet werden.
Holen Sie sich Ihren Einbettungscode
Klicken Sie auf die Schaltfläche „Einbettungscode abrufen“. Sie sehen ein einfaches Skript-Tag, das in etwa so aussieht. Kopieren Sie es einfach in die Zwischenablage.
<script>
window.gnosariConfig = {
agentUri: 'your-agent-uri',
apiUrl: 'https://gnosari.com',
displayMode: 'bubble',
position: 'bottom-right'
};
</script>
<script src="https://gnosari.com/widget.js"></script>Tipp: Der Einbettungscode enthält alle Ihre Anpassungseinstellungen. Wenn Sie die Einstellungen später ändern, müssen Sie den Code auf Ihrer Website aktualisieren.
Auf Ihrer Website einfügen
Fügen Sie den Einbettungscode zu Ihrer Website hinzu. Fügen Sie ihn direkt vor dem schließenden </body>-Tag ein. Für WordPress verwenden Sie ein Plugin wie „Insert Headers and Footers“ oder fügen Sie ihn in Ihrem Theme-Customizer hinzu. Für Shopify fügen Sie ihn in theme.liquid ein. Für Wix verwenden Sie das HTML-Einbettungselement.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<!-- Your website content -->
<!-- Paste embed code here -->
<script>window.gnosariConfig = {...};</script>
<script src="https://gnosari.com/widget.js"></script>
</body>
</html>Tipp: Fertig! Aktualisieren Sie Ihre Website und Sie sehen das Chat-Widget. Klicken Sie darauf, um es zu testen — Ihr KI-Chatbot ist jetzt live und bereit, Ihren Besuchern rund um die Uhr zu helfen!
Erstellen Sie wiederverwendbare Chat-Themes
Gestalten Sie das Erscheinungsbild Ihres Chats einmal und wenden Sie es dann auf alle Ihre Chatbots an. Mit Chat-Themes passen Sie Farben, Begrüßungsnachrichten, Gesprächsvorschläge und mehr an — alles an einem Ort.
Farb-Themes
Wählen Sie aus über 10 wunderschönen Farbpaletten oder erstellen Sie Ihre eigenen Markenfarben.
Begrüßungserlebnis
Richten Sie Willkommens-Modals, Begrüßungsnachrichten und Erlebnisse für Erstbesucher ein.
Gesprächsvorschläge
Fügen Sie Einstiegsvorschläge und Folgevorschläge hinzu, um Gespräche zu lenken.
Hintergrundmuster
Fügen Sie dezente Muster wie bei WhatsApp hinzu, damit sich Ihr Chat einzigartig und markentypisch anfühlt.
Kundensupport-Theme
Lila + Willkommens-Modal
Vertriebsassistent-Theme
Grün + Einstiegsvorschläge
Lernzentrum-Theme
Blau + Musterhintergrund
So erstellen Sie ein Chat-Theme
Gestalten Sie mit wenigen Klicks schöne, markengerechte Chat-Erlebnisse. Sehen Sie Änderungen sofort mit unserer Live-Vorschau.
Gehen Sie zu Chat-Themes
Navigieren Sie in der Seitenleiste Ihres Dashboards zu Chat-Themes. Klicken Sie auf „Theme erstellen“, um mit der Gestaltung Ihres individuellen Chat-Erlebnisses zu beginnen.
Tipp: Themes sind wiederverwendbar — einmal erstellen und auf mehrere Chatbots anwenden. Perfekt, wenn Sie mehrere Chatbots haben, die alle gleich aussehen sollen.
Wählen Sie Ihre Farbpalette
Wählen Sie ein Farb-Theme, das zu Ihrer Marke passt. Wir bieten über 10 wunderschöne, vorgefertigte Paletten an, oder Sie erstellen eine individuelle Farbe. Die Farbe wirkt sich auf Schaltflächen, Links, Akzente und Verläufe im gesamten Chat aus.
Tipp: Sehen Sie Ihre Farbe sofort in der Live-Vorschau auf der rechten Seite des Bildschirms angewendet!
Gestalten Sie das Begrüßungserlebnis
Konfigurieren Sie, was Besucher sehen, wenn sie den Chat zum ersten Mal öffnen. Fügen Sie ein Willkommens-Modal mit Überschrift und Handlungsaufforderung hinzu, legen Sie eine KI-Begrüßungsnachricht fest und passen Sie den leeren Zustand an, bevor Nachrichten gesendet werden.
Welcome Options:
• Welcome Modal - Attention-grabbing intro
• Typewriter Effect - Animated headline
• Greeting Message - AI says hello first
• Empty State - Title and descriptionTipp: Willkommens-Modals eignen sich hervorragend, um zu erklären, wobei Ihr Chatbot helfen kann. Der erste Eindruck zählt!
Fügen Sie Gesprächsvorschläge hinzu
Helfen Sie Besuchern, Gespräche mit vorgeschlagenen Anregungen zu beginnen. Das sind anklickbare Fragen, die im Chat erscheinen — Besucher klicken auf eine und die KI antwortet sofort. Ideal, um zu zeigen, was Ihr Chatbot kann.
Tipp: Fügen Sie 3–4 Einstiegsvorschläge hinzu, die Ihre häufigsten Fragen abdecken. Das hilft Besuchern, die nicht sicher sind, was sie fragen sollen.
Hintergrundmuster hinzufügen (optional)
Verleihen Sie Ihrem Chat mit einem dezenten Hintergrundmuster eine eigene Note — wie die Chat-Hintergründe von WhatsApp. Wählen Sie aus Punkten, Wellen, Raster oder anderen Mustern. Passen Sie die Intensität an, um es dezent zu halten.
Tipp: Muster verleihen Persönlichkeit, aber halten Sie sie dezent — sie sollen nicht vom Gespräch ablenken.
Speichern und anwenden
Geben Sie Ihrem Theme einen Namen und eine Beschreibung und klicken Sie dann auf „Theme erstellen“. Jetzt können Sie dieses Theme auf jeden Ihrer Chatbots anwenden. Wenn Sie das Theme aktualisieren, werden alle Chatbots, die es verwenden, automatisch aktualisiert!
Tipp: Erstellen Sie Themes für verschiedene Zwecke: „Kundensupport“ mit einem Willkommens-Modal, „Vertriebsassistent“ mit Produktvorschlägen usw.
Alles, was Sie für die perfekte Einbettung brauchen
Unser Widget-System ist so konzipiert, dass es nahtlos auf jeder Website funktioniert und Ihnen gleichzeitig die volle Kontrolle über das Erscheinungsbild gibt.
Einzeiliger Einbettungscode
Kopieren Sie einfach ein einzelnes Skript-Tag und fügen Sie es ein. Keine npm-Pakete, keine Build-Schritte, keine komplexe Konfiguration. Funktioniert auf jeder Website, die JavaScript unterstützt.
4 Anzeigemodi
Bubble (schwebende Schaltfläche), Sidebar (einschiebbares Panel), Push (verschiebt Inhalte) und Drawer (Bottom Sheet). Jeder Modus ist vollständig responsiv und für Touch optimiert.
Vollständige Markenanpassung
Stimmen Sie alles perfekt auf Ihre Website ab — mit individuellen Farben, Positionierung und Größe. Erstellen Sie wiederverwendbare Themes für ein einheitliches Branding über alle Ihre Chatbots hinweg.
Live-Vorschau
Sehen Sie genau, wie Ihr Chat aussehen wird, während Sie ihn konfigurieren. Jede Änderung erscheint sofort in der Vorschau — kein Raten, keine Überraschungen.
Leichtgewichtig & schnell
Skriptgröße unter 50 KB. Lädt asynchron, sodass es Ihre Website nie verlangsamt. Globale CDN-Auslieferung für schnelles Laden weltweit.
Datenschutzkontrollen
Steuern Sie, wer auf Ihren Chatbot zugreifen kann. Stellen Sie ihn auf öffentlich, passwortgeschützt oder privat ein. DSGVO-konform mit optionalen Einstellungen zur Datenerfassung.
Funktioniert auf jeder Website-Plattform
Egal, ob Sie Ihre Seite mit WordPress, Shopify, Wix oder individuellem Code erstellt haben — unsere Einbettung funktioniert überall.
WordPress
Shopify
Wix
Webflow
Squarespace
HTML/JS
Ihre Plattform ist nicht dabei? Kein Problem — unsere Einbettung funktioniert auf jeder Website, die JavaScript unterstützt.
Vollständige Integrationsanleitung ansehenFAQ zur Einbettung
Häufige Fragen zur Einbettung Ihres KI-Chats auf jeder Website.
Erstellen Sie Ihren Chatbot mit unserem Assistenten (5 Minuten), öffnen Sie den Widget-Konfigurator, wählen Sie Ihren Anzeigemodus und Ihre Farben, klicken Sie auf „Einbettungscode abrufen“ und fügen Sie das Skript-Tag vor dem schließenden Body-Tag in das HTML Ihrer Website ein.
Bereit, KI-Chat in Ihre Website einzubinden?
Erstellen Sie Ihren Chatbot, passen Sie das Design an und gehen Sie in wenigen Minuten live. Ihre Besucher werden Ihnen für die sofortigen, hilfreichen Antworten danken.
Nutzen Sie Gnosari für Ihren Kundensupport