KI-Chatbot für eine Website erstellen

Chatbot für Ihre Website in 6 Schritten erstellen

Mit einem No-Code-Baukasten wie Elfsight AI Chatbot richten Sie alles in einem visuellen Editor ein. Sie brauchen kein HTML, CSS oder JavaScript – der einzige Code ist das Snippet, das Sie am Ende in Ihre Website einfügen.

1. 1.

   Agent aus Ihrer Website erstellen

   Geben Sie die Adresse Ihrer Website ein. Der Agent liest Ihre Seiten und liefert eine Wissensdatenbank, einen Namen, eine Rolle und einen Ton, eine Begrüßung und Skills. Sie können ihn auch von Hand erstellen.

2. 2.

   Prüfen, was er weiß

   Fügen Sie unter Wissen Webseiten hinzu oder entfernen Sie sie, laden Sie Dateien hoch und ergänzen Sie Q&A-Paare, Textblöcke und Ihre Unternehmensinfos.

3. 3.

   Festlegen, wie er spricht

   Legen Sie unter Agent Rolle, Ton und Antwortlänge fest und schreiben Sie Regeln dafür, was er tun und lassen soll.

4. 4.

   Skills hinzufügen

   Aktivieren Sie unter Skills das Sammeln von Kontakten, eine Folgenachricht, Aktionsschaltflächen (WhatsApp, E-Mail, Anruf …) und eine Karte, über die Besucher eine Person aus Ihrem Team kontaktieren können.

5. 5.

   An Ihre Website anpassen

   Wählen Sie unter Einstellungen eine schwebende Chatblase oder einen eingebetteten Chat, ein Theme und Farben, die Position und wann sich der Chat öffnet.

6. 6.

   Zu Ihrer Website hinzufügen

   Kopieren Sie den Installationscode und fügen Sie ihn in Ihre Website ein: in einen Custom-HTML-Block, ein Feld für Code-Injection oder Ihre Seitenvorlage. Jede Plattform hat eigene Schritte – siehe KI-Chatbot zur Website hinzufügen.

Festlegen, wofür der Chatbot da ist

Ein Chatbot, der Support-Fragen beantwortet, einer, der Kunden bei der Auswahl hilft, und einer, der Leads qualifiziert, entstehen im selben Editor – doch jeder braucht andere Inhalte, Anweisungen und Einstiegsfragen. Wählen Sie vor dem Start eine Hauptaufgabe.

Weitere Ideen mit Beispielgesprächen: Einsatzbereiche für KI-Chatbots.

Chatbot mit Ihren eigenen Inhalten trainieren

Ein Chatbot antwortet vage, wenn sein Wissen dünn ist. Geben Sie ihm die Inhalte, nach denen Besucher tatsächlich fragen:

• Webseiten – bis zu 200 Seiten Ihrer Website: Produkte, Preise, FAQ, Kontakt. Lassen Sie Blogartikel und Teamprofile weg, die die Antworten verwässern.

• Dateien – PDF, TXT, JSON, DOCX, PPTX, HTML oder MD mit jeweils bis zu 100 MB: Kataloge, Handbücher, Preislisten.

• Q&A-Paare – exakte Antworten auf die wichtigsten Fragen: Preise, Bedingungen, Garantien.

• Textblöcke – Richtlinien und Ankündigungen, die auf keiner Seite stehen, in einfachen Worten.

• Unternehmensinfos – Öffnungszeiten, Adresse, Telefon.

Kennt der Agent eine Antwort nicht, fragt er Sie und lernt aus Ihrer Antwort; seine Wissenslücken werden Ihnen zur Prüfung aufgelistet. Mehr dazu unter Wissensdatenbank für einen Chatbot erstellen.

Anweisungen schreiben, die seine Antworten prägen

Anweisungen legen fest, wer der Chatbot ist und wie er sich verhält. Decken Sie drei Dinge ab:

1. 1.

   Rolle

   „Du bist der Support-Assistent von [Unternehmen]. Du hilfst Besuchern bei Bestellungen, Lieferung und Rückgaben.“

2. 2.

   Stil

   Wählen Sie einen Ton – Freundlich, Professionell, Locker, Direkt oder einen eigenen – und eine Antwortlänge. Beschreiben Sie den Ton mit einem Beispiel, nicht nur mit einem Adjektiv: „Verwende kurze Sätze, sprich Besucher mit Namen an, vermeide Floskeln wie ‚Leider müssen wir Ihnen mitteilen‘.“

3. 3.

   Grenzen

   Sagen Sie, was er nicht tun darf: „Erfinde keine Produkte, Preise oder Richtlinien. Nenne keine Preise für individuelle Projekte. Steht die Antwort nicht in deinem Wissen, biete an, den Besucher mit unserem Team zu verbinden.“

Sie können bis zu 100 Gesprächsregeln hinzufügen. Beispiele finden Sie unter KI-Chatbot trainieren.

Besucher zum Gespräch bewegen

Die Begrüßung gibt den Ton vor; vorgeschlagene Fragen zeigen, was der Chatbot kann und wo man anfangen kann. „Hallo! Fragen Sie mich alles zu unseren Produkten“ mit „Bestellung verfolgen“ und „Rückgaberichtlinie“ funktioniert weit besser als ein bloßes „Hallo“.

