Ein Modell und seine Rechnung
Ein Modell auswählen, Rate Limits handhaben und zusehen, wie die Token-Kosten mit dem Traffic steigen.
Für Entwickler
Angular-Komponente für den KI-Chatbot
Fügen Sie einer Angular-App einen KI-Chatbot hinzu – mit einer Standalone-Komponente, die das Elfsight-Skript einmal lädt. Trainieren und gestalten Sie den Agenten im Elfsight-Editor.
Angular
// ai-chatbot.component.ts
import { Component, Input, OnInit, Inject } from "@angular/core";
import { DOCUMENT } from "@angular/common";
const SRC = "https://elfsightcdn.com/platform.js";
@Component({
selector: "app-ai-chatbot",
standalone: true,
template: `<div [class]="'elfsight-app-' + id" data-elfsight-app-lazy></div>`,
})
export class AiChatbotComponent implements OnInit {
@Input({ required: true }) id!: string;
constructor(@Inject(DOCUMENT) private doc: Document) {}
ngOnInit() {
if (this.doc.querySelector(`script[src="${SRC}"]`)) return;
const s = this.doc.createElement("script");
s.src = SRC;
s.async = true;
this.doc.body.appendChild(s);
}
}Erstellen Sie Ihren KI-Agenten kostenlos
- 1. Website eingeben
- 2. Agenten gestalten
- 3. Zur Website hinzufügen
Selbst bauen oder einbetten
Einen KI-Chatbot in Angular 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
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.
Angular
<app-ai-chatbot id="YOUR-ID" />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 Angular hinzufügen
Die Komponente
Standalone-Komponente. Importieren Sie sie dort, wo Sie sie brauchen – kein Modul zu registrieren.
SSR-sicher. Sie greift über das DOCUMENT-Token von Angular auf das Dokument zu.
Schwebend oder eingebettet. Setzen Sie einen schwebenden Chat einmal in die App-Komponente; einen eingebetteten dorthin, wo er erscheinen soll.
Angular
// ai-chatbot.component.ts
import { Component, Input, OnInit, Inject } from "@angular/core";
import { DOCUMENT } from "@angular/common";
const SRC = "https://elfsightcdn.com/platform.js";
@Component({
selector: "app-ai-chatbot",
standalone: true,
template: `<div [class]="'elfsight-app-' + id" data-elfsight-app-lazy></div>`,
})
export class AiChatbotComponent implements OnInit {
@Input({ required: true }) id!: string;
constructor(@Inject(DOCUMENT) private doc: Document) {}
ngOnInit() {
if (this.doc.querySelector(`script[src="${SRC}"]`)) return;
const s = this.doc.createElement("script");
s.src = SRC;
s.async = true;
this.doc.body.appendChild(s);
}
}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 Angular
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