🤖 Leadrat Chat Widget

Embed an AI-powered real estate chatbot on any website in minutes

✅ This is the production-ready CDN hosted widget. Add it to any website with a single script tag!

⚡ Quick Start

Add this code to your website, just before the closing </body> tag:

<script>
  window.LeadratChatConfig = {
    apiUrl: "https://your-api.com/api/v1/chat/message",
    botName: "Aria",
    botSubtitle: "Real Estate AI",
    primaryColor: "#6C63FF",
    tenantId: "dubait11"
  };
</script>
<script src="https://leadrat-chat-widget.pages.dev/leadrat-chat.js" async></script>

✨ Features

🚀 Zero Configuration

Works out of the box. Just configure your API URL and you're done.

📱 Mobile Ready

Fully responsive design. Works perfectly on phones, tablets, and desktops.

🎨 Customizable

Change bot name, subtitle, colors, and position to match your brand.

🔒 Secure

Runs in an isolated iframe. No conflicts with host page styles or JavaScript.

⚡ Fast

Minified bundle. ~15KB script + 23KB HTML. Loads instantly from global CDN.

🔄 No Dependencies

Pure JavaScript. No jQuery, React, or external libraries required.

⚙️ Configuration Options

Customize the widget behavior with these config properties:

Property	Type	Required	Description
`apiUrl`	string	✅ Yes	Backend API endpoint for chat messages. Must include full path to message endpoint.
`botName`	string	❌ No	Bot display name. Default: "AI Assistant"
`botSubtitle`	string	❌ No	Bot subtitle shown under name. Default: "Powered by Leadrat"
`primaryColor`	hex color	❌ No	Header and button color. Default: "#6C63FF"
`position`	"bottom-right" \| "bottom-left"	❌ No	Widget position on screen. Default: "bottom-right"
`tenantId`	string	❌ No	Multi-tenant identifier. Default: "dubait11"

📚 Integration Examples

React App

Add to your public/index.html:

<script>
  window.LeadratChatConfig = {
    apiUrl: "https://your-api.com/api/v1/chat/message",
    botName: "Aria",
    primaryColor: "#6C63FF"
  };
</script>
<script src="https://leadrat-chat-widget.pages.dev/leadrat-chat.js" async></script>

Plain HTML Website

Add anywhere on your page (typically before closing body tag):

<!DOCTYPE html>
<html>
<body>
  <h1>My Website</h1>
  <p>Welcome to our site...</p>

  <!-- Chat Widget -->
  <script>
    window.LeadratChatConfig = { ... };
  </script>
  <script src="https://leadrat-chat-widget.pages.dev/leadrat-chat.js"></script>
</body>
</html>

WordPress

Add to Theme Editor (Appearance → Theme Editor → footer.php):

<script>
  window.LeadratChatConfig = { ... };
</script>
<script src="https://leadrat-chat-widget.pages.dev/leadrat-chat.js"></script>
<?php wp_footer(); ?>

🔌 API Endpoint Format

The widget sends POST requests to your API endpoint with this format:

POST /api/v1/chat/message
Content-Type: application/json

{
  "message": "User's message",
  "session_id": "unique-session-id",
  "tenant_id": "dubait11",
  "conversation_history": [
    { "role": "user", "content": "Previous message" },
    { "role": "assistant", "content": "Bot response" }
  ]
}

Expected response:

{
  "response": "Bot's text response",
  "intent": "general|lead|property|project",
  "source": "llm|api",
  "data": null,
  "quickReplies": ["Option 1", "Option 2"]
}

🐛 Troubleshooting

Widget doesn't appear

1. Check browser console (F12) for errors

2. Verify apiUrl is set correctly in config

3. Check that LeadratChatConfig is set BEFORE the script tag loads

4. Verify script is loaded from correct CDN URL

Messages don't send

1. Check Network tab (F12) to see if API requests are being made

2. Verify backend API is running and accessible

3. Check backend CORS settings allow requests from your domain

4. Verify API endpoint returns proper JSON response

Widget blocks page content

The widget uses z-index 999999 and is fixed position. If it's blocking important content:

1. Change position to "bottom-left"

2. Or adjust your page layout

Multiple widgets on same page

The widget automatically prevents duplicates. Only one instance will be created even if the script is included multiple times.

📍 CDN Files

All files are hosted on Cloudflare Pages global CDN:

File	URL	Size
Main Widget Script	`leadrat-chat.js`	~15 KB
Chat UI (for iframe)	`chat-ui.html`	~23 KB

Both files are automatically loaded from the same CDN origin.

📞 Support & Documentation

For more information and support:

📖 View on GitHub

⚠️ Important: Always verify your backend API is accessible from client-side before deploying the widget. CORS headers must be properly configured.