Free Tool

Ask ChatGPT Button Generator

Add a floating "Ask ChatGPT" button that appears when visitors select text on your page. Opens ChatGPT with context about the selected content and your page URL.

Configuration

This text will appear before the selected content in the ChatGPT prompt

Adds "This text is from: [page URL]" to the prompt

Preview

Try selecting some text below to see the button appear:

This is an example paragraph of content from your website. When visitors select any text on your page, a floating button will appear near their selection. Go ahead and select some text in this preview area to see how it works! The button will appear right where you finish your selection.

This feature helps your visitors get instant AI-powered explanations about any part of your content. It's a great way to increase engagement and help users understand complex topics.

Example ChatGPT prompt:

Can you explain or give me more insights about "your selected text". This text is from: https://yoursite.com/article

Installation Code

Add this script to your website, just before the closing </body> tag:

<!-- Ask ChatGPT Button by Riff Analytics -->
<script>
(function() {
  // Configuration
  var config = {
    buttonText: 'Ask ChatGPT',
    promptPrefix: 'Can you explain or give me more insights about',
    includePageUrl: true,
    buttonStyle: {
      backgroundColor: '#10b981',
      color: '#000000',
      padding: '8px 16px',
      borderRadius: '8px',
      border: 'none',
      fontSize: '14px',
      fontWeight: '600',
      cursor: 'pointer',
      display: 'flex',
      alignItems: 'center',
      gap: '6px',
      boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
      zIndex: '999999'
    }
  };

  var button = null;
  var selectedText = '';

  function createButton() {
    button = document.createElement('button');
    button.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg> ' + config.buttonText;
    button.style.position = 'fixed';
    button.style.display = 'none';
    
    Object.keys(config.buttonStyle).forEach(function(key) {
      button.style[key] = config.buttonStyle[key];
    });

    button.addEventListener('click', function() {
      var prompt = config.promptPrefix + ' "' + selectedText + '"';
      if (config.includePageUrl) {
        prompt += '. This text is from: ' + window.location.href;
      }
      var url = 'https://chat.openai.com/?q=' + encodeURIComponent(prompt);
      window.open(url, '_blank');
      hideButton();
    });

    document.body.appendChild(button);
  }

  function showButton(x, y) {
    if (!button) createButton();
    button.style.left = x + 'px';
    button.style.top = (y + 10) + 'px';
    button.style.display = 'flex';
  }

  function hideButton() {
    if (button) button.style.display = 'none';
  }

  document.addEventListener('mouseup', function(e) {
    setTimeout(function() {
      var selection = window.getSelection();
      selectedText = selection.toString().trim();
      
      if (selectedText.length > 5) {
        var range = selection.getRangeAt(0);
        var rect = range.getBoundingClientRect();
        showButton(rect.left + window.scrollX, rect.bottom + window.scrollY);
      } else {
        hideButton();
      }
    }, 10);
  });

  document.addEventListener('mousedown', function(e) {
    if (button && !button.contains(e.target)) {
      hideButton();
    }
  });
})();
</script>
<!-- End Ask ChatGPT Button -->

How It Works

User Selects Text

When a visitor highlights any text on your page, the script detects the selection.

Button Appears

A floating button appears near the selected text, inviting users to ask ChatGPT.

Opens ChatGPT

Clicking the button opens ChatGPT with the selected text and your page context.

Benefits

Increase AI Citations

When users ask AI about your content with your URL, it helps AI models associate your brand with the topic.

Better User Experience

Give visitors an easy way to get AI-powered explanations and insights about your content.

Easy Installation

Just copy and paste the script - no coding knowledge required. Works on any website.

Fully Customizable

Match your brand colors, customize the button text, and adjust the prompt to your needs.

Track Your AI Visibility

Want to know how AI engines actually talk about your brand? Try Riff Analytics for comprehensive AI visibility tracking.

Start Free Trial