Customizations

Customize widget position and alignment

The position parameter determines which side of the button the widget appears on. It can be set to top, bottom, left, or right.

The align parameter determines which side of the button the widget is aligned with. It can be set to top, bottom, left, or right.

If position is top/bottom, then align must be left/right, and vice-versa.

Canny('initChangelog', {
  appID: 'YOUR_APP_ID',
  position: 'bottom', // widget is positioned below your button
  align: 'left', // widget's left side is aligned with your button's left side
  theme: 'light', // options: light [default], dark, auto
});

Customize the unseen badge style

Customize the CSS

When there are new entries that your user has not seen yet, we will add a red badge to your trigger button.

By default, we style the badge using absolute positioning so that it does not disrupt your layout.

If you'd like to customize this badge, you can do this in the following way:

/* These are the default badge styles */
.Canny_BadgeContainer .Canny_Badge {
  position: absolute;
  top: -1px;
  right: -1px;
  border-radius: 10px;
  background-color: red;
  padding: 5px;
  border: 1px solid white;
}

Add the unseen badge on a different element

If you would like the unseen badge to appear on a different element than the button that opens the changelog, you can conditionally apply styling based on the response from the 'hasUnseenEntries' function. You can also register a callback function that gets called when the changelog is opened using the 'registerOnChangelogOpenCallback' function.

const hasUnseenEntries = Canny('hasUnseenEntries');
if(hasUnseenEntries) {
  // apply styles
  Canny('registerOnChangelogOpenCallback', () => {
    // remove styles
  });
};

Filter the changelog

To show entries that have a specific label, add this additional field with the desired label IDs.

Canny('initChangelog', {
  appID: 'YOUR_APP_ID',
  position: 'bottom',
  align: 'left',
  // only entries that have one of these labels will be shown
  labelIDs: ['5f1234567890abcdef123111', '5f1234567890abcdef123222'],
  theme: 'light', // options: light [default], dark, auto
});

Close the changelog

If you want to close the changelog, for example when the user navigates to another page in an single-page app:

componentWillUnmount() {
  Canny('closeChangelog');
}

Turn off non-essential cookies

If you want to turn off non-essential cookies, add this additional field.

Canny('initChangelog', {
  appID: 'YOUR_APP_ID',
  position: 'bottom',
  align: 'left',
  // only entries that have one of these labels will be shown
  labelIDs: ['5f1234567890abcdef123111', '5f1234567890abcdef123222'],
  theme: 'light', // options: light [default], dark, auto
  omitNonEssentialCookies: true,
});