The DeskCrew Install page, setting by setting

The DeskCrew Install page is where you connect DeskCrew to your website: it gives you the copy-paste snippets, your widget key, and the security settings that control where your widget is allowed to run. This article walks through all eight sections in order. Embed snippet, Embedded portal, Changelog widget, Allowed origins, Widget key, Identify, Portal theme, and the Feedback board link. Explaining what each one does, when you'd use it, and exactly how to set it up. If you only read one part, read Allowed origins: a missing entry there is the number-one reason a widget looks broken.

1. Embed snippet. The one line that installs the widget

The Embed snippet is the single <script> tag that adds the floating chat/help widget to your site. Copy it, paste it once before the </body> tag of your pages, and the DeskCrew bubble appears in the corner. This is the only section most customers ever need.

It looks like this, pre-filled with your own key and slug:

<script src="https://deskcrew.io/desk.js" data-key="pub_xxxxxxxxxxxx" data-board="your-slug"></script>

• What it does: loads DeskCrew and renders the launcher, chat, Help (knowledge base), Updates (changelog), and Feedback tabs.
• When to use it: always. It's the core install. On WordPress, paste it with a header/footer plugin like WPCode; see "Add the DeskCrew widget to your website (including WordPress)."
• How to set it up: click Copy, paste before </body>, save, and reload your site. To verify, look for the bubble in the bottom-right corner and open it.

2. Embedded portal. Put your feedback board inside your site

The Embedded portal snippet renders your full DeskCrew feedback board directly inside one of your own pages (for example at yoursite.com/feedback), instead of only as a popup or on the hosted deskcrew.io/board/.. page. Visitors browse, vote, and post right on your domain. Use it when you want a first-class "Feedback" or "Roadmap" page that matches your site's navigation.

The snippet has three parts. The loader script, a target <div>, and an init call:

<script src="https://deskcrew.io/desk.js" data-key="pub_xxxxxxxxxxxx" data-board="your-slug"></script>
<div id="feedback-portal"></div>
<script>
  DeskCrew.embed({ el: '#feedback-portal', view: 'board', basePath: '/feedback' })
</script>

• What it does: injects a secure iframe of your board into #feedback-portal, auto-sizes it to fit, and keeps your page's URL in sync with the board (so deep links and the browser Back/Forward buttons work).
• The critical rule: basePath must match the route you serve this page on. If this page lives at yoursite.com/feedback, use basePath: '/feedback'. If it lives at /roadmap, use basePath: '/roadmap'. When it matches, links like /feedback/post/123 work correctly; when it's wrong, deep links and Back/Forward break.
• view options: 'board' (default list of ideas/requests), 'roadmap', or 'changelog'.
• When to use it: for a dedicated public feedback/roadmap page on your own domain.
• How to set it up: create a blank page on your site at the route you want, paste this snippet into it, and set basePath to that route. The origin serving the page must be in your Allowed origins list (section 4). Otherwise the iframe stays blank.

DeskCrew.embed(..) can only be called once per page.

3. Changelog widget. A "What's new" popup for your app

The Changelog widget shows your published changelog entries to visitors and badges returning users when you've shipped something since their last visit. It's how you announce new features without sending an email. First-time visitors are never popup-blasted. DeskCrew silently records a baseline on their first visit and only shows unread items after that.

<script src="https://deskcrew.io/desk.js" data-key="pub_xxxxxxxxxxxx" data-board="your-slug"></script>
<script>
  DeskCrew.changelog({ mode: 'popup' })
  // or: DeskCrew.changelog({ mode: 'badge', selector: '#whats-new' })
  // or: DeskCrew.changelog({ mode: 'inline', selector: '#changelog' })
</script>

• mode: 'popup': shows a floating "What's new" badge, and automatically opens the panel for returning visitors who have unread entries. Best for announcing releases.
• mode: 'badge': the same badge/launcher with an unread count, but it never auto-opens (visitors click it themselves). With selector, it mounts inside your own nav element; without one, it floats in the corner opposite your support launcher so they never collide.
• mode: 'inline': renders the entry list straight into the element you name in selector (for example a section on a "What's new" page). Requires selector. Viewing the list marks entries as read.
• When to use it: whenever you keep a changelog in DeskCrew and want customers to see updates in-app.
• How to set it up: copy the snippet, choose one mode, and (for badge with a target or inline) point selector at an element on your page. See "Embed the feedback board + a What's-new widget in your site" for detail.

4. Allowed origins. The security allowlist (read this one)

Allowed origins is the list of exact web addresses that are permitted to load your widget and talk to your workspace. DeskCrew checks the origin of every widget request, and if the page's address isn't on this list, the request is blocked. A missing or mismatched origin here is the #1 cause of "the widget isn't working."

