← Back to all blog posts

How to add an ask ChatGPT button to your documentation with JavaScript

Learn how to add a smart Ask ChatGPT button that automatically opens ChatGPT with context about your current page.

Published on July 6, 2025 by Michael Andreuzza

Want to make your help pages more useful? Here’s how to add a smart button that opens ChatGPT with information about your current page already filled in.

Try it at the end of this page!

Why your help pages need this

People want quick answers when they’re stuck. Instead of making visitors copy your page link and explain everything to ChatGPT themselves, this button does it for them. It’s really helpful for:

  • Tech guides that need explaining
  • Code examples where people need help
  • How-to articles when things go wrong
  • Product guides with tricky features
  • Learning materials that need extra help

What’s wrong with normal help systems

Most help systems have problems:

  • Contact forms are slow
  • FAQ pages can’t answer everything
  • Search might miss what you’re looking for
  • Live chat needs people to staff it
  • Users need help right away

A “Ask ChatGPT” button fixes this by giving instant AI help that knows what page you’re on.

The simple code solution

Here’s the complete code that makes this work:

<button id="ask-chatgpt" class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
  Ask ChatGPT about this page
</button>
document.addEventListener("DOMContentLoaded", () => {
  const askChatGPTButton = document.getElementById("ask-chatgpt");
  
  if (!askChatGPTButton) {
    console.error("Can't find the Ask ChatGPT button.");
    return;
  }
  
  askChatGPTButton.addEventListener("click", () => {
    // Get the current page web address and title
    const currentUrl = window.location.href;
    const pageTitle = document.title;
    
    // Create a message for ChatGPT
    const prompt = `Please read the documentation from ${currentUrl} (titled: "${pageTitle}") so I can ask questions about it. This is a help page that I'd like to discuss with you.`;
    
    // Make the message safe for web addresses
    const encodedPrompt = encodeURIComponent(prompt);
    
    // Open ChatGPT with the pre-written message
    const chatGPTUrl = `https://chatgpt.com/?q=${encodedPrompt}`;
    
    // Open in a new tab
    window.open(chatGPTUrl, "_blank");
  });
});

How it works

Smart setup

The code automatically helps ChatGPT by:

  1. Getting the current page address - Shows ChatGPT exactly what page you’re on
  2. Taking the page title - Gives quick context about what’s on the page
  3. Writing a helpful message - Sets up ChatGPT to know it’s looking at help content
  4. Making it web-safe - Handles special characters properly
  5. Opening in new tab - Keeps your original page open

What users experience

  • One click - No copying or explaining needed
  • Smart context - ChatGPT knows what page you’re talking about
  • New tab - Your original page stays open
  • Works reliably - Handles problems gracefully

Works great with modern web tools

Using with Astro

This button works well with Astro websites:


<button 
  id="ask-chatgpt" 
  class="inline-flex items-center px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors"
>
 
  Ask ChatGPT about this page
</button>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    const askChatGPTButton = document.getElementById("ask-chatgpt");
    
    if (!askChatGPTButton) return;
    
    askChatGPTButton.addEventListener("click", () => {
      const currentUrl = window.location.href;
      const pageTitle = document.title;
      
      const prompt = `Please read the documentation from ${currentUrl} (titled: "${pageTitle}") so I can ask questions about it. This is a help page that I'd like to discuss with you.`;
      
      const encodedPrompt = encodeURIComponent(prompt);
      const chatGPTUrl = `https://chatgpt.com/?q=${encodedPrompt}`;
      
      window.open(chatGPTUrl, "_blank");
    });
  });
</script>

Styling with Tailwind CSS

The button uses Tailwind CSS classes for modern looks:

  • bg-green-500 - Green color like ChatGPT
  • hover:bg-green-600 - Changes color when you hover
  • transition-colors - Smooth color changes
  • inline-flex items-center - Lines up icons nicely

Better Ways to use this

Getting more page info

For even better AI help, collect more details about the page:

const askChatGPTButton = document.getElementById("ask-chatgpt");

askChatGPTButton.addEventListener("click", () => {
  const currentUrl = window.location.href;
  const pageTitle = document.title;
  
  // Get more page details
  const metaDescription = document.querySelector('meta[name="description"]')?.content || '';
  const h1Text = document.querySelector('h1')?.textContent || '';
  const breadcrumbs = Array.from(document.querySelectorAll('.breadcrumb a')).map(a => a.textContent).join(' > ');
  
  const prompt = `Please read the documentation from ${currentUrl} (titled: "${pageTitle}"). 
  
  Page description: ${metaDescription}
  Main heading: ${h1Text}
  Section: ${breadcrumbs}
  
  This is a help page that I'd like to discuss with you.`;
  
  const encodedPrompt = encodeURIComponent(prompt);
  const chatGPTUrl = `https://chatgpt.com/?q=${encodedPrompt}`;
  
  window.open(chatGPTUrl, "_blank");
});

Best ways to use this on help sites

Where to put the button

  • Top of page - People see it right away
  • Floating button - Always there when needed
  • End of sections - Natural place to ask for help
  • Error pages - When people are really stuck

Making better messages

  • Clear context - Tell ChatGPT what kind of content it is
  • Specific requests - Guide how ChatGPT should respond
  • Page location - Include where this page fits in your site
  • User needs - Set expectations for the conversation

Design tips

  • Match your site - Keep the same look and feel
  • Clear labels - Make it obvious what the button does
  • Good colors - Make sure it’s easy to read
  • Works on phones - Test on all devices

Tracking how people use it

See how visitors use AI help:

askChatGPTButton.addEventListener("click", () => {
  // Track when people click
  if (typeof gtag !== 'undefined') {
    gtag('event', 'ai_help_requested', {
      'page_url': window.location.href,
      'page_title': document.title,
      'ai_service': 'chatgpt'
    });
  }
  
  // Rest of your code...
});

Good for SEO and site speed

SEO benefits

  • Better user experience - People engage more with your site
  • Less people leaving - Users get help instead of giving up
  • Longer visits - More time spent on your site
  • Social sharing - Users might share cool AI-assisted discoveries

Keeping your site fast

  • Small code - Doesn’t slow down your pages
  • Efficient events - Works well with multiple buttons
  • Loads when needed - Only runs when necessary
  • Handles errors - Works even when things go wrong

Real examples of how to use this

Code documentation

“Ask ChatGPT to help me understand this code example and show me how to use it.”

How-To guides

“Get AI help with this tutorial - ask for clarification, examples, or help fixing problems.”

Product help

“Have questions about this feature? Ask ChatGPT for detailed explanations and examples.”

Learning materials

“Need help understanding this topic? ChatGPT can provide more examples and explanations.”

Conclusion

Adding an “Ask ChatGPT” button to your help pages creates a powerful connection between your content and AI assistance. It makes it easier for users who need help, improves their experience, and shows that you care about helping them succeed.

This simple code solution works great with modern web tools like Astro and Tailwind CSS, making it easy to add to any help site. The smart approach ensures ChatGPT has the information it needs to give relevant, helpful answers.

Ready to make your help pages better? Add this button to your next project and watch as visitors get the AI-powered help they need, right when they need it.

/Michael Andreuzza

Did you like this post? Please share it with your friends!