How to add a claude help button to your website with JavaScript

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

Why your help pages need a Claude button

People want quick answers when they’re stuck. Instead of making visitors copy your page link and explain everything to Claude themselves, this button does it for them. Claude is especially good for:

Detailed technical explanations
Code analysis and examples
Complex problem-solving
Thoughtful, well-reasoned responses
Breaking down complicated topics

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 Claude help button fixes this by giving instant AI assistance that knows what page you’re on.

The complete code

Here’s the HTML for the button:

<button id="ask-claude" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors">
  Ask Claude about this page
</button>

And here’s the JavaScript that makes it work:

  document.addEventListener("DOMContentLoaded", () => {
    const askClaudeButton = document.getElementById("ask-claude");
    
    if (!askClaudeButton) {
      console.error("Missing Claude button.");
      return;
    }
    
    // Function to create the prompt
    function createPrompt() {
      const currentUrl = window.location.href;
      const pageTitle = document.title;
      return `Please read the documentation from ${currentUrl} (titled: "${pageTitle}") so I can ask questions about it. This is a documentation page that I'd like to discuss with you.`;
    }
    
    // Claude button functionality
    askClaudeButton.addEventListener("click", () => {
      const prompt = createPrompt();
      const encodedPrompt = encodeURIComponent(prompt);
      const claudeUrl = `https://claude.ai/chat?q=${encodedPrompt}`;
      window.open(claudeUrl, '_blank');
    });
  });

How it works

Smart setup

The code automatically helps Claude by:

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

What users experience

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

Key features of this code

Clean organization

Uses a createPrompt() function for easy customization
Checks for the button before setting up events
Uses modern JavaScript with type="module"

Error handling

Checks if button exists before adding click events
Shows helpful error messages in the console
Gracefully handles missing elements

User-friendly design

Opens Claude in a new tab
Pre-fills the conversation with page context
Works seamlessly with Claude’s interface

Styling with Tailwind CSS

The button uses Tailwind CSS classes for modern looks:

Claude Button:

bg-orange-500 - Orange color like Claude’s brand
hover:bg-orange-600 - Darker orange on hover
px-4 py-2 - Comfortable padding
text-white - White text for good contrast
rounded - Rounded corners for modern look
transition-colors - Smooth color changes

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

You can customize the createPrompt() function to include more page details:

function createPrompt() {
  const currentUrl = window.location.href;
  const pageTitle = document.title;
  const metaDescription = document.querySelector('meta[name="description"]')?.content || '';
  const h1Text = document.querySelector('h1')?.textContent || '';
  
  return `Please read the documentation from ${currentUrl} (titled: "${pageTitle}"). 
  
  Page description: ${metaDescription}
  Main heading: ${h1Text}
  
  This is a help page that I'd like to discuss with you.`;
}

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

Why choose Claude for help?

Claude is especially good for:

Technical Content:

Detailed code explanations
Complex problem analysis
Step-by-step breakdowns

Thoughtful Responses:

Well-reasoned answers
Multiple perspectives
Helpful follow-up questions

User Experience:

Clean, readable interface
Good at understanding context
Handles long conversations well

Tracking how people use it

See how visitors use Claude help:

// Add this inside the button's click event
if (typeof gtag !== 'undefined') {
  gtag('event', 'claude_help_requested', {
    'page_url': window.location.href,
    'page_title': document.title,
    'ai_service': 'claude'
  });
}

Real examples of how to use this

Code documentation

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

How-To guides

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

Product help

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

Learning materials

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

Advanced features

Contextual prompts

Customize prompts based on the page type:

function createPrompt() {
  const currentUrl = window.location.href;
  const pageTitle = document.title;
  const pageType = document.body.dataset.pageType || 'documentation';
  
  const prompts = {
    'api': `Please help me understand this API documentation from ${currentUrl} (titled: "${pageTitle}").`,
    'tutorial': `Please help me with this tutorial from ${currentUrl} (titled: "${pageTitle}").`,
    'troubleshooting': `Please help me troubleshoot using this guide from ${currentUrl} (titled: "${pageTitle}").`,
    'documentation': `Please read the documentation from ${currentUrl} (titled: "${pageTitle}") so I can ask questions about it.`
  };
  
  return prompts[pageType] || prompts.documentation;
}

Conclusion

Adding a Claude help 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 and is easy to add to any help site. The smart approach ensures Claude 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 with Claude’s thoughtful assistance.

/Michael Andreuzza