Chat & Decide widget integration
· 3 min read
Add a floating chat bubble to your website with a single <script> tag.
Quick Start
Paste this snippet before the closing </body> tag on any page:
<script
src="https://understandislam.ai/embed-widget.js"
data-lang="ar" // your desired language
data-partner-id="understandislam"
></script>
That's it. A chat bubble will appear in the bottom-right corner of your page.
Configuration
All options are set via data-* attributes on the script tag.
| Attribute | Required | Default | Description |
|---|---|---|---|
data-partner-id | ✅ | — | Your partner ID (provided by Midade team) |
data-lang | ar | Language code: ar, en, fr, es, de, .. | |
data-color | #1B8A6B | Accent color for the bubble and chat header (any CSS hex color) | |
data-position | bottom-right | Bubble position: bottom-right or bottom-left | |
data-auto-open | false | Set to true to open the chat automatically on page load |
Example with all options
<script
src="https://theislam.chat/embed-widget.js"
data-lang="en"
data-partner-id="usool-center"
data-color="#1B8A6B"
data-position="bottom-right"
data-auto-open="false"
></script>
Language Support
Language Support
Set data-lang to any of the supported language codes:
| Code | Language |
|---|---|
ar | Arabic (RTL) |
zh | Chinese |
de | Deutsch |
en | English |
fil | Filipino |
fr | French |
hi | Hindi |
ja | Japanese |
km | Khmer |
ko | Korean |
mg | Malagasy |
pt | Portuguese |
ru | Russian |
es | Spanish |
sw | Swahili |
RTL languages (Arabic, etc.) automatically flip the bubble to the left side and render the chat UI right-to-left.
Behavior
- Bubble — A circular button fixed to the corner of the page. Click to open/close the chat.
- Unread badge — A red dot appears on the bubble when the AI replies while the chat is closed.
- Session — The chat session is saved in the visitor's browser (localStorage) so the conversation persists across page refreshes.
- Isolation — The widget runs inside an iframe and never affects your page's styles or scripts.
- Mobile — On screens narrower than 768px the chat opens full-screen automatically.
Troubleshooting
Bubble doesn't appear
- Check that the script tag is inside
<body>, not<head>. - Open the browser console and look for errors.
Chat opens but messages don't send
- Make sure your
data-partner-idis correct. - Check that your domain is allowlisted — contact the theislam.chat team.
Widget conflicts with my page layout
- The bubble uses
z-index: 9999. If your page has elements above that, increase the widget's z-index by contacting us.
Getting a Partner ID
Contact the Midade team at omar.mashour@midade.ai to get your partner-id and have your domain allowlisted.