Comment on page

Widget

Embed announcements into your app or site

The announcement 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.
Installation
To add the announcement page to your website, simply follow the installation instructions in the app. 
Navigate to the Released Settings in your Jira project
Click the Widget menu item.
Click the Install button at the bottom of the sidebar. 
Follow the installation instruction in the slide out panel. 
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. 
Property
Description
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.
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.
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" 
  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>
​

Property	Description
`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`.
`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`.
`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.

Announcement Page

Confluence

Last modified 23d ago