Add Crisp Live Chat to Your SaaS in 2026 | Coding Capybaras

Photo by Petr Macháček on Unsplash

Adding Crisp live chat to a Next.js SaaS landing page takes about ten minutes on the free tier: install the official crisp-sdk-web package, drop a small client component into your layout with your Website ID, and the chatbox loads on every page. Crisp's free plan gives you a live chat widget, two agent seats, and 100 contact profiles at no cost — enough for a solo founder validating whether anyone actually wants to talk to them. This guide covers the exact setup, what to ask the visitors who show up, and the honest case for when live chat helps versus when it's a distraction.

TL;DR

• Crisp's free tier includes the live chat widget, 2 seats, and 100 contacts — no time limit, with a "Powered by Crisp" badge.
• Install is one package (crisp-sdk-web) plus a small "use client" component loaded from your layout.
• The Website ID is public and safe to expose; treat it like any other public config value, not a secret.
• Live chat's real value early on is qualitative: it's the fastest way to learn why visitors don't convert.
• Skip it if you can't answer within a few hours — a dead chat widget is worse than none.

What you get on the Crisp free tier

A live chat widget is a small chatbox that sits in the corner of your site so visitors can message you in real time. Crisp is one of the more generous options for solo founders because its free plan is genuinely usable, not a disguised trial.

According to Crisp's pricing page, the free plan includes the live chat widget, two agent seats, 100 stored contact profiles, and unlimited conversations. That's the part that matters: you won't get charged for a sudden spike in messages. What you don't get on free is the CRM, workflow automation, AI features, email-channel integration, and reporting — those start on the paid Mini and Essentials plans. The free tier also shows a small "Powered by Crisp" badge on the widget, which paid plans remove.

For a founder who's pre-launch or just past launch, that free tier is almost always enough. You don't need automation when you have eleven visitors a day; you need to talk to all eleven. I'd rather a non-tech founder spend zero dollars and learn what their landing page fails to explain than pay for an enterprise chat suite they'll use at one percent of capacity.

Here's how Crisp's tiers actually shake out for an indie SaaS, with two common alternatives for context:

| Plan / tool | Price | Seats | Best for | | --- | --- | --- | --- | | Crisp Free | $0 | 2 | Pre-launch and early validation | | Crisp Mini | $45/mo | Capped | Solo founder past first customers | | Crisp Essentials | $95/mo | Capped | Small team adding automation | | Tidio (free) | $0 | Limited | Chat + basic bots, e-commerce lean | | Intercom | $$$ | Per seat | Funded teams wanting the full suite |

The honest read: start free with Crisp, and only upgrade when a specific missing feature is costing you money — not before. I made the same argument about infrastructure generally in build vs buy: which SaaS components to never build yourself. Live chat is firmly a "buy" — building your own would be weeks of work to recreate something with a perfectly good free tier.

How to add Crisp to a Next.js SaaS (step by step)

The whole install is three steps: get your Website ID, install the SDK, and load a small client component from your layout. This follows Crisp's official Next.js guide, which is the source of truth if anything below drifts out of date.

Step 1: Get your Website ID

Create a free Crisp account, then find your Website ID. Open Crisp, go to Settings → Workspace Settings → Setup & Integrations, and copy the Website ID field. It looks like a UUID.

One thing worth saying plainly, because it trips up security-conscious founders: the Website ID is not a secret. It's a public identifier that ships in your client-side JavaScript by design — anyone can view-source and see it. So unlike your Stripe secret key or Supabase service role key, it's fine to commit or expose. I still put it in an environment variable for cleanliness, prefixed NEXT_PUBLIC_ so Next.js exposes it to the browser:

# .env.local
NEXT_PUBLIC_CRISP_WEBSITE_ID=your-website-id-here

If you're working in the Coding Capybaras boilerplate, secrets live only in .env.local and never get pasted into web forms — but again, this particular value is public by nature, so the NEXT_PUBLIC_ prefix is correct and safe.

Step 2: Install the Web SDK

Crisp recommends the official crisp-sdk-web package for single-page apps like Next.js. It keeps Crisp loaded only in the browser and gives you the Web SDK methods when you need them:

npm install crisp-sdk-web

Step 3: Load it from your layout

Create a small client component. The "use client" directive is required because Crisp touches the browser window, which doesn't exist during server rendering:

// website/components/crisp-chat.tsx
"use client";

import { useEffect } from "react";
import { Crisp } from "crisp-sdk-web";

export default function CrispChat() {
  useEffect(() => {
    Crisp.configure(process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID!);
  }, []);

  return null;
}

Then render it once from your layout so the widget appears on every page. In a Coding Capybaras-style project, the marketing chrome lives in the website region, so this goes in your shared website layout rather than touching the routing manifest in /app directly:

// website/pages/_website-layout.tsx (or app/layout.tsx)
import CrispChat from "@/website/components/crisp-chat";

export default function WebsiteLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <CrispChat />
      {children}
    </>
  );
}

That's the entire install. Run your dev server, load the page, and the chatbox should appear bottom-right. If it doesn't, the usual culprit is a missing or mistyped Website ID — the widget silently fails to load rather than throwing an error.

Here's the flow end to end:

flowchart LR
  A[Create Crisp account] --> B[Copy Website ID]
  B --> C[npm install crisp-sdk-web]
  C --> D[Add CrispChat client component]
  D --> E[Render it from layout]
  E --> F[Widget loads on every page]

If you'd rather not write any of this by hand, an AI assistant can produce the component and layout edit from the official doc in a single session — the same lightweight pattern I use for adding Sentry and wiring up PostHog.

Identify your logged-in users in the chat

Out of the box, every conversation is anonymous — you see a visitor, not a name. On a landing page that's fine. But once someone signs in to your app, you can tell Crisp who they are, so a support conversation arrives with their email and name attached instead of "Visitor #4821." That context turns a confusing back-and-forth into a thirty-second fix, and it's the difference between a chat widget that feels like a help desk and one that feels like a stranger guessing.

The Web SDK exposes setters for exactly this. Call them once you know the user is authenticated:

"use client";
import { useEffect } from "react";
import { Crisp } from "crisp-sdk-web";

export default function CrispChat({ user }: { user?: { email: string; name?: string } }) {
  useEffect(() => {
    Crisp.configure(process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID!);
    if (user?.email) {
      Crisp.user.setEmail(user.email);
      if (user.name) Crisp.user.setNickname(user.name);
    }
  }, [user]);

  return null;
}

A few cautions. Only set this data for users who've actually authenticated — don't guess from a half-filled form. Email and nickname get stored against the contact profile, and the free tier caps you at 100 profiles, so on a busy site you'll want to be deliberate about who you identify rather than tagging every anonymous bounce. And keep this logic on the website or product side of your app, reading the signed-in user from your existing session — it has nothing to do with billing or auth internals, so it stays well clear of any locked platform code.

This pairs naturally with whatever analytics you're already running. The same signed-in user you identify in Crisp is the one PostHog is tracking, so when a support conversation comes in you can connect it back to the behavior that prompted it — the page they were stuck on, the plan they were eyeing, the feature they couldn't find.

What to actually ask the people who chat

Installing the widget is the easy ten minutes. The harder, more valuable part is knowing what to do when someone actually messages you. For a pre-launch or early-stage SaaS, the chat is not a support desk — it's a research instrument.

The questions I found most useful early on weren't "how can I help?" They were diagnostic. When a visitor lingered on the pricing page, a well-timed message like "anything about the pricing that's unclear?" surfaced objections I'd never have seen in analytics. PostHog told me where people dropped off; chat told me why.

A few prompts that earned their keep:

• "What brought you here today?" — reveals the actual job the visitor is hiring you for, which is often not the one your headline pitches.
• "Is there anything stopping you from signing up right now?" — the single highest-signal question on a pricing page.
• "What were you hoping to find that you didn't?" — catches the gap between what you built and what they expected.

Every answer is raw material for your landing page, your onboarding flow, and your lifecycle emails. The founders who win early aren't the ones with the slickest widget; they're the ones who treat each conversation as a free user interview.

