Für Entwickler

React-Komponente für den KI-Chatbot

Fügen Sie einer React-App einen KI-Chatbot hinzu, ohne selbst einen zu bauen: Rendern Sie eine Komponente, trainieren und gestalten Sie den Agenten im Elfsight-Editor. Oder bauen Sie Ihren eigenen – hier der Vergleich beider Wege.
Keine Kreditkarte erforderlich
Code ansehen ↓
React-Komponente für den KI-Chatbot
React
// npm install react-elfsight-widget
import { ElfsightWidget } from "react-elfsight-widget";

export function AiChatbot() {
  return <ElfsightWidget widgetID="YOUR-WIDGET-ID" />;
}

// The component adds Elfsight's platform.js for you —
// and won't add it twice if it's already on the page.

Erstellen Sie Ihren KI-Agenten kostenlos

  1. 1. Website eingeben
  2. 2. Agenten gestalten
  3. 3. Zur Website hinzufügen
Selbst bauen oder einbetten

Einen KI-Chatbot in React selbst bauen

Ein KI-Chatbot ist mehr als ein Chatfenster und ein Aufruf einer Modell-API. Das gehört dazu, ihn gut zu betreiben – und das können Sie sich sparen.

Was Sie bauen und am Laufen halten müssten

Ein Modell und seine Rechnung

Ein Modell auswählen, Rate Limits handhaben und zusehen, wie die Token-Kosten mit dem Traffic steigen.

Ihre Inhalte als Antworten

Die Website crawlen, aufteilen und einbetten und den Index synchron halten, wenn sich Seiten ändern.

Die Chat-Oberfläche

Sprechblasen, gestreamte Antworten, Tippanzeige, mobiles Layout und Barrierefreiheit auf jeder Seite.

Gesprächsgedächtnis

Den Verlauf jedes Besuchers speichern und den passenden Kontext im Rahmen des Token-Budgets zurückspielen.

Leitplanken

Antworten beim Thema halten, erfundene Fakten vermeiden und festlegen, was er niemals sagen darf.

Leads und Übergabe

Formulare im Chat, Einwilligung und die Weitergabe der richtigen Gespräche an eine Person.

Protokolle und Analysen

Chats speichern, per E-Mail an das Team senden und sehen, wonach Besucher fragen.

Wartung

Modell-Updates, Prompt-Feinschliff, Sicherheitsfixes – und jemand in Bereitschaft, wenn etwas ausfällt.

Mit Elfsight: eine Komponente

Erstellen und trainieren Sie den Agenten im Elfsight-Editor und rendern Sie dann eine Komponente. Antworten, Leads und Einstellungen liegen in Ihrem Dashboard – zum Ändern ist kein erneutes Deployment nötig.
React
<AiChatbot />

  • Lernt automatisch von Ihrer Website

  • Lead-Formulare und Übergabe an Menschen inklusive

  • Chatverlauf, Protokolle und Analysen

  • Schwebend oder eingebettet, im Editor gestaltet

  • Kostenloser Tarif, keine Kreditkarte

Integration

Den KI-Chatbot zu React hinzufügen

Die Komponente

Elfsight-Hilfecenter

  • Offizielle Komponente. react-elfsight-widget von npm – dieselbe Komponente, die der Elfsight-Support für React-Apps empfiehlt.

  • Schwebend oder eingebettet. Ein schwebender Chat kommt einmal in Ihre Root-Komponente und erscheint auf jeder Seite; ein eingebetteter dorthin, wo Sie ihn rendern.

  • Vite, CRA, Gatsby, Remix. Eine normale React-Komponente mit einer Prop: widgetID.

React
// npm install react-elfsight-widget
import { ElfsightWidget } from "react-elfsight-widget";

export function AiChatbot() {
  return <ElfsightWidget widgetID="YOUR-WIDGET-ID" />;
}

// The component adds Elfsight's platform.js for you —
// and won't add it twice if it's already on the page.
Sofort einsatzbereit

Was der Agent ohne Ihren Code leistet

Baut sich aus Ihrer Website auf

Durchsucht Ihre Website, um Ihr Geschäft, Ihre Produkte, Leistungen und Inhalte zu verstehen, und macht daraus automatisch einen KI-Agenten.

Erstellt eine Wissensdatenbank

Verwandelt Ihre Website-Inhalte automatisch in präzise KI-Antworten.

Formt eine Persönlichkeit

Erstellt Namen, Icon, Rolle und Tonfall passend zu Ihrem Geschäft.

Bereitet den ersten Kontakt vor

Erzeugt Begrüßungsnachrichten und Schnellantworten, die auf Ihre Besucher und Geschäftsziele zugeschnitten sind.

Stattet ihn mit den richtigen Skills aus

Fügt automatisch Lead-Erfassung, Aktionsbuttons und weitere Fähigkeiten passend zu Ihrem Geschäft hinzu.

Lernt aus Gesprächen

Erkennt fehlendes Wissen und hilft, künftige Gespräche mit der Zeit zu verbessern.
Vergleich

Elfsight AI Chatbot oder Eigenbau auf einer Modell-API in React

Funktion
Elfsight AI Chatbot
Ihr eigener Bau
Zeit bis zum Start
Minuten: eine Komponente
Wochen an Entwicklungsarbeit
Wissen
Automatisch aus Ihrer Website aufgebaut
Selbst crawlen, einbetten und synchron halten
Chat-Oberfläche
Fertig, im Editor gestaltet
Bauen, testen und pflegen
Leads und Übergabe
Lead-Formulare und Übergabe an Menschen inklusive
Formulare, Einwilligung und Routing selbst bauen
Protokolle und Analysen
Dashboard, E-Mail-Protokolle und Berichte
Speicherung und Berichte selbst bauen
Kosten
Ein Tarif, mit einem kostenlosen zum Start
Modell-Token, Hosting und die Zeit Ihres Teams
Wartung
Elfsight hält es am Laufen
Ihr Team

Zeit bis zum Start

AI Chatbot

Minuten: eine Komponente

Ihr eigener Bau

Wochen an Entwicklungsarbeit

Wissen

AI Chatbot

Automatisch aus Ihrer Website aufgebaut

Ihr eigener Bau

Selbst crawlen, einbetten und synchron halten

Chat-Oberfläche

AI Chatbot

Fertig, im Editor gestaltet

Ihr eigener Bau

Bauen, testen und pflegen

Leads und Übergabe

AI Chatbot

Lead-Formulare und Übergabe an Menschen inklusive

Ihr eigener Bau

Formulare, Einwilligung und Routing selbst bauen

Protokolle und Analysen

AI Chatbot

Dashboard, E-Mail-Protokolle und Berichte

Ihr eigener Bau

Speicherung und Berichte selbst bauen

Kosten

AI Chatbot

Ein Tarif, mit einem kostenlosen zum Start

Ihr eigener Bau

Modell-Token, Hosting und die Zeit Ihres Teams

Wartung

AI Chatbot

Elfsight hält es am Laufen

Ihr eigener Bau

Ihr Team

FAQ