Add an AI chat widget to WordPress
Put an AI assistant on a WordPress site in about ten minutes — scripts plugin or theme footer, why to use a child theme, and the cache purge people forget.
- Time
- 10–15 minutes
- Coding needed
- None
- Paste it
- Once, site-wide
- Ongoing edits
- None
What usually goes wrong
Three things account for nearly every failed install. All three are easy to avoid and hard to diagnose afterwards, so they are here rather than buried in troubleshooting.
The key in the snippet on screen is masked
publishable_••••• — the prefix and dots, not the key. Paste that and every message the assistant tries to send is rejected. The full key is shown once, at the moment it is created or regenerated. If nobody kept it, use Regenerate and copy the new one immediately.Paste it once, into a shared template
Saving is not always publishing
What you’ll need
- Access to edit your site's template or custom-code settingsThe exact field differs per platform and is named on this page.
- Permission to publish the siteOn most platforms an editor can save a draft but not release it.
- The assistant's snippet and full publishable keyBoth come from one screen in AnswerWeave.
- Every hostname the site answers onThe live domain, the
wwwform if you serve it, and your platform's own preview address while you test.
Where everything lives
Everything you need on the AnswerWeave side is on a single screen. Open it once and you can finish the first three steps without navigating away.
- General
- Look & Behavior
- Notifications
- Widget Install
- Advanced
- 1API key configured — The current key, and the Regenerate button that reveals a fresh one.
- 2Restrict where this key works — The domain list, with Add another domain and Add domain.
- 3Copy the embed snippet — The snippet, with a Copy button, and your bot ID already inside it.
- 4Preview the widget — Open preview, which runs the real assistant with no site key involved.
The procedure
- 1
Get a key you can actually use
Look at API key configured. If you still have the full
publishable_…string from when this assistant was set up, use it and skip ahead. If all you can see ispublishable_•••••, the key is masked and cannot be recovered — you need a new one: click Regenerate and copy the key immediately, because it is displayed once and never again.Regenerating invalidates the old key at once
Any site already running on the previous key stops being served the moment you regenerate. If this assistant is live somewhere else, plan to update that install in the same sitting. Your domain restrictions carry over automatically — you do not have to set them again. - 2
Restrict where the key works
The key is public — it has to be, because it runs in your visitor’s browser. What stops anyone else reusing it is this list, and a brand-new key allows every origin until you fill it in. Type a hostname into Add another domain, bare hostname only, then click Add domain. Repeat for every hostname the site answers on.
Exact hostnames only — subdomains are separate entries
example.comdoes not coverwww.example.com, and there are no wildcards. Ports and paths are ignored, andlocalhostis fine for testing. - 3
Copy the snippet
Under Copy the embed snippet, click Copy. It comes out with your own bot ID already in place. Then replace the masked
data-api-keyvalue with the real key from step 1 — that is the only edit the snippet needs.What you are pasting <link rel="preconnect" href="https://app.answerweave.ai" crossorigin> <link rel="dns-prefetch" href="https://app.answerweave.ai"> <script src="https://app.answerweave.ai/widget/widget.js" data-bot-id="YOUR_BOT_ID" data-api-key="YOUR_PUBLISHABLE_KEY" data-api-url="https://app.answerweave.ai"> </script>The two link tags are optional
They tell the browser to start opening its connection while your page is still loading, so the launcher appears sooner. If your platform will not accept them, drop them and paste the<script>alone — the assistant still works, just a fraction slower on a first visit. - 4
Paste it into WordPress
Where: A scripts plugin, or Appearance → Theme File Editor → footer.php
- Plugins → Add New → search for a header and footer scripts plugin → install and activate.
- Open its settings from the WordPress menu.
- Paste the snippet into the Footer or Body section and save.
Prefer a plugin to editing the theme. A scripts plugin survives theme updates, which is the whole reason to prefer it. Without one, on a classic theme: Appearance → Theme File Editor →
footer.php, immediately before</body>.If you do edit a theme, edit a child theme. Changes to a parent theme are erased by its next update and the assistant silently disappears. Block themes have no
footer.phpat all — use the plugin route.Then purge your cache. Caching plugins and CDNs serve the old HTML for minutes to hours. This is the most common reason a correct WordPress install looks broken.
If a label does not match, WordPress documentation is the authority — not this page.
Confirm it worked
Do all four. The first two prove the snippet is live; the third proves the key is accepted; the fourth proves the assistant is behaving as it should.
Test it before touching your website
- 1
The launcher appears
Open the live site in a private window — not the platform’s editor. The chat bubble should appear in the corner within a second or two.
- 2
Exactly one launcher
Two bubbles means the snippet is in two places. Find the second copy before going any further.
- 3
The conversation reaches the dashboard
Ask something your site covers, then find your test under the assistant’s conversations. That is end-to-end proof, not just a widget that rendered.
- 4
It declines something you never published
Ask a question your content does not cover. It should say so and offer to pass the question on, with no sources underneath. That behaviour is the product working, not failing.
If something is wrong
| What you see | Almost always | Fix |
|---|---|---|
| No bubble on the live site | The change was saved but not published, or a cache is still serving the old page | Publish the site, purge the cache and CDN, then reload in a private window |
| Bubble missing in the platform's editor or preview | Expected. Most platforms do not run custom code inside their own editor | Check the live URL in a normal browser tab instead |
| Bubble opens, every message fails | The masked key was pasted, or this hostname is not on the restriction list | Paste the full key, and add the exact hostname under Restrict where this key works |
Works on example.com, refuses on www.example.com | Exact-match restriction — there are no wildcards | Add the www hostname as its own entry |
| Two bubbles | The snippet is in two places — a theme file and a plugin, or a page as well as the layout | Keep one copy. Search the theme and any code-injection fields for a second one |
| It answers, but says almost everything is not covered | Little or no indexed content — the crawl has not finished, or it failed | Check Sources, re-run the sync, then test again |
| It stopped working after someone regenerated the key | The snippet on the site still carries the old key | Update data-api-key in the snippet, then save and publish again |
| It disappeared after a theme update | The snippet was in a parent theme file the update replaced | Reinstall via a scripts plugin or a child theme so the next update cannot remove it |
Why the key is public, what someone can actually do with a copy, and the four-step test that tells you whether yours is restricted — we wrote it all down.
Paths on this page were last checked against WordPress on . If a label does not match what you see, the vendor’s own help centre is the authority.