AI Chatbot ohne Code zu deiner Website hinzufügen

Du kannst einen AI Chatbot zu deiner Website hinzufügen, indem du einem Agenten dein Unternehmenswissen bereitstellst, seine Antworten konfigurierst und ein Chat-Widget über ein Plugin oder ein mitgeliefertes Skript installierst. Der Website-Chatbot von Quickchat AI vereint Wissen, Gesprächseinstellungen und die Inbox für dein Team. Besucher stellen Fragen auf deiner Website, ohne ein Konto anzulegen.

In dieser Anleitung richten wir den Chatbot für Kestrel Kitchens ein, ein fiktives Unternehmen für Küchenplanung. Ein Besucher fragt nach der Dauer einer Renovierung und den voraussichtlichen Kosten einer 3 mal 4 Meter großen Küche und bittet anschließend um ein Angebot. Der Agent antwortet anhand der Unternehmensinformationen, erfasst die Projektdetails und lässt einen Küchenplaner das Gespräch fortsetzen.

Für die grundlegende Einrichtung brauchst du keine Programmierkenntnisse. Beginne mit Wissen und Anweisungen, Lead-Erfassung und menschlicher Übergabe und installiere anschließend das Widget. Eine optionale API Action sendet vollständige Anfragen an ein anderes System.

Lade das Einrichtungskit für Kestrel Kitchens herunter. Es enthält die Beispielwebsite, das Wissen, den Main Prompt, die Einstellungen und Testnachrichten. Die Dateien sind bearbeitbare Vorlagen für die Einrichtung im Dashboard, kein Agent-Import mit einem Klick. Screenshots und kopierbare Kit-, Prompt- und Konfigurationsartefakte bleiben auf Englisch, damit du das getestete Beispiel reproduzieren kannst.

Was soll der Website-Chatbot tun?

Der Chatbot beantwortet Fragen anhand deiner Inhalte, speichert die Angaben für eine gewünschte Kontaktaufnahme und übergibt Gespräche an dein Team, wenn ein Mensch gebraucht wird.

Diese Ergebnisse brauchen unterschiedliche Nachweise. Eine korrekte Preisspanne stammt aus der Knowledge Base. Für eine Angebotsanfrage müssen Kontakt- und Projektdaten in der Inbox vorliegen. Bei einer Übergabe muss ein Mensch die Zuständigkeit übernehmen und eine Antwort senden, die den Besucher erreicht.

Der Weg des Besuchers durch das Beispiel. Eine Angebotsanfrage hält das Interesse fest; Preis und Verfügbarkeit bestätigt weiterhin der Küchenplaner.

Was brauchst du, bevor du einen Chatbot hinzufügst?

Du brauchst ein Quickchat AI Konto, überprüfbare Unternehmensinformationen und Zugriff auf die Plugin- oder Code-Einstellungen deiner Website.

1. Erstelle ein Quickchat AI Konto und schließe die Registrierung ab. Verwende für diese Übung einen separaten Agenten, damit seine Beispieldaten keinen bestehenden Kundenservice beeinflussen.
2. Bereite deine Leistungsseiten, FAQs und Richtlinien vor oder verwende das fiktive Wissen aus dem Kit. Ersetze die fiktiven Preise und das Einzugsgebiet, bevor du den Chatbot für ein echtes Unternehmen einsetzt.
3. Prüfe, ob dein Website-Tarif die jeweilige Installationsmethode erlaubt. WordPress benötigt Plugin-Zugriff; manche gehosteten Baukastensysteme setzen für websiteweiten eigenen Code einen kostenpflichtigen Tarif voraus.
4. Sorge dafür, dass jemand die Test-Inbox überwacht, wenn du die menschliche Übergabe ausprobierst. Halte einen Desktop-Browser und ein Telefon für die abschließenden Website-Tests bereit.

Free ist für persönliches, nicht kommerzielles Lernen gedacht. Der Free-Tarif enthält 50 AI Credits pro Monat. Geschäftlicher Einsatz erfordert einen kommerziellen Tarif, und Tests verbrauchen dasselbe Antwortkontingent wie andere AI Gespräche. Website-Baukasten-Abonnements und externe API-Kosten fallen separat an. Der Kostenabschnitt unterscheidet diese Kosten.

Schritt 1: Wie trainierst du einen Chatbot mit deiner Website?

Füge die Seiten mit den Antworten deines Unternehmens zur Knowledge Base hinzu und überprüfe die importierten Inhalte vor dem Testen. Damit erhält der Agent Referenzmaterial für seine Antworten.

Den Agenten für die Übung erstellen

1. Wähle auf dem ersten Einrichtungsbildschirm Set up manually. In einem bestehenden Dashboard verwendest du das + neben AI Agent (Add new AI Agent), um einen separaten Agenten anzulegen, und wählst dann Set up manually.
2. Trage in Identity unter Name your AI Agent den Wert Kestrel Kitchens ein. Füge main-prompt.txt aus dem Kit in Describe what you want your agent to do ein. Daraus wird der Main Prompt des Agenten, den Schritt 2 erläutert. Wähle Next.
3. Lass Knowledge Base zunächst leer und wähle Next. Fahre durch External apps fort, ohne eine Verbindung auszuwählen. Wähle in Deployment die Option Chat widget und dann Next.
4. Verwende unter Choose your plan die Option Skip for now, um die persönliche Lernübung fortzusetzen, oder wähle einen geeigneten kommerziellen Tarif für den geschäftlichen Einsatz. Schließe ein anschließend angezeigtes optionales Angebot ab oder überspringe es.
5. Bestätige im Dashboard den Namen des Agenten in Identity und öffne dann Knowledge Base. Wähle entweder deine eigenen Seiten oder den unten bereitgestellten Beispielartikel.

