Embed the feedback board + a What's-new widget in your site

Beyond the floating chat bubble, DeskCrew gives you two more embeds you can drop into your own pages: the Embedded portal, which renders your full feedback board inside a page on your domain (e.g: yoursite.com/feedback), and the Changelog widget, a "What's new" announcer that shows your published updates. Both snippets are on the Install page, pre-filled with your key and slug. This guide covers how to install each, the one rule that trips people up (basePath must match the page's route), and the three changelog display modes. Popup, badge, and inline.

Embed the feedback board on your own page

The embedded portal puts your DeskCrew feedback board directly inside one of your site's pages using a secure iframe, so customers browse, vote, and post without ever leaving your domain. Create a blank page on your site (for example at /feedback), paste the snippet, and set basePath to that page's route. DeskCrew auto-sizes the iframe and keeps your page's URL in sync with the board so deep links and Back/Forward work.

The snippet from your Install page:

<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>

How to set it up:

Create a page on your site at the route you want the board to live on. Say yoursite.com/feedback.
Paste all three lines into that page's body: the loader <script>, the empty <div id="feedback-portal"></div> that marks where the board mounts, and the DeskCrew.embed(..) init call.
Set basePath to match the route (see the next section. This is the important part).
Add the page's origin to Allowed origins on the Install page (e.g: https://yoursite.com). The embedded portal only loads on allowlisted origins; if the origin is missing, the iframe stays blank.
Save and open the page. The board renders inline and resizes to fit its content.

Notes:

el is a CSS selector (or an element) pointing at the container to mount into. '#feedback-portal' matches the <div> above. You can change the id as long as both match.
DeskCrew.embed(..) can be called only once per page.
The iframe starts around 600px tall and auto-adjusts to the board's height.

The `basePath` rule (the one thing to get right)

basePath tells DeskCrew which route on your site is hosting the embedded board, and it must exactly match that route. When it matches, the board's internal links (like an individual post at /feedback/post/123) map onto your URL correctly, deep links load the right view, and the browser's Back and Forward buttons move through the board naturally. When it's wrong, those links break and navigation gets confused.

The rule in practice:

Page served at yoursite.com/feedback → basePath: '/feedback'
Page served at yoursite.com/roadmap → basePath: '/roadmap'
Page served at yoursite.com/community/ideas → basePath: '/community/ideas'
Board at the site root yoursite.com/ → basePath: '/'

Think of basePath as answering "what comes before the board's own links in my address bar?" Set it to the path portion of the page's URL. Nothing more, nothing less. If you move the page to a different route later, update basePath to match.

Choose what the embed shows with `view`

The view option controls which section of your portal the embed opens to by default. It accepts three values, and you pick based on what the page is for.

view: 'board': the default list of ideas and requests customers can browse and vote on. Use this for a "Feedback" page.
view: 'roadmap': the roadmap grouping (planned / in progress / shipped). Use this for a public "Roadmap" page.
view: 'changelog': your changelog feed as a full page. Use this for a "What's new" / release-notes page.

If a visitor deep-links to a specific sub-page (their URL points below basePath), that deep link wins; otherwise the embed opens to the view you set.

The changelog widget announces your published updates to visitors and badges returning users when you've shipped something since they last looked. Without you sending a single email. First-time visitors are never popup-blasted: DeskCrew quietly records a baseline on their first visit and only surfaces unread entries on later visits. Paste the snippet, pick one display mode, and you're done.

<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>

Pick exactly one mode. DeskCrew.changelog(..) can be called only once per page, and it reads from the changelog you publish inside DeskCrew.

Mode: `popup`

Popup mode shows a floating "What's new" badge with an unread count, and it automatically opens the panel for returning visitors who have unread entries. It's the best choice for actively announcing releases, because customers see new features without doing anything. New visitors never get an unwanted popup. The panel only auto-opens once there's genuinely something unread relative to their recorded baseline.

<script>DeskCrew.changelog({ mode: 'popup' })</script>

By default the badge floats in the corner opposite your support launcher so the two never overlap. You can force a side with position: 'left' or position: 'right'.

Mode: `badge`

Badge mode shows the same "What's new" launcher with an unread count, but it never auto-opens: visitors click it themselves. Use it when you want the announcer available but non-intrusive, or when you want it to live inside your own navigation bar instead of floating.

Floating badge (no selector): DeskCrew.changelog({ mode: 'badge' }). Floats in the corner opposite the support launcher.
Mounted in your nav (with selector): DeskCrew.changelog({ mode: 'badge', selector: '#whats-new' }). Mounts the badge inside the element you name, so you can place a "What's new" button in your header. Make sure an element like <span id="whats-new"></span> exists on the page.

Mode: `inline`

Inline mode renders the changelog entry list directly into an element on your page. No badge, no popup. So it reads like a normal section of a "What's new" or release-notes page. It requires a selector, and because the list is on screen, viewing it marks the entries as read.

<div id="changelog"></div>
<script>DeskCrew.changelog({ mode: 'inline', selector: '#changelog' })</script>

If you set mode: 'inline' without a selector, the widget logs a warning and does nothing, because it has no place to render the list.

Combine embeds on one page (and avoid double-loading)

You can use the chat widget, the embedded portal, and the changelog widget together. But you only need the loader <script src="…/desk.js" …> line once per page. DeskCrew has a built-in guard that ignores duplicate loads, so if your snippets each include the loader line, nothing breaks; still, for a clean page, include the desk.js script once and then call DeskCrew.embed(..) and/or DeskCrew.changelog(..) as needed.

Example of a single page hosting both an embedded board and a floating What's-new badge:

<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' })
  DeskCrew.changelog({ mode: 'badge' })
</script>

Troubleshooting

Embedded portal is blank → the page's origin isn't in Allowed origins, or basePath doesn't match the route the page is served on. Add the exact https://… origin on the Install page and double-check basePath. See "Why your widget isn't appearing: allowed origins."
Deep links or Back/Forward misbehave in the portal → basePath is wrong; set it to the page's route exactly.
Changelog shows nothing → make sure you've published changelog entries in DeskCrew (drafts don't appear), and that the page's origin is allowlisted.
inline mode does nothing → it needs selector, and the element must exist on the page.
Badge overlaps the chat launcher → set position: 'left' or position: 'right' on the changelog call, or let it default to the opposite corner.

NextThe feedback board: submitting and upvoting

Embed the feedback board + a What's-new widget in your site

Embed the feedback board on your own page

The basePath rule (the one thing to get right)

Choose what the embed shows with view

Add the "What's new" changelog widget

Mode: popup

Mode: badge

Mode: inline