Knowledge > Products > Pro Website > Chatbot Integration

Pro Website Chatbot Integration

Overview

Pro Website pages can embed the ChurchWiseAI chatbot widget -- a floating chat button in the bottom-right corner that visitors can click to ask questions, submit prayer requests, and get church information conversationally. This is Section 17 of the UnifiedTemplate.

The chatbot integration is the bridge between PewSearch (the directory/website product) and ChurchWiseAI (the AI product). A visitor on a Pro Website page interacts with the chatbot without knowing they are talking to a ChurchWiseAI product. The widget is branded to match the church's denomination visual style.

Configuration

Database Fields

Two fields in premium_churches control the chatbot widget:

Field	Type	Purpose	Default
`chatbot_enabled`	boolean	Master toggle: should the widget render?	`false`
`chatbot_agent_id`	UUID	The ChurchWiseAI agent ID that configures the chatbot	`null`

Both conditions must be true for the widget to render:

chatbot_enabled === true
chatbot_agent_id is a valid UUID (passes regex validation)

Admin Configuration

Churches enable the chatbot in the PewSearch admin dashboard (WebsiteTab > Settings or a dedicated Care/Chatbot section). The flow:

Church admin navigates to Settings in WebsiteTab
Toggles "Enable Chatbot" switch → sets chatbot_enabled
Enters or selects their ChurchWiseAI agent ID → sets chatbot_agent_id
   (For CWA bundle customers, this is auto-provisioned during onboarding)
Save (auto-save with debounce)
Widget appears on Pro Website page within ISR revalidation window (up to 1 hour)

For churches that subscribe to a CWA bundle (Pro Bundle $79.95 or Suite Bundle $99.95), the chatbot_agent_id is automatically set during the onboarding process. They do not need to manually enter it.

The UnifiedTemplate injects the chatbot widget using a two-step process:

Step 1: Configuration injection

window.__CWAI_CONFIG = {
  churchId: premium.chatbot_agent_id,
  color: style.chatbotAccent,
  position: "bottom-right"
};

Step 2: Script loading

const script = document.createElement('script');
script.src = 'https://churchwiseai.com/embed/churchwiseai-widget.js';
script.async = true;
document.body.appendChild(script);

The script is loaded dynamically (not via a <script> tag in the HTML) to ensure:

The config object exists before the widget script runs
The script only loads when the chatbot is enabled (not downloaded for churches without chatbot)
No render-blocking of the main page content

Security

UUID validation: Before embedding, the chatbot_agent_id is validated against a UUID regex:

/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i

This prevents injection of arbitrary strings into the page. If the UUID is malformed, the widget does not render.

Script source: The widget script is loaded exclusively from https://churchwiseai.com/embed/churchwiseai-widget.js -- a hardcoded, first-party URL. There is no user-configurable script source.

Config sanitization: The window.__CWAI_CONFIG object contains only:

churchId: validated UUID (safe)
color: hex color from the style object (hardcoded per family, not user-input)
position: hardcoded string "bottom-right" (not user-configurable)

No user-provided strings are injected raw into the page.

Accent Colors

The chatbot widget's accent color matches the church's denomination visual family. This creates a cohesive visual experience where the chat button, chat header, and send button all match the Pro Website's color scheme.

Family	Accent Color	Hex	Visual
Liturgical	Amber	`#D4AF37`	Gold/amber button, warm chat header
Protestant	Navy Blue	`#1B365D`	Dark blue button, professional chat header
Community	Orange	`#E8751A`	Warm orange button, inviting chat header

The accent color is passed via style.chatbotAccent which is computed by getStyleByDenomination() and is part of the denomination style object. See Template System for how the style object is built.

The churchwiseai-widget.js script reads window.__CWAI_CONFIG.color and applies it to:

The floating chat button (background color)
The chat window header (background color)
The send message button (background color)
Link text within chat messages (text color)
The typing indicator dots (color)

The widget handles contrast automatically -- white text on dark backgrounds, dark text on light backgrounds.

How the Pro Website Chatbot Differs from the Full CWA Chatbot