Eigene Seiten importieren

1. Wähle in Knowledge Base die Option Add Website. Wähle je nach Bedarf eine einzelne Seite oder den Website-Import.
2. Gib die öffentliche URL ein. Prüfe beim Website-Import die gefundenen Seiten und wähle die Leistungs-, Preis-, Ablauf- und FAQ-Seiten aus, die als Grundlage für Antworten dienen sollen.
3. Prüfe den importierten Text. Stelle sicher, dass Preise die richtige Währung und steuerliche Behandlung enthalten und dass alte Aktionen oder sachfremde Seiten nicht als Quellen aufgenommen wurden.
4. Warte, bis die Verarbeitung abgeschlossen ist. Übernimm oder veröffentliche ausstehende Wissensänderungen, die im Dashboard angezeigt werden, bevor du das installierte Widget testest.

Beginne mit wenigen klaren Seiten. Eine Website kann Preise ansprechend darstellen, während die zugehörigen Einschränkungen an anderer Stelle stehen; der Agent braucht beides. Wenn du nur die Startseite importierst, fehlen möglicherweise die Montagebedingungen, geografischen Grenzen oder Erstattungsrichtlinien, die eine Antwort nützlich machen.

Die Quelle für Kestrel Kitchens verwenden

Um das Beispiel nachzubauen, ohne zuerst eine Website zu hosten, fügst du seine Fakten direkt hinzu:

1. Wähle in Knowledge Base die Option Add Article. Dadurch entsteht ein Artikel mit dem Titel Untitled, und Edit Article öffnet sich.
2. Trage unter Title den Wert Kestrel Kitchens: services, prices and process ein. Wähle unter Content die Option Plain Text und füge knowledge.txt aus dem Kit ein.
3. Wähle Save und warte, bis der Artikel den Status Ready hat. Prüfe, ob sein Titel in der Knowledge Base-Liste erscheint.

Der gespeicherte Artikel behält die Bedingungen für Preise und Zeitangaben bei. Seine fiktiven Fakten entsprechen der Beispielwebsite.

Kestrel Kitchens is a fictional kitchen design and renovation business used in this tutorial. It serves Bristol, Bath and addresses within 25 miles of central Bristol.

Services: kitchen design, supply and full installation. A full kitchen renovation typically costs £18,000 to £45,000 including VAT. This is a planning range, not a quote. The final price depends on the survey, layout, cabinetry, appliances and building work. Room dimensions alone are not enough to calculate a firm price.

Timelines: survey and design normally take 2 to 3 weeks. Installation usually takes 4 to 8 weeks after all materials are available. These are typical durations, not a promised start date or completion date.

Process: discuss the project, arrange a site survey, agree the design and receive a written quote, then schedule work once the quote is accepted and materials are available. The chatbot cannot book a survey or confirm availability.

The design team works Monday to Friday, 09:00 to 17:00, Europe/London. Quote enquiries need the visitor's full name, email, postcode and project type. A preferred timeline is helpful but optional. The team follows up by email. Do not promise a response deadline.

Die Quelle enthält bewusst keine Angaben zur Finanzierung. Damit kannst du prüfen, wie der Agent mit einer echten Wissenslücke umgeht. Halte die Quellseiten einer echten Website aktuell und nutze unterstützte Aktualisierungseinstellungen, sofern verfügbar. Die Anleitung zur Knowledge Base erklärt, wie du diese Quellen organisierst und testest.

Schritt 2: Was soll der Chatbot sagen und was darf er nie versprechen?

Lege mit Main Prompt fest, wie der Agent das Wissen anwendet: zuerst antworten, nützliche Auskünfte geben und Entscheidungen wie ein verbindliches Angebot dem Team überlassen.

Bei Kestrel geben die Raummaße Aufschluss über den Umfang des Projekts. Sie legen weder Schränke noch Geräte oder Bauarbeiten fest. Der Agent soll die Planungsspanne der Quelle von £18,000 bis £45,000 einschließlich Mehrwertsteuer erläutern, ohne aus der Grundfläche einen genaueren Preis zu berechnen.

Diese Preise sind fiktive Übungsdaten. Es geht darum, den Unterschied zwischen Fakten aus der Quelle und einer noch ausstehenden Entscheidung deines Teams beizubehalten.

1. Wähle in Identity auf der Main Prompt-Karte die Option Edit.
2. Füge den vollständigen Prompt unten ein. Warte, bis er gespeichert ist, und öffne den Editor erneut, um den gespeicherten Text zu überprüfen.
3. Halte Unternehmensfakten in der Knowledge Base fest. Verwende den Prompt für Antwortstil, Datenerfassung und Entscheidungen, die einen Menschen erfordern.

Main Prompt ist das Anweisungsfeld. Den vollständigen Text zum Kopieren findest du unten und im Kit.

You are the website assistant for Kestrel Kitchens. Help visitors understand our services, indicative prices and process using the Knowledge Base.

Answer the visitor's question before asking for contact details. Keep replies concise, usually two to four sentences. Use the visitor's language.

Treat prices as planning ranges. Never calculate a firm quote from room dimensions, invent a discount, promise a start date, confirm a survey booking or claim financing is available. If the Knowledge Base does not answer a question, say that a designer must confirm it.

When a visitor wants a quote or follow-up, collect their full name, email, postcode and project type in conversation. Ask one or two relevant questions at a time. Ask about their preferred timeline only after the required details, and accept a refusal without pressure. Do not ask for payment information.

Offer Human Handoff when the visitor asks for a designer or needs information you cannot confirm. Respect the configured working hours. Never claim that a designer is connected or a quote is booked. If the team is unavailable, offer an email follow-up.

