Create your own

How it works technically

The widget is a small piece of JavaScript that does three things:

1. Renders AI platform icons -- a floating button or inline row of icons (ChatGPT, Claude, Gemini, Grok, Perplexity, Copilot) that visitors can click.
2. Copies your prompt to clipboard -- when a visitor clicks an icon, the widget copies a pre-written prompt (that you control) to their clipboard using the Clipboard API.
3. Opens the AI platform -- the widget opens the chosen AI in a new tab. For platforms that support URL pre-fill (like ChatGPT and Perplexity), the prompt is injected directly into the URL. For others, the visitor just pastes.

That's it. No backend AI processing, no API keys to manage, no chatbot to maintain. The AI platforms do all the work.

Building it yourself

Here's a minimal implementation to get you started:

1. The HTML

Create a container with buttons for each AI platform:

<div id="ask-ai-widget">
  <p>Ask AI about us</p>
  <button data-provider="chatgpt">ChatGPT</button>
  <button data-provider="claude">Claude</button>
  <button data-provider="gemini">Gemini</button>
</div>

2. The JavaScript

Handle clicks: copy the prompt and open the AI platform:

const PROMPT = "Compare Acme Corp to alternatives for small businesses. Be honest about pros and cons.";

const URLS = {
  chatgpt: "https://chatgpt.com/?q=" + encodeURIComponent(PROMPT),
  claude: "https://claude.ai/new",
  gemini: "https://gemini.google.com/app",
};

document.querySelectorAll("#ask-ai-widget button").forEach(btn => {
  btn.addEventListener("click", async () => {
    const provider = btn.dataset.provider;
    await navigator.clipboard.writeText(PROMPT);
    window.open(URLS[provider], "_blank");
  });
});

3. The styling

Add CSS to make it look good -- a floating button in the corner, a panel that opens on click, SVG icons for each platform. You'll want to handle light/dark themes, mobile responsiveness, and positioning. Use Shadow DOM if you want the widget to be fully isolated from the host page's styles.

4. The details

This is where it gets more involved. A production-ready widget also needs:

• • URL pre-fill detection -- some platforms (ChatGPT, Perplexity, Copilot) accept prompts via URL parameters, others don't. You need to handle both paths.
• • Clipboard fallback -- the Clipboard API fails in non-HTTPS contexts and some iframes. You need a execCommand('copy') fallback.
• • Toast notification -- tell the visitor their prompt was copied and which AI is opening.
• • Accessibility -- ARIA labels, keyboard navigation, focus management, Escape to close.
• • Shadow DOM isolation -- so your widget's styles don't leak into or get affected by the host site.
• • Bundle size -- keep it under 15-20KB so it doesn't affect the host page's Core Web Vitals.

Totally doable. Budget a day or two if you're experienced with web components.

Or just use ours

We already built all of the above -- and more. Here's what you get out of the box, for free: