Guides / Lovable
How to Add an AI Chatbot to a Lovable Site
To add an AI chatbot to a Lovable site, ask Lovable in the project chat to add the Chatonbo script tag to index.html before the closing </body> tag, then publish. The chat appears on every page of the live site, trained on your own content.
Lovable is an AI website and app builder that turns a chat prompt into a React site hosted by Lovable. Lovable projects are React apps built with Vite. Every page is served from one index.html file, so a script placed there loads on the whole site.
1. Ask Lovable to add it (recommended)
Works on every Lovable plan, no code editing needed.
- In your Chatonbo dashboard open your bot, go to Install and copy your bot ID (or the whole snippet).
- Open your project in Lovable and paste the request below into the chat, with your bot ID in place of YOUR_BOT_ID.
- Let Lovable apply the change, then click Publish so it reaches your live domain.
Paste this into the Lovable chat
Add this script tag to index.html just before the closing </body> tag, keep everything else unchanged, then publish:
<script src="https://chatonbo.com/widget/chatonbo-widget.js" data-bot-id="YOUR_BOT_ID"></script>2. Edit index.html yourself
If your plan includes code editing, or your project is synced to GitHub.
- Open index.html at the root of the project (in Lovable's code view or in your GitHub repository).
- Paste the snippet on the line just before </body>.
- Save, then publish from Lovable. A change pushed to GitHub syncs back to Lovable; publish after it arrives.
Snippet
<script src="https://chatonbo.com/widget/chatonbo-widget.js" data-bot-id="YOUR_BOT_ID"></script>Check that it works
- Open your live site in a private window. The chat bubble appears in the bottom corner within a few seconds.
- Ask it a question that only your site answers, such as a product or opening hours.
- Back in Chatonbo, the Install page shows the bot as live once it has loaded on your domain.
Rather have us do it?
Installation is free on every plan. Invite [email protected] as a collaborator on your Lovable project and reply "invited" to any Chatonbo email, or use the install request on your dashboard. We never ask for passwords.
Frequently asked questions
Why does the chat not show in the Lovable editor preview?
The preview can run on a Lovable domain and before you publish. Check the published site. If your bot is restricted to your own domain in its security settings, add the preview domain there or test on the live URL.
Does the chatbot keep working when visitors move between pages?
Yes. Sites from these builders are single-page apps: the page shell loads once and pages change without a full reload. The Chatonbo script sits in that shell, so the chat stays open with the same conversation while visitors browse.
Can Chatonbo read a site that is built with JavaScript?
Yes. When a page renders its content with JavaScript, the Chatonbo crawler renders it in a headless browser before reading it, so the assistant learns the same text and products a visitor sees. You can also add PDFs, FAQs or plain text on the bot's Knowledge page.
Do I need to know how to code?
No. You paste one line, either into the builder's chat as a request or into a settings field. If you would rather not touch it, Chatonbo installs it for free: invite [email protected] as a collaborator and reply "invited". We never ask for passwords.
How much does it cost?
Chatonbo has a free plan with 100 conversations a month. Pro is $19 a month for 5,000 conversations and Business is $59 a month for 10,000, with no per-seat or per-resolution fees. Paid plans start with a 30-day free trial.