Add Grimm to Lovable

Lovable builds a real app, so you add Grimm the same way you would to any site — one line before the closing body tag.

Before you start

You need a Grimm chatbot (create one on your dashboard), some indexed content in the Knowledge tab, and a GrinGhost budget so Grimm can answer.

1. Allow your domain

In the Domains tab, add the domain where Grimm will live (e.g. yourapp.com). It's required before you can embed — it stops anyone else from reusing your snippet on your budget.

2. Copy your snippet

Open the Integration tab and copy the script — it already contains your chatbot id:

<script src="https://grimmchat.com/widget.js" data-chatbot-id="YOUR_CHATBOT_ID"></script>

3. Add the snippet to your app

  1. Open index.html in your Lovable project.
  2. Paste your Grimm snippet right before the closing </body> tag.
  3. Publish your app.

Or just ask Lovable's AI: paste the snippet into a prompt and tell it to add the script before </body>.

4. Check it and choose where it shows

Open your site — Grimm appears as a small bubble in the corner. To show it only on some pages, or hide it from a few, use the Pages tab in your dashboard.

Troubleshooting

  • The bubble doesn't appear — confirm the snippet loads on every page (site-wide, before </body>) and the chatbot id is correct.
  • "Domain not allowed" — add your site's domain in the Domains tab.
  • Just changed something and don't see it? Your browser may cache the widget — try a private window.

Other platforms: WordPress · Shopify · Webflow · Wix · Framer · Squarespace · Hostinger · Bubble · Google Tag Manager · general setup.