Mirza Chat Box Integration Example

Basic Integration

This page demonstrates how to integrate Mirza Chat Box using jsDelivr CDN.

The chat widget should appear in the bottom-right corner of this page.

Integration Code:

<!-- Add this to your HTML file -->
<script src="https://cdn.jsdelivr.net/npm/mirza-ai-chatbox@1.0.1/dist/mirza-chat-box.js"></script>
<script>
  // Initialize the chat widget
  window.addEventListener('DOMContentLoaded', function() {
    MirzaChat.init({
      apiUrl: 'https://your-api-url.com',
      websiteId: 'your-website-id',
      primaryColor: '#0066FF',
      companyName: 'Your Company Name'
    });
  });
</script>

Using Data Attributes

You can also configure the chat widget using data attributes on the script tag:

<script 
  src="https://cdn.jsdelivr.net/npm/mirza-ai-chatbox@1.0.1/dist/mirza-chat-box.js"
  data-api-url="https://your-api-url.com"
  data-website-id="your-website-id"
  data-primary-color="#0066FF"
  data-company-name="Your Company Name"
  data-position="bottom-right"
  data-initial-message="Hello! How can I help you today?"
></script>

Using Global Configuration Variable

Another option is to set a global configuration variable before loading the script:

<script>
  window.MIRZA_CHAT_CONFIG = {
    apiUrl: 'https://your-api-url.com',
    websiteId: 'your-website-id',
    primaryColor: '#0066FF',
    companyName: 'Your Company Name'
  };
</script>
<script src="https://cdn.jsdelivr.net/npm/mirza-ai-chatbox@1.0.1/dist/mirza-chat-box.js"></script>

API Methods

Once initialized, you can control the chat widget programmatically:

// Open the chat widget
MirzaChat.openChat();

// Close the chat widget
MirzaChat.closeChat();

// Update configuration dynamically
MirzaChat.updateConfig({
  primaryColor: '#FF0000',
  companyName: 'New Company Name'
});