This is a critical distinction for understanding the product strategy. The Pro Website chatbot is intentionally limited compared to what a ChurchWiseAI subscription provides. This is not a bug -- it is the anti-cannibalization strategy.

Capability Comparison

Capability	Pro Website Chatbot	CWA Starter ($14.95)	CWA Pro ($34.95)	CWA Suite ($59.95)
Basic Q&A (service times, directions)	Yes	Yes	Yes	Yes
Prayer request submission	Yes	Yes	Yes	Yes
Tool count	1	12	35	39
Appointment scheduling	No	Yes	Yes	Yes
Volunteer sign-up	No	No	Yes	Yes
Event registration	No	No	Yes	Yes
Content generation	No	No	Yes	Yes
Hosted chat page (`/chat/[slug]`)	No	Yes	Yes	Yes
Care Hub page (`/care/[slug]`)	No	Yes	Yes	Yes
FAQ management	No	No	Yes	Yes
Document upload	No	No	Yes	Yes
Analytics dashboard	No	No	Yes	Yes
Standalone embed widget	No	No	Yes	Yes
Agent personas (multi-agent)	No	2 agents	4 agents	4 + custom
Theological lens config	Auto-detect	Auto-detect	Configurable	Configurable
Widget customization	Template default	No	Yes	Yes
Remove branding badge	No	No	No	Yes
Max tokens per response	400	450	450-800	450-800
Tool-use rounds	2	3	3	3
Monthly message limit	--	200	1,000	5,000

What Drives the Upgrade

The Pro Website chatbot handles the 80% use case -- a visitor wants service times, directions, or to submit a prayer request. It does this well.

The 20% it cannot do creates upgrade demand:

Visitor asks to schedule a meeting with the pastor → chatbot cannot book → "For scheduling, explore ChurchWiseAI ministry tools"
Church wants to see chat analytics → not available → upgrade to CWA Pro
Church wants to customize FAQ answers → not available → upgrade to CWA Pro
Church wants the chatbot on their own domain → no standalone embed → upgrade to CWA Pro

Upsell Behavior

The Pro Website chatbot weaves subtle upgrade CTAs into natural conversation gaps — it does not say "upgrade" or "pay more." The strategy is to surface ChurchWiseAI as a resource when the chatbot reaches a capability boundary (e.g., cannot book a meeting, cannot show analytics, cannot customize FAQs).

The approach is gentle and contextual, never aggressive. It positions ChurchWiseAI as "there is more we can do" rather than "what you have is not enough."

Actual system prompt behavior (the live prompt wording) is defined in the chatbot system prompts, not here. See Tier Restrictions for the tier-based feature gates that control when and how upsell triggers fire.

Tier Detection in the Backend

When the chatbot widget sends a message to POST /api/chatbot/stream, the backend detects the chatbot tier:

Backend tier detection:

1. Load organization_settings for the church (by chatbot_agent_id)
2. Read chatbot_config.source field

3. IF source === 'pewsearch_auto_provision':
     → BASIC chatbot (free listing, no Pro Website)
     → 1 tool, 300 token max
     → Simple receptionist prompt

4. ELSE IF plan === 'pro_website' AND source !== 'pewsearch_auto_provision':
     → PRO WEBSITE chatbot
     → 1 tool (prayer request), 400 token max
     → Theology-aware prompt with upsell CTAs
     → 2 tool-use rounds max

5. ELSE:
     → FULL CWA chatbot
     → Tools filtered by tier (starter/pro/suite)
     → Full HEAR protocol, agent specialization

The widget itself does not know its tier. It sends messages to the same endpoint regardless. The backend applies restrictions based on the church's plan and chatbot source.

The churchwiseai-widget.js script is the same code whether loaded on a Pro Website page, a CWA-managed chat page, or an external embed. The widget is context-agnostic -- it sends the churchId with each request and the backend handles everything else.

This architectural choice means:

One widget codebase to maintain
Consistent visitor experience across contexts
Tier gating happens server-side (cannot be bypassed by modifying client code)
Color and position are the only client-side customizations

Integration with CWA Bundles

When a church subscribes to a CWA bundle that includes Pro Website:

