IFRAME Integration Guide

Introduction

Selain melalui API, Raga Chat menyediakan cara sederhana untuk mengintegrasikan chatbot langsung ke website Anda menggunakan IFRAME.

Dengan metode ini, Anda dapat menampilkan chatbot tanpa perlu implementasi backend tambahan.

Screenshot

Halaman Chat

Forbidden

IFRAME Example

Berikut adalah contoh implementasi dasar IFRAME:

<iframe 
  width="100%" 
  style="height: 50vh;" 
  src="https://raga.tlab.co.id/chat/iframe?workspace=f1d54cf9-40ee-41d4-9746-c9c8d6b3ccf3&key=016fb27c27222345a44c482c5f253e105cbc4098718686237b7a5654bd6a0c55" 
  frameborder="0">
</iframe>

Required Parameters

Parameter	Tipe	Deskripsi
workspace	String	ID Workspace yang diberikan oleh Raga. Wajib diisi.
key	String	App Key unik yang diberikan oleh Raga. Wajib diisi.

Notes:

• Parameter dikirim sebagai bagian dari query string di URL IFRAME.
• Jika parameter tidak valid atau kosong, chatbot tidak akan muncul di halaman Anda.

Example (Dengan Parameter):

<iframe 
  width="100%" 
  style="height: 50vh;" 
  src="https://raga.tlab.co.id/chat/iframe?workspace=YOUR_WORKSPACE_ID&key=YOUR_APP_KEY" 
  frameborder="0">
</iframe>

Gantilah:

• YOUR_WORKSPACE_ID dengan ID workspace Anda.
• YOUR_APP_KEY dengan app key yang valid dari admin Raga.

IFRAME Styling Tips

Properti	Contoh	Keterangan
width	100%	Menyesuaikan lebar IFRAME dengan parent container.
height	50vh	Menyesuaikan tinggi IFRAME dengan 50% tinggi viewport.
frameborder	0	Menghilangkan border default browser.

Anda dapat mengatur tinggi/lebar sesuai kebutuhan aplikasi Anda, contoh:

<iframe 
  width="400px" 
  height="600px" 
  src="https://raga.tlab.co.id/chat/iframe?workspace=YOUR_WORKSPACE_ID&key=YOUR_APP_KEY" 
  frameborder="0">
</iframe>

Important Notes

• Pastikan domain Anda telah didaftarkan/whitelist oleh admin Raga jika dibutuhkan.
• Parameter workspace dan key wajib valid, jika tidak, chatbot tidak akan ditampilkan.
• IFRAME ini hanya untuk tampilan chatbot, tidak mengembalikan event JavaScript ke parent page.

Troubleshooting

Masalah	Penyebab Kemungkinan	Solusi
Chatbot tidak muncul	Parameter workspace atau key salah / kosong	Periksa kembali parameter URL Anda
IFRAME tidak responsive	CSS width atau height tidak sesuai	Gunakan width: 100% dan height: auto atau vh
403 / 404 error di IFRAME	Domain belum terdaftar (whitelist) atau URL salah	Hubungi admin Raga untuk whitelist domain

Support

Untuk mendapatkan workspace dan key, atau pertanyaan teknis lainnya, silakan hubungi admin Raga.