Support AI Skill

In App Messaging Contextual Help

Provide contextual in-app messaging support that helps users resolve issues without leaving the product. Use when implementing in-app support widgets, contextual help triggers, real-time user assistance, product walkthroughs with support integration, or red...

In-App Messaging & Contextual Help

Deliver proactive, contextual support within the product experience — helping users at the exact moment they need it, without leaving the application.

Workflow

  1. User interacts with product; behavior tracked via analytics SDK.
  2. System detects support-triggering events (errors, errors, confusion patterns).
  3. Contextual help widget appears (non-intrusive, dismissible).
  4. User clicks widget → sees relevant articles, FAQs, or live chat option.
  5. AI analyzes user context (current page, recent actions, error state) to suggest solutions.
  6. User either self-resolves via suggested content or escalates to live agent.
  7. Agent receives full context: page URL, user actions, error logs, account info.
  8. Agent resolves issue; resolution logged for future prevention.
  9. Team analyzes help requests to improve product UX and reduce friction.

In-App Support Widget Architecture

SUPPORT WIDGET IMPLEMENTATION
==============================

Widget Types:

TYPE 1 — Persistent Chat Button (always visible):
  → Fixed position: Bottom-right corner of application
  → Design: Branded icon (headset, chat bubble, or brand mascot)
  → On click: Expands to chat window or menu
  → Menu options:
     - "Chat with support"
     - "Browse help articles"
     - "Report a bug"
     - "Give feedback"
  → Implementation: JavaScript SDK (5–15KB, loaded asynchronously)
  → Impact on page load: < 100ms
  → Examples: Intercom widget, Zendesk Web Widget, Crisp

TYPE 2 — Contextual Inline Help (page-specific):
  → Appears inline near relevant UI element
  → Trigger: Detected on specific pages or after specific actions
  → Examples:
     - Billing page: "Having trouble with your subscription?" banner
     - Error page: "This error usually happens when... Here's how to fix it"
     - Settings page: Tooltip with "?" icon on complex settings
  → Design: Inline banner, tooltip, or modal (non-blocking)
  → Timing: Appears after 3–5 seconds on page (not immediately)

TYPE 3 — Proactive Prompt (triggered by behavior):
  → Trigger conditions:
     - User on page for > 60 seconds without action (confusion signal)
     - User navigated to page 3+ of help center (searching for answer)
     - User encountered error and tried to navigate away (frustration signal)
     - User clicked "Cancel" or "Delete" (intent to leave)
  → Prompt appears: "Need help? I noticed you're looking at [feature]. 
     Here are some things that might help:"
  → Options: Link to relevant articles, offer live chat, suggest tutorial
  → Dismissable: User can close with one click; don't re-show for 24 hours

TYPE 4 — Keyboard Shortcut (power user access):
  → Global shortcut: ? or Ctrl+? or Cmd+?
  → Opens help command palette (Spotlight-style search)
  → User types question; results show articles and actions
  → Actions available directly from palette:
     - "Reset my password" → triggers reset flow
     - "Contact support" → opens chat
     - "Report a bug" → opens bug report form
  → Examples: Linear help command, Notion's Cmd+K

WIDGET SELECTION BY PRODUCT TYPE:
  ════════════════════════════════════════════════════════════════════════
  Product Type      | Recommended Widgets        | Rationale
  ════════════════════════════════════════════════════════════════════════
  SaaS platform     | Type 1 + Type 3           | Always-accessible + proactive
  E-commerce        | Type 1 + Type 2           | Checkout page contextual help
  Mobile app        | Type 1 (native) + Type 4  | Native chat + quick access
  Developer tools   | Type 4 + Type 2           | Power users prefer shortcuts
  B2B enterprise    | Type 1 + Type 2 + Type 3  | Full coverage for complex products
  ════════════════════════════════════════════════════════════════════════

Contextual Help Engine

CONTEXT AWARENESS ENGINE
=========================

