Untuk developer

Chatbot AI untuk Next.js

Tambahkan chatbot AI ke situs Next.js dengan satu client component — App Router atau Pages Router, statis atau di-render server. Latih dan atur tampilan agen di editor Elfsight.
Tanpa kartu kredit
Lihat kodenya ↓
Chatbot AI untuk Next.js
Next.js
// npm install react-elfsight-widget
// components/AiChatbot.tsx
"use client";
import { ElfsightWidget } from "react-elfsight-widget";

export function AiChatbot({ id }: { id: string }) {
  return <ElfsightWidget widgetID={id} />;
}

// app/layout.tsx — once, for every page
// <AiChatbot id="YOUR-WIDGET-ID" />

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 Next.js 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.
Next.js
<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 Next.js

  • Client component. Tandai wrapper dengan "use client" dan render dari Server Component mana pun.

  • Sekali di root layout. Chat mengambang di app/layout.tsx tampil di setiap halaman dan tetap ada saat navigasi sisi klien.

  • Ramah static export. Tidak ada yang berjalan di server Anda; berfungsi dengan output: "export" dan di host mana pun.

Next.js
// npm install react-elfsight-widget
// components/AiChatbot.tsx
"use client";
import { ElfsightWidget } from "react-elfsight-widget";

export function AiChatbot({ id }: { id: string }) {
  return <ElfsightWidget widgetID={id} />;
}

// app/layout.tsx — once, for every page
// <AiChatbot id="YOUR-WIDGET-ID" />
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 Next.js

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