Cara menambahkan chatbot AI ke WordPress

Cara-cara menambahkan chatbot ke WordPress

Panduan ini menunjukkan cara widget dengan Elfsight AI Chatbot, lalu apa saja yang dibutuhkan untuk membangun chatbot sendiri.

Buat chatbot

1. 1.

   Pilih template dan masukkan URL Anda

   Buka editor, pilih template, dan tempel alamat situs WordPress Anda. Chatbot membaca hingga 200 halaman Anda. Belum punya website? Masukkan detail bisnis Anda secara manual.

2. 2.

   Tambahkan pengetahuan

   Unggah file (PDF, DOCX, PPTX, TXT, JSON, HTML, MD), tulis pasangan tanya-jawab untuk harga dan kebijakan, dan tambahkan blok teks untuk apa pun yang tidak ada di situs.

3. 3.

   Atur agen

   Nama dan gambar, peran, nada (Friendly, Professional, Casual, Direct, atau milik Anda sendiri), panjang jawaban, pesan sambutan dan pertanyaan yang disarankan, serta aturan percakapan tentang apa yang boleh dan tidak boleh dijawabnya.

4. 4.

   Aktifkan skill

   Kumpulkan kontak, kirim pesan tindak lanjut saat pengunjung berhenti merespons, tampilkan tombol aksi, dan tawarkan kontak tim Anda saat agen tidak bisa membantu.

5. 5.

   Sesuaikan dengan tema Anda

   Pilih salah satu dari enam tema, warna aksen, dan font yang mirip dengan tema WordPress Anda.

Selengkapnya tentang setiap langkah di cara menambahkan chatbot AI ke website Anda.

Tambahkan chatbot ke setiap halaman WordPress

Chat mengambang biasanya ditempatkan di setiap halaman. Klik Add to website di editor, salin kodenya, lalu gunakan salah satu cara berikut:

1. 1.

   Plugin header dan footer

   Pasang plugin cuplikan kode seperti WPCode dari Plugins → Add New, buka pengaturan header dan footer-nya, tempel kode ke kotak footer, lalu simpan. Cara paling aman: kode tetap ada setelah tema diperbarui.

2. 2.

   Footer tema blok

   Buka Appearance → Editor → Patterns → Footer, tambahkan blok Custom HTML, tempel kodenya, lalu simpan.

3. 3.

   Area widget tema klasik

   Buka Appearance → Widgets (atau Customize → Widgets), tambahkan widget Custom HTML ke area footer, tempel kodenya, lalu publikasikan.

Agar chat tidak tampil di halaman tertentu — misalnya checkout — gunakan pengaturan visibilitas chatbot, bukan menghapus kodenya.

Tambahkan chatbot ke satu halaman WordPress

1. 1.

   Buka halamannya

   Di WordPress, buka Pages, arahkan kursor ke halaman tersebut, lalu klik Edit.

2. 2.

   Tambahkan blok Custom HTML

   Klik +, cari Custom HTML, dan letakkan di tempat chat harus muncul. Di editor klasik, beralihlah ke tab Text.

3. 3.

   Tempel kode dan perbarui

   Tempel kode chatbot dan klik Update. Chat tersemat tampil di posisi itu; chat mengambang terbuka dari sudut halaman tersebut saja.

Page builder bekerja dengan cara yang sama: widget HTML di Elementor, modul Code di Divi. Lihat chatbot AI untuk Elementor dan chatbot AI untuk WooCommerce untuk toko online.

WordPress.com atau WordPress.org?

Di situs WordPress.org yang di-host sendiri, semua cara di atas bisa dipakai. Di WordPress.com, menambahkan skrip dan plugin membutuhkan paket Business atau lebih tinggi; pada paket di bawahnya, kode akan dihapus atau tampil sebagai teks biasa.

Di mana chatbot sebaiknya tampil di situs Anda

• Halaman tempat orang kebingungan — halaman harga, kontak, produk, dan checkout adalah tempat pertanyaan muncul.

