How to add AI search on any website platform
Let visitors ask a question in their own words and get an answer drawn from your content. The code is the same everywhere; where you paste it is not. This covers 35 platforms, 19 of which gate custom code behind a paid plan.
Why this matters
Keyword search fails whenever a visitor's vocabulary differs from yours — someone searching "can I send it back" will not match a page titled "Returns Policy". Semantic search matches on meaning instead, so the phrasing gap stops mattering. The genuine upgrade is not the search box; it is that you can finally see which questions your content fails to answer.
What you paste
<script src="https://example.com/search.js" data-site="your_public_key" defer></script>Most hosted AI search products install the same way as a chat widget — one script tag, with the index built by crawling your site.
Where it goes, by platform
The code is identical everywhere. The screen you paste it into is not, and neither is whether your plan allows it — 19 of 35 platforms require a paid plan for custom code.
| Platform | Where it goes | Plan needed |
|---|---|---|
| Shopify | Online Store → Themes → Edit code → layout/theme.liquid | All plans can edit theme code. Checkout pages are restricted to Shopify Plus. |
| WooCommerce | The parent theme's footer.php, or a code-snippets plugin | No plan gate — WooCommerce is self-hosted, so you control the code. |
| BigCommerce | Storefront → Script Manager | Script Manager is available on all plans. |
| Adobe Commerce | Content → Design → Configuration → HTML Head / Footer | Available on Adobe Commerce and Magento Open Source alike. |
| PrestaShop | The theme's templates/_partials/footer.tpl | Self-hosted, so no plan gate. |
| Ecwid | The host page, not Ecwid itself | Custom code on Instant Site requires a paid plan. |
| Squarespace Commerce | Settings → Developer Tools → Code Injection → Footer | Code Injection requires a Business plan or higher. |
| OpenCart | catalog/view/theme/<theme>/template/common/footer.twig | Self-hosted, so no plan gate. |
| Shift4Shop | Settings → Design → Themes & Styles → Edit Template | Template editing is available on all paid plans. |
| WordPress | The active theme's footer.php, or a code-snippets plugin | Self-hosted WordPress has no gate. WordPress.com requires a Business plan for custom code. |
| Webflow | Project settings → Custom code → Footer code | Custom code requires a paid Site plan; it is not available on the free staging domain alone. |
| Squarespace | Settings → Developer Tools → Code Injection → Footer | Code Injection requires a Business plan or higher. Personal plans cannot add custom code. |
| Wix | Settings → Custom Code → Add Custom Code | Custom code requires a paid Premium plan and a connected domain. |
| Framer | Site settings → General → Custom Code → End of <body> | Custom code requires a paid site plan. |
| Ghost | Settings → Code injection → Site Footer | Available on Ghost(Pro) and self-hosted alike. |
| Weebly | Settings → SEO → Footer Code | Custom code requires a paid plan. |
| Duda | Settings → Head HTML / Body End HTML | Available on all paid Duda plans. |
| Carrd | An Embed element set to Code, placed at the end of the page | Embed elements require Carrd Pro. |
| Bubble | Settings → SEO / metatags → Script in the body | Custom code requires a paid Bubble plan. |
| Softr | Settings → Custom code → Body | Custom code requires a paid plan. |
| Next.js | app/layout.tsx, using next/script | None — you control the code. |
| React | public/index.html, before the closing </body> tag | None. |
| Vue | index.html, before the closing </body> tag | None. |
| Nuxt | nuxt.config.ts, under app.head.script | None. |
| Astro | src/layouts/Layout.astro, before </body> | None. |
| SvelteKit | src/app.html, before %sveltekit.body% closes | None. |
| Gatsby | gatsby-ssr.js, via onRenderBody | None. |
| Hugo | layouts/partials/footer.html | None. |
| Jekyll | _layouts/default.html or _includes/footer.html | None. |
| plain HTML | Every page's closing </body> tag | None. |
| HubSpot CMS | Settings → Website → Pages → Site footer HTML | Available on CMS Hub Starter and above. |
| Drupal | The theme's html.html.twig, or the Asset Injector module | Self-hosted, so no plan gate. |
| Joomla | The template's index.php | Self-hosted, so no plan gate. |
| Notion sites | A hosting layer such as Super or Potion, not Notion itself | Depends on the hosting layer; most require a paid plan for custom code. |
| Shopify Hydrogen | app/root.tsx, inside the document body | None beyond your Shopify plan. |
How to check it worked
Search for something using deliberately different wording from your page titles and confirm the right page comes back.
Search for something your site genuinely does not cover and confirm it says so rather than returning a weak match.
Check the query log after a week — the failed searches are the most useful output.
What goes wrong
Indexing pages you would not want quoted, such as old announcements or internal drafts.
Hiding the search entry point in a footer. If it is not in the header, most visitors never find it.
Treating a confident wrong answer as acceptable. Search that cannot say "I don't know" will eventually embarrass you.
Questions
- How is this different from the built-in search?
- Built-in search almost always matches keywords. AI search matches meaning, so it handles phrasings your content never used and can answer rather than just listing links.
- Do I need to write anything new?
- No. It indexes what you have already published. Writing comes later, once you can see which questions came back empty.
Related
term
What is RAG (retrieval-augmented generation)?
RAG is what separates a chatbot that knows your business from one that guesses. Documents are split into passages and indexed by meaning; each question retrieves the closest passages, and the model is instructed to answer only from them.
term
What is an embedding?
Embeddings are why an AI representative can answer "do you deliver to Berlin?" from a page that only says "we ship across the EU". Text is converted to vectors, and similar meaning lands close together.
term
What is a knowledge base?
Traditionally a knowledge base is a help centre humans read. For AI support it is the source material a representative answers from — which means an ordinary website, well written, can serve as one without a separate help centre.
platform
How to add an AI chatbot to Shopify
You add an AI chatbot to Shopify by pasting a script tag into your theme's theme.liquid file, just before the closing body tag. It takes about two minutes, needs no app install, and survives theme updates as long as you don't switch themes entirely.
platform
How to add an AI chatbot to WordPress
The safest way to add an AI chatbot to WordPress is a code-snippets plugin or your theme's built-in footer-scripts field — not editing footer.php, which a theme update will overwrite. All three methods take under five minutes.
platform
How to add an AI chatbot to Webflow
In Webflow you add an AI chatbot under Site Settings → Custom Code → Footer Code, then publish. The step people miss is publishing — custom code does not appear on the live site until you do, and it never appears in the Designer preview.
While you are in that field.
RubyRep installs through the same screen, in the same visit. Enter your site and we will read it and hand you the line to paste.