How to Add an AI Chat Widget to Your Website
Adding an AI chat widget to your website used to mean a support platform, a rollout plan, and a developer. It now takes about ten minutes and one line of HTML. Here is the whole process, using CarlyChat.
1. Create the chat widget
Sign in to CarlyChat and create a new chatbot. Name it and choose the tone it should answer in. That is the entire setup step.
2. Add what it should know
This is the part that decides whether the widget is useful or embarrassing. CarlyChat takes five kinds of source:
- A whole site. Give it your domain and it crawls the pages.
- A single URL. Useful for one dense docs page or a pricing page.
- Files. Upload the PDFs and docs your team already answers from.
- Raw text. Paste anything that does not live on a page yet.
- Exact question-and-answer pairs. The answer you want, word for word.
Start with your site and your help docs. Then add Q&A pairs for the handful of questions where a paraphrase would cost you money.
3. Test it in the playground before anyone sees it
Open the playground and ask the questions your customers actually ask. Not the polished ones. The blunt ones: “how much”, “can I cancel”, “do you work with Outlook”.
Every answer shows the source it came from. That matters more than it sounds. When a widget gets something wrong, the usual fix is to fiddle with wording and hope. Here you can see it pulled from a stale page, and go fix the page.
4. Pin the answers you cannot afford to get wrong
Pricing, refund policy, hours, service area, what you do not support. Add these as exact question-and-answer pairs so they are returned rather than inferred. Everything else can come from your pages.
5. Add the widget to your website with one line
Copy the script tag and paste it before the closing </body> tag. That is the install, on any site that lets you edit HTML or add a custom code block: Webflow, WordPress, Shopify, Squarespace, a hand-rolled site, whatever you run.
Refresh, and the widget is in the corner.
Have your coding agent do all of it
CarlyChat is reachable over MCP, so the five steps above can be handed off. Connect it in Claude or ChatGPT and ask:
Create a support chatbot for example.com. Crawl the site, add a Q&A pair saying our refund window is 30 days, test it against five common questions, and give me the script tag.
The agent creates the bot, loads the sources, runs the playground, and hands back the tag. Every Carly product works this way, which is the point of building them on MCP.
Wiring the widget to something that acts
A widget that answers questions saves your team time. A widget attached to an agent does the work behind the question.
Because CarlyChat is part of Carly, the conversation can hand off. Carly runs over your email and calendar and connects to thousands of apps, and you build agents with their own instructions and memory. A visitor asks for a demo, and Carly checks your calendar, sends the invite, and follows up if they go quiet. A visitor asks a sales question, and the lead lands in HubSpot or Salesforce with the transcript attached. Free Zapier-style workflows; AI agents from $35/month.
Common questions
Do I need a developer? No, if you can paste a line of HTML or add a custom code block. That covers every major site builder.
Will it make things up? It answers from the sources you give it, and the playground shows you which source produced each answer. Pin the high-stakes answers as exact Q&A pairs and you remove the guesswork on the ones that matter.
Can I change the answers later? Yes. Update the source or the Q&A pair. The widget picks it up without touching the script tag.
Start at carlychat.com, or compare the options first in best AI chat widgets.
Ready to automate your busywork?
Carly schedules, researches, and briefs you—so you can focus on what matters.
See what people say
"Before Carly, I relied on a Calendly link, but the whole process felt impersonal and not very professional. Carly changed that by handling all the back-and-forth, so I'm no longer stuck in endless email threads trying to line up schedules.
Now Carly reaches out to candidates, shares my real-time availability, lets them pick a slot, then sends a Zoom link and drops it straight into my calendar. She sends reminders to both of us before each call, which has significantly reduced no-shows and last-minute confusion.
On top of scheduling, Carly acts like a full executive assistant, sending me my schedule the night before so I can prepare for each call. It reminds me of the old x.ai assistant, but Carly is noticeably smarter, faster, and better suited to my healthcare recruitment business."