Acknowledge the details the visitor has provided. Do not claim CRM delivery or a confirmed booking. The design team reviews enquiries in the Inbox.

Öffne AI Preview und frage How long does a full kitchen renovation take?. Im lokalen Kontrolltest nannte der Agent 2 bis 3 Wochen für Besichtigung und Planung und anschließend 4 bis 8 Wochen für die Montage, nachdem die Materialien verfügbar sind. Sowohl die Dauer als auch die Einschränkung sind relevant.

Beginne ein neues Gespräch und frage Do you offer financing?. Die korrekte Antwort weist darauf hin, dass die Quelle kein entsprechendes Angebot belegt, und verweist mit der Frage an einen Küchenplaner. Selbstbewusstere Formulierungen im Prompt würden die fehlende Unternehmensinformation nicht ersetzen.

Schritt 3: Wie erfasst du Angebotsanfragen im Chat?

Smart Data Gathering fragt während eines Gesprächs nach ausgewählten Informationen und speichert die Angaben des Besuchers. Erfasse bei einer Angebotsanfrage nur das, was der Küchenplaner für die Kontaktaufnahme benötigt.

1. Öffne Actions & MCPs, aktiviere Smart Data Gathering und wähle Edit Action. Setze Name auf Quote enquiries und Description auf Capture contact and project details for a kitchen design enquiry. Der gespeicherte Name wird zum Kartentitel.
2. Füge unter Data to collect die Zeilen unten hinzu. Behalte diese englischen Data point-Namen bei, wenn du das Beispiel nachbaust; für die Kontaktnamen gibt es spezielle Zuordnungen zu den Besucherfeldern der Inbox.
3. Setze Reason for collecting information auf So a Kestrel Kitchens designer can assess your project and follow up by email.
4. Setze When to ask for data auf After exchanging a few messages und How to ask for data auf Subtle.
5. Speichere die Action. Stelle in AI Preview eine nützliche Frage zu den Leistungen, bevor du ein Angebot anfragst, und überprüfe die gespeicherten Angaben in Inbox.

Die Fragen beschreiben die zu erfassenden Informationen. Die Einstellungen für Zeitpunkt und Stil steuern, wann gefragt werden soll; teste auch das tatsächliche Gespräch.

Name, E-Mail-Adresse, Postleitzahl und Projektart sind die Pflichtangaben für eine vollständige Anfrage in diesem Beispiel. Der gewünschte Zeitraum ist optional, wie im Main Prompt beschrieben. Diese geschäftliche Anforderung ist von den Einstellungen zur Erfassung im Gespräch getrennt; Schritt 8 setzt die Pflichtfelder durch, bevor eine CRM-Anfrage gesendet wird.

Der Agent soll eine allgemeine Kostenfrage beantworten, ohne die Angabe einer E-Mail-Adresse zur Voraussetzung zu machen. Ein Besucher kann die Datenerfassung auch ablehnen. Prüfe mit I am only researching. I do not want to leave contact details., ob das Gespräch ohne wiederholte Nachfragen nützlich bleibt.

Wo landen die erfassten Angaben?

Öffne das Gespräch in Inbox. Standardkontaktdaten erscheinen in den Besucherfeldern; die übrigen erfassten Werte bleiben dem Gespräch zugeordnet und lassen sich über Export Gathered Data exportieren.

Unter Where to send data benachrichtigt Email new leads alle Administratoren des Agenten, wenn erstmals eine E-Mail-Adresse oder Telefonnummer erfasst wird. Ein Name allein löst keine E-Mail aus. Preview und Simulation versenden diese Benachrichtigungen nicht. Prüfe deshalb dein eigenes Administrator-Postfach mit einem kontrollierten Test im installierten Widget, bevor du dich auf die E-Mail-Zustellung verlässt. In dieser lokalen Anleitung bleibt der externe E-Mail-Versand deaktiviert.

Die Dokumentation zu Smart Data Gathering beschreibt Erfassung, Benachrichtigungen und Exporte. Erkläre auf deiner eigenen Website, warum du diese Informationen abfragst, und verlinke deine Datenschutzhinweise im Widget. Die Anleitung zum Chatbot-Datenschutz hilft dir, den gesamten Datenfluss zu prüfen.

Schritt 4: Wie lässt du einen Menschen den Chat übernehmen?

Human Handoff übergibt ein Gespräch an dein Team; anschließend übernimmt ein Mensch in Inbox und antwortet demselben Besucher.

Bereite die Übergabe vor, bevor du das Widget veröffentlichst. Wer nach einem Küchenplaner fragt, sollte nicht erst die Angebotsangaben vervollständigen müssen, und der Agent sollte außerhalb der besetzten Zeiten nicht den Eindruck erwecken, jemand sei online.

1. Aktiviere in Actions & MCPs die Option Human Handoff und öffne Edit Action.
2. Lass die Standardregeln Media Message, User Frustration, Customer Support Suggestion und Lack Of Knowledge aktiviert; lass Irrelevant Advice deaktiviert. Der Main Prompt erklärt bereits, wann ein Küchenplaner angeboten werden soll. Das getestete Beispiel verwendet diese Standardregeln ohne zusätzliche eigene Regeln.
3. Konfiguriere die Nachrichten und Verfügbarkeit wie unten angegeben und speichere. Lass Email notifications für die Lernübung deaktiviert und prüfe die Übergabe direkt in der Inbox.

Verwende Zeiten, zu denen tatsächlich jemand die Inbox überwacht. Der fiktive Zeitplan verspricht keine sofortige Antwort.

Frage während einer besetzten Zeit auf der Website Can I speak to a designer?. Bestätige die Übergabe, falls der Agent danach fragt. Öffne das Gespräch in der Inbox und wähle Assign to me, wenn es nicht zugewiesen ist, oder Take over, wenn diese Schaltfläche angezeigt wird. Sende eine menschliche Antwort und prüfe, ob der Besucher sie erhält. Verwende Reassign to AI, wenn die AI wieder antworten soll.