Bundle	Price	What Happens
Pro Bundle	$79.95/mo	Pro Website created with full CWA Pro chatbot (35 tools, analytics, FAQ management)
Suite Bundle	$99.95/mo	Pro Website created with full CWA Suite chatbot (39 tools, white-label, everything)

In this scenario, the chatbot widget on the Pro Website page is NOT limited to the Pro Website tier. It runs at the CWA tier the church is paying for. The tier detection sees the church's CWA subscription and applies full permissions.

Tier detection for bundle customers:

plan = 'pro_both' (Pro Bundle) or 'suite_both' (Suite Bundle)
→ normalizePlanTier(plan) → 'pro' or 'suite'
→ source !== 'pewsearch_auto_provision' AND plan !== 'pro_website'
→ FULL CWA chatbot at the appropriate tier

This is a significant selling point of the bundles: "Get a professional church website AND a fully-powered AI chatbot, all in one subscription."

Data Flow Diagram

Visitor on grace-community.pewsearch.com
  │
  ▼
UnifiedTemplate renders (Section 17)
  │
  ├── Checks: chatbot_enabled? chatbot_agent_id valid?
  │     IF no → section not rendered
  │     IF yes ↓
  │
  ├── Injects window.__CWAI_CONFIG
  │     { churchId, color, position }
  │
  ├── Loads churchwiseai-widget.js
  │     Widget renders floating button
  │
  ▼
Visitor clicks chat button
  │
  ▼
Widget opens chat window
  │
  ▼
Visitor types message
  │
  ▼
Widget POSTs to churchwiseai.com/api/chatbot/stream
  │  Body: { message, churchId, conversationId }
  │
  ▼
Backend: route.ts
  │
  ├── Load organization_settings by churchId
  ├── Detect tier (basic / pro_website / starter / pro / suite)
  ├── Apply tool filtering
  ├── Apply prompt template
  ├── Call LLM (Claude Haiku 4.5 primary, gpt-4o-mini fallback)
  │
  ▼
Response streamed back to widget
  │
  ▼
Widget displays response with denomination-matched styling

Troubleshooting

Symptom	Cause	Fix
Widget does not appear	`chatbot_enabled` is false	Enable in admin Settings
Widget does not appear	`chatbot_agent_id` is null or invalid	Set valid UUID in admin
Widget appears but chat fails	`organization_settings` missing for agent ID	Provision chatbot config in CWA
Widget wrong color	Denomination mismatch or style not computed	Check `getStyleByDenomination()` with church denomination
Chat responses too limited	Tier detected as basic/pro_website	Check `chatbot_config.source` in organization_settings
Widget loads slowly	Script loaded synchronously	Ensure `async` attribute on script tag

Pro Website Chatbot Integration

Overview

Configuration

Database Fields

Admin Configuration

Widget Embed Code

How the Widget Loads

Security

Accent Colors

How the Widget Uses the Color

How the Pro Website Chatbot Differs from the Full CWA Chatbot

Capability Comparison

What Drives the Upgrade

Upsell Behavior

Tier Detection in the Backend

Same Widget, Different Contexts

Integration with CWA Bundles

Data Flow Diagram

Troubleshooting

See Also

Overview​

Configuration​

Database Fields​

Admin Configuration​

Widget Embed Code​

How the Widget Loads​

Security​

Accent Colors​

How the Widget Uses the Color​

How the Pro Website Chatbot Differs from the Full CWA Chatbot​

Capability Comparison​

What Drives the Upgrade​

Upsell Behavior​

Tier Detection in the Backend​

Same Widget, Different Contexts​

Integration with CWA Bundles​

Data Flow Diagram​

Troubleshooting​

See Also​

Overview

Configuration

Database Fields

Admin Configuration

Widget Embed Code

How the Widget Loads

Security

Accent Colors

How the Widget Uses the Color

How the Pro Website Chatbot Differs from the Full CWA Chatbot

Capability Comparison

What Drives the Upgrade

Upsell Behavior

Tier Detection in the Backend

Same Widget, Different Contexts

Integration with CWA Bundles

Data Flow Diagram

Troubleshooting

See Also