Skip to content

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

Halaman Chat

Forbidden

Forbidden Access

IFRAME Example

Berikut adalah contoh implementasi dasar IFRAME:

html
<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

ParameterTipeDeskripsi
workspaceStringID Workspace yang diberikan oleh Raga. Wajib diisi.
keyStringApp 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):

html
<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

PropertiContohKeterangan
width100%Menyesuaikan lebar IFRAME dengan parent container.
height50vhMenyesuaikan tinggi IFRAME dengan 50% tinggi viewport.
frameborder0Menghilangkan border default browser.

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

html
<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

MasalahPenyebab KemungkinanSolusi
Chatbot tidak munculParameter workspace atau key salah / kosongPeriksa kembali parameter URL Anda
IFRAME tidak responsiveCSS width atau height tidak sesuaiGunakan width: 100% dan height: auto atau vh
403 / 404 error di IFRAMEDomain belum terdaftar (whitelist) atau URL salahHubungi admin Raga untuk whitelist domain

Support

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