Prüfe die Zuständigkeit und die zugestellte menschliche Antwort, nicht nur das Übergabeangebot des Agenten.

Wiederhole den Test in einem neuen Gespräch außerhalb der konfigurierten Zeiten. Der Agent soll die Verfügbarkeit erklären und den angegebenen Weg zur späteren Kontaktaufnahme anbieten. Wenn du den Zeitplan für diesen Test vorübergehend änderst, stelle danach die tatsächlichen Zeiten wieder her. Die Dokumentation zu Human Handoff erklärt die Einstellungen und den Ablauf in der Inbox.

Die Anleitung zur Chatbot-Übergabe an Menschen enthält separate Prüfungen für die Gesprächszuständigkeit, die Rückgabe an die AI und Fehlerfälle außerhalb der besetzten Zeiten.

Schritt 5: Wie passt du das Widget an deine Website an?

Lege unter Channels → Your Website das Erscheinungsbild und die festen Texte fest. Formuliere die Begrüßung konkret genug, damit Besucher wissen, wonach sie fragen können.

Erscheinungsbild

1. Öffne Appearance. Wähle für Kestrel ein Custom-Design mit weißem Hintergrund, dunkelgrüner Kopfzeile und Akzentfarbe (#315448) sowie weißem Kopfzeilentext. Behalte die Standardtextgröße und die abgerundeten Bedienelemente bei.
2. Klicke unter Branding → AI Agent Avatar auf das Upload-Symbol des Avatars, wähle website/kestrel-avatar.png aus dem Kit und dann Upload im Zuschneidedialog.
3. Setze Widget window max width auf 400px und Widget window max height auf 520px. Wähle Small für die Größe des Chat-Buttons, platziere ihn rechts und verwende Ask about your kitchen als Beschriftung. Die Beschriftung ist beim kleinen Chat-Button verfügbar. Prüfe in der Vorschau seine Position im Verhältnis zu Cookie-Bannern oder anderen schwebenden Bedienelementen deiner Website.
4. Lass Auto-open Widget deaktiviert. Wenn sich das Widget bei jedem Seitenaufruf öffnet, unterbricht das das Surfen, besonders auf einem Telefon.

Prüfe die Vorschau bei der Farbauswahl. Der Test auf der echten Website bleibt nötig, weil der Chat-Button sich den Platz mit den Bedienelementen deiner Website teilt.

Textinhalte

Öffne Text Content und verwende diese Werte:

Gesprächseinstiege sollten nützliche Aufgaben eröffnen. Der Hinweistext erklärt Besuchern, welche Entscheidungen weiterhin einen Küchenplaner erfordern.

Der Agent kann in der Sprache des Besuchers antworten. Die Übersetzung der festen Begrüßung und der Widget-Beschriftungen ist eine separate Einstellung unter Other languages, die in kostenpflichtigen Tarifen verfügbar ist. Teste für eine mehrsprachige Website sowohl die Antwort als auch die festen Oberflächentexte; die Anleitung zu mehrsprachigen Chatbots erklärt diesen Unterschied.

Es kann einige Minuten dauern, bis Änderungen am Erscheinungsbild zwischengespeicherte Besuchersitzungen erreichen. Lade die Seite neu, bevor du davon ausgehst, dass eine gespeicherte Änderung fehlgeschlagen ist. Hide Quickchat AI Branding erfordert Professional oder höher; die White-Label-Anleitung behandelt die weiteren Stellen, die du prüfen solltest.

Schritt 6: Wie installierst du den Chatbot auf deiner Website?

Installiere das Widget im gemeinsamen Seitenlayout oder verwende die unterstützte Plattformintegration. Das schwebende Widget muss auf der Seite laufen, die der Besucher gerade ansieht.

1. Öffne Channels → Your Website → Install.
2. Aktiviere Widget & Embed access für das öffentliche Widget.
3. Wähle die Installationsmethode für deine Website und kopiere das für diesen Agenten angezeigte Snippet oder die Scenario ID.
4. Veröffentliche die Änderung, öffne die öffentliche Website und stelle eine Frage, deren Antwort nachweislich in der Knowledge Base steht.

Kopiere die Angaben vom Install-Bildschirm dieses Agenten. Seine Scenario ID ist eine öffentliche Widget-Kennung, kein privater API-Schlüssel.

Jede Website: Das Widget-Snippet vor dem schließenden body-Tag einfügen

Wähle Install manually with code und kopiere das Widget-Snippet. Der aktuelle Loader hat diese Form:

<script>
  (function(e,a,d,i,c,t=a.createElement(d)){e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},t.src=i,t.async=1,a.body.insertAdjacentElement("beforeend",t)})(window,document,"script","https://bubble.quickchat.ai/chat.js","_quickchat");
  _quickchat("init", "YOUR_SCENARIO_ID");
</script>

Ersetze YOUR_SCENARIO_ID durch den Wert aus Install. Füge das vollständige Snippet einmal unmittelbar vor </body> im gemeinsamen Layout ein oder nutze das websiteweite Footer-Feld des Baukastensystems. Dieser Loader fügt ein Skript in den Seiten-Body ein. Wenn du ihn im Head platzierst, bevor der Body existiert, kann das Laden fehlschlagen.

Die Position ist entscheidend. Ein iframe-basierter HTML-Block ist eine separate Seite und eignet sich nicht für dieses schwebende Widget.

