Add an "Ask AI" button to your site
askai-button is a component that shows an "Ask AI" button in the corner of a web page. The visitor types a question and picks an AI service, and ChatGPT, Claude or Google AI Mode opens in a new tab with the question and the address of your site already filled in.
The button in the corner is the real thing
The "Ask AI" button at the bottom right of this page is askai-button itself. Press it and a panel opens. Type a question or pick one of the examples, then send it. The AI service you chose opens in a new tab and receives your question and the address of this site.
This site is available in Japanese and English. The wording of the button and the panel follows the language of the page (<html lang>). Open the Japanese pages with "日本語" at the top of the screen and the button turns Japanese too.
Key properties
No API key, no server
No AI API is called. The button only builds the address of an AI service and opens it, so there is no API key to get, no server-side code and no usage fee.
The question is not stored or sent
The button itself makes no network requests. It does not store, send or measure the question. The only thing it keeps in the browser is the AI service chosen last. The WordPress plugin can, if you switch it on, keep monthly totals of clicks in the database of your own site, never the question.
One line to install
Add one <script> tag and it works on any site. An npm package and a WordPress plugin are available as well.
Follows the language of the page
The wording of the button and the panel follows the language of the page, not the settings of the visitor's browser. Japanese and English are built in, and other languages can be added.
One small file
The whole thing is one file, askai-button.min.js. Including its CSS it is about 8.8 KB after gzip compression. It depends on no other library.
Free and open source
The library is released under the MIT License and the WordPress plugin under GPL-2.0-or-later. There is no paid version.
How it works
The visitor types a question
They press the button, type a question into the panel and choose an AI service.
The button builds a text
A short text containing the question and the address of your site is put together inside the visitor's browser.
The AI service opens in a new tab
The chosen AI service is opened with an address that carries this text. The answer is generated by that service.
Only the address is passed, not the content of the page. Whether the AI service goes and reads the site, and how it answers, is up to that service. See "How it works and caveats" for details.
The text handed to the AI
This is all the AI service receives (the built-in text on an English page). {question} is replaced by the visitor's question and {site_url} by the address of the top of the site.
{question}
Please refer to the following URL to answer this question.
{site_url}
For example, asking "Does it work with WordPress?" on this site produces this text:
Does it work with WordPress?
Please refer to the following URL to answer this question.
https://elephancube.github.io/askai-button/en/
The text can be changed freely. See "Reference" for how.
Where to go next
- Install: how to add it — a
<script>tag (with the file on your own server or from a CDN), npm, or the WordPress plugin - Reference: options,
data-*attributes, API and events - WordPress: the settings screen, per-post settings and filters
- How it works and caveats: privacy, differences between the AI services, and what to do when the AI cannot read the site
- GitHub repository: source code and bug reports