• What it does: whitelists the sites that may submit tickets, load your Help/Updates/Feedback tabs and branding, and embed your portal. Anything not listed is rejected with a generic 403.
• What an "origin" is: the scheme + host + port of a URL. For example https://example.com. It must match exactly: https://example.com and http://example.com are different, and https://www.example.com and https://example.com are different. Paths don't matter (/pricing vs /contact are the same origin), but the domain and scheme do.
• What you'll typically add:
  • Your production site: https://yourdomain.com
  • Your www version too, if you use it: https://www.yourdomain.com
  • Your local dev address while testing: http://localhost:3000 (match the port your dev server uses)
• How to set it up: type the full origin into the box (e.g: https://yoursite.com) and click Add origin. Repeat for each domain/subdomain. To remove one, click Remove next to it. If the list is empty you'll see the warning "No origins added yet. The widget will be blocked everywhere."
• Symptom when it's wrong: the chat bubble may still appear, but messages fail to send ("Couldn't send…"), the Help/Updates/Feedback tabs and your logo/name never load, and any embedded portal stays blank. The fix is always: add the exact origin shown in your browser's address bar. Full walkthrough in "Why your widget isn't appearing: allowed origins."

5. Widget key. Your public pub_ key and how to rotate it

The Widget key is the public identifier (pub_…) that ties a widget install to your workspace. It appears in your embed snippets and in your page source, which is fine. It's public by design and can't read private data or change settings. You only touch this section if you need to rotate (regenerate) the key.

• What it does: identifies which DeskCrew workspace a widget belongs to. Every snippet on the Install page already contains it.
• When to rotate: if the key was pasted somewhere it shouldn't be, or you simply want to cut off all existing embeds and start fresh.
• How to set it up: click Rotate key, then confirm. DeskCrew generates a new pub_… value and marks it New.
• Important warning: rotating invalidates every existing embed immediately. Any page still using the old snippet will stop working until you re-copy the new snippet and paste it everywhere. Only rotate when you're ready to update all your sites.

6. Identify. Attribute posts and votes to your logged-in users

Identify lets you tell DeskCrew who a visitor is, so that when your logged-in users post ideas, comment, or vote in the embedded portal, those actions are tied to their real account instead of an anonymous session. You do this by signing a short-lived token on your server with a secret from this page, then passing it to the widget. It's optional and only relevant if your product has user logins.

• What it does: enables verified user identity. Votes, posts, and comments in the embedded portal are attributed to your users, and you can prevent duplicate/anonymous voting.
• How the secret works: the Install page gives you an Identify secret (prefixed ids_). It stays on your server only: never put it in browser/page code. You use it to HMAC-sign a JWT for the currently logged-in user, then pass that token to DeskCrew (see the "Identify. Server snippet" section on the page, which shows a Node example).
• How to set it up:
  1. In the Identify your users card, click Enable identify (first time) to generate the secret, or Rotate secret / Reveal secret if it already exists.
  2. Copy the secret into a server-side environment variable on your own app named DESKCREW_IDENTIFY_SECRET (this is the name the sample server snippet reads).
  3. On your server, sign a token per the "Identify. Server snippet" example and render it into your page, then call DeskCrew.identify({ token: '…' }) (or set data-user-token on the script tag).
• Rotating the secret: invalidates tokens signed with the old secret immediately, so update your server first. Visitors already identified keep their attribution session for up to 24 hours.
• When to skip it: if you don't have user accounts, or you're fine with anonymous feedback, you don't need Identify at all.

7. Portal theme. Light or dark for your feedback portal

Portal theme sets the color mode (light or dark) of your public feedback portal. Both the hosted board at deskcrew.io/board/.. and the version you embed on your own site. It does not change the floating chat widget, which always uses DeskCrew's light "Crisp Signal" look. Your brand accent color comes from the Branding page, not here.

• What it does: switches the portal between Light and Dark.
• When to use it: match your site. Pick Dark if your product is dark-themed, Light otherwise.
• How to set it up: in the Portal theme card, click Light or Dark. It saves instantly.

8. Feedback board link. The shareable public board URL

The Feedback board link is the public web address of your board, https://deskcrew.io/board/your-slug. Share it anywhere. Email footers, social bios, a "Feedback" nav link. So customers can browse ideas, vote, and submit tickets without any embedding.

• What it does: gives you a ready-to-share, DeskCrew-hosted public board. No code required.
• When to use it: when you want to point people to feedback without embedding it, or as a quick link before you set up the embedded portal.
• How to set it up: click Open board to preview it, then copy the URL from your browser and share it. If you'd rather host the board on your own domain, use the Embedded portal snippet (section 2) instead.

Quick troubleshooting

• Bubble doesn't appear at all → the snippet isn't on the page (wrong template, or not saved). View page source and confirm the desk.js line is present; hard-refresh.
• Bubble appears but messages fail / tabs and logo missing → Allowed origins. Add the exact https://… origin from your address bar.
• Embedded portal is blank → the page's origin isn't in Allowed origins, or basePath doesn't match the page's route.
• Console shows data-key is required → your key attribute got dropped; re-copy the snippet.
• Everything broke after "Rotate key" → old snippets are dead; re-copy and re-paste the new one everywhere.