Die separate Option Embed platziert einen Chat innerhalb eines Seitencontainers. Verwende das dafür erzeugte Snippet, wenn du einen eingebetteten Chat-Bereich möchtest. Ein HTML-Block, der Code direkt in die Seite einfügt, kann dieses Muster unterstützen; ein Baukasten-Block, der Code in einem iframe isoliert, ist ein anderer Fall. Siehe die Dokumentation zum Website-Kanal.

WordPress: Das offizielle Plugin installieren

1. Öffne in WordPress Plugins → Add New, suche nach Quickchat AI Agent und wähle Install Now und Activate.
2. Öffne Settings → Quickchat AI Agent.
3. Füge die Scenario ID vom Install-Bildschirm in Quickchat AI ein und wähle Save Changes.
4. Öffne eine öffentliche Seite und prüfe das Widget. Verwende entweder das Plugin oder ein manuelles Snippet, damit der Loader nicht zweimal installiert wird.

Du brauchst eine WordPress-Installation und einen Tarif, die Plugins erlauben. Die WordPress-Chatbot-Anleitung zeigt die Plugin-Oberfläche und WordPress-spezifische Prüfungen.

Squarespace: Code über Footer Code Injection einfügen

1. Öffne den Bereich Code Injection der Website. Nutze die Einstellungssuche im Dashboard, falls die Navigation in deinem Konto abweicht.
2. Füge das vollständige Widget-Snippet in Footer ein und speichere.
3. Öffne die veröffentlichte Seite in einem separaten Browser-Tab und teste eine Antwort.

Squarespace bietet Code Injection in Core, Plus, Advanced und einigen älteren Tarifen an. Footer-Injection fügt den Code websiteweit vor </body> ein. Verwende diese Möglichkeit für das schwebende Widget; ein iframe-Block auf Seitenebene ist nicht gleichwertig. Dieser eigene Code wird nicht auf Squarespace-Checkout-Seiten ausgeführt.

Wix: Eigenen Code mit Body - end einfügen

1. Öffne im Website-Dashboard Settings → Custom Code und dann + Add Custom Code.
2. Füge das Widget-Snippet ein und nenne es Quickchat AI widget.
3. Wende es auf All pages an, wähle Body - end und dann Apply.
4. Teste die veröffentlichte Website, einschließlich des Wechsels zu einer anderen Seite.

Wix setzt für eigenen Code eine veröffentlichte Website mit verbundener Domain voraus. Verwende für dieses schwebende Widget die websiteweite Custom Code-Einstellung.

Webflow: Footer-Code einfügen und veröffentlichen

1. Öffne Site settings → Custom code.
2. Füge das Widget-Snippet in Footer code ein und wähle Save changes.
3. Wähle Publish, um auf der vorgesehenen Domain zu veröffentlichen, und teste anschließend diese veröffentlichte URL.

Die Einstellungen für eigenen Code von Webflow erfordern einen berechtigten kostenpflichtigen Workspace oder einen aktiven Site-Tarif. Das Speichern der Einstellung allein veröffentlicht sie nicht.

Shopify: Das Snippet des bestehenden Agenten oder die Shopify-App wählen

Füge für den bereits erstellten Kestrel-Agenten sein Widget-Snippet unmittelbar vor </body> unter Online Store → Themes → Edit code → layout/theme.liquid ein, speichere und prüfe die Shop-Ansicht. Sichere das Theme vor der Bearbeitung und prüfe die Installation nach einem Theme-Wechsel erneut. Dieser Weg zeigt den ausgewählten Agenten an; er konfiguriert keine Produkt- oder Bestell-Actions.

Für einen auf den Shop ausgerichteten Agenten verbindet die Einrichtung der Quickchat AI Shopify-App den Shop über einen eigenen Einrichtungsablauf. Verwende danach Enable Widget in Shopify Theme Editor oder öffne Online Store → Themes → Edit theme → App embeds. Aktiviere Quickchat AI Widget und speichere. Die App-Embed-Dokumentation von Shopify erklärt die Theme-Steuerung; aktiviere das App-Embed erneut, wenn du das veröffentlichte Theme wechselst.

Die oben genannten Baukasten-Abläufe wurden anhand der offiziellen Dokumentation geprüft. Die Screenshots der Anleitung zeigen die Kestrel-Beispielwebsite und das echte lokale Widget; sie zeigen keine angemeldeten Konten bei jedem Baukastensystem.

Das Snippet vor der Fehlersuche am Agenten prüfen

Diese optionalen Prüfungen arbeiten mit den Werten, die du bereitstellst:

• Ein Widget-Snippet prüfen. Prüfe eingefügten Code anhand der angegebenen Scenario ID. Dabei wird deine Website nicht abgerufen.
• Bereitstellungsmethoden vergleichen. Vergleiche deine angegebenen Kanäle, den Website-Zugriff und benötigte Funktionen mit den Einrichtungsoptionen von Quickchat AI. Dabei werden weder deine Website noch dein Konto untersucht.

In einem kompatiblen Browser sind diese Prüfungen auch als Website-Tools verfügbar. Die Links öffnen die Standardformulare.

Schritt 7: Wie testest du den Chatbot vor deinen Besuchern?

Teste Antwort, gespeicherte Daten und zugestellte Antwort separat. AI Preview und Simulation Testing helfen, das Verhalten zu bewerten; die veröffentlichte Website belegt, dass Besucher das installierte Widget nutzen können.

Unabhängige Fragen in Simulation Testing ausführen

Öffne Testing → Create Dataset, nenne es Kestrel Kitchens: website launch checks und wähle Paste messages. Füge die Fragen zu Dauer, Preis und Finanzierung unten ein und trenne die Fragen jeweils durch eine Zeile, die --- enthält. Ein einfacher Zeilenumbruch lässt den Text innerhalb einer Testnachricht. Lege Evaluation criteria so fest, dass Fakten und knappe Antworten geprüft werden, und wähle Run → Start Run. Das Kit enthält die genauen Nachrichten und Kriterien.

