How to Build an ROI Model for Agentic AI in Local Government

Adding an AI Agent and Chatbot to Your CivicPlus Website: Complete Integration Guide

· Updated

Step-by-step guide to integrating an AI chatbot with CivicPlus municipal websites, including code examples, CivicEngage navigation, and troubleshooting common issues.

CivicPlus powers thousands of local government websites across the United States. If your municipality runs on CivicPlus—whether you're using CivicEngage, the newer Civic Experience platform, or a legacy CivicPlus CMS—adding an AI chatbot can dramatically reduce the volume of routine calls and emails your staff handles daily.

This guide covers the specific steps to integrate CityDesk.AI with CivicPlus, including the platform-specific navigation, code placement, and common issues you might encounter.

What Makes CivicPlus Integration Different?

CivicPlus sites have a particular architecture that affects how you add third-party scripts:

  1. Module-based content system: CivicPlus organizes content through modules (Web Pages, Quick Links, FAQs, etc.) rather than a traditional page editor

  2. Template hierarchy: Changes to templates affect all pages using that template—useful for site-wide chatbot deployment

  3. Widget system: CivicEngage uses widgets that can contain custom HTML/JavaScript

  4. Caching layer: CivicPlus caches pages aggressively, which can delay when changes appear

Understanding these characteristics will help you choose the right integration approach.

Before You Start: What You'll Need

  • CivicPlus admin access with permissions to edit templates or add widgets

  • Your CityDesk.AI embed code (provided after signup)

  • About 15-30 minutes for initial setup

  • A test page to verify the integration before going site-wide

Your CityDesk.AI embed code will look something like this:

<script
  src="https://cdn.citydesk.ai/widget/v2/chatbot.min.js"
  data-site-id="your-municipality-id"
  data-position="bottom-right"
  async>
</script>

The data-site-id is unique to your municipality and connects the chatbot to your specific knowledge base.

Integration Method 1: Site-Wide via Template (Recommended)

For most municipalities, adding the chatbot to your site template is the best approach. This ensures the chatbot appears on every page without needing to edit individual pages.

Step 1: Access the Template Editor

  1. Log in to your CivicPlus admin panel

  2. Navigate to Design > Templates (in CivicEngage) or Site Administration > Template Manager (in legacy CivicPlus)

  3. Find your active template—it's typically named something like "Main Template" or "Default Template"

  4. Click Edit to open the template editor

Step 2: Locate the Footer Section

In the template editor, scroll down to find the closing </body> tag. You want to insert the chatbot script just before this tag.

In CivicEngage, the template structure typically looks like:

<!-- ... page content ... -->

<footer class="site-footer">
  <!-- footer content -->
</footer>

<!-- INSERT CHATBOT SCRIPT HERE -->

</body>
</html>

Step 3: Insert the Embed Code

Paste your CityDesk.AI embed code immediately before the </body> tag:

<!-- CityDesk.AI Chatbot -->
<script
  src="https://cdn.citydesk.ai/widget/v2/chatbot.min.js"
  data-site-id="your-municipality-id"
  data-position="bottom-right"
  async>
</script>
</body>
</html>

Step 4: Save and Clear Cache

  1. Click Save or Publish to save the template

  2. Important: Go to Site Administration > Cache Management and clear the site cache

  3. CivicPlus caching can delay changes by several minutes to hours—clearing the cache forces an immediate update

Step 5: Verify the Installation

Open your website in a new incognito/private browser window (to bypass your browser cache) and confirm:

  • The chatbot icon appears in the bottom-right corner

  • Clicking the icon opens the chat interface

  • Typing a question returns a response

Integration Method 2: Specific Pages via HTML Widget

If you only want the chatbot on certain pages (e.g., just the homepage and contact page), use the HTML widget approach.

Step 1: Navigate to the Target Page

  1. In your CivicPlus admin, go to Modules > Web Pages

  2. Find and edit the page where you want the chatbot

Step 2: Add an HTML Widget

  1. In the page editor, click Add Widget or Add Module

  2. Select HTML or Custom HTML widget type

  3. Place the widget at the bottom of the page content area

Step 3: Add the Embed Code

In the HTML widget editor, paste your CityDesk.AI code:

<script
  src="https://cdn.citydesk.ai/widget/v2/chatbot.min.js"
  data-site-id="your-municipality-id"
  data-position="bottom-right"
  async>
</script>

Step 4: Repeat for Additional Pages

Repeat the process for each page where you want the chatbot. For more than 3-4 pages, consider the site-wide template approach instead.

