Website Visitor Intent Capture

Most website visitors leave without taking action. A behavior-triggered AI chat widget can identify high-intent visitors and engage them at exactly the right moment to convert browsers into buyers.

The Problem with Passive Lead Capture

Traditional website lead capture relies on:

• Contact forms (2-5% conversion rate)
• "Chat with us" buttons (reactive, not proactive)
• Exit-intent popups (annoying, often ignored)

Result: 95%+ of your traffic leaves without identifying themselves.

How Behavior-Triggered Chat Works

┌─────────────────────────────────────────────────────────────┐
│              Visitor Lands on Website                        │
└───────────────────────┬─────────────────────────────────────┘
                        │
                        ↓
┌─────────────────────────────────────────────────────────────┐
│              Behavior Tracking                               │
│   Pages viewed | Time on site | Scroll depth | Mouse movement│
└───────────────────────┬─────────────────────────────────────┘
                        │
              ┌─────────┴─────────┐
              ↓                   ↓
┌──────────────────┐    ┌──────────────────┐
│ High Intent      │    │ Low Intent       │
│ (Pricing, 3+ pages)   │ (Homepage only)   │
└────────┬─────────┘    └────────┬─────────┘
         │                       │
         ↓                       ↓
┌──────────────────┐    ┌──────────────────┐
│ Proactive Chat   │    │ Passive Widget   │
│ "I noticed you   │    │ (Available but   │
│  looking at..."  │    │  not intrusive)  │
└────────┬─────────┘    └──────────────────┘
         │
         ↓
┌─────────────────────────────────────────────────────────────┐
│              AI Conversation                                 │
│   Qualify → Recommend → Answer Questions → Book Appointment │
└─────────────────────────────────────────────────────────────┘

Intent Signals to Track

High-Intent Behaviors (Trigger Proactive Chat)

Low-Intent Behaviors (Stay Passive)

Step-by-Step Implementation

Step 1: Set Up Behavior Tracking

Option A: Custom JavaScript Tracker

// behavior-tracker.js
class VisitorTracker {
  constructor() {
    this.sessionData = {
      pagesViewed: [],
      timeOnSite: 0,
      scrollDepths: {},
      intentScore: 0,
      isReturning: this.checkReturning(),
      startTime: Date.now(),
    };

    this.initTracking();
  }

  checkReturning() {
    const visited = localStorage.getItem("hasVisited");
    localStorage.setItem("hasVisited", "true");
    return !!visited;
  }

  initTracking() {
    // Track page views
    this.trackPageView();

    // Track scroll depth
    this.trackScroll();

    // Track time on page
    this.trackTime();

    // Check intent every 5 seconds
    setInterval(() => this.evaluateIntent(), 5000);
  }

  trackPageView() {
    const page = window.location.pathname;
    this.sessionData.pagesViewed.push(page);

    // High-intent pages
    if (page.includes("pricing")) this.addScore(30);
    if (page.includes("contact")) this.addScore(25);
    if (page.includes("services")) this.addScore(15);
  }

  trackScroll() {
    let maxScroll = 0;
    window.addEventListener("scroll", () => {
      const scrollPercent = Math.round(
        (window.scrollY / (document.body.scrollHeight - window.innerHeight)) *
          100,
      );
      if (scrollPercent > maxScroll) {
        maxScroll = scrollPercent;
        this.sessionData.scrollDepths[window.location.pathname] = maxScroll;
        if (maxScroll >= 80) this.addScore(15);
      }
    });
  }

  trackTime() {
    setInterval(() => {
      this.sessionData.timeOnSite = Math.round(
        (Date.now() - this.sessionData.startTime) / 1000,
      );

      // Add score for time spent
      if (this.sessionData.timeOnSite === 120) this.addScore(25);
    }, 1000);
  }

  addScore(points) {
    this.sessionData.intentScore += points;
  }

  evaluateIntent() {
    const score = this.sessionData.intentScore;

    if (score >= 50 && !this.chatTriggered) {
      this.triggerProactiveChat();
    }
  }

  triggerProactiveChat() {
    this.chatTriggered = true;

    // Determine context-aware message
    const lastPage =
      this.sessionData.pagesViewed[this.sessionData.pagesViewed.length - 1];
    let message = "Hi! Can I help you find what you're looking for?";

    if (lastPage.includes("pricing")) {
      message =
        "I see you're checking out pricing. Any questions I can answer?";
    } else if (lastPage.includes("services")) {
      message =
        "Interested in our services? I'd be happy to explain what we offer!";
    } else if (this.sessionData.isReturning) {
      message = "Welcome back! Ready to take the next step?";
    }

    // Trigger chat widget with message
    window.dispatchEvent(
      new CustomEvent("triggerChat", {
        detail: { message, intentScore: this.sessionData.intentScore },
      }),
    );
  }
}

// Initialize on page load
new VisitorTracker();

Option B: Use Analytics Platform (Segment, Mixpanel)

// Segment tracking with n8n integration
analytics.track("Page Viewed", {
  page: window.location.pathname,
  referrer: document.referrer,
  timestamp: new Date().toISOString(),
});

// High-intent event
analytics.track("High Intent Action", {
  action: "viewed_pricing",
  score: 30,
});

Step 2: Set Up Voiceflow Chatbot

Create Conversation Flow:

START
  │
  ├─→ User Message or Trigger
  │
  ├─→ Intent Classification
  │     ├─→ Pricing Question → Answer + Offer Call
  │     ├─→ Service Question → Explain + Qualify
  │     ├─→ Booking Request → Check Calendar
  │     └─→ General → AI Response
  │
  ├─→ Qualification Questions
  │     ├─→ "What service are you interested in?"
  │     ├─→ "What's your timeline?"
  │     └─→ "What's your budget range?"
  │
  ├─→ Lead Capture
  │     ├─→ "What's your email?"
  │     └─→ "What's the best number to reach you?"
  │
  └─→ Book or Handoff
        ├─→ Calendar integration → Book appointment
        └─→ High value → Alert sales team

