Widget Integration
Get your AI chatbot live on your website in just a few simple steps. No technical expertise required!
- 1Copy the integration code below
- 2Replace YOUR_API_KEY with your actual API key
- 3Paste it before the </body> tag on your website
Integration Diagnostics
Run checks to ensure your environment is ready.
Integration Code
Copy this code to add the chatbot to your website:
data-api-key="YOUR_API_KEY"
data-primary-color="#0d7b8a"
data-position="bottom-right"></script>
Widget Attributes Explained
These data-attributes in your embed control the look and behavior of the chatbot. The diagram highlights where each appears.
Visual attributes
- 1. data-title — Header title text.
- 2. data-subtitle — Smaller line under the title.
- 3. data-welcome-message — First bot message shown to greet visitors.
- 4. data-primary-color — Accent color for header, trigger, and your messages.
- 5. data-position — Trigger bubble location: bottom-right, bottom-left, top-right, or top-left.
- 6. data-logo — Custom logo/icon shown on the trigger bubble.
Behavior
- data-auto-open — When to auto-open:
never,immediate,time,exit,returning. - data-auto-open-delay — Seconds before opening (only if auto-open = time).
- data-auto-open-frequency — Show frequency:
always,session,daily. - data-language — Initial language (e.g., en, hi, te, ta, mr, kn).
Connectivity
- data-tenant-id — Loads tenant-specific features, content, and branding.
- data-api-key — Authenticates your widget.
- data-api-url — Override backend API endpoint (advanced).
- data-font-family — Optional custom font for the widget UI.
Your API key is required to authenticate your chatbot widget. Here's how to get it:
- Navigate to your dashboard
- Look for the "API Configuration" section
- Copy your unique API key
- Replace "YOUR_API_KEY" in the code above
Example Integration
Here's a complete example showing how to integrate the widget into your HTML page:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Website</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Your website content goes here...</p>
<!-- Add the chatbot widget just before closing body tag -->
<script src="https://www.mouna-ai.com/widget.js"
data-api-key="YOUR_API_KEY"></script>
</body>
</html>
Preview Your Widget & Tenant Configurations
See how different tenant configurations enable specialized features like bookings, orders, and appointments.
🎯 Tenant Configurations - Real Business Examples
Each tenant can be configured with specialized features for different business types:
Restaurant Tenant
"Book a table for 4 people at 7 PM" - Handles reservations with date/time picker
Medical Clinic Tenant
"Schedule an appointment with Dr. Smith" - Manages medical appointments
Portfolio/Agency Tenant
"I need a website for my business" - Qualifies leads and showcases work
E-commerce Store Tenant
"Where is my order #12345?" - Handles customer support and orders
