KI-Chat in Ihre Website einbinden

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.

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.

1. 1

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

   Ö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.
3. 3

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

   Tipp: 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.
4. 4

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

   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.

   Tipp: Der Einbettungscode enthält alle Ihre Anpassungseinstellungen. Wenn Sie die Einstellungen später ändern, müssen Sie den Code auf Ihrer Website aktualisieren.

   HTMLKopieren

   <script>
     window.gnosariConfig = { agentUri: 'your-agent-uri' };
   </script>
   <script src="https://app.gnosari.com/gnosari-chat-widget-advanced.js"></script>

6. 6

   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.

   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!

• WordPressDesign, dann Theme-Datei-Editor, dann footer.php, direkt über dem schließenden body-Tag. In einem Block-Theme erledigt ein benutzerdefinierter HTML-Block in der Fußzeilenvorlage dasselbe ohne PHP.Anleitung lesen
• ShopifyOnlineshop, dann Themes, dann Code bearbeiten, dann theme.liquid. Fügen Sie es vor dem schließenden body-Tag ein, damit das Widget auf Produkt-, Kategorie- und Warenkorbseiten gleichermaßen lädt.Anleitung lesen
• WixEinstellungen, dann Benutzerdefinierter Code, dann Benutzerdefinierten Code hinzufügen. Wählen Sie „Body - Ende" und wenden Sie es auf alle Seiten an.
• WebflowProjekteinstellungen, dann Benutzerdefinierter Code, dann Fußzeilencode. Veröffentlichen Sie die Website, damit die Änderung live geht.
• SquarespaceEinstellungen, dann Erweitert, dann Code-Injektion. Fügen Sie es in das Feld Fußzeile ein, das für die gesamte Website gilt.
• HTML / JSFügen Sie es direkt vor dem schließenden body-Tag Ihrer Vorlage oder Layout-Datei ein, damit es auf jeder Seite lädt, die sie einbindet.

• Bubble-ModusEine 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-ModusDer 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-ModusWie 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-ModusDer 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.

• Farb-ThemesWählen Sie aus über 10 wunderschönen Farbpaletten oder erstellen Sie Ihre eigenen Markenfarben.
• BegrüßungserlebnisRichten Sie Willkommens-Modals, Begrüßungsnachrichten und Erlebnisse für Erstbesucher ein.
• GesprächsvorschlägeFügen Sie Einstiegsvorschläge und Folgevorschläge hinzu, um Gespräche zu lenken.
• HintergrundmusterFügen Sie dezente Muster wie bei WhatsApp hinzu, damit sich Ihr Chat einzigartig und markentypisch anfühlt.

1. 1

   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.

2. 2

   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!

3. 3

   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.

   Tipp: Willkommens-Modals eignen sich hervorragend, um zu erklären, wobei Ihr Chatbot helfen kann. Der erste Eindruck zählt!

4. 4

   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.

5. 5

   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.

6. 6

   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.

• Einzeiliger EinbettungscodeKopieren 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 AnzeigemodiBubble (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 MarkenanpassungStimmen 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-VorschauSehen Sie genau, wie Ihr Chat aussehen wird, während Sie ihn konfigurieren. Jede Änderung erscheint sofort in der Vorschau - kein Raten, keine Überraschungen.
• Leichtgewichtig & schnellSkriptgröße unter 50 KB. Lädt asynchron, sodass es Ihre Website nie verlangsamt. Globale CDN-Auslieferung für schnelles Laden weltweit.
• DatenschutzkontrollenSteuern Sie, wer auf Ihren Chatbot zugreifen kann. Stellen Sie ihn auf öffentlich, passwortgeschützt oder privat ein. DSGVO-konform mit optionalen Einstellungen zur Datenerfassung.

• KI-Chatbot für Ihre WebsiteFügen Sie Ihrer Website in wenigen Minuten intelligenten Kundensupport rund um die Uhr hinzu. Beantworten Sie Besucherfragen automatisch, generieren Sie mehr Leads durch Konversation und senken Sie Supportkosten mit KI.Anleitung lesen
• WordPress KI-ChatbotFügen Sie KI-Chat in 60 Sekunden zu WordPress hinzu. Kein Plugin nötig - einfach einen Einbettungscode kopieren und einfügen. Funktioniert mit WooCommerce, Elementor, Divi & allen Themes.Anleitung lesen
• KI-Chatbot-Anwendungsfälle - 100+ Branchenbeispiele & LösungenEntdecken Sie über 100 KI-Chatbot-Anwendungsfälle in den Bereichen Kundensupport, E-Commerce, Gesundheitswesen, Immobilien und über 12 weiteren Branchen. Finden Sie noch heute Ihre KI-Lösung.Anleitung lesen