Instalasi Manual

Panduan ini untuk developer yang ingin memasang widget Glosia langsung ke kode HTML website.

Untuk pengguna WordPress yang ingin memasang widget Glosia tanpa menyentuh kode website secara langsung, lihat Instalasi WordPress.

Langkah 1 — Dapatkan Script Snippet

Buka dashboard → pilih bot Anda → tab Instalasi. Di sana Anda bisa mengkonfigurasi tampilan widget dan menyalin script snippet yang dihasilkan.

Langkah 2 — Tempelkan ke HTML

Mode Bubble (Floating)

Tempelkan snippet sebelum tag penutup </body>:

<script
	async
	src="https://glosia.biz.id/embed/v1/bubble.js"
	data-key="YOUR_WIDGET_KEY"
	data-primary="#0d9488"
	data-background="#f8fafc"
	data-foreground="#0f172a"
	data-surface="#ffffff"
	data-position="right"
></script>

Mode On-Page

Tempelkan snippet di dalam <body> di posisi mana saja tempat widget akan dirender. Widget akan mengisi penuh elemen induknya.

<div style="height: 800px; width: 100%;">
	<script
		async
		src="https://glosia.biz.id/embed/v1/on-page.js"
		data-key="YOUR_WIDGET_KEY"
		data-primary="#0d9488"
		data-background="#f8fafc"
		data-foreground="#0f172a"
		data-surface="#ffffff"
	></script>
</div>

Mode On-Page hanya tersedia untuk paket Plus ke atas.

Referensi Parameter `data-*`

Parameter	Nilai	Default	Keterangan
`data-key`	string	(wajib)	Widget key bot Anda, bisa dilihat di tab Settings & Instalasi
`data-position`	`right` \| `left`	`right`	Posisi bubble (hanya berlaku di mode `bubble`)
`data-primary`	hex color	`#0d9488`	Warna utama widget
`data-background`	hex color	`#f8fafc`	Warna latar belakang widget
`data-foreground`	hex color	`#0f172a`	Warna teks utama widget
`data-surface`	hex color	`#ffffff`	Warna latar elemen permukaan (card, input)
`data-watermark`	`hidden`	(tidak ada)	Sembunyikan watermark Glosia (hanya paket Pro)

Setiap embed bisa memiliki konfigurasi berbeda. Anda bisa memasang beberapa snippet di halaman berbeda dengan warna atau mode yang berbeda — sekalipun semuanya menggunakan data-key yang sama.

Konfigurasi Allowed Domains

Widget hanya akan berfungsi di domain yang sudah Anda tambahkan ke allowlist di tab Setelan bot Anda. Permintaan dari domain yang tidak diizinkan akan ditolak server.

Untuk testing lokal, aktifkan toggle Izinkan Localhost di tab Setelan.

Troubleshooting

Pastikan domain website sudah ditambahkan ke allowlist di Setelan bot
Periksa apakah data-key sudah benar (salin ulang dari tab Instalasi)
Buka browser console — cek apakah ada error jaringan atau CORS

Bot menjawab “Maaf, saya tidak memiliki informasi tersebut” atau sejenisnya

Pastikan ada dokumen pengetahuan dengan status Ready di bot Anda
Pastikan dokumen tersebut dalam kondisi aktif (tidak dinonaktifkan)
Tidak ada dokumen pengetahuan yang relevan untuk pertanyaan yang diajukan
Coba tambahkan atau perbaiki dokumen yang relevan

Kuota habis

Jika kuota chat bulanan habis, widget menampilkan pesan ramah ke pengunjung. Upgrade paket di dashboard untuk menambah kuota.