Ask AI: how MetaPilot puts a one-click ChatGPT button on your pages

Home / Blog / Ask AI: how MetaPilot puts a one-click ChatGPT button on your pages


Your visitors are already asking an AI about you. They copy your URL into ChatGPT, ask whether you're a fit, and never scroll the page you spent a week writing. Ask AI is a MetaPilot feature that meets them there: a small row of buttons injected into your page that opens ChatGPT, Claude, Gemini, Perplexity or Meta AI already pointed at that exact URL, with a research prompt you control. There is no chatbot and no AI backend behind it, which is the whole trick - it costs you nothing per click.

What is the Ask AI widget?

It's a row of provider buttons that MetaPilot injects into a page you choose, at the Cloudflare edge, without touching your origin or your templates. A visitor clicks the assistant they already trust, that assistant opens in a new tab with a prompt about your page pre-filled, and they start asking. That's the entire feature.

It is deliberately not a chatbot. There's no model to pick, no knowledge base to keep in sync, no hallucinated support answers to apologize for, and no per-message bill. The intelligence is outsourced to the assistant the visitor already pays for. What MetaPilot ships is a configurable set of deep links plus a prompt, placed exactly where you want it on the page.

Why send a visitor to ChatGPT instead of keeping them on your site?

Because they were going to leave anyway. The behavior already happened: research moved into the assistant, and the tab with your page in it is just where they got the URL. The question is whether they arrive in ChatGPT with a good prompt and your page as context, or with "is x2y any good" and whatever the model remembers from 2024.

That's the Generative Engine Optimization framing. You cannot control what an assistant says about you in general, but you can control the prompt and the source URL when the handoff starts on your own page. A visitor who clicks Ask AI on your B2B pricing page starts with your pricing page loaded and a prompt you wrote. That's a much better first turn of the conversation than the one they'd type themselves.

How does Ask AI actually work?

MetaPilot already runs a Cloudflare Worker on your zone to inject structured data and Open Graph tags. Ask AI rides the same request. Four steps:

  1. You enable it on a page from your sitemap list in the portal. Enabling is per page, not site-wide, so a page never gets the widget by accident.
  2. You place it visually by clicking the spot on your own page where the buttons should sit. MetaPilot stores that as a selector plus an occurrence index and a position (above, below, inside-at-the-top, inside-at-the-bottom).
  3. The Worker injects it on the next request. It already fetches per-URL config; now that config carries an ask_ai block, and the Worker rewrites the HTML at the chosen anchor.
  4. The visitor clicks a provider and lands in that assistant with the prompt pre-filled.

What lands in your HTML is one custom element with its config baked in, plus a loader script:

<metapilot-ask-ai data-config="eyJsYWJlbCI6IkFzayBBSSBhYm91dCB0aGlzIHBhZ2UiLC4uLn0="></metapilot-ask-ai>
<script type="module" src="https://metapilot.x2y.app/embed/ask-ai.js"></script>

That base64 blob is the page's config, decoded to something like this:

{
  "selector": "div.product-summary > h1",
  "occurrence": 0,
  "position": "after",
  "label": "Ask AI about this page",
  "prompt": "Research Industrial Rack Systems using https://example.com/racks and answer my questions about it.",
  "providers": ["chatgpt", "claude", "gemini", "perplexity", "meta-ai"],
  "margin": { "top": 16, "right": 0, "bottom": 24, "left": 0 }
}

Because the config is baked into the attribute, the widget bundle makes no runtime API call. It's a static, cacheable file served from one stable URL. Your page doesn't get slower and MetaPilot doesn't become a dependency in your visitor's critical path.

The widget itself renders in a Shadow DOM web component. That matters more than it sounds: your site's CSS can't leak in and break it, and its CSS can't leak out and break your site. One neutral look that survives contact with a fifteen-year-old Magento theme.

What happens when someone clicks a button?

Nothing exotic. The prompt gets URL-encoded and handed to the provider's own query parameter:

ChatGPT     https://chatgpt.com/?q={prompt}
Claude      https://claude.ai/new?q={prompt}
Gemini      https://gemini.google.com/app?q={prompt}
Perplexity  https://www.perplexity.ai/search/new?q={prompt}
Meta AI     https://www.meta.ai/?q={prompt}

No account linking, no API keys, no tokens spent on your side. If a visitor isn't signed in to that assistant, that's between them and the assistant. You pick which providers show up per page; if you leave it alone, all five render.

How do you choose where the buttons go without editing code?

This was the interesting problem to solve. You can't script a cross-origin iframe of a customer's live site, so a naive "click to place" picker is impossible. MetaPilot proxies your page through its own origin instead: it fetches the page with the MetaPilot crawler, strips the page's scripts so nothing fights back, injects a base tag so images and CSS still resolve, and inlines a picker script. You get your real page in an iframe, hover-highlighted, and you click the element you want to anchor to.

From that click MetaPilot computes a selector the Cloudflare HTMLRewriter can actually handle. HTMLRewriter has no :nth-child, so a bare selector isn't enough. It stores a selector plus a zero-based occurrence, and the Worker counts matches and injects at the Nth one. You also get a live ghost preview of the four positions before you commit.

Two guardrails worth knowing. The picker only works on the Cloudflare zone you've connected, which doubles as proof you own the domain. And the injection fails open: if a selector ever becomes invalid because you redesigned the page, the Worker swallows the error and serves the page untouched. A stale selector costs you the widget, never the page.

What it deliberately doesn't do

  • No AI backend. No model calls, no conversation storage, nothing for you to train or host.
  • No per-use cost. A click is a link click. Ten thousand of them cost the same as zero.
  • No origin changes. No plugin, no tag manager, no template edit, no deploy. It's edge injection on a zone you already connected.
  • No site-wide surprise. Opt in one page at a time, and each one needs an explicit placement before it goes live.

Where should you put it?

Start with the pages where people are evaluating rather than browsing: product and service pages, pricing, comparison pages, technical spec sheets. Those are exactly the pages a buyer pastes into an assistant to ask "does this actually do what I need." Blog posts work too, with a prompt aimed at the takeaway rather than the sale.

Then write the prompt yourself. The default is fine and generic - "research this page and answer my questions about it" - but the version you write is better, because you know what people are actually trying to find out. On a spec page, "compare these specs to what I'd need for a 40-bay installation" beats anything generic.

Plan limits

Ask AI is capped by page count per tier: Free gets 1 page, Starter 5, Growth 25, and Business is unlimited. The cap counts placed pages, so you can move the widget around while you're figuring out what works.

Try it

If buyers are going to ask an AI about you regardless, it's better to hand them one that's already looking at the right page. Ask AI is live in MetaPilot now, and the free tier covers a page so you can see it on your own site before deciding anything: metapilot.x2y.app.

And if you'd rather have someone set the whole thing up with you, that's what we do all day. Say hello.


Written by X2Y.DEV
MetaPilot AEO GEO AI Search Cloudflare Workers
Back to Blog

0%