Widget Integration

Widget Integration

Learn how to integrate and customize the Ask My Docs widget to match your website’s design and requirements.

Widget Appearance

The widget appears as a floating chat button in the bottom-right corner of your website (by default). It’s designed to be non-intrusive and only loads when needed, ensuring it doesn’t impact your site’s performance.

[Image: Widget in different states – closed button, open chat interface]

Basic Configuration

The widget accepts several configuration options via data attributes:

  • data-widget-key: (Required) Your unique widget key
  • data-api-url: (Required) The API endpoint URL

Widget Behavior

  • Lazy Loading: The widget loads asynchronously and doesn’t block page rendering
  • Session Management: Conversations are maintained per session
  • Responsive Design: Automatically adapts to mobile and desktop screens
  • Theme Detection: Supports light and dark themes, with automatic detection

Programmatic Control

The widget exposes a global API for programmatic control:

// Open the widget
AskMyDocsWidget.open();

// Close the widget
AskMyDocsWidget.close();

// Send a message programmatically
AskMyDocsWidget.sendMessage("What is your return policy?");

Event Listeners

You can listen to widget events for custom integrations:

// Listen for widget open
window.addEventListener('askmydocs:open', function() {
  console.log('Widget opened');
});

// Listen for widget close
window.addEventListener('askmydocs:close', function() {
  console.log('Widget closed');
});

Performance Considerations

  • The widget script is lightweight and optimized for fast loading
  • Chat functionality is loaded on-demand when the widget is opened
  • No impact on Core Web Vitals or SEO
  • Works with content delivery networks (CDNs) for optimal performance