Crisp's free tier also supports proactive messages and a basic away mode. Use proactive triggers sparingly — a single, relevant prompt after a visitor has spent real time on a page converts curiosity into conversation, while an aggressive pop-up the instant someone lands just gets dismissed. The Crisp Web SDK lets you set user information, delay loading, force a locale, and trigger chatbox actions programmatically when you're ready for more control.

When live chat actually helps (and when to skip it)

I'll be honest about the tradeoff, because a chat widget is not free even when the plan is. The cost is your attention and your response time.

Live chat helps most when you're early and learning. Pre-launch through your first hundred or so customers, the qualitative signal from real conversations is worth more than almost any other input. It's the fastest path I know to understanding why a landing page that looks fine to you confuses everyone else. I leaned on exactly this kind of direct contact while chasing my first 100 customers.

Live chat hurts when you can't staff it. A widget that promises real-time help and then sits unanswered for two days is worse than no widget — it sets an expectation and breaks it, on the exact page where you're asking for trust. If you're a solo founder who can't check messages within a few hours during your working day, set an explicit away message with an email fallback, or don't install it yet.

The decision rule I'd give a non-tech founder: install live chat the week you start sending real traffic to your site, keep it on the free tier, answer every message personally, and mine those conversations for landing-page and product fixes. The moment you're spending more time in the chat than you're learning from it, that's your signal to add automation or office-hours — not before. Pair it with solid landing-page SEO so the traffic showing up is the traffic you actually want to talk to.

Frequently asked questions

Is Crisp live chat really free?

Yes. Crisp's free plan includes the live chat widget, two agent seats, 100 stored contacts, and unlimited conversations, with no time limit. The free tier shows a "Powered by Crisp" badge and excludes automation, AI, and reporting, which live on the paid Mini ($45/mo) and Essentials ($95/mo) plans.

Do I need to expose my Crisp Website ID as a secret?

No. The Website ID is a public identifier that ships in your client-side JavaScript by design. Use the NEXT_PUBLIC_ environment-variable prefix so Next.js exposes it to the browser. Keep genuinely secret keys — Stripe, Supabase service role — out of NEXT_PUBLIC_ variables and out of client code entirely.

Why use the crisp-sdk-web package instead of pasting a script tag?

For single-page apps like Next.js, the official crisp-sdk-web package keeps Crisp loaded only in the browser and gives you typed access to the Web SDK methods. A raw script tag can fight with client-side navigation and server rendering; the SDK is the setup Crisp officially recommends for Next.js.

Will the chat widget slow down my site?

Crisp loads asynchronously, so it doesn't block your page from rendering. Because the SDK initializes inside a useEffect after hydration, the widget appears slightly after first paint rather than competing with it. For most landing pages the performance impact is negligible.

Can a non-technical founder set this up with an AI assistant?

Yes — this is one of the friendliest integrations to wire in with Claude Code or Cursor. The whole change is one package install and a small client component. Give the assistant your Website ID and the official Crisp Next.js doc, and it can produce the component and layout edit in a single session.

What's a good free alternative to Crisp?

Tidio's free plan is the closest comparable, with live chat plus basic chatbots and an e-commerce lean. Intercom is the heavyweight option but is priced for funded teams, not solo founders. For most non-tech founders validating a SaaS, Crisp's free tier is the simplest place to start.

Can I hide the chat widget on certain pages?

Yes. Because the widget is loaded from a client component you control, you can conditionally render it based on the route — for example, mounting it on marketing pages but not inside the signed-in app, or hiding it on checkout to avoid distraction. The Web SDK also exposes methods to show and hide the chatbox programmatically once it's loaded, so you can toggle it in response to user actions rather than removing it entirely.

Wrapping up

Adding Crisp live chat to your SaaS is a genuinely ten-minute integration: install crisp-sdk-web, add a small client component, load it from your layout, and you have a free chat widget on every page. The harder and more valuable work is what you do with it — treating each conversation as a free user interview, mining objections from your pricing page, and feeding what you learn back into your product and copy.

If you're building a Next.js SaaS and want the copy-paste AI prompt to wire this in alongside your other integrations, the Coding Capybaras marketplace has it, and the boilerplate it plugs into is free.