How to add Supadesk to Bolt

Bolt.new builds and hosts web apps from prompts. This guide shows you how to add the Supadesk AI chat widget to Bolt by placing the embed script in index.html, the root HTML file that wraps your app and loads the widget across all routes after publishing.

Before you start

In Supadesk, open your agent and click Chat Widget.
Click Copy Embed Code.
(Recommended) Add your published Bolt app URL to Allowed Origins — e.g. your Bolt hosting domain.

Install on Bolt

Open your Bolt project.
In the file explorer, open index.html.
Find the closing </body> tag.
Paste your Supadesk embed script on the line immediately above </body>.
Save the file and publish or deploy your project.

Bolt tip

The embed script must live in the HTML shell (index.html), not inside a React or Vue component file. Component-level scripts won’t load the widget site-wide.

Check it works

Open your published Bolt 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 published after saving.
Widget blocked: Add your exact published origin (including https://) to Allowed Origins in Supadesk.

FAQ

Where should the Supadesk script go in Bolt?

Put the Supadesk embed script in index.html immediately before the closing </body> tag. The HTML shell is the right place for a site-wide Bolt chat widget.

Can I paste Supadesk inside a React or Vue component?

Do not install the widget in a component unless you are intentionally controlling script loading yourself. For a reliable Bolt install, put the script in index.html so it loads once for the whole app.

Why does Supadesk show locally but not after publishing?

Confirm the published origin is added to Allowed Origins and that you published after saving index.html. A local preview and a deployed Bolt app often use different domains.