Jede Dataset-Zeile beginnt ein separates Gespräch. Nutze Simulation für diese unabhängigen Fragen; führe die mehrstufigen Tests für Angebotsanfrage und menschliche Übernahme innerhalb eines AI Preview- oder Website-Gesprächs durch. Prüfe Action-Protokoll und Empfänger separat, denn eine Auswertung des Gesprächsverlaufs kann keine externe Zustellung verifizieren.

Öffne einen abgeschlossenen Lauf und prüfe seine Antworten. Diese Preisantwort behält die Planungsspanne bei; ihre Bewertung belegt keine Zustellung an ein anderes System.

Verwende zwischen unabhängigen Fällen ein neues Gespräch. Ein Neuladen der Seite kann ein bestehendes Gespräch fortsetzen. Nutze deshalb die Funktion für einen neuen Chat im Widget, wenn du einen frischen Test brauchst.

Die Website auf einem Telefon prüfen

Auf Bildschirmen unter 768 CSS-Pixeln verwendet das geöffnete Widget ein Vollbildlayout. Prüfe, ob du es öffnen, bei sichtbarer Tastatur schreiben, im Gespräch scrollen und es schließen kannst, um zur Website zurückzukehren.

Lass abschließend einen echten Menschen aus der Inbox antworten. Eine gute AI Antwort belegt nicht, dass der menschliche Supportweg funktioniert. Wiederhole eine kleine Auswahl dieser Prüfungen nach Änderungen an Quellen, Prompts, Actions oder dem Website-Theme.

Schritt 8: Wie sendest du eine vollständige Anfrage an dein CRM?

Eine optionale API Action kann die gespeicherten Felder an einen HTTP-Empfänger senden, sobald im Gespräch alle Pflichtangaben vorliegen. Der grundlegende Website-Chatbot ist bereits ohne diese Erweiterung nutzbar.

Entscheidend ist der Unterschied zwischen ein Kontakt wurde erfasst und diese Anfrage ist vollständig. Quickchat AI setzt lead_captured, wenn ein Standardkontaktfeld neu erfasst wird, einschließlich eines Namens. Das Flag allein belegt nicht, dass E-Mail-Adresse, Postleitzahl oder Projektart vorliegen.

Die Plattform prüft jede Bedingung. Das Modell erfasst die Informationen; die Bedingungen bestimmen, wann die Anfrage ausgeführt werden darf.

Den Empfänger vorbereiten

Verwende einen CRM- oder Automatisierungsendpunkt unter deiner Kontrolle, der den JSON-Body unten akzeptiert. Das Kit enthält einen kleinen lokalen Demo-Empfänger für Leser, die die Anfrage vor der CRM-Anbindung prüfen möchten. Seine Einrichtungsanleitung erstellt ein privates Token und erklärt, wie du einen temporären HTTPS-Endpunkt bereitstellst. Sende ausschließlich fiktive Testdaten an den Demo-Empfänger.

Für eine verwaltete Integration folge stattdessen der Anleitung für Google Sheets-Berichte oder der Anleitung für ein eigenes CRM. Aktiviere nicht zwei Abläufe, die beide denselben Lead anlegen.

Eine automatische API Action konfigurieren

1. Öffne Actions & MCPs → Custom Actions → Add Action → API Action. Wähle Create manually, falls sich der beschreibungsbasierte Editor öffnet.
2. Setze API Action Name auf Send quote enquiry.
3. Lass What to ask the user first leer. Diese Action liest die bereits von Smart Data Gathering gespeicherten Felder; sie fordert das Modell nicht auf, einen zweiten Parametersatz auszufüllen.
4. Wähle unter API Endpoint die Methode POST und gib die HTTPS-URL /enquiries deines Empfängers ein.
5. Füge die Header, den Body und die Bedingungen unten hinzu, speichere und aktiviere die Action.

Trage das Token ausschließlich in der Header-Einstellung der Action ein. Halte es aus dem Prompt, dem Website-Snippet und dem Besuchergespräch heraus. Die README des Demo-Empfängers erklärt die Erstellung; verwende für eine echte Integration die dokumentierte Authentifizierung deines CRM.

Wähle im Tab Body JSON aus und trage Folgendes ein:

{
  "conversation_id": "{{conversation_id}}",
  "name": "{{metadata_visitor_name}}",
  "email": "{{metadata_visitor_email}}",
  "postcode": "{{metadata_postcode}}",
  "project_type": "{{metadata_project_type}}"
}

Verwende Add AI Data, um die entsprechenden integrierten Werte und Metadatenwerte einzufügen. conversation_id identifiziert das Gespräch. Die anderen Werte stammen aus den gespeicherten Feldern; die englischen Kontaktnamen werden visitor_name und visitor_email zugeordnet, während aus Project type der Schlüssel project_type wird. Die Variablendokumentation erklärt diese Zuordnungen.

Wähle unter When to run die Option When metadata matches. Füge in Run when alle fünf Zeilen hinzu; die Metadatenbedingungen werden mit AND verknüpft:

Bei diesen Textfeldern weist is true sowohl leere Werte als auch Text zurück, der als falsch gewertet wird. exists prüft nur, ob ein Schlüssel vorhanden ist; eine gespeicherte leere Zeichenfolge kann diese Prüfung bestehen. Die Tests unten zeigen, warum die strengere Bedingung relevant ist. Geprüft wird, ob verwendbarer Text vorliegt, nicht ob Identität oder Objektangaben des Besuchers unabhängig verifiziert wurden.

Verwende diese API Action Description:

Send a quote enquiry to the design team when the visitor has provided their full name, email, postcode and project type. This records an enquiry only; it does not book a survey or confirm a price.

