Add live chat to Angular. DeskCrew support widget
DeskCrew adds AI live chat, an AI support chatbot and ticketing to an Angular app through the official @deskcrew/angular package: one provideDeskcrew() call in app.config.ts, standalone and NgModule apps. A single script tag in src/index.html works too.
An official npm package
Install @deskcrew/angular and add one provider. Standalone or NgModule, the widget is added once at bootstrap and stays across routes.
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 Angular
Install the official package: npm install @deskcrew/angular.
In app.config.ts, add provideDeskcrew({ widgetKey: "pub_YOUR_KEY", board: "your-board" }) to the providers array. On an NgModule app, add the same provider to the root module.
Build and deploy. An app initializer adds the widget once at bootstrap, so it is present on every route and is never duplicated by a re-render. 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: Prefer no dependency? Paste the tag below into src/index.html, the shell Angular bootstraps into, before </body>.
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 Angular
Last updated: September 2026
How do I add live chat to an Angular app?
Paste the widget script into src/index.html, just before the closing body tag. Angular bootstraps into that shell, so the widget loads once and persists across every route.
Should I load it from a component or a service instead?
Not unless you need per-route control. Loading from index.html means the widget is not tied to Angular’s component lifecycle, so it cannot be destroyed and recreated by navigation.
Do I need to add it to angular.json scripts?
No. The scripts array is for bundling local files into your build. This is a third-party CDN script, so the plain tag in index.html is the correct place.
Will it break strict Content Security Policy?
Only if your CSP omits the widget’s origin. Add the DeskCrew script origin to script-src and connect-src if you run a strict policy; the snippet itself uses no inline script.
Is there a free live chat widget for Angular?
Yes. The DeskCrew free plan includes the chat widget, ticketing, a public help center, and a monthly AI answer allowance, with no credit card.