# GHL Chat Widget Installation Guide - No More Chores

**Date:** March 12, 2026
**Website:** nomorechores.com (WordPress)
**GHL Location ID:** BvrCS522k5EuY6TbZQsw

---

## 1. Getting the Chat Widget Embed Code

### Option A: Copy from GHL UI (Recommended)

1. Log into GoHighLevel → go to **Sites** → **Chat Widget**
2. Or navigate directly: **Settings** → **Chat Widget** (under "Channels")
3. Configure your widget settings (see Section 4 below)
4. Click **"Copy Code"** or **"Get Embed Code"**
5. The code will look something like this:

```html
<chat-widget
  location-id="BvrCS522k5EuY6TbZQsw"
  style="--chat-widget-primary-color: #1a73e8; --chat-widget-active-color: #1a73e8; --chat-widget-bubble-color: #1a73e8;"
  prompt-avatar="https://msgsndr-private.storage.googleapis.com/locationPhotos/f8eb5013-a4bb-4f51-a8b3-f3284e3d2bba.png"
  agency-name="No More Chores"
  agency-website="https://nomorechores.com"
></chat-widget>
<script
  src="https://widgets.leadconnectorhq.com/loader.js"
  data-resources-url="https://widgets.leadconnectorhq.com/chat-widget/loader.js"
></script>
```

### Option B: Generic GHL Chat Widget Code

If you can't access the UI right now, this is the standard GHL chat widget embed pattern:

```html
<!-- GHL Chat Widget - No More Chores -->
<chat-widget location-id="BvrCS522k5EuY6TbZQsw"></chat-widget>
<script
  src="https://widgets.leadconnectorhq.com/loader.js"
  data-resources-url="https://widgets.leadconnectorhq.com/chat-widget/loader.js"
></script>
```

> **Note:** The exact snippet may vary slightly. Always verify by grabbing it from the GHL UI: **Sites → Chat Widget → Copy Code**. The UI version includes your customization settings (colors, avatar, greeting).

---

## 2. Installing on WordPress

### Option A: Using "WPCode" Plugin (Recommended - Easiest)

**WPCode** (formerly Insert Headers and Footers) is the most popular free plugin for adding code snippets.

1. In WordPress admin, go to **Plugins → Add New**
2. Search for **"WPCode"** (by WPCode)
3. Click **Install Now**, then **Activate**
4. Go to **Code Snippets → Header & Footer**
5. Paste the chat widget code into the **Footer** section
6. Click **Save Changes**

**Why Footer?** Loading the widget in the footer ensures your page content loads first, keeping the site fast.

**Alternative plugin:** "Insert Headers and Footers" by WPBeginner works the same way.

### Option B: Manually via Theme (Advanced)

Only do this if you're comfortable editing theme files. Use a **child theme** so updates don't overwrite your changes.

