AI Assistant Widget Integration Guide

🚀 Quick Start

Integrate the AI-powered virtual assistant into your website in under 2 minutes. Simply include the widget script before your closing </body> tag.

Basic Implementation Recommended

<!-- Add before closing </body> tag -->
<script>
  window.ChatWidgetConfig = {
    // Optional: Customize position and size
    position: 'bottom-right',
    width: 'auto',
    height: 'auto'
  };
</script>
<script src="https://chat.mim.labeah.ai/widget.js"></script>

⚙️ Configuration Options

Customize the widget appearance and behavior using the configuration object.

Parameter	Type	Default	Description
`position`	string	'bottom-right'	Widget position: 'bottom-right', 'bottom-left', 'top-right', 'top-left', 'center'
`width`	string	'auto'	Widget width. Use 'auto' for optimal sizing or specify pixels (e.g., '400px')
`height`	string	'auto'	Widget height. Use 'auto' for optimal sizing or specify pixels (e.g., '600px')
`margin`	string	'20px'	Distance from screen edges
`borderRadius`	string	'12px'	Corner radius for rounded appearance
`zIndex`	number	999999	Layer priority (higher numbers appear above other elements)
`autoInit`	boolean	true	Automatically initialize widget on page load

📋 Implementation Examples

Center Position (Modal Style)

window.ChatWidgetConfig = {
  position: 'center',
  width: '500px',
  height: '700px'
};

Mobile Optimized

window.ChatWidgetConfig = {
  position: 'bottom-right',
  width: '320px',
  height: '480px',
  margin: '10px'
};

Custom Styling

window.ChatWidgetConfig = {
  position: 'bottom-left',
  width: 'auto',
  height: 'auto',
  borderRadius: '20px',
  margin: '15px',
  zIndex: 1000000
};

🔧 JavaScript API

Control the widget programmatically using the global ChatWidget object.

ChatWidget.open()

Opens the chat interface

ChatWidget.open();

ChatWidget.close()

Closes the chat and returns to button

ChatWidget.close();

ChatWidget.toggle()

Toggles between open and closed states

ChatWidget.toggle();

ChatWidget.destroy()

Completely removes the widget from the page

ChatWidget.destroy();

ChatWidget.isOpen()

Returns true if chat interface is currently open

if (ChatWidget.isOpen()) {
  // Chat is currently open
}

🌐 Deployment Guidelines

✅ Functionality Status

✅ Fully Working: Widget initialization, positioning, sizing, opening/closing, click-outside functionality, JavaScript API methods
✅ Verified: Font loading, programmatic control, responsive design
✅ Production Ready: All core features tested and operational

Integration Checklist

✅ Include script before closing </body> tag
✅ Test widget functionality on different screen sizes
✅ Verify accessibility compliance
✅ Test click-outside behavior
✅ Verify JavaScript API functionality

Best Practices

Use default 'auto' sizing for optimal user experience
Place widget in bottom-right corner for standard UX patterns
Test on mobile devices to ensure proper touch interaction
Monitor widget performance impact on page load times