Widget Embed

Embed the portal into your app or site

The embed widget offers a seamless way to integrate release notes into your application or website. With a simple click on a trigger in form of a link or button, users can access a dialog box displaying the most recent announcements. Additionally, the trigger conveniently displays a badge indicating the presence of new announcements.

Demo

Experience a demo of the widget on CodePen.

Configuration

To customize the appearance of your embedded portal, go to Workspace > Settings > Widget.

The widget embed settings allow you to tailor the look and feel of the widget to match your brand or audience. From the right-hand sidebar, you are able to change the title and subtitle, color scheme, locale and more.

Alternatively you can use the advanced options below to specify the configuration via code.

Installation

To add the widget to your website:

1

Click the install button

Click the Install button at the bottom of the configuration sidebar.

2

Copy the install code

Follow the instructions in the install panel. Copy the relevant code snippets and paste them into your website or app.

Advanced options

Overwriting the UI settings

You can overwrite the configured styles and settings of the widget by adding custom properties to the embed code. This allows for customizing the styling when embedding the widget in different locations.

When a setting is configured via the properties below, it can no longer be customized via the UI settings.

The properties are specified as attributes within the <released-widget> custom HTML element.

Widget Properties

The following customisation options are available for the widget.

channel-id	The ID of the release notes channel.
position	The position of the widget. Can be top-left, top-right, bottom-right, or bottom-left.
anchor	Can be trigger or viewport. Positions the popup relative to the trigger or the viewport. When using trigger, position translates to... top-left = top-start (popover opens above the trigger and the left of the popover is aligned to the left of the button) top-right = top-end (popover opens above the trigger and the right of the popover is aligned to the right of the button) bottom-left = bottom-start (popover opens below the trigger and the left of the popover is aligned to the left of the button) bottom-right = bottom-end (popover opens below the trigger and the right of the popover is aligned to the right of the button) center = bottom (popover opens below the trigger and the popover is centered horizontally, relative to the trigger) You can find a demo and experiment with different options on Codepen.
trigger	A string specifying a css selector that determines which element on the page will open the dialog when clicked. For example #changelog-button. If not specified, a default trigger button will be rendered.
title	The title of the widget.
sub-title	The subtitle of the widget.
badge	Whether to display a badge with the unread count. Can be true or false.
color-scheme	The color scheme to use for the widget. Can be system, dark, or light. See Configuring Dark Mode for more details.
color-primary	The primary UI color. Can be hex, hsl, rgb, or css color name.
color-secondary	The secondary UI color. Can be hex, hsl, rgb, or css color name.
attributes	Allows for passing data-* attributes to the host container for the widget. For more details see the Attributes section below.
z-index	The z-index to use for the widget.

Data Attributes

Setting data attributes can be helpful to prevent unwanted interactions with 3rd party libraries. For example, to prevent scrolling issues when the Lenis library is used, you can add the data-lenis-prevent attribute to the host container.

Example:

<released-widget channel-id="CHANNEL_ID" data-lenis-prevent=""></released-widget>

Default values

The following default values are applied in case a property is not explicitly defined.

<released-widget channel-id="CHANNEL_ID" 
  anchor="viewport"
  position="bottom-right"
  title="What's New"
  sub-title="The latest updates and improvements."
  trigger="#trigger"
  badge="true"
  color-scheme="system"
  color-primary="#7c3aed"
  color-secondary="#e879f9"
  z-index="10000"
></released-widget>