Add Customerly to an app built with AI (Lovable, Bolt, v0, Replit, Cursor, Claude Code)

Built your app or landing page with an AI builder? You can add Customerly in two minutes by pasting one prompt. You get a live chat, Aura (an AI agent that answers from your Help Center and docs), a Help Center, and email campaigns to the users of your app, all from one install.

Customerly works on every domain, including preview and staging domains such as *.lovable.app, *.vercel.app, *.netlify.app or *.replit.app, and with any framework.

Before you start

1. Create a Customerly project and copy your Project ID from Settings → Installation → Install messenger.

2. Know whether your app has logged-in users (for example Supabase Auth, Clerk, Firebase, Auth.js). If it does, use option B: it is what makes Customerly powerful.

Option A: landing page or site without login

Paste this into your builder (Lovable, Bolt, v0, Replit, Claude, ChatGPT, Cursor):

Add the Customerly live chat to every page of this site.
Insert this script right before the closing </body> tag (in React/Next.js, load it once in the root layout, client side only):

<script>
!function(){var e=window,i=document,t="customerly",n="queue",o="load",r="settings",u=e[t]=e[t]||[];if(u.t){return void u.i("[customerly] SDK already initialized. Snippet included twice.")}u.t=!0;u.loaded=!1;u.o=["event","attribute","update","show","hide","open","close"];u[n]=[];u.i=function(t){e.console&&!u.debug&&console.error&&console.error(t)};u.u=function(e){return function(){var t=Array.prototype.slice.call(arguments);return t.unshift(e),u[n].push(t),u}};u[o]=function(t){u[r]=t||{};if(u.loaded){return void u.i("[customerly] SDK already loaded. Use `customerly.update` to change settings.")}u.loaded=!0;var e=i.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://messenger.customerly.io/launcher.js";var n=i.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};u.o.forEach(function(t){u[t]=u.u(t)})}();
customerly.load({ "app_id": "YOUR_PROJECT_ID" });
</script>

Also add a "Chat with us" button that calls customerly.open().

Visitors who write in the chat or leave their email become leads in Customerly. To capture form signups (waitlist, newsletter box), call customerly.registerLead(email, { name }) when the form is submitted: see How to register a lead.

Option B: web app with logged-in users (recommended)

Paste this into your builder:

Install the Customerly messenger in this app with the npm package react-live-chat-customerly.
- Wrap the app in <CustomerlyProvider appId={import.meta.env.VITE_CUSTOMERLY_PROJECT_ID}> (Next.js: process.env.NEXT_PUBLIC_CUSTOMERLY_PROJECT_ID inside a "use client" component). Project ID: YOUR_PROJECT_ID.
- Call load() once so every visitor sees the chat.
- Listen to our auth (e.g. supabase.auth.onAuthStateChange). When a user is logged in, call update({ user_id: user.id, email: user.email, name, attributes: { plan, signed_up_at (Unix seconds), role } }). When the user signs out, call logout().
- Call update() on every route change.
- Whenever something important happens in the app (project created, upgrade, invite sent), call event("event_name") and keep attributes such as plan or usage counters up to date with attribute(key, value).
Goal: every user who signs up is synced to Customerly automatically, so we can support them by name and send them newsletters and targeted emails.

Plain HTML or a non-React framework? Use the same script as option A and pass the user in customerly.load({ app_id, user_id, email, name, attributes }). Full reference: Install live chat with Javascript API and Install Customerly in React and Next.js.

Secure identity (for apps with accounts)

To stop anyone from impersonating a user in the chat, enable Identity Verification and send an email_hash: an HMAC-SHA256 of the lower-cased email signed with your secret on the server (Supabase Edge Function, Next.js route handler, API route). Prompt:

Create a server-side function that returns HMAC-SHA256(lowercased user email, CUSTOMERLY_IDENTITY_SECRET) as hex, for the logged-in user only. Store the secret as a server secret, never in client code. Pass the result as email_hash in customerly.update().

Details: Setting up Identity Verification.

What you get once users are synced

• A New users list that fills itself. Every user who signs up and is identified by the messenger appears in Customerly automatically, with the attributes you passed.

• Support with context. You and Aura see who is writing, their plan and what they did in the app.

• An AI agent from day one. Add a few Help Center articles or your docs and Aura answers your users 24/7, handing over to you when needed.

• Newsletters and targeted emails. Send product updates to all users, a welcome sequence to new signups, or a nudge to users who never finished onboarding. See Send newsletters and targeted emails to the users of your app.

• Automations and feedback. Flows, in-app messages, NPS and surveys triggered by the same events and attributes.

Builder tips

• Lovable / Bolt (Vite + React, often Supabase): use option B. Put the Project ID in the project's environment variables as VITE_CUSTOMERLY_PROJECT_ID; put the identity secret only in Supabase secrets.

• v0 / Next.js on Vercel: use option B with the App Router setup (provider in a "use client" component, hash computed in a server component or route handler).

• Replit, Cursor, Claude Code: paste the prompt in the agent chat; ask it to show the diff and run the app so you can see the chat bubble.

• Framer, Webflow, WordPress, Shopify: paste the option A script in the site's custom code (before </body>), or use Google Tag Manager.

Check that it works

1. Open the app (preview URL is fine): the chat bubble appears.

2. Sign up as a test user and send a message: the conversation in your Customerly inbox shows the user's name, email and attributes.

3. Open Contacts: the test user is in the New users list.