Data Sources for Context:
  → Current page/URL: What screen is the user on?
  → Recent actions (last 5 minutes): Clicks, form submissions, navigation
  → Error events: Client-side errors, API failures, validation errors
  → User profile: Account tier, signup date, feature access level
  → Session data: Time on page, pages visited, search queries
  → Product state: Configuration settings, integrations, data loaded
  → Historical support: Past tickets, resolved issues, CSAT scores

CONTEXT→HELP MAPPING:

  Scenario 1 — User on billing page, hasn't updated payment method in 60 days:
    → Widget shows: "Keep your account active — your payment method 
       expires soon. Update here: [link]. Need help? [Chat button]"
  
  Scenario 2 — User encountered 403 error on API endpoint:
    → Widget shows: "API access error. This usually means your API key 
       doesn't have permission for this endpoint. 
       → Check your API permissions: [link]
       → Need a different permission level? [Upgrade button]
       → Still stuck? [Chat with us]"
  
  Scenario 3 — User on feature they've never accessed (first-time):
    → Widget shows: "First time here! Here's a quick 2-minute walkthrough 
       to get you started: [Start walkthrough] [Skip]"
  
  Scenario 4 — User searched help center 3+ times in same session:
    → Widget shows: "Looking for something specific? Let me help! 
       [Chat with support] I can see what you've been looking for."
  
  Scenario 5 — User on pricing page for 5+ minutes:
    → Widget shows: "Comparing plans? I can help you find the right one.
       [Take plan quiz] [Talk to sales] [See comparison chart]"

CONTEXT SCORING ALGORITHM:
  ════════════════════════════════════════════════════════════════════
  Signal                      | Weight | Confidence Contribution
  ════════════════════════════════════════════════════════════════════
  Current page match          | 25%    | High — exact page has specific help
  Recent error events         | 30%    | Highest — active problem to solve
  User confusion behavior     | 20%    | Medium — indirect signal
  First-time on feature       | 15%    | Medium — opportunity for education
  Past support history        | 10%    | Low — contextual background
  ════════════════════════════════════════════════════════════════════
  
  → Score > 70%: Show proactive help prompt
  → Score 40–70%: Show subtle widget (chat button highlight)
  → Score < 40%: Standard persistent widget (no proactive prompt)

Live In-App Chat Agent Workflow

AGENT CONTEXT-RICH INTERFACE
=============================

When user escalates to live chat from in-app widget, agent receives:

┌─────────────────────────────────────────────────────────────────────┐
│ CHAT WITH: Sarah Chen (Enterprise, 14 months, $12K ARR)             │
│ Current Page: /settings/integrations/slack                          │
│ Recent Actions (5 min):                                             │
│   1. Clicked "Connect Slack" button                                 │
│   2. Entered Slack workspace URL                                    │
│   3. Received OAuth error: "Invalid redirect URI"                   │
│   4. Clicked "Cancel"                                               │
│   5. Navigated to help center, searched "Slack integration"         │
│ Error Log: OAuth redirect_uri mismatch — configured: https://app... │
│                            actual: https://staging...               │
│ Past Tickets: 2 (resolved), CSAT: 5.0                               │
└─────────────────────────────────────────────────────────────────────┘

AGENT CAPABILITIES IN IN-APP CHAT:
  → See user's screen (with permission): Co-browsing capability
  → Navigate to user's context: Click "Go to their page" to see same view
  → Run diagnostics: Check API keys, permissions, configuration
  → Send in-app actions: "I've updated your Slack redirect URI — try again"
  → Share screenshots: Annotated screenshots showing correct settings
  → Execute commands: Fix issues directly (with user consent)
  → Open related tickets: Link chat to existing ticket for follow-up

IN-APP CHAT PERFORMANCE TARGETS:
  ════════════════════════════════════════════════════════════════════
  Metric                                | Target
  ════════════════════════════════════════════════════════════════════
  Widget-to-chat conversion rate        | 15–25%
  First response time                   | < 2 minutes
  Average resolution time               | < 15 minutes
  First contact resolution rate         | > 75%
  CSAT (in-app chat)                    | > 4.5/5.0
  Deflection rate (self-service via widget)| > 40%
  ════════════════════════════════════════════════════════════════════

