By Sophie Cheung · Co-founder, Daykeeper ·
How to add a support chat widget to your website with your AI builder
Add a support chat widget to your website by pasting one prompt into Lovable, Bolt, v0 or Cursor. Copy-paste prompts, plus the 3 checks that make it actually work.
Quick answer: Get an embed snippet from a chat tool, then ask your AI builder to add it to your app's root layout so it loads on every page. In Lovable, Bolt or v0, that's one prompt. Then add your live domain to the tool's allowed list and send yourself a test message.
No code editing needed. Your AI builder does the install.
Step 1: Pick a chat tool
| Tool | Support chat widget on free plan | Priced per seat? |
|---|---|---|
| Daykeeper | ✅ | No, per workspace |
| tawk.to | ✅ | No |
| Crisp | ✅ (100 contacts total) | No |
| Chatwoot | ✅ (500 conversations/mo) | Yes, paid plans |
| Intercom | ❌ ($19–29/seat) | Yes |
Not sure which to pick? Here's how 11 support tools compare for a team of one.
Pick one whose inbox you'll actually open. The widget is the easy part. Answering fast is the job.
Step 2: Copy your snippet
Every chat tool gives you a small script to paste into your site. In Daykeeper, create a website inbox, add your domain, and copy the snippet.
Step 3: Paste this prompt into your AI builder
Add this support chat widget to my app so it shows on every page.
- Put it in the root layout (index.html or app/layout), not inside one page.
- Load it after the page renders so it doesn't slow down the first load.
- Don't change any other code.
Here's the snippet:
[paste your snippet here]
| Builder | Where it should end up |
|---|---|
| Lovable | index.html, before the closing body tag |
| Bolt | index.html, before the closing body tag |
| v0 / Next.js | app/layout.tsx, using next/script with strategy="lazyOnload" |
| Cursor / Claude Code | Same prompt. It'll find your root layout |
Step 4: Allow your domain and test
- Add your live domain (for example
yourapp.com) to the chat tool's allowed websites. - Publish, open your site in a private window, and send a test message.
- Check it arrives in your inbox, then reply and confirm the reply shows up in the widget.
Heads up: preview links (like *.lovable.app or Vercel previews) usually aren't on the allowed list, so the widget says it can't connect. That's normal. Test on your live domain.
If it's not working
| Problem | Fix |
|---|---|
| Widget doesn't show | Ask your builder: "Is the chat script in the root layout?" |
| "Can't connect" | Add the exact domain you're on to the allowed list |
| Widget shows twice | The snippet was added in two places. Ask your builder to keep one |
| Site feels slower | Ask your builder to load the script lazily |
FAQ
Do I need to know how to code to add a chat widget? No. Paste the prompt above into Lovable, Bolt, v0 or Cursor and it adds the snippet for you.
Is there a free chat widget for websites? Yes. Daykeeper, tawk.to, Crisp and Chatwoot all have free plans that include a support chat widget.
Will a chat widget slow down my site? Not if it loads after the page renders. That's why the prompt asks your builder to load it lazily.
Chat widget or contact form? A support chat widget gets more messages, because it's always one click away. A contact form is fine if you only want a few emails a week.
Can AI answer the chats for me? Some tools charge extra for AI answers, like Intercom at $0.99 per resolution and Help Scout at $0.75. On Daykeeper, you answer every chat from one inbox.
Talk to your customers. Try it for free and get it live in less than a minute.
Back to building 🛠️