orkaCopy your project’s snippet
Open Orka → 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.
← Installation guides
LOVABLE · PRACTICAL INSTALLATION GUIDEHow to add live chat
How to add live chat
to a Lovable app.
Your Lovable app has its first users. Give them a way to reach you without building a second app for support.
Install it step by step ↓Web apps · Updated September 2026LovableYour next product● ● ●
A meal-planning SaaS built in Lovable
Can I change my meal plan after subscribing?
Sent to your Orka inbox ✓Same inbox. One more product aboard.
YOU NEEDAn Orka project + permission to edit and publish your Lovable app
YOU WILL ADDOne official widget script in the shared app layout
YOU WILL CHECKA real message, a real reply and navigation between pages
FROM FIRST PROMPT TO FIRST HELLO01 02 03 04 05
Bring your Lovable app aboard.
Ask Lovable to install it
Open your existing Lovable project and use its project chat. Paste the installation prompt below together with the complete Orka snippet. Ask Lovable to inspect the project before choosing where to put it.
Choose the right shared location
Do not assume every Lovable project has the same framework. For a plain HTML or Vite entry point, the script belongs in the document head. For a server-rendered app, ask Lovable to use a shared, browser-only script loader. It must run after the document body exists and survive route changes without being inserted again.
Review the change
Open Lovable’s Code tab to inspect the changed files. Direct editing depends on your plan; the project chat can make the integration change. Look for one shared installation, not a copy inside each page.
Publish the app
Click Publish in the editor, then Publish changes for an existing live app. Wait for the deployment to finish and open its live URL. Accepting an edit in the chat does not, by itself, update the published site.
LESS GUESSWORK FOR YOUR ASSISTANTCopy this prompt.
Copy this prompt.
Add your real snippet.
It tells Lovable what to install, what to preserve and how to avoid common mistakes. Replace the final placeholder before sending it.
LOVABLE INSTALLATION PROMPT
Install the real Orka live chat in this Lovable 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 “Lovable 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.
Three checks before another prompt.
The widget works in Lovable’s preview, but visitors cannot see it.
Publish the new version, then check the exact live URL or custom domain your visitors use. An editor preview and the published snapshot can contain different code.
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 subscription plan, onboarding step and preferred language through the Orka SDK. Choose fields that help support; the widget does not infer them for you.
Explore the visitor-data SDK ↗YOUR BEARINGS, BEFORE YOU DIVE INLive chat in Lovable:
Live chat in Lovable:
your questions.
Still wondering about something?
Ask a human at Orka ↗
Can I add live chat to a Lovable app without knowing how to code?+
Yes, an AI-assisted installation is a reasonable starting point. Copy your real Orka snippet, give Lovable 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 Lovable 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.
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: [email protected].
Pick the tool you build with.
A practical installation guide for each builder, with a prompt you can copy.