Proactive Support Triggers

PROACTIVE INTERVENTION TRIGGERS
================================

Trigger Category 1 — Error-Based (immediate):
  → HTTP 4xx/5xx errors: Show contextual error explanation + fix
  → API rate limit exceeded: Explain limit + suggest optimization
  → Payment failure: Guide to payment method update
  → Integration failure: Show integration status + troubleshooting steps
  → Timeout errors: Retry button + explanation of cause

Trigger Category 2 — Behavior-Based (delayed):
  → Page abandonment: User on page > 60 sec with no action → offer help
  → Help center searches: 3+ searches without click → offer live chat
  → Feature confusion: User clicked through 3+ help articles in session
  → Navigation loops: User returned to same page 3+ times
  → Incomplete workflow: User started form, left 70% complete

Trigger Category 3 — Account-Based (scheduled):
  → Trial expiring (7 days): Proactive upgrade prompt with support offer
  → Low engagement: Haven't logged in 7+ days → re-engagement with help
  → Underutilized features: Not using 3+ high-value features → education
  → Payment method expiring: Update prompt with support availability

FREQUENCY AND THROTTLING RULES:
  → Max 1 proactive prompt per user per session
  → If dismissed: Don't re-show same prompt for 24 hours
  → If resolved: Don't re-show same prompt for 30 days
  → If user opted out: Honor opt-out across all in-app prompts
  → Quiet hours: Don't prompt during user's off-hours (based on login patterns)

PROACTIVE PROMPT EFFECTIVENESS:
  ════════════════════════════════════════════════════════════════════
  Prompt Type            | CTR    | Resolution Rate | CSAT Impact
  ════════════════════════════════════════════════════════════════════
  Error explanation      | 45%    | 70%             | +0.5 pts
  Feature walkthrough    | 25%    | 55%             | +0.3 pts
  Help center follow-up  | 35%    | 65%             | +0.4 pts
  Payment guidance       | 55%    | 80%             | +0.6 pts
  Trial upgrade + help   | 15%    | 40%             | +0.2 pts
  ════════════════════════════════════════════════════════════════════

Analytics and Continuous Improvement

IN-APP SUPPORT ANALYTICS
=========================

Widget Engagement Metrics:
  ════════════════════════════════════════════════════════════════════
  Metric                                | Target
  ════════════════════════════════════════════════════════════════════
  Widget visibility rate                | 100% (always present)
  Widget click rate                     | 5–10% of sessions
  Proactive prompt show rate            | 15–25% of sessions
  Proactive prompt CTR                  | 20–40%
  Self-service resolution rate          | > 40%
  Escalation to live chat rate          | 15–25% of widget interactions
  Average time to resolution            | < 5 min (self-service), < 15 min (chat)
  ════════════════════════════════════════════════════════════════════

Help Request Hotspots (track to improve product):
  → Top 10 pages with most widget interactions
  → Top 10 error types triggering help requests
  → Top 10 search queries in help center before widget escalation
  → Trend: Are help requests increasing or decreasing per feature?
  → Impact: Help request volume × avg resolution cost = support cost

PRODUCT IMPROVEMENT FEEDBACK LOOP:
  1. Weekly: Support team reviews top help requests
  2. Monthly: Product team reviews help request trends
  3. Identify: Pages/features with consistently high help volume
  4. Action: UX improvement, better onboarding, clearer copy
  5. Measure: Help request reduction after improvement
  6. Target: 20% reduction in help requests for improved areas

EXAMPLE PRODUCT IMPROVEMENT:
  → Problem: "Slack integration" page generates 50+ help requests/week
  → Root cause: OAuth redirect URI configuration is confusing
  → Fix: Add inline validation, clearer instructions, auto-detection
  → Result: Help requests dropped to 8/week (84% reduction)
  → Savings: 50 tickets/week × $5/ticket = $250/week saved

Integration Points

Edge Cases