1. In WordPress admin, go to **Appearance → Theme File Editor**
2. Open `footer.php` (or your theme's footer template)
3. Paste the chat widget code **just before** the closing `</body>` tag
4. Click **Update File**

**Warning:** If you update your theme without a child theme, this change will be lost.

### Option C: Using a Page Builder (Elementor, etc.)

If nomorechores.com uses Elementor or another page builder:

1. Go to **Elementor → Custom Code** (Pro) or use an HTML widget
2. Add a new code snippet, set location to **Before `</body>` End**
3. Paste the widget code
4. Save and publish

---

## 3. What the Widget Does Out of the Box

Once installed, the GHL chat widget:

- **Shows a chat bubble** in the bottom-right corner of every page
- **Collects visitor name, email, and phone** before starting the chat
- **Creates a contact** in GHL automatically from the form submission
- **Routes all messages** to the GHL **Conversations Inbox** (where Abigail can respond)
- **Sends notifications** to assigned team members
- **Supports file attachments** from visitors
- **Works on mobile** and desktop

**Conversations flow:**
Visitor sends message → Appears in GHL Conversations → Team responds from GHL (or the mobile app)

---

## 4. Recommended Settings (Configure in GHL)

Go to **Sites → Chat Widget** in GHL to configure:

### Colors & Branding
- **Widget color:** Match NMC brand colors. Suggested: a clean blue or green that matches nomorechores.com
- **Widget avatar:** Use the NMC logo (already set: `f8eb5013-a4bb-4f51-a8b3-f3284e3d2bba.png`)
- **Widget position:** Bottom-right (default, keep it)

### Greeting & Messaging
- **Welcome message:** "Hi there! 👋 How can we help you today? Whether you need a quote, want to book a cleaning, or have a question, we're here for you!"
- **Pre-chat form:** Keep enabled. Collect **Name**, **Email**, and **Phone** before chat starts (builds your GHL contact list)
- **Offline message:** "We're currently away but we'll get back to you ASAP! Leave your details and we'll follow up."

### Business Hours
- **Enable business hours:** Yes
- **Hours:** Mon-Fri 9am-6pm ET (or whatever Abigail's working hours are)
- **After hours behavior:** Show a "leave a message" form instead of live chat
- This sets expectations so visitors aren't waiting for a reply at midnight

### Notifications
- Make sure **email notifications** and/or **push notifications** are enabled for the GHL mobile app
- Assign Abigail as the default chat responder

---

## 5. On-Brand Customization for No More Chores

To make the widget feel like part of the NMC experience:

1. **Match website colors** - Pull the primary brand color from nomorechores.com and set it as the widget color
2. **Use the NMC logo** as the chat avatar (already configured in the location settings)
3. **Friendly, warm tone** - NMC is a service business. The greeting should feel welcoming, not corporate
4. **Quick reply suggestions** (if available in your GHL plan):
   - "Get a free quote"
   - "Book a cleaning"
   - "I have a question"
5. **Auto-responder** - Set up a GHL workflow to send an immediate auto-reply if no one responds within 2 minutes: "Thanks for reaching out! We typically reply within a few minutes during business hours."

---

## 6. Phase 2: AI-Powered Chat (Leah Integration)

The GHL chat widget is a solid Phase 1 that gets live chat on the website immediately. Here's what Phase 2 looks like:

### Vision
Replace the basic GHL widget with an **AI-powered chat agent (Leah)** that can:
- Answer common questions instantly (pricing, service areas, what's included)
- Guide visitors through the booking process
- Qualify leads and collect details before handing off to Abigail
- Operate 24/7 with intelligent, on-brand responses
- Escalate complex questions to a human seamlessly

### What It Would Take

1. **Build a custom chat frontend** - A branded chat widget that connects to an AI backend instead of GHL's native chat
2. **AI backend (Leah)** - An LLM-powered agent with:
   - NMC knowledge base (services, pricing, FAQs, service areas)
   - Ability to check availability and initiate bookings (via Launch27 API)
   - Conversation memory within a session
   - Escalation rules (when to hand off to Abigail)
3. **GHL integration** - Leah still creates/updates contacts in GHL and logs conversations
4. **Handoff flow** - When Leah can't handle something, seamlessly transfer to a human in the GHL Conversations inbox (or Slack notification to Abigail)

### Estimated Effort
- **Chat widget UI:** 1-2 days (custom web component or use an open-source chat UI)
- **AI agent backend:** 3-5 days (prompt engineering, knowledge base, API integrations)
- **GHL + Launch27 integration:** 2-3 days
- **Testing & refinement:** 2-3 days
- **Total:** ~2 weeks of focused work

### Why It's Worth It
- **24/7 coverage** - Most cleaning inquiries come outside business hours
- **Instant responses** - No waiting, higher conversion rate
- **Consistent quality** - Every visitor gets the same great experience
- **Lead qualification** - AI filters tire-kickers from real prospects before they reach Abigail
- **Scales infinitely** - Handle 1 or 100 simultaneous conversations

### Quick Win Before Full Build
As an intermediate step, you could enable **GHL's built-in AI chatbot** (if available on your plan) with custom training on NMC FAQs. Not as powerful as a custom Leah build, but much faster to deploy.

---

## Quick Reference

| Step | Action |
|------|--------|
| Get code | GHL → Sites → Chat Widget → Copy Code |
| Install | WordPress → WPCode plugin → paste in Footer |
| Configure | GHL → Chat Widget settings (colors, greeting, hours) |
| Test | Visit nomorechores.com, click the chat bubble, send a test message |
| Verify | Check GHL Conversations inbox for the test message |