Die ersten zwei von fünf gespeicherten Bedingungen. Füge jede Zeile aus der Tabelle hinzu; When metadata matches prüft sie nach einem AI Gesprächsschritt, ohne dass der Agent die Action auswählt.

Die Action wird einmal pro Gespräch versucht, wenn alle Bedingungen erfüllt sind. Sie läuft nicht erneut, wenn ein optionaler Zeitraum hinzukommt, und eine fehlgeschlagene gesendete Anfrage wird in diesem Gespräch nicht automatisch wiederholt. Bewahre den Zeitraum für den Küchenplaner in der Inbox auf oder baue eine ausdrückliche Integration zum Anlegen und Aktualisieren, falls dein CRM spätere Änderungen benötigt.

Die Anfrage läuft nach dem AI Gesprächsschritt, und ihre Antwort wird nicht in den Chat eingefügt. Deshalb bestätigt der Main Prompt die Angaben des Besuchers, ohne zu behaupten, ein CRM habe sie angenommen. Prüfe die Zustellung im Action-Protokoll und beim Empfänger. Die Dokumentation zu automatischen Actions beschreibt dieses Ausführungsverhalten.

Zuerst unvollständige Daten, dann die vollständige Anfrage testen

Die erste Version verwendete exists für die erforderlichen Textfelder. Sam gab einen Namen und in der nächsten Nachricht eine E-Mail-Adresse an. Smart Data Gathering hatte bereits leere Werte für Postleitzahl und Projektart angelegt. Da diese Schlüssel existierten, sendete die Action eine unvollständige Anfrage. Damit war auch ihr einziger Versuch für das Gespräch verbraucht.

Die Korrektur bestand darin, die vier Textfeldbedingungen auf is true zu ändern und die übrige Einrichtung beizubehalten. Wiederhole den Test in einem neuen Gespräch und gib im zweiten Gesprächsschritt nur eine E-Mail-Adresse an. Die Action sollte auf die restlichen Projektdetails warten.

Dies ist ein einzelnes beobachtetes Gespräch, keine Erfolgsquote für den Produktivbetrieb. Reproduziere es mit einem neuen Gespräch, prüfe die gespeicherten Felder nach jedem Gesprächsschritt und kontrolliere die Anfrage an deinem eigenen Endpunkt.

Der tatsächliche Action-Aufruf lieferte HTTP 201 zurück. Öffne seine Details, um die Anfrage zu prüfen; der gespeicherte Datensatz unten zeigt, was der Empfänger abgelegt hat.

Ein tatsächlich gespeicherter Datensatz des authentifizierten Demo-Empfängers. Dies ist eine Anfrage, kein bestätigtes Angebot und keine Buchung.

Die Demonstration verwendete einen lokalen Empfänger und erfasste eine tatsächliche HTTP-Zustellung. Ein gehosteter Quickchat AI Agent braucht einen öffentlich erreichbaren HTTPS-Endpunkt; eine localhost-URL auf deinem Computer ist vom Dienst aus nicht erreichbar.

Wenn nichts ankommt, prüfe View logs bei der Action und die gespeicherten Metadaten des Gesprächs. Fehlende Werte, eine deaktivierte Action und ein HTTP-Fehler erfordern unterschiedliche Korrekturen. Korrigiere die Konfiguration und teste den automatischen Auslöser in einem neuen Gespräch erneut; die Bitte im selben Chat, es erneut zu versuchen, setzt den einmaligen Versuch pro Gespräch nicht zurück.

Warum fehlt der Chatbot oder zeigt alte Einstellungen?

Prüfe die veröffentlichte Seite, die Installationsposition und den Agent-Zugriff, bevor du den Prompt änderst. Ein Ladeproblem im Browser ist von einem Problem mit der Antwortqualität zu unterscheiden.

Wenn der Browser eine blockierte Ressource meldet, prüfe die genaue Fehlermeldung der Content Security Policy oder des Blockers. Deaktiviere die Schutzmaßnahmen deiner Website nicht pauschal. Teste die öffentliche Seite über HTTPS und verwende die Kanaldokumentation für die erforderliche Einrichtung.

Was kostet ein Website-Chatbot?

Das Abonnement und das Nutzungskontingent decken den AI Dienst ab; dein Website-Tarif und optionale Integrationen verursachen separate Kosten.

Ein AI Credit entspricht nicht einem Gespräch. Ein Gespräch kann mehrere AI Antworten enthalten, und unterschiedliche Modelle können unterschiedliche Credit-Kosten haben. Berücksichtige Preview und Simulation im Testbudget. Verwende die aktuellen Preise und Kontingente und die Anleitung zu Chatbot-Kosten, um dein Volumen abzuschätzen.

Können ChatGPT oder Claude bei der Chatbot-Einrichtung helfen?

Über die Quickchat AI Verbindung zur Kontoverwaltung kann ein kompatibler Assistent unterstützte Agent-Einstellungen konfigurieren und anhand dieser Artefakte Tests vorbereiten.

Verbinde dein eigenes Konto über Quickchat AI in ChatGPT oder Quickchat AI in Claude und folge der Anleitung zu Manage with AI. Die unterstützten Tools umfassen Wissen, Main Prompt, Gesprächseinstiege, Human Handoff, HTTP Actions, Tests und das Bereitstellungs-Snippet.

Vervollständige Smart Data Gathering und die detaillierten Widget-Einstellungen unter Appearance im Dashboard. Außerdem musst du externe Konten autorisieren und das Snippet in den Einstellungen deiner Website installieren. Die Kontoverbindung dient der Verwaltung deines Agenten; sie ist davon getrennt, einen Agenten als MCP-Tool bereitzustellen.

