Creating smart documentation with ChatGPT integration using JavaScript

Transform your documentation and support pages by integrating a smart AI helper that provides instant, contextual assistance to your users.

Originally posted on: https://lexingtonthemes.com/blog/posts/open-page-in-chatgpt/

The Problem with Traditional Help Systems

Most help systems fall short of user expectations:

Contact forms create delays and friction
FAQ sections can’t cover every scenario
Search functionality often misses the mark
Live chat requires dedicated staffing
Users need immediate assistance, not lengthy processes

The AI-Powered Solution

An intelligent help button that automatically provides ChatGPT with your page’s context eliminates these barriers. Users get instant, relevant assistance without having to explain their situation from scratch.

Implementation

Basic HTML Structure

<button id="ai-help" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
  Get AI Help for This Page
</button>

JavaScript Implementation

document.addEventListener("DOMContentLoaded", () => {
  const aiHelpButton = document.getElementById("ai-help");
if (!aiHelpButton) {
    console.error("AI help button not found.");
    return;
  }
  aiHelpButton.addEventListener("click", () => {
    // Capture page information
    const pageUrl = window.location.href;
    const pageTitle = document.title;
    // Craft contextual prompt
    const aiPrompt = `I need help with the documentation at ${pageUrl} (titled: "${pageTitle}"). Please review this help page so I can ask specific questions about it.`;
    // Encode for URL safety
    const encodedPrompt = encodeURIComponent(aiPrompt);
    // Launch ChatGPT with context
    const chatUrl = `https://chatgpt.com/?q=${encodedPrompt}`;
    window.open(chatUrl, "_blank");
  });
});

Advanced Context Gathering

Enhance AI understanding by capturing additional page elements:

const aiHelpButton = document.getElementById("ai-help");
aiHelpButton.addEventListener("click", () => {
  const pageUrl = window.location.href;
  const pageTitle = document.title;
  // Extract additional context
  const description = document.querySelector('meta[name="description"]')?.content || '';
  const mainHeading = document.querySelector('h1')?.textContent || '';
  const navigation = Array.from(document.querySelectorAll('.breadcrumb a'))
    .map(link => link.textContent)
    .join(' > ');
  const enhancedPrompt = `Please analyze the documentation at ${pageUrl} (titled: "${pageTitle}").
  Description: ${description}
  Main Topic: ${mainHeading}
  Navigation Path: ${navigation}
  This is a help document I'd like to discuss with you.`;
  const encodedPrompt = encodeURIComponent(enhancedPrompt);
  const chatUrl = `https://chatgpt.com/?q=${encodedPrompt}`;
  window.open(chatUrl, "_blank");
});

Strategic Placement

Optimal Button Locations

Header area — Immediate visibility for users
Floating element — Persistent availability while scrolling
Section endings — Natural pause points for questions
Error states — Critical help moments

Framework Integration

Astro Implementation

<button 
  id="ai-help" 
  class="inline-flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
>
  Get AI Assistance
</button>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const aiHelpButton = document.getElementById("ai-help");
    if (!aiHelpButton) return;
    aiHelpButton.addEventListener("click", () => {
      const pageUrl = window.location.href;
      const pageTitle = document.title;
      const prompt = `Please review the documentation at ${pageUrl} (titled: "${pageTitle}") so I can ask questions about it.`;
      const encodedPrompt = encodeURIComponent(prompt);
      const chatUrl = `https://chatgpt.com/?q=${encodedPrompt}`;
      window.open(chatUrl, "_blank");
    });
  });
</script>

Analytics Integration

Track usage patterns to optimize your help system:

aiHelpButton.addEventListener("click", () => {
  // Analytics tracking
  if (typeof gtag !== 'undefined') {
    gtag('event', 'ai_assistance_requested', {
      'page_location': window.location.href,
      'page_title': document.title,
      'ai_provider': 'chatgpt'
    });
  }
// Continue with button functionality...
});

User Experience Benefits

Immediate Value

Single-click activation — No complex setup required
Contextual awareness — AI understands the specific page
Parallel browsing — Original page remains accessible
Consistent functionality — Works reliably across devices

Content Applications

Technical documentation — Complex concepts explained simply
Code examples — Interactive debugging and clarification
Tutorial content — Step-by-step guidance and troubleshooting
Product guides — Feature explanations and use cases

Performance Considerations

Efficient Implementation

Minimal footprint — Lightweight code that doesn’t impact page speed
Event optimization — Efficient handling of multiple button instances
Lazy loading — Activates only when needed
Error resilience — Graceful handling of edge cases

SEO Advantages

Enhanced engagement — Users spend more time with your content
Reduced bounce rates — Help is available when users get stuck
Improved user signals — Better interaction metrics
Content amplification — AI-assisted discovery of related topics

Customization Options

Styling with Tailwind CSS

/* Base button styling */
.ai-help-btn {
  @apply px-4 py-2 bg-emerald-500 text-white rounded-lg;
  @apply hover:bg-emerald-600 transition-colors;
  @apply inline-flex items-center gap-2;
}
/* Floating variation */
.ai-help-floating {
  @apply fixed bottom-6 right-6 z-50;
  @apply shadow-lg hover:shadow-xl;
}

Message Customization

Tailor the AI prompt based on content type:

const getContextualPrompt = (pageType) => {
  const baseInfo = `${window.location.href} (titled: "${document.title}")`;
const prompts = {
    tutorial: `I'm working through the tutorial at ${baseInfo}. Please review it so I can ask questions about the steps.`,
    reference: `I need help with the reference documentation at ${baseInfo}. Please familiarize yourself with it.`,
    troubleshooting: `I'm having issues and found this troubleshooting guide at ${baseInfo}. Please review it to help me solve my problem.`
  };
  return prompts[pageType] || `Please review the documentation at ${baseInfo} so I can ask questions about it.`;
};
const prompts = {
    tutorial: `I'm working through the tutorial at ${baseInfo}. Please review it so I can ask questions about the steps.`,
    reference: `I need help with the reference documentation at ${baseInfo}. Please familiarize yourself with it.`,
    troubleshooting: `I'm having issues and found this troubleshooting guide at ${baseInfo}. Please review it to help me solve my problem.`
  };
  return prompts[pageType] || `Please review the documentation at ${baseInfo} so I can ask questions about it.`;
};

Implementation Best Practices

Design Guidelines

Visual consistency — Match your site’s design language
Clear labeling — Make the button’s purpose obvious
Accessibility — Ensure keyboard navigation and screen reader support
Mobile optimization — Test across all device sizes

Content Strategy

Contextual messaging — Adapt prompts to content type
Clear expectations — Set appropriate user expectations
Progressive enhancement — Ensure core functionality without JavaScript
Fallback options — Provide alternative help methods

This AI-powered approach transforms static help pages into dynamic, interactive resources that provide immediate value to users while reducing support overhead for your team.

Creating smart documentation with ChatGPT integration using JavaScript