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
Vue-Komponente für den KI-Chatbot
Fügen Sie einer Vue-App einen KI-Chatbot hinzu – mit einer kleinen Komponente, die das Elfsight-Skript einmal lädt. Trainieren und gestalten Sie den Agenten im Elfsight-Editor.
Vue
<!-- AiChatbot.vue -->
<script setup lang="ts">
import { onMounted } from "vue";
const props = defineProps<{ id: string }>();
const SRC = "https://elfsightcdn.com/platform.js";
onMounted(() => {
if (document.querySelector(`script[src="${SRC}"]`)) return;
const s = document.createElement("script");
s.src = SRC;
s.async = true;
document.body.appendChild(s);
});
</script>
<template>
<div :class="`elfsight-app-${props.id}`" data-elfsight-app-lazy />
</template>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 Vue 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.
Vue
<AiChatbot 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 Vue hinzufügen
Die Komponente
Lädt das Skript einmal. Die Komponente fügt platform.js beim ersten Mounten hinzu – nie doppelt.
Vue 3 und Nuxt. Dieselbe Komponente funktioniert in Nuxt – rendern Sie sie auf dem Client.
Schwebend oder eingebettet. Setzen Sie einen schwebenden Chat einmal in App.vue; einen eingebetteten dorthin, wo er erscheinen soll.
Vue
<!-- AiChatbot.vue -->
<script setup lang="ts">
import { onMounted } from "vue";
const props = defineProps<{ id: string }>();
const SRC = "https://elfsightcdn.com/platform.js";
onMounted(() => {
if (document.querySelector(`script[src="${SRC}"]`)) return;
const s = document.createElement("script");
s.src = SRC;
s.async = true;
document.body.appendChild(s);
});
</script>
<template>
<div :class="`elfsight-app-${props.id}`" data-elfsight-app-lazy />
</template>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 Vue
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