🏛️ Municipal Chatbot - Embedding Guide

Choose one of the methods below to add the chatbot to your CivicPlus website.

Method 1: Simple Widget (Recommended for CivicPlus)

Add this code snippet to your website's footer or before the closing </body> tag:

<!-- Municipal Chatbot Widget -->
<script>
  (function(w,d,s,o,f,js,fjs){
    w['MunicipalChatbot']=o;w[o] = w[o] || function () { 
      (w[o].q = w[o].q || []).push(arguments) 
    };
    js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
    js.id = o; js.src = f; js.async = 1; 
    fjs.parentNode.insertBefore(js, fjs);
  }(window, document, 'script', 'MunicipalChatbot', 
    'https://your-domain.com/widget.js'));
  
  // Initialize with your bot ID
  MunicipalChatbot('init', { 
    botId: 'chatham-ma',  // Replace with your bot ID
    autoOpen: false,    // Set to true to auto-open on page load
    delay: 3000        // Delay in ms before auto-opening
  });
</script>
📝 Note: Replace chatham-ma with your unique bot ID provided during setup.

Method 2: Full-Screen Iframe (Like Frase)

For a full-screen overlay experience identical to Frase:

<!-- Full-screen chatbot iframe -->
<iframe 
  title="Municipal ChatBot" 
  id="municipal-chatbot-iframe" 
  src="https://your-domain.com/embed/chatham-ma"
  style="border: none; 
         right: 0px; 
         position: fixed; 
         z-index: 2147483647; 
         height: 100dvh; 
         width: 100dvw; 
         margin-right: 0px; 
         margin-bottom: 0px; 
         background: transparent; 
         bottom: 0px;"
></iframe>
⚠️ Warning: This method creates a full-screen overlay immediately. Users may prefer the widget approach with a floating button.

Method 3: Embedded in a Specific Container

Embed the chatbot in a specific page section (e.g., a "Contact Us" page):

<!-- Container for embedded chatbot -->
<div id="chatbot-container" style="width: 100%; height: 600px;">
  <iframe 
    src="https://your-domain.com/embed/chatham-ma"
    style="width: 100%; 
           height: 100%; 
           border: 1px solid #ddd; 
           border-radius: 8px;"
    title="Municipal ChatBot"
  ></iframe>
</div>

Configuration Options

When using Method 1 (Widget), you can customize behavior:

MunicipalChatbot('init', { 
  botId: 'your-bot-id',        // Required: Your unique bot ID
  apiUrl: 'https://...',       // Optional: Custom API URL
  autoOpen: false,             // Auto-open on page load
  delay: 3000,                 // Delay before auto-opening (ms)
  position: 'bottom-right'     // Button position
});

Testing Your Installation

  1. Add the code to your website
  2. Refresh the page
  3. Look for the chat button in the bottom-right corner
  4. Click it to open the chatbot
  5. Ask a test question about your municipality

Need Help?

Contact our support team at [email protected]

Live Demo

Click the button below to see the widget in action: