# How to add live chat to a Bolt app

Canonical: https://orka.chat/how-to-add-live-chat-to-a-bolt-app
Updated: 2026-09-21

[← Installation guides](/installation) BOLT · PRACTICAL INSTALLATION GUIDE 

# How to add live chat to a Bolt app. 

 Keep building in Bolt. Put customer conversations in an inbox that also covers your other products.

[Install it step by step ↓](#install) Web apps · Updated September 2026 

 Bolt Your next product ● ● ● 

 A booking app built in Bolt 

 Can I move my appointment to Friday?

 Sent to your Orka inbox ✓ 

 Same inbox. One more product aboard.

 [The steps](#install)[Copy the prompt](#copy-prompt)[Test it](#test)[Fix a problem](#troubleshoot)[FAQ](#faq)

 YOU NEED An Orka project + permission to edit and publish your Bolt app 

 YOU WILL ADD One official widget script in the shared app layout 

 YOU WILL CHECK A real message, a real reply and navigation between pages 

 FROM FIRST PROMPT TO FIRST HELLO 

## Bring your Bolt app aboard.

 01 

### Copy your project’s snippet

 Open [Orka](http://dashboard.orka.chat/) → Settings → your project → Installation. Under How to embed, click Copy Code. For a new product, create its own project first. This keeps the welcome, knowledge and conversations tied to the right app.

 02 

### Ask Bolt to install it

 Open the web project in Bolt and paste the prompt and your Orka snippet into the agent chat. Ask for a small integration change to the existing app, with no redesign or new chat backend.

 03 

### Choose the right shared location

 Have Bolt identify the framework first. In a Vite or static HTML project, use the shared HTML entry point. In a React app with a framework-specific document or layout, use its supported browser-side loading mechanism. A raw script pasted into JSX is not a reliable substitute for a proper loader.

 04 

### Review the change

 Use the Code Preview icon, marked <> in Bolt, to open Code view and review the changed file. Save manual edits, then return to Preview. In Safari, Bolt documents Code view as read-only, so ask the agent to make the edit instead.

 05 

### Publish the app

 Use Bolt’s Publish flow to release the changed project. If you already deploy the repository through another host, use that project’s existing deployment flow. Wait for a successful release and test its public URL, not only Bolt’s preview.

### Your project ID matters.

 The example below uses a placeholder. Copy the full snippet from your own Installation screen before asking Bolt to use it.

 ORKA WIDGET · EXAMPLE Copy example 

```html
<script type="text/javascript">window.ORKA_APP_ID="YOUR_PROJECT_ID";(function(){d=document;s=d.createElement("script");s.src="//widget.orka.chat/app.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();</script>
```

 The project ID identifies your widget. An OpenAI, Anthropic or other private API key does not belong in this code. Configure AI separately in Orka.

[Using client-side routes? Read the SPA guide ↗](/how-to-add-orka-to-single-page-application) 

 LESS GUESSWORK FOR YOUR ASSISTANT 

## Copy this prompt. Add your real snippet. 

 It tells Bolt what to install, what to preserve and how to avoid common mistakes. Replace the final placeholder before sending it.

 BOLT INSTALLATION PROMPT Copy prompt 

```html
Install the real Orka live chat in this Bolt web app using the complete snippet I paste below.

1. Inspect the framework and shared layout first. Tell me where you will install it.
2. Preserve my ORKA_APP_ID and the official widget.orka.chat/app.js URL.
3. Load the widget once, asynchronously, in the browser after the document body exists. Keep it across client-side route changes. Prevent duplicate scripts or iframes.
4. If this is Next.js, use next/script with a stable ID and afterInteractive loading, or a browser-only client integration. Never access window during server rendering.
5. Keep the current design, authentication and backend. Do not create an imitation chat UI, install a second chat service or expose any private API key.
6. Check the build and explain how I can test a message and reply on the published app. Show the changed files. Do not publish until I have reviewed the change.

Here is the complete snippet copied from Orka → Settings → my project → Installation:
[PASTE YOUR COMPLETE ORKA SNIPPET HERE]
```

 DON’T STOP AT “DONE” 

## Make the first conversation yours.

 Use a test visitor on the published app. The assistant saying it has installed chat is only the beginning of verification.

 Open the public URL. Check desktop and mobile. If the app requires login, test the intended signed-in experience. Send “Bolt installation test”. Confirm it arrives in the correct Orka project, then reply and check the visitor receives it. Navigate without refreshing. Visit two inner pages, use Back, then reload an inner URL. Check for duplicate bubbles or a lost conversation. Check the rest of your app. The chat should not cover a save button, checkout action or mobile navigation. Correct the placement if it does. 

 IF SOMETHING FEELS OFF 

## Three checks before another prompt.

### The chat bubble appears twice after navigating through the app.

 Ask Bolt to find every reference to widget.orka.chat/app.js and keep one shared loader with a duplicate guard. Check both the HTML entry point and React components; do not keep installations in both.

### The widget is missing everywhere.

 Confirm you used the complete snippet with the correct project ID. Check that the release includes the changed file. Review console errors, content security policy and consent settings; do not disable your site’s security rules to make the widget appear.

### The message arrives under the wrong product.

 Compare the installed ORKA_APP_ID with this product’s Installation screen. Replace the incorrect installation instead of adding another one. Then publish and send a new test message.

## The next step: useful customer context.

 Once chat works, your app can send booking reference, customer plan and account language through the Orka SDK. Choose fields that help support; the widget does not infer them for you.

[Explore the visitor-data SDK ↗](/sdk)

[Start free · No card required](http://dashboard.orka.chat/signup)

 YOUR BEARINGS, BEFORE YOU DIVE IN 

## Live chat in Bolt: your questions.

 Still wondering about something? [Ask a human at Orka ↗](mailto:hello@orka.chat)

 Can I add live chat to a Bolt app without knowing how to code? + Yes, an AI-assisted installation is a reasonable starting point. Copy your real Orka snippet, give Bolt the prompt in this guide and review the result. You still need access to edit and publish the project, and you should test a complete conversation. Ask for help if the integration fails instead of repeatedly pasting the script.

 Where is the Orka installation code? + In your Orka dashboard, go to Settings, choose the project and open Installation. Click Copy Code under How to embed. Use a separate project for each product whose branding and support context you want to keep separate.

 Is this a native Bolt integration? + This guide installs the standard Orka JavaScript widget into your web app. It does not require a dedicated marketplace connector. Platform editing permissions, publishing limits and support for custom code still apply.

 Will the chat survive navigation in my app? + It should if the loader is installed once in a persistent shared layout. Test several client-side routes and a direct reload of an inner page. Use the SPA guide if you also need controlled loading and user-session data.

 Does this guide install live chat in a native mobile app? + No. These steps are for a browser-based web app. A native iOS or Android app needs an appropriate embedded web integration; do not paste a browser script into a native view and expect it to run. See our mobile-app guides.

 Can I manage several AI-built apps in one inbox? + Yes. All Orka plans include unlimited projects. Give each product its own project and snippet, then answer together in the shared inbox or filter by project. Solo is free for one person; AI usage is separate.

 Does adding the widget give Orky access to my entire app database? + No. The widget does not automatically turn your database into AI knowledge. Configure help articles and AI behavior separately. For support context such as a plan or onboarding stage, explicitly send the relevant fields through the Orka SDK.

 Your question for Orka ↗ 

 Ask Orky · AI answers from our website, with sources. Your question is sent to OpenAI; please leave out personal information. [Privacy](/privacy) 

 [Email your question ↗](mailto:hello@orka.chat) 

 OFFICIAL DOCUMENTATION 

## Check the details at the source.

 Updated 21 September 2026. This is Orka’s installation guidance using the platform’s documented editing and publishing workflow, not a claim of a native partnership. Menus and plan limits can change. Corrections: [hello@orka.chat](mailto:hello@orka.chat).

 [Bolt: Code view ↗](https://support.bolt.new/building/using-bolt/code-view) [Bolt: publishing quickstart ↗](https://support.bolt.new/get-started/quickstart) [Bolt: supported technologies ↗](https://support.bolt.new/concepts/supported-technologies) 

 BUILT WITH AI. SUPPORTED BY YOU. 

## Pick the tool you build with.

 A practical installation guide for each builder, with a prompt you can copy.

 [ Lovable Add live chat ↗ ](/how-to-add-live-chat-to-a-lovable-app)[ Bolt Add live chat ↗ ](/how-to-add-live-chat-to-a-bolt-app)[ Replit Add live chat ↗ ](/how-to-add-live-chat-to-a-replit-app)[ Base44 Add live chat ↗ ](/how-to-add-live-chat-to-a-base44-app)[ v0 Add live chat ↗ ](/how-to-add-live-chat-to-a-v0-app)