Voiceflow API Integration:

// Voiceflow runtime API call
const response = await fetch(
  "https://general-runtime.voiceflow.com/state/user/interact",
  {
    method: "POST",
    headers: {
      Authorization: VOICEFLOW_API_KEY,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      action: {
        type: "text",
        payload: userMessage,
      },
      config: {
        tts: false,
        stripSSML: true,
      },
    }),
  },
);

Step 3: Connect to n8n for Lead Processing

Webhook from Chat Widget:

// When lead is captured in chat
{
  "event": "lead_captured",
  "visitor": {
    "name": "John Smith",
    "email": "john@example.com",
    "phone": "+15551234567"
  },
  "session": {
    "pagesViewed": ["/", "/services", "/pricing"],
    "timeOnSite": 245,
    "intentScore": 85,
    "source": "google_organic"
  },
  "conversation": {
    "interest": "enterprise plan",
    "timeline": "this month",
    "budget": "$5k-10k"
  }
}

n8n Processing Workflow:

// Score the lead based on conversation data
const conversationScore = calculateConversationScore({
  interest: $input.item.json.conversation.interest,
  timeline: $input.item.json.conversation.timeline,
  budget: $input.item.json.conversation.budget,
});

const totalScore = $input.item.json.session.intentScore + conversationScore;

// Route based on score
if (totalScore >= 100) {
  // Hot lead - alert sales immediately
  await sendSlackAlert($input.item.json);
  await createGHLContact($input.item.json, "hot");
} else if (totalScore >= 60) {
  // Warm lead - nurture sequence
  await createGHLContact($input.item.json, "warm");
  await triggerNurtureSequence($input.item.json);
} else {
  // Cold lead - long-term nurture
  await createGHLContact($input.item.json, "cold");
}

Step 4: AI Response Generation

// Chat response generation with context
const systemPrompt = `You are a helpful sales assistant for [Company Name].
You help website visitors understand our services and book appointments.

Services we offer:
- Service A: Description, typical price range
- Service B: Description, typical price range
- Service C: Description, typical price range

Your goals:
1. Answer questions helpfully and accurately
2. Identify what service they need
3. Qualify (timeline, budget, decision maker)
4. Book an appointment or capture contact info

Be conversational, not salesy. Use short messages (2-3 sentences max).
Ask one question at a time.`;

// With page context
const context = `
Visitor context:
- Currently viewing: ${currentPage}
- Pages visited: ${pagesViewed.join(", ")}
- Time on site: ${timeOnSite} seconds
- Returning visitor: ${isReturning}
`;

Step 5: Widget Customization

Chat Widget Styling:

/* Custom chat widget styles */
.chat-widget {
  --primary-color: #3b82f6;
  --bg-color: #ffffff;
  --text-color: #1f2937;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

.chat-bubble {
  animation: pulse 2s infinite;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Proactive message */
.proactive-prompt {
  animation: slideIn 0.3s ease-out;
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  margin-bottom: 10px;
}

Mobile Optimization:

// Adjust behavior for mobile
const isMobile = window.innerWidth < 768;

if (isMobile) {
  // Less aggressive on mobile
  intentThreshold = 80; // Higher threshold
  proactiveDelay = 60000; // Wait longer

  // Smaller widget
  widget.classList.add("mobile-compact");
}

Conversation Templates

Service Inquiry

AI: Hi! I noticed you're looking at our marketing services. What kind of marketing help are you looking for?

Visitor: We need help with our SEO

AI: SEO is a great investment! To give you a sense of what we'd recommend - are you looking to rank locally, nationally, or both?

Visitor: Mainly local, we're a plumber in Austin

AI: Got it - local SEO for a plumbing business. We've helped several contractors in Texas. A few quick questions:
1. Do you currently have a Google Business Profile?
2. What's your monthly marketing budget?

Visitor: Yes we have one, budget around $2k/month

AI: $2k is a solid starting point for local SEO. Our local SEO packages start at $1,500/month and include Google Business optimization, local citations, and review management.

Would you like to schedule a quick call to discuss? I can show you exactly what we'd do for your business.

Pricing Question

AI: I see you're on our pricing page! What service are you most interested in?

Visitor: What's included in the $2k plan?

AI: The $2,000/month plan includes:
- Full SEO optimization
- Monthly content (4 blog posts)
- Weekly reporting
- Dedicated account manager

Is that the kind of scope you're looking for, or do you need something more comprehensive?

Integration with GoHighLevel

// Create contact with full context
await fetch("https://rest.gohighlevel.com/v1/contacts/", {
  method: "POST",
  headers: {
    Authorization: `Bearer ${GHL_API_KEY}`,
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    firstName: leadData.name.split(" ")[0],
    lastName: leadData.name.split(" ").slice(1).join(" "),
    email: leadData.email,
    phone: leadData.phone,
    source: "Website Chat",
    tags: ["chat-lead", leadData.temperature],
    customField: {
      intent_score: leadData.intentScore,
      pages_viewed: leadData.pagesViewed.join(", "),
      time_on_site: leadData.timeOnSite,
      chat_interest: leadData.conversation.interest,
      chat_timeline: leadData.conversation.timeline,
      chat_budget: leadData.conversation.budget,
      chat_transcript: leadData.transcript,
    },
  }),
});

Analytics & Optimization

Track these metrics:

---

Ready to convert more visitors? Download the implementation package or book a call to get this system running on your site.