How to Embed an AI Chat Widget on Your Website (WordPress, React, and More)
If you’ve already built your AI customer support agent — system prompt written, knowledge base loaded, tested and working the way you want — the last step is getting it in front of actual visitors. That means embedding the AI chat widget on your website. It’s the fastest step in the whole process, but a few small decisions along the way are worth understanding before you paste any code.
Watch the full walkthrough below, or follow the written guide underneath.
Publish the agent first
Before you can embed anything, the agent needs to be published. This is a distinct step from building and testing it — publishing is what makes the agent available to go live on a real channel, rather than staying in preview mode where only you can see it.
Enable embed under Sharing
Once published, go to Sharing and turn on Embed. This generates an embed code — a short snippet you’ll copy and paste into your website. You don’t need to build anything custom or touch your site’s backend logic; the widget handles its own interface, styling, and connection back to your agent.
Decide whether to collect guest information first
Before you grab the code, there’s one setting worth a deliberate choice: whether to collect guest information — name, email, and message — before a visitor can start a conversation.
- Turn it on if you want context on who you’re talking to before the conversation starts, or if you’re using the agent partly for lead capture.
- Leave it off if you want the lowest possible barrier to a visitor actually using the widget — no form standing between them and getting an answer.
There’s no universally right choice here. It depends on whether you’re optimizing for capturing every visitor’s contact info or for getting the most people to actually use the agent. If you’re not sure, start with it off — a chat agent that people actually use is more valuable than a form that filters out the ones who won’t bother.
Add the embed code to your site
The embed code is plain HTML, which means it works the same way regardless of what your website is built on:
- WordPress: Drop the code into an HTML block in the page or post editor. You may see a formatting warning in the editor itself — that’s expected and doesn’t mean anything is broken. Preview the page and the widget will render correctly even though the editor view looks off.
- React, Vue, or other JS frameworks: Add the embed snippet into the relevant component or layout file, the same way you’d add any third-party script.
- Plain HTML or PHP sites: Paste the code directly into the page template wherever you want the widget to appear, typically near the closing
</body>tag.
In all three cases, the underlying rule is the same: anywhere you can drop in an HTML snippet, you can drop in the AI chat widget. No redesign, no rebuild — it sits on top of the site you already have.
Preview before you consider it done
After adding the code, preview the live page rather than trusting the editor view alone — this is especially true on WordPress, where the block editor can show an error that doesn’t reflect what visitors will actually see. Open the page as a visitor would, open the widget, and send it a real question. This is your last check that the agent responds the way it did in testing, now that it’s actually running on your site.
What’s next
Once the widget is live, every visitor to your site has an AI chat agent available the moment they land — no waiting for a reply, no missed after-hours question. If you haven’t built the agent itself yet, start with How to Create Your First AI Customer Support Agent, which covers the system prompt, knowledge base, and testing steps that come before this one. And if you’re ready to extend the same agent to your phone line, the process for connecting it to a phone number follows the same idea — one agent, running on a second channel.
Try the live demo to see a widget in action, sign up to build and embed your own, or book a walkthrough if you’d rather have us set it up with you.
