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 reducing support tickets through in-product guidance. Triggers on phrases like "in-app messaging", "contextual help", "in-app support", "product help widget", "real-time assistance", "in-product support", "contextual support", "help widget", "in-app chat", "user guidance".

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

User interacts with product; behavior tracked via analytics SDK.
System detects support-triggering events (errors, errors, confusion patterns).
Contextual help widget appears (non-intrusive, dismissible).
User clicks widget → sees relevant articles, FAQs, or live chat option.
AI analyzes user context (current page, recent actions, error state) to suggest solutions.
User either self-resolves via suggested content or escalates to live agent.
Agent receives full context: page URL, user actions, error logs, account info.
Agent resolves issue; resolution logged for future prevention.
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

Intercom/Crisp/Zendesk Web Widget: In-app chat platform, widget customization, agent workspace
Product Analytics (Mixpanel, Amplitude, Heap): User behavior tracking, event data, session recording
Error Tracking (Sentry, LogRocket, Bugsnag): Client-side error capture, stack traces, error context
CRM (Salesforce, HubSpot): Customer account data, tier information, support history
Knowledge Base (Zendesk Guide, Notion, Confluence): Contextual article recommendations, search
Feature Flags (LaunchDarkly, Split.io): Enable/disable help prompts per segment
A/B Testing (Optimizely, VWO): Test prompt copy, timing, design variations
Session Recording (FullStory, Hotjar): Replay user sessions for context understanding

Edge Cases

Widget blocks UI elements: Floating widget covers important buttons or content
Position testing: Test widget placement across all key pages
Z-index management: Ensure widget doesn't overlap critical CTAs
Mobile responsiveness: Widget should be smaller/repositioned on mobile
User control: Allow users to reposition or hide widget permanently

Performance impact: Widget JavaScript slows page load or causes layout shifts
Load asynchronously: Don't block rendering
Code size: Keep SDK under 15KB gzipped
Lazy loading: Load widget after page fully renders
Performance monitoring: Track impact on Core Web Vitals (LCP, FID, CLS)

False positive triggers: Proactive help appears when user doesn't need it
Confidence threshold: Only show prompt at 70%+ confidence
User feedback: "Was this helpful? Yes/No" to train model
A/B testing: Test trigger sensitivity with control group
Throttling: Max 1 prompt per session prevents annoyance

Context loss between sessions: User returns next day; context doesn't persist
Persistent context: Store last known context in user profile
Session continuity: If user was mid-conversation, resume chat
Recent activity: Show "Last time, you were working on..." context
Limit: Only persist context for 7 days (privacy consideration)

Enterprise SSO and widget authentication: Widget doesn't know who the user is
Pass user identity to widget via JavaScript SDK initialization
Token-based auth: JWT token passed to widget for verification
Fallback: If identity unavailable, widget operates in anonymous mode
GDPR: Ensure identity passing complies with data protection requirements

Multi-language products: Widget must support same languages as product
Widget localization: Translate widget text, prompts, and responses
Context-aware language: Detect user's product language setting
Agent language matching: Route to agent who speaks user's language
Translation: Real-time translation if no matching agent available

Widget abuse: Users spam widget with test messages or inappropriate content
Rate limiting: Max 10 messages per minute per user
Content filtering: Flag inappropriate language for review
Bot detection: CAPTCHA for suspicious patterns
Abusive user management: Temporary restriction, then escalation to security team

Disclaimer: All rights reserved by Circulos AI. These skills are specifically designed for Claude Code, Claude Cowork, Codex, and OpenClaw. When using or referencing any skill, please provide proper attribution to Circulos AI.