Add live chat to your React or Next.js site
React apps don't have a theme.liquid or a footer-code box — but they have something better: one layout file that wraps every page. Add the GreetMode script there once and the chat bubble follows your visitors across every route, with no re-injecting on navigation. Single-page-app route changes don't reload the page, and the bubble simply stays put.
What you need
- A GreetMode plan and account (signup is checkout-first: pick a plan, pay through Stripe, then set a password).
- Your site id, shown during onboarding and in the sites dashboard.
- Access to your app's source: the root layout (Next.js App Router) or index.html (plain Vite/Create-React-App React).
Steps: add chat in about five minutes
1. Pick a plan. Standard ($14.99/month, up to 3 sites) covers one app. Multi ($19.99/month, 4–6 sites) fits owners running several sites from one dashboard. Need 7+? Ask about a custom plan via /contact. Flat monthly pricing — no per-agent or per-conversation fees.
2. Create your account. Pay via Stripe, set a password, and the welcome flow walks you to your inbox.
3. Add your site and copy the snippet. Add the site in onboarding or the sites dashboard and copy your install snippet. The plain script version looks like this, with your own site id filled in:
<script src="https://www.greetmode.com/widget-1.js" data-site="your-site-id"></script>4. Add it to your root layout. For Next.js (App Router): in your root layout.tsx, import Script from next/script and add <Script src="https://www.greetmode.com/widget-1.js" data-site="your-site-id" strategy="afterInteractive" /> inside the layout so it loads on every route. For plain React (Vite, Create-React-App, or similar): paste the plain <script> tag just before the closing </body> in index.html. One placement covers the whole app — client-side route changes need no re-injecting because the script stays loaded.
5. Send a test message. Deploy or run your dev build, open the live page, type in the chat bubble, and watch it arrive in your owner inbox. Reply from the inbox and confirm the answer shows up on the site. Done — you're live.
Tip: save canned replies for repeat questions ("What are your hours?", "How do I get started?") to answer in one tap.
After you're live: don't miss a message
When you're offline, visitors can leave a message instead of bouncing, and the web-only owner inbox flags unread threads with badges. The inbox is mobile-friendly — reply from your phone, no native app to install. Tune bubble color and hours in /settings.
Content-Security-Policy note
Most React/Next.js apps don't set a custom Content-Security-Policy, so you can skip this. If your app enforces a strict policy (for example through Next.js headers config or middleware), allow GreetMode by adding https://www.greetmode.com to script-src and frame-src.
Verify in 30 seconds
- Chat bubble appears in the corner of your page — and survives navigating to another route.
- Send a test message as a visitor.
- Reply from your owner inbox and confirm it shows on the site.
If the bubble doesn't appear
Check three things in order: the script is in the root layout or index.html (not a single page component) and the build is deployed, the data-site value matches your real site id exactly, and no ad-blocker is running in your test browser.