• Kanan bawah adalah posisi standar yang dicari pengunjung; pindahkan ke kiri atau tengah bawah jika menutupi tombol keranjang atau cookie.

• Sapaan dan pertanyaan yang disarankan lebih efektif daripada tombol polos: keduanya memberi tahu pengunjung apa yang bisa dilakukan chat.

• Chat tersemat cocok untuk halaman bantuan atau kontak yang konten utamanya adalah chat.

• Tampilkan atau sembunyikan per halaman dan perangkat di pengaturan chatbot, sehingga satu kode yang sama melayani seluruh situs.

Bangun chatbot sendiri dengan OpenAI API

Jika Anda butuh kontrol penuh, Anda bisa membangun chatbot di atas API model AI. Dibutuhkan empat komponen:

1. 1.

   API key

   Buat di platform developer penyedia dan rahasiakan — jangan pernah menaruhnya di kode halaman.

2. 2.

   Backend

   Skrip server kecil yang menerima pesan pengunjung, memanggil API, dan mengembalikan jawabannya. Skrip ini butuh hosting dan HTTPS.

3. 3.

   Antarmuka chat

   HTML dan JavaScript untuk jendela chat, ditambahkan lewat plugin cuplikan kode atau blok Custom HTML.

4. 4.

   Pengetahuan Anda

   Secara bawaan, model tidak tahu apa pun tentang bisnis Anda; Anda harus memberinya konten Anda dan menjaganya tetap terkini.

Anda juga memelihara semuanya sendiri: batas dan biaya API, perubahan model, keamanan, tata letak seluler. Untuk sebagian besar situs WordPress, widget siap pakai lebih cepat dan lebih murah dijalankan.

Tips chatbot WordPress yang lebih baik

• Latih dengan pertanyaan nyata. Muat 20 pertanyaan teratas beserta jawabannya, harga dan kebijakan terkini, lalu hapus versi yang usang.

• Beri ia gaya bicara. Atur nada dan tambahkan beberapa aturan percakapan agar terdengar seperti brand Anda, bukan bot generik.

• Siapkan cadangan. Tawarkan kontak tim Anda saat agen tidak bisa menjawab atau pengunjung meminta berbicara dengan orang.

• Baca chatnya. Chat dan lead ada di dasbor Anda, dan transkrip bisa dikirim ke email Anda — periksa setiap minggu dan isi kekosongannya.

• Uji di ponsel. Pastikan peluncur tidak menutupi menu atau tombol di layar kecil.

• Perbarui kebijakan privasi Anda. Sebutkan chatbot dan detail kontak yang dikumpulkannya, dan nyatakan di footer chat bahwa jawaban berasal dari AI.

Pemecahan masalah

1. 1.

   Chatbot tidak muncul

   Pastikan kode ada di halaman yang sedang Anda lihat, lalu bersihkan cache plugin caching dan CDN Anda. Plugin optimasi yang menunda atau menggabungkan JavaScript bisa memblokirnya — kecualikan skrip chatbot dari plugin tersebut.

2. 2.

   Kodenya tampil sebagai teks

   Kode ditempel ke blok Paragraph atau tab Visual. Gunakan blok Custom HTML atau tab Text di editor klasik; di WordPress.com, periksa paket Anda.

3. 3.

   Chatbot tampil di halaman yang tidak seharusnya

   Atur aturan halaman di pengaturan visibilitas chatbot, atau pindahkan kode dari footer seluruh situs ke halaman tertentu.

4. 4.

   Jawaban salah atau tidak jelas

   Tambahkan fakta yang kurang sebagai pasangan tanya-jawab atau blok teks, hapus file yang bertentangan, dan perketat aturan percakapan.

Panduan lengkap dengan tangkapan layar: Menambahkan widget Elfsight ke WordPress ↗ · Tidak ingin memasangnya sendiri? Minta pemasangan gratis ↗