Untuk developer

Komponen chatbot AI untuk Vue

Tambahkan chatbot AI ke aplikasi Vue dengan komponen kecil yang memuat skrip Elfsight satu kali. Latih dan atur tampilan agen di editor Elfsight.
Tanpa kartu kredit
Lihat kodenya ↓
Komponen chatbot AI untuk Vue
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>

Buat agen AI Anda secara gratis

  1. 1. Masukkan website Anda
  2. 2. Bentuk agen Anda
  3. 3. Tambahkan ke website
Bangun atau sematkan

Membangun chatbot AI di Vue sendiri

Chatbot AI lebih dari sekadar jendela chat dan panggilan ke API model. Inilah yang dibutuhkan untuk menjalankannya dengan baik — dan apa yang bisa Anda lewati.

Yang harus Anda bangun dan jalankan

Model dan tagihannya

Pilih model, tangani batas laju, dan awasi biaya token yang naik seiring trafik.

Konten Anda sebagai jawaban

Crawl situs, pecah dan embed, lalu jaga indeks tetap sinkron saat halaman berubah.

UI chat

Gelembung chat, balasan streaming, titik pengetikan, tata letak mobile, dan aksesibilitas di setiap halaman.

Memori percakapan

Simpan utas setiap pengunjung dan kembalikan konteks yang tepat dalam batas token.

Guardrail

Jaga jawaban tetap sesuai topik, hindari fakta karangan, dan tentukan apa yang tidak boleh dikatakannya.

Leads dan pengalihan

Formulir di chat, persetujuan, dan meneruskan percakapan yang tepat kepada manusia.

Transkrip dan analitik

Simpan chat, kirim lewat email ke tim, dan lihat apa yang ditanyakan pengunjung.

Pemeliharaan

Pembaruan model, penyetelan prompt, perbaikan keamanan — dan seseorang siaga saat terjadi masalah.

Dengan Elfsight: satu komponen

Buat dan latih agen di editor Elfsight, lalu render satu komponen. Jawaban, leads, dan pengaturan ada di dashboard Anda — tanpa deploy ulang untuk mengubahnya.
Vue
<AiChatbot id="YOUR-ID" />

  • Belajar dari website Anda secara otomatis

  • Formulir lead dan pengalihan ke manusia sudah tersedia

  • Riwayat chat, transkrip, dan analitik

  • Mengambang atau tertanam, ditata di editor

  • Paket gratis, tanpa kartu kredit

Integrasi

Tambahkan AI Chatbot ke Vue

Komponennya

  • Memuat skrip sekali saja. Komponen menambahkan platform.js saat mount pertama dan tidak pernah dua kali.

  • Vue 3 dan Nuxt. Komponen yang sama bekerja di Nuxt — render di sisi klien.

  • Mengambang atau tertanam. Pasang chat mengambang di App.vue sekali saja; yang tertanam di tempat ia harus tampil.

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>
Langsung siap pakai

Yang dilakukan agen tanpa kode dari Anda

Dibuat dari situs web Anda

Memindai situs web Anda untuk memahami bisnis, produk, layanan, dan konten Anda, lalu mengubahnya menjadi agen AI secara otomatis.

Membuat basis pengetahuan

Mengubah konten situs web Anda menjadi jawaban AI yang akurat secara otomatis.

Membentuk kepribadian

Membuat nama, ikon, peran, dan gaya bicara berdasarkan bisnis Anda.

Menyiapkan interaksi pertama

Menghasilkan pesan sambutan dan balasan cepat yang dirancang untuk pengunjung dan tujuan bisnis Anda.

Membekali dengan keahlian yang tepat

Menambahkan pengumpulan lead, tombol aksi, dan kemampuan lain secara otomatis sesuai bisnis Anda.

Belajar dari percakapan

Mendeteksi pengetahuan yang kurang dan membantu meningkatkan percakapan berikutnya dari waktu ke waktu.
Perbandingan

AI Chatbot Elfsight vs membangun dengan API model di Vue

Fitur
Elfsight AI Chatbot
Bangun sendiri
Waktu peluncuran
Hitungan menit: satu komponen
Berminggu-minggu kerja engineering
Pengetahuan
Dibangun otomatis dari website Anda
Crawl, embed, dan sinkronkan sendiri
UI chat
Siap pakai, ditata di editor
Bangun, uji, dan rawat
Leads dan pengalihan
Formulir lead dan pengalihan ke manusia sudah termasuk
Bangun formulir, persetujuan, dan perutean
Transkrip dan analitik
Dashboard, transkrip email, dan laporan
Bangun penyimpanan dan laporan
Biaya
Satu paket, dengan paket gratis untuk memulai
Token model, hosting, dan waktu tim Anda
Pemeliharaan
Elfsight menjaganya tetap berjalan
Tim Anda

Waktu peluncuran

AI Chatbot

Hitungan menit: satu komponen

Bangun sendiri

Berminggu-minggu kerja engineering

Pengetahuan

AI Chatbot

Dibangun otomatis dari website Anda

Bangun sendiri

Crawl, embed, dan sinkronkan sendiri

UI chat

AI Chatbot

Siap pakai, ditata di editor

Bangun sendiri

Bangun, uji, dan rawat

Leads dan pengalihan

AI Chatbot

Formulir lead dan pengalihan ke manusia sudah termasuk

Bangun sendiri

Bangun formulir, persetujuan, dan perutean

Transkrip dan analitik

AI Chatbot

Dashboard, transkrip email, dan laporan

Bangun sendiri

Bangun penyimpanan dan laporan

Biaya

AI Chatbot

Satu paket, dengan paket gratis untuk memulai

Bangun sendiri

Token model, hosting, dan waktu tim Anda

Pemeliharaan

AI Chatbot

Elfsight menjaganya tetap berjalan

Bangun sendiri

Tim Anda

FAQ