Add live chat to Nuxt. DeskCrew support widget
DeskCrew adds AI live chat and ticketing to a Nuxt app. It ships in the official Nuxt Scripts registry, so one registry entry loads it with a click-to-load facade, or install the @deskcrew/nuxt module instead.
A real plugin. Settings page, no code
Install the plugin on Nuxt, paste your widget key on its settings page, and it registers your site's domain with DeskCrew automatically.
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 Nuxt
Run npm install @deskcrew/nuxt in your project.
In nuxt.config.ts, add "@deskcrew/nuxt" to modules and set deskcrew: { widgetKey: "pub_…" }. Your key is on the DeskCrew dashboard’s Install page.
Deploy. The chat bubble appears on every route, Nuxt 3 and 4 alike. Options for board, color, position, and greeting are documented on the npm 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).
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 Nuxt
How do I add a live chat widget to a Nuxt app?
Two supported paths. DeskCrew is in the official Nuxt Scripts registry: enable nuxt/scripts, add deskcrew under scripts.registry in nuxt.config.ts, and set your widget key and board slug in runtime config. Or install the @deskcrew/nuxt module from npm and set the same values under its config key. Prefer zero dependencies? A one-object app.head.script entry pasting the widget tag works too.
What does the official Nuxt Scripts entry give me?
A ScriptDeskCrew facade component and a useScriptDeskCrew composable. The facade holds the widget back until a visitor actually interacts, so nothing loads on first paint, and it exposes awaitingLoad, loading and error slots plus ready and error events. The composable gives you the proxy for identify, embed, changelog and surveys. Configure it with NUXT_PUBLIC_SCRIPTS_DESKCREW_WIDGET_KEY and NUXT_PUBLIC_SCRIPTS_DESKCREW_BOARD.
Which should I use, Nuxt Scripts or the DeskCrew module?
If you already use nuxt/scripts, use the registry entry: it is first-party, adds no extra dependency, and its facade defers loading until a click. Use @deskcrew/nuxt if you want the widget on every route with no scripts setup at all. Both end up loading the same widget from the DeskCrew origin, so pick one and do not enable both.
Can I load the widget on only some routes?
Yes. Skip the global config and call useHead({ script: [...] }) in a specific layout or page instead; the widget then loads only where that layout or page renders.
Does this work in Nuxt 3 and Nuxt 4?
Yes. App.head in nuxt.config and the useHead composable are the same API across Nuxt 3 and 4, so the one-entry install is identical.
Will it break hydration or hurt Core Web Vitals?
No. The deferred tag loads after render, and the widget draws inside its own Shadow DOM outside your Vue tree: no hydration mismatch, no CSS bleed, nothing blocking first paint.
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.
Where do chats from my Nuxt app go?
Every conversation becomes a ticket in your DeskCrew dashboard. The AI drafts a reply grounded in your knowledge base, a human approves it, and visitors who already left get the answer by email.