Cara Menambahkan Chatbot AI Asyntai ke HubSpot

Panduan langkah demi langkah untuk situs web CMS HubSpot

Platform:

Langkah 1: Dapatkan Kode Embed Anda

Pertama, buka Dasbor Asyntai dan gulir ke bawah ke bagian "Kode Embed". Salin kode embed unik Anda yang akan terlihat seperti ini:

<script async src="https://asyntai.com/static/js/chat-widget.js" data-asyntai-id="YOUR_WIDGET_ID"></script>

Catatan: Kode di atas hanya contoh. Anda harus menyalin kode embed unik Anda sendiri dari Dasbor karena berisi ID widget personal Anda.

Langkah 2: Menggunakan Pengaturan Situs (Disarankan)

Cara termudah untuk menambahkan chatbot ke semua halaman di situs web HubSpot Anda:

Masuk ke akun HubSpot Anda
Klik ikon pengaturan (roda gigi) di bilah navigasi utama
Di sidebar kiri, navigasi ke Website > Pages
Gulir ke bawah ke bagian "Site footer HTML"
Tempelkan kode embed Asyntai Anda di area teks
Klik "Save" di bagian bawah halaman

Tips: Menambahkan skrip ke Site footer HTML memastikan skrip dimuat di semua halaman setelah konten utama, yang merupakan penempatan yang disarankan untuk widget obrolan.

Alternatif: Instalasi Khusus Halaman

Jika Anda hanya ingin chatbot di halaman tertentu:

Buka Marketing > Website > Website Pages (atau Landing Pages)
Klik pada halaman yang ingin Anda edit
Di editor halaman, klik Settings di bagian atas
Gulir ke bawah ke "Advanced options"
Temukan bagian "Footer HTML"
Tempel kode embed Asyntai Anda
Klik "Apply changes" dan publikasikan halaman Anda

Catatan: Kode khusus halaman hanya akan dimuat di halaman tertentu tersebut. Gunakan metode ini jika Anda ingin chatbot di halaman terpilih, bukan di seluruh situs Anda.

Alternatif: Menggunakan Design Manager

Untuk kontrol lebih, Anda dapat menambahkan file JavaScript melalui Design Manager:

Buka Marketing > Files and Templates > Design Tools
Di sidebar kiri, klik File > New file
Pilih "JavaScript" dari dropdown
Beri nama file Anda (misalnya, asyntai-chatbot.js)
Tambahkan kode berikut:
(function() { var script = document.createElement('script'); script.async = true; script.src = 'https://asyntai.com/static/js/chat-widget.js'; script.setAttribute('data-asyntai-id', 'YOUR_WIDGET_ID'); document.body.appendChild(script); })();
Ganti YOUR_WIDGET_ID dengan ID widget Anda yang sebenarnya
Klik "Publish changes"
Sertakan file ini di template Anda menggunakan require_js atau tautkan di pengaturan situs Anda

Alternatif: Menggunakan Modul Kustom

Buat modul yang dapat digunakan kembali untuk chatbot:

Buka Marketing > Files and Templates > Design Tools
Klik File > New file > Module
Beri nama "Asyntai Chatbot"
Di file module.html, tempelkan kode embed Anda
Publikasikan modul
Tambahkan modul ke bagian footer template Anda, atau seret ke halaman individual

Tips: Menggunakan modul kustom memungkinkan Anda dengan mudah menambahkan atau menghapus chatbot dari template atau halaman tertentu melalui editor seret dan lepas.

Langkah 3: Verifikasi Instalasi

Setelah menyimpan perubahan Anda, kunjungi situs web HubSpot Anda di tab browser baru atau jendela penyamaran. Anda akan melihat tombol widget obrolan di pojok kanan bawah. Klik untuk memastikan widget terbuka dan berfungsi dengan benar.

Tidak melihat widget? Pastikan Anda mengklik "Save" atau "Publish" setelah menambahkan kode. HubSpot meng-cache halaman, jadi coba lihat situs Anda di jendela penyamaran atau bersihkan cache browser Anda. Jika Anda menambahkan kode ke halaman tertentu, pastikan halaman tersebut sudah dipublikasikan.

HubSpot CMS Hub Diperlukan: Menambahkan JavaScript kustom memerlukan HubSpot CMS Hub (Starter, Professional, atau Enterprise). Jika Anda menggunakan alat CMS HubSpot gratis, Anda mungkin memiliki opsi terbatas untuk menambahkan skrip kustom.