Install DeskCrew with an official package (Next.js, Remix, Vue, SvelteKit, Angular, VitePress, Astro, Nuxt, Docusaurus, Eleventy, Gatsby, Rails, Jekyll, Django, Laravel, Hugo)

DeskCrew ships official packages for the frameworks people build sites and apps with. Each one adds the support widget (live chat, instant answers from your help articles, and your help centre) with a single import or config line, and each renders the same script tag the Install page gives you, isolated in a Shadow DOM so it never touches your styles. Every package is MIT, lives in its own GitHub repository, and shows a short animated install card in its README.

You need your widget key (starts with pub_) from Dashboard → Install, and optionally your board slug.

JavaScript frameworks (npm)

FrameworkPackageWhere it goes
Next.js@deskcrew/next<DeskCrewWidget widgetKey="pub_…" /> in app/layout.tsx (or pages/_app.tsx)
Remix / React Router@deskcrew/remix<DeskCrewWidget widgetKey="pub_…" /> next to <Scripts /> in app/root.tsx
Vue 3@deskcrew/vueapp.use(deskcrew, { widgetKey: 'pub_…' }) in main.js, or the <DeskCrewWidget> component
SvelteKit@deskcrew/sveltekitexport const handle = deskcrewHandle({ widgetKey: 'pub_…' }) in src/hooks.server.js
Angular@deskcrew/angularproviders: [provideDeskcrew({ widgetKey: 'pub_…' })] in app.config.ts
VitePress@deskcrew/vitepresshead: [...deskcrewHead({ widgetKey: 'pub_…' })] in .vitepress/config.js
Astro@deskcrew/astrointegrations: [deskcrew({ widgetKey: 'pub_…' })] in astro.config.mjs
Nuxt@deskcrew/nuxtmodules: ['@deskcrew/nuxt'] plus a deskcrew block in nuxt.config.ts (also in the Nuxt Scripts registry)
Docusaurus@deskcrew/docusaurus-pluginthe plugins array of docusaurus.config.js
Eleventyeleventy-plugin-deskcreweleventyConfig.addPlugin(deskcrew, { key: 'pub_…' })
Gatsbygatsby-plugin-deskcrewthe plugins array of gatsby-config.js

Every package accepts the same options: widgetKey (required), board, color (6-digit hex), position (left or right) and greeting. Invalid optional values are dropped with a console warning; a missing or malformed key means nothing is added to the page.

Ruby on Rails (gem deskcrew-rails, on RubyGems)

Add gem "deskcrew-rails" to your Gemfile, run bin/rails generate deskcrew:install, and put your key in config/initializers/deskcrew.rb. Then either add <%= deskcrew_widget_tag %> before </body> in your layout or set config.auto_inject = true so a middleware adds it to every HTML response. Run bin/rails deskcrew:register_origin once per environment so the widget is allowed on your domain. Deskcrew::Client.create_ticket(name:, email:, message:) turns a contact form or a background job into a ticket. Works with Hotwire and Turbo; nothing goes in the asset pipeline.

Jekyll (gem jekyll-deskcrew, on RubyGems)

Add jekyll-deskcrew to the :jekyll_plugins group in your Gemfile, list it under plugins: in _config.yml, and put your key under deskcrew:. Every page and post carries the widget, with no layout or include edits. GitHub Pages' built-in build does not run custom plugins, so there either build with GitHub Actions or paste the one-line snippet into _includes/head.html instead.

Django (package django-deskcrew, on PyPI)

pip install django-deskcrew, add "deskcrew" to INSTALLED_APPS, set DESKCREW = {"WIDGET_KEY": "pub_…", "SITE_URL": "https://www.example.com"}, and put {% load deskcrew %}{% deskcrew_widget %} before </body> in your base template, or set "AUTO_INJECT": True with deskcrew.middleware.DeskcrewMiddleware. python manage.py deskcrew_register_origin allows your domain once, and deskcrew.client.create_ticket(email=, message=, name=) files a ticket from a view, a form or a Celery task.

Laravel (Composer package deskcrew/laravel, on Packagist)

composer require deskcrew/laravel, put DESKCREW_WIDGET_KEY in .env, and add @deskcrew before </body> in your Blade layout. The service provider is auto-discovered. php artisan deskcrew:register-origin allows your domain, and Deskcrew::createTicket(email:, message:, name:) files a ticket from a controller or a queued job. Works with Livewire, Inertia and Filament.

Hugo (theme component hugo-deskcrew)

Import github.com/webmilmind1/hugo-deskcrew as a Hugo module (or clone it into themes/), put your key under [params.deskcrew] in hugo.toml, and call {{ partial "deskcrew.html" . }} once before </body> in your base template. It sits alongside any theme (PaperMod, Docsy, Hextra, Book) and works on every host, including GitHub Pages built with Actions.

Headless CMS plugins (entries become tickets)

The widget lives in the frontend that renders your content, so the CMS packages do a different job: they turn the entries your forms write (a contact form, feedback, support requests) into DeskCrew tickets.

CMSPackageConfigure
Strapi 4 and 5strapi-plugin-deskcrewdeskcrew block in config/plugins.js with your key and the content types to forward
Directusdirectus-extension-deskcrewDESKCREW_WIDGET_KEY, DESKCREW_SITE_URL and DESKCREW_COLLECTIONS in the Directus .env (listed in the Directus Marketplace)
Payloadpayload-plugin-deskcrewdeskcrewPlugin({ widgetKey, siteUrl, ticketSources }) in the plugins array
Sanity Studiosanity-plugin-deskcrewdeskcrewTicketAction({ widgetKey, types }) adds a "Send to DeskCrew as a ticket" document action

Each one skips entries without an email or a message and never blocks the save.

WordPress and WooCommerce

Use the DeskCrew plugin: paste the key on Settings → DeskCrew, and optionally turn Contact Form 7 submissions and blog comments into tickets. See Install DeskCrew on WordPress & WooCommerce.

Everything else

Any site that can carry one script tag works without a package. Copy the tag from Dashboard → Install into the layout every page shares, and see the guides at deskcrew.io/integrations for Mintlify, ReadMe, GitBook, static sites and the headless CMS frontends.

Where to find them

npm: search deskcrew. RubyGems: deskcrew-rails, jekyll-deskcrew. PyPI: django-deskcrew. Packagist: deskcrew/laravel. Django Packages, the Directus Marketplace and the Nuxt Scripts registry list the matching packages. Every guide page at deskcrew.io/integrations/<framework> links the registry page and the GitHub repository, and each repository README answers the common questions (Hotwire, GitHub Pages, HTMX, Livewire, free plan) for its framework.

Allowed origins

The widget only runs on domains you have allowed. Saving the key on the Install page registers the origin you are on. The Rails, Django and Laravel packages ship a register-origin command; the others register nothing themselves, so if the launcher does not appear on a new domain, add it under Dashboard → Install → Allowed origins. See Why your widget isn't appearing: allowed origins.

Related articles