How to add Supadesk to Lovable

Lovable generates full-stack web apps from prompts. This guide shows you how to add the Supadesk AI chat widget to Lovable by pasting the embed script in index.html, the HTML shell that wraps your app and loads on every route after deployment.

Before you start

In Supadesk, open your agent and click Chat Widget.
Click Copy Embed Code.
(Recommended) Add your deployed Lovable app URL to Allowed Origins — e.g. https://yourapp.lovable.app.

Install on Lovable

Open your Lovable project.
In the file tree, open index.html (in the project root or public/ folder).
Find the closing </body> tag.
Paste your Supadesk embed script on the line immediately above </body>.
Save the file and redeploy or publish your project.

Lovable tip

Hot reload in the editor may not always pick up new third-party scripts. After adding the embed code, do a full redeploy and test on your live URL.

Check it works

Open your deployed Lovable app in a private browser window. The chat bubble should appear in the bottom-right corner.

Troubleshooting

Widget missing: Confirm the script is in index.html before </body> and that you’re testing the deployed URL, not localhost alone.
Widget blocked: Add your exact deployed origin (including https://) to Allowed Origins in Supadesk.

FAQ

Where do I put Supadesk in a Lovable project?

Paste the Supadesk embed script in index.html immediately before the closing </body> tag. That makes the widget part of the app shell instead of one generated component.

Does Supadesk load on every Lovable route?

Yes. If the script is in the root HTML shell and the app is redeployed, Supadesk loads across client-side routes in the deployed Lovable app.

Should I test Supadesk on localhost or the deployed Lovable URL?

Test on the deployed Lovable URL. Localhost can be useful during development, but Allowed Origins should include the exact public origin visitors will use.