Mode On-Page Widget

Mode On-Page Widget adalah cara menyematkan chat langsung sebagai bagian dari layout halaman Anda — bukan sebagai overlay yang mengambang. Widget di-render secara inline di dalam elemen HTML mana pun yang Anda tentukan, dan secara otomatis mengisi 100% lebar dan tinggi container tersebut.

Mode ini eksklusif hanya untuk pengguna dengan paket Plus dan Pro.

Saat Anda menggunakan mode On-Page, embed script (on-page.js) menyuntikkan sebuah <iframe> langsung ke dalam elemen HTML yang menjadi container-nya. Tidak ada tombol launcher, tidak ada overlay — widget langsung tampil sepenuhnya sebagai bagian dari halaman.

Widget akan mengisi penuh ruang yang disediakan oleh container parent-nya. Artinya, Anda yang menentukan ukuran, posisi, dan bentuk widget sepenuhnya melalui CSS biasa di sisi website Anda.

Karakteristik Utama

• Inline & terintegrasi: Widget menjadi bagian dari layout halaman, bukan elemen terpisah yang melayang.
• Mengisi container: Widget secara otomatis menyesuaikan diri dengan ukuran elemen parent-nya — atur width dan height container untuk mengontrol ukuran widget.
• Tidak ada launcher: Widget langsung tampil, tanpa tombol pemicu, dan tanpa tombol tutup.
• Posisi dikontrol oleh Anda: Karena ini elemen HTML biasa, Anda bisa menempatkannya di mana saja — di sidebar, di tengah artikel, atau sebagai konten utama halaman.

Kapan Harus Memilih Mode Ini?

Pilih mode On-Page jika Anda ingin pengalaman yang lebih terintegrasi:

• Halaman dedicated chatbot: Buat satu halaman penuh yang hanya berisi widget chat — seperti halaman “Tanya Kami” atau “Customer Service”.
• Sidebar artikel: Tempatkan widget di samping konten artikel agar pengunjung bisa langsung bertanya tanpa meninggalkan bacaan.
• Section FAQ interaktif: Gantikan halaman FAQ statis dengan asisten AI yang bisa menjawab pertanyaan pengunjung secara langsung.
• Aplikasi multi-panel: Integrasikan chat sebagai salah satu panel di dalam aplikasi web Anda dengan layout yang presisi.

Contoh Snippet

Buat sebuah elemen HTML dengan dimensi yang Anda inginkan, lalu tempelkan script di dalamnya:

<div style="height: 700px; width: 100%; max-width: 800px;">
	<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>

Catatan: Parameter data-position tidak berlaku di mode On-Page karena posisi sepenuhnya dikendalikan oleh layout halaman Anda.