CivicPlus-Specific Configuration Options

Adjusting Position for CivicPlus Layouts

CivicPlus sites often have sticky footers or accessibility widgets that can overlap with chatbots. You can adjust the position:

<script
  src="https://cdn.citydesk.ai/widget/v2/chatbot.min.js"
  data-site-id="your-municipality-id"
  data-position="bottom-right"
  data-offset-bottom="80"
  async>
</script>

The data-offset-bottom="80" moves the chatbot up 80 pixels, clearing most footer overlaps.

Matching CivicPlus Color Schemes

CivicPlus sites typically use municipal branding colors. You can customize the chatbot to match:

<script
  src="https://cdn.citydesk.ai/widget/v2/chatbot.min.js"
  data-site-id="your-municipality-id"
  data-primary-color="#1a4d8c"
  data-header-text="Ask About City Services"
  async>
</script>

Integrating with CivicPlus Forms

Many municipalities want the chatbot to help citizens before they submit a form. You can configure the chatbot to appear prominently on form pages:

<script
  src="https://cdn.citydesk.ai/widget/v2/chatbot.min.js"
  data-site-id="your-municipality-id"
  data-auto-open="true"
  data-greeting="Have questions before you submit? I can help!"
  async>
</script>

Use this on pages like:

  • Building permit applications

  • Business license renewals

  • Public records requests

  • Utility signup forms

Common CivicPlus Integration Issues

Issue: Chatbot Doesn't Appear After Saving

Cause: CivicPlus page caching

Solution:

  1. Clear the site cache in Site Administration > Cache Management

  2. Wait 2-3 minutes

  3. Open the site in an incognito window

  4. If still not visible, check browser console (F12) for JavaScript errors

Issue: Chatbot Appears But Won't Open

Cause: JavaScript conflict with CivicPlus modules

Solution: Move the script to load after other scripts by adding a small delay:

<script>
  setTimeout(function() {
    var script = document.createElement('script');
    script.src = 'https://cdn.citydesk.ai/widget/v2/chatbot.min.js';
    script.setAttribute('data-site-id', 'your-municipality-id');
    document.body.appendChild(script);
  }, 1000);
</script>

Issue: Chatbot Overlaps with Accessibility Widget

Cause: Both widgets positioned in bottom-right corner

Solution: Add offset to move the chatbot above the accessibility widget:

data-offset-bottom="100"
data-offset-right="20"

Issue: Chatbot Missing on Some Pages

Cause: Those pages use a different template

Solution:

  1. Go to Design > Templates

  2. Identify all active templates

  3. Add the chatbot code to each template

What the Chatbot Can Answer for CivicPlus Municipalities

Once integrated, the chatbot automatically learns from your CivicPlus website content. Common questions it handles well:

General Information

  • "What are city hall hours?"

  • "How do I contact the building department?"

  • "When is the next city council meeting?"

Services

  • "How do I pay my water bill?"

  • "Where do I get a business license?"

  • "What's the process for a building permit?"

Documents and Forms

  • "Where can I find the zoning ordinance?"

  • "I need a rental inspection form"

  • "How do I request public records?"

Events and Meetings

  • "What events are happening this weekend?"

  • "How do I sign up for youth sports?"

  • "Where is the community center?"

The chatbot pulls this information directly from your CivicPlus site content, so keeping your website updated means the chatbot stays accurate.

Measuring Success

After integration, track these metrics to measure impact:

Week 1-2: Baseline

  • Monitor chatbot conversations in the CityDesk.AI dashboard

  • Note the most common questions asked

  • Track how many conversations reach a satisfactory conclusion

Month 1: Early indicators

  • Compare call volume to the previous month

  • Review which topics generate the most chatbot questions

  • Identify gaps where the chatbot couldn't help (these indicate content to add to your site)

Month 3: Full assessment

  • Calculate staff time saved on routine inquiries

  • Survey staff on whether they've noticed reduced call/email volume

  • Review citizen feedback on the chatbot experience

Next Steps

Once your chatbot is running:

  1. Add it to your staff training: Let front-desk staff know the chatbot exists so they can direct citizens to it

  2. Promote it: Add a mention to your city newsletter or social media

  3. Monitor weekly: Check the dashboard for unanswered questions that indicate content gaps

  4. Expand content: Consider connecting additional data sources like permit status lookups

The CivicPlus integration typically takes 15-30 minutes for a basic setup. Most municipalities see a measurable reduction in routine inquiries within the first month.

Have questions about integrating CityDesk.AI with your CivicPlus website? Contact our support team for implementation assistance.