IFRAME Integration Guide

Introduction

In addition to API integration, RAGA Chat provides a simple way to embed the chatbot directly into your website using IFRAME.

With this method, you can display the chatbot without implementing any additional backend logic.

Screenshots

Chat Page

Forbidden

IFRAME Example

Below is a basic example of an IFRAME implementation:

<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	Type	Description
workspace	String	Workspace ID provided by RAGA. Required.
key	String	App Key issued by RAGA. Required.

Notes

• Parameters are passed as part of the query string in the IFRAME URL.
• If any parameter is missing or invalid, the chatbot will not be displayed.

Example (With Parameters)

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

Replace:

• YOUR_WORKSPACE_ID with your workspace ID
• YOUR_APP_KEY with a valid app key provided by the RAGA administrator

IFRAME Styling Tips

Property	Example	Description
width	100%	Adjusts IFRAME width to match the parent container.
height	50vh	Sets IFRAME height to 50% of the viewport height.
frameborder	0	Removes the default browser border.

You can customize the size based on your application’s needs, for example:

<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

• Ensure your domain is registered/whitelisted by the RAGA administrator if required.
• Both workspace and key parameters must be valid, otherwise the chatbot will not appear.
• This IFRAME is for chatbot display only and does not expose JavaScript events to the parent page.

Troubleshooting

Issue	Possible Cause	Solution
Chatbot not displayed	Invalid or missing workspace or key	Recheck the URL parameters
IFRAME not responsive	Incorrect CSS width or height settings	Use width: 100% and height: auto or vh
403 / 404 error in IFRAME	Domain not whitelisted or incorrect URL	Contact the RAGA administrator to whitelist the domain

Support

To obtain a workspace and key, or for any technical questions, please contact the RAGA administrator.