• Wählen Sie, wie der Chat startet: nur mit der Schaltfläche, mit einer Begrüßung samt vorgeschlagenen Fragen oder automatisch geöffnet auf dem Desktop.

• Zeigen Sie die Begrüßung mit kurzer Verzögerung, damit Besucher sich zuerst die Seite ansehen können.

• Geben Sie dem Agenten einen Namen, ein Bild und einen Untertitel, damit er wie ein Teil Ihrer Marke wirkt.

• Ergänzen Sie im Footer einen Hinweis, dass die Antworten KI-generiert sind und Fehler enthalten können.

• Blenden Sie den Chat nach Seiten-URL und Gerät ein oder aus und prüfen Sie auf dem Smartphone, dass er keine Schaltflächen verdeckt.

Leads sammeln und an eine Person übergeben

• Kontakte sammeln – fragen Sie nach der ersten Antwort nach Name, Telefon oder E-Mail (gut für Support: Besucher teilen mehr, wenn ihnen schon geholfen wurde), vor dem Chat oder als Pflichtangabe (gut für Leadgenerierung).

• Folgenachricht – holt einen Besucher zurück, der nicht mehr antwortet.

• Mensch kontaktieren – eine Karte mit Foto, Name und Schaltflächen eines Teammitglieds, angezeigt, wenn ein Besucher nach einer Person fragt, der Agent nicht antworten kann, ein Schlüsselwort fällt oder ein Besucher eine Antwort negativ bewertet.

• Chats per E-Mail – das Protokoll jedes Chats und die Lead-Daten lassen sich an Ihren Posteingang senden; alle Chats und Leads finden Sie außerdem in Ihrem Dashboard.

Mehr zur Übergabe: Übergabe an Mitarbeiter.

Chatbot mit ChatGPT erstellen (mit Code)

Wenn Sie volle Kontrolle über Modell, Oberfläche und Daten brauchen, bauen Sie den Chatbot selbst auf der OpenAI-API – der API hinter ChatGPT. Sie benötigen einen Entwickler und einen Server.

1. 1.

   API-Schlüssel besorgen

   Erstellen Sie ein Konto auf der OpenAI-Plattform, hinterlegen Sie eine Zahlungsmethode (die API wird nach Nutzung abgerechnet) und erstellen Sie einen API-Schlüssel.

2. 2.

   Backend einrichten

   Nutzen Sie Python oder Node.js auf einem Server. Speichern Sie den Schlüssel in einer Umgebungsvariable auf dem Server – niemals im JavaScript Ihrer Seite, wo ihn jeder lesen kann.

3. 3.

   Nachrichten an das Modell senden

   Ihr Backend sendet das Gespräch mit einer Systemnachricht (Rolle und Regeln des Bots) und gibt die Antwort zurück.

4. 4.

   Chatfenster bauen

   Erstellen Sie eine Chatbox in HTML, CSS und JavaScript, die die Nachricht des Besuchers an Ihr Backend sendet und die Antwort anzeigt.

5. 5.

   Ihre Inhalte bereitstellen

   Das Modell kennt Ihr Unternehmen nicht. Schreiben Sie zentrale Fakten in die Systemnachricht oder durchsuchen Sie Ihre Dokumente und senden Sie die passenden Teile mit jeder Frage mit (Retrieval).

6. 6.

   Testen und warten

   Probieren Sie ungewöhnliche und unvollständige Fragen aus, behandeln Sie Fehler und Rate Limits, speichern Sie Gespräche und halten Sie mit API-Änderungen Schritt.

Ein minimaler Backend-Aufruf in Python:

from openai import OpenAI

client = OpenAI()  # liest OPENAI_API_KEY aus der Umgebung

def reply(history):
    response = client.chat.completions.create(
        model="your-model",
        messages=[{"role": "system", "content": "Du bist der Support-Assistent von Acme. Antworte nur zu Acme."}] + history,
    )
    return response.choices[0].message.content

Selbst bauen oder einen No-Code-Chatbot nutzen?

Bauen Sie selbst, wenn der Chatbot Teil Ihres Produkts ist oder tiefen Zugriff auf Ihre Systeme braucht. Um Besuchern zu antworten, Leads zu gewinnen und Kunden auf einer Website zu unterstützen, kommen Sie mit einem No-Code-Chatbot schneller ans Ziel.

Testen, starten und laufend verbessern

1. 1.

   Vor dem Teilen testen

   Stellen Sie die Fragen, die echte Besucher stellen, auch vage und themenfremde, und prüfen Sie den Weg zu einer Person.

2. 2.

   Die Chats lesen

   Suchen Sie nach Fragen, die er schlecht oder gar nicht beantwortet hat, und ergänzen Sie sie als Q&A-Paare oder Text.

3. 3.

   Wissen aktuell halten

   Alte Aktionen, Preise und Richtlinien führen zu falschen Antworten. Prüfen Sie das Wissen jeden Monat.

4. 4.

   Den Einstieg optimieren

   Tauschen Sie vorgeschlagene Fragen aus und vergleichen Sie, welche Besucher antippen: „Hilf mir bei der Auswahl“ schlägt oft „Produktempfehlungen“.