Add live chat to Next.js. DeskCrew support widget
DeskCrew adds AI live chat, an AI support chatbot and ticketing to a Next.js app through the official @deskcrew/next package: one DeskCrewWidget component in app/layout.tsx, App Router and Pages Router, no bundling. A single Script tag works too.
An official npm package
Install @deskcrew/next and render one component in your root layout. No script tag to maintain, no bundling step, App Router and Pages Router both supported.
AI drafts, humans approve
The AI drafts replies grounded in the knowledge base you publish, and every draft waits in an approval queue until a human sends it.
Every conversation is a ticket
Widget chats, emails, and board posts land in one dashboard with full history; visitors who leave get their answer by email.
Free plan, no card
The free plan includes the chat widget, a public knowledge base, and ticketing. Start free and upgrade only when you outgrow it.
How to install DeskCrew on Next.js
Install the official package: npm install @deskcrew/next (pnpm add and yarn add work the same).
Render it once in app/layout.tsx: import { DeskCrewWidget } from "@deskcrew/next", then <DeskCrewWidget widgetKey="pub_YOUR_KEY" board="your-board" /> inside <body>. On the Pages Router, put the same component in pages/_app.tsx.
Deploy. The component loads the widget through next/script on every route, it survives client-side navigation, and it renders in a Shadow DOM so it cannot touch your styles. Your key and board slug are on the dashboard’s Install page.
<script src="https://deskcrew.io/desk.js" data-key="pub_YOUR_KEY" data-board="your-board" defer></script>
pub_YOUR_KEY and your-board are placeholders. Your real widget key and board slug are in your DeskCrew dashboard under Install (free signup, no card).
Note: Using the Pages Router? Render the same <Script> in pages/_app.tsx. Plain HTML export? The raw <script> tag below works as-is.
DeskCrew vs the usual suspects
| DeskCrew | Tidio | Crisp | Zendesk | |
|---|---|---|---|---|
| Free tier | Yes. Free plan, no card | Yes (limited) | Yes (basic) | Free trial only |
| AI included | Yes. AI drafts on every plan, human-approved | Paid add-on | Higher plans | Paid add-on |
| Setup | About 2 minutes. One script tag or plugin | Minutes. Script tag | Minutes. Script tag | Longer. Full workspace setup |
| Price floor | $0 free plan · paid from $29/mo | Free plan; paid tiers above | Free plan; paid tiers above | Per-agent pricing, no free plan |
Competitor cells generalize their public pricing pages. Always check current plans.
DeskCrew has a free plan with no card. Chat widget, public knowledge base, and ticketing included. Every new workspace starts with full Team features free for 14 days, and paid plans start at $29/mo. Full details on the pricing page.
FAQ. add live chat to Next.js
Last updated: September 2026
How do I add a live chat widget to a Next.js app?
Render one <Script> from next/script in your root layout (app/layout.tsx) with your DeskCrew widget key and board slug as data attributes. It ships on every route with no npm dependency.
Does it work with the Pages Router?
Yes. Render the same <Script> tag in pages/_app.tsx. The widget is plain JavaScript behind one script tag, so it is indifferent to App Router vs Pages Router.
Will the widget break hydration or hurt Core Web Vitals?
No. next/script loads it after hydration by default, and the widget renders inside its own Shadow DOM outside your React tree. No hydration mismatch, no CSS bleed, nothing blocking first paint.
Can I show the widget only on some routes?
Yes. In the App Router, move the <Script> from the root layout into a nested layout so only that segment loads it. In the Pages Router, render it conditionally in _app.tsx.
Is there an npm package for DeskCrew?
Yes: @deskcrew/next exports a <DeskCrewWidget> component that renders the same next/script tag from your root layout. It is optional; the widget itself is one script tag serving framework-agnostic vanilla JS in a Shadow DOM, so nothing else gets bundled into your app.
Can I identify logged-in users?
Yes. DeskCrew supports server-signed identify: your backend signs the user’s identity with a secret from the dashboard’s Install page, so tickets arrive with a verified user instead of an anonymous visitor.
Does DeskCrew have an API?
Yes. A public REST API plus a per-workspace MCP server, so you can create tickets, search the knowledge base, or publish articles programmatically. Docs are linked from the dashboard.