Use the Kestrel Kitchens website-chatbot kit to prepare a separate learning Agent. Do not change existing Agents. Set its name to Kestrel Kitchens, add knowledge.txt and set main-prompt.txt as Main Prompt. Configure the supported greeting, conversation starters and Human Handoff settings from the kit. Prepare the launch-test dataset with the supplied messages and criteria. Read back the saved configuration and return this Agent's current Widget snippet.
List the remaining dashboard steps for Smart Data Gathering, Appearance and website installation. Do not invent support for those settings. Leave the optional Send quote enquiry Action inactive until I provide my receiver URL and configure its credential. Before running tests or external writes, tell me the expected credit use and effects and obtain any approval required by this client. Do not claim that a website, email or CRM delivery works until it has been tested.

Häufig gestellte Fragen

Wie füge ich einen AI Chatbot zu meiner Website hinzu?

Erstelle einen Agenten in Quickchat AI, füge dein Unternehmenswissen hinzu, konfiguriere Main Prompt, Smart Data Gathering und Human Handoff und installiere dann sein Widget über ein Plugin oder das mitgelieferte Snippet. Teste auf der veröffentlichten Website eine quellenbasierte Antwort, erfasste Kontaktdaten und eine zugestellte menschliche Antwort.

Kann ich ein eigenes ChatGPT zu meiner Website hinzufügen?

Du kannst einen Assistenten im Stil von ChatGPT hinzufügen, der mit deinen eigenen Seiten trainiert wurde. Diese Anleitung stellt einen Quickchat AI Agenten über dessen Website-Widget bereit, sodass Besucher auf deiner Website chatten können, ohne sich bei ChatGPT anzumelden. Wissen, Anweisungen und Integrationen werden in Quickchat AI verwaltet.

Kann ich kostenlos einen AI Chatbot zu meiner Website hinzufügen?

Der Free-Tarif von Quickchat AI unterstützt persönliches, nicht kommerzielles Lernen und enthält 50 AI Credits pro Monat. Eine Unternehmenswebsite oder ein an Kunden gerichteter Vertriebs- und Supporteinsatz benötigt einen Tarif, der kommerzielle Nutzung erlaubt. Website-Baukasten-Abonnements fallen separat an, und auch Tests verbrauchen AI Credits.

Muss ich programmieren oder einen API-Schlüssel bereitstellen?

Die grundlegende Einrichtung verwendet Dashboard-Einstellungen und ein Plugin, ein App-Embed oder ein mitgeliefertes Skript. Das Website-Snippet enthält eine öffentliche Scenario ID, keinen privaten API-Schlüssel. Eine optionale CRM Action benötigt einen geeigneten Endpunkt und dessen Authentifizierung; bewahre diese Zugangsdaten in den Action-Einstellungen auf.

Kann ein Website-Chatbot Leads und Angebotsanfragen erfassen?

Ja. Smart Data Gathering fragt während des Gesprächs nach ausgewählten Feldern und speichert sie in der Inbox. Email new leads kann Administratoren des Agenten benachrichtigen, nachdem eine E-Mail-Adresse oder Telefonnummer erfasst wurde. Eine API Action kann die erforderlichen gespeicherten Felder an einen konfigurierten Empfänger senden; ein erfasster Name allein belegt keine vollständige Anfrage.

Kann ein Mensch den Chat übernehmen?

Ja. Konfiguriere Human Handoff mit besetzten Zeiten und einer Nachricht für die Zeit außerhalb. Wähle in der Inbox bei einem nicht zugewiesenen Gespräch Assign to me oder Take over, wenn diese Schaltfläche angezeigt wird, und antworte dem Besucher. Reassign to AI gibt das Gespräch an den Agenten zurück.

Funktioniert das mit WordPress, Shopify, Squarespace, Wix und Webflow?

Für jedes System gibt es einen Installationsweg. Verwende das offizielle WordPress-Plugin, das Shopify-App-Embed nach der Verbindung des Shop-Agenten oder das passende websiteweite Footer-/Body-End-Snippet für einen bestehenden Agenten. Plugin-Berechtigungen und Tarifvoraussetzungen für eigenen Code unterscheiden sich je nach Baukastensystem.

Warum erscheint mein Chatbot nicht auf meiner Website?

Prüfe die veröffentlichte Seite, die korrekte Scenario ID und die Position des Snippets am Ende des Seiten-Bodys. Entferne veraltete doppelte Installationen und vermeide iframe-basierte Blöcke für das schwebende Widget. Wenn es sich öffnet, aber nicht antworten kann, prüfe Widget & Embed access und die verfügbaren AI Credits.

Verlangsamt der Chatbot meine Website?

Der Widget-Loader wird asynchron heruntergeladen, fügt aber dennoch JavaScript und Netzwerkanfragen hinzu. Vergleiche Lade- und Interaktionsleistung vor und nach der Installation auf repräsentativen Seiten und einem Telefon. Asynchrones Laden belegt nicht, dass es keinerlei Leistungsauswirkungen gibt.

Funktioniert der Website-Chatbot auf Telefonen?

Das geöffnete Widget verwendet unter 768 CSS-Pixeln ein Vollbildlayout. Teste Chat-Button, Tastatur, Scrollen und Schließen auf einem Telefon. Lass Auto-open Widget deaktiviert, wenn automatisches Öffnen das Surfen unterbrechen würde.

Kann der Chatbot in den Sprachen meiner Besucher antworten?

Der Agent kann in der Sprache des Besuchers antworten. Die Übersetzung der festen Begrüßung, der Gesprächseinstiege und der Widget-Beschriftungen ist eine separate Einstellung in kostenpflichtigen Tarifen. Teste für jede Sprache, die du unterstützen möchtest, sowohl die Fakten der Antwort als auch die Oberflächentexte.