Page
Embed announcements into your website or documentation
Last updated
Embed announcements into your website or documentation
Last updated
The embed page enables you to integrate release notes seamlessly into your website or documentation. You can maintain your existing website header and footer, ensuring a consistent user experience across your site.
Experience a demo of the page embed on CodePen.
The announcement page settings provide a number of options to customize the appearance of the page.
Via the right-hand sidebar settings, you are able to change the title and subtitle, color scheme and locale of the page.
🇺🇸 American English 🇩🇪 German 🇫🇷 French 🇪🇸 Spanish 🇵🇹 Portuguese 🇳🇱 Dutch
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 Page menu item in the Design section.
Click the Install button at the bottom of the sidebar.
Follow the installation instruction in the slide out panel.
You can overwrite the configured styles and settings of the page by adding custom properties to the embed code. This allows for customizing the styling when embedding the page 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-page>
custom HTML element.
channel-id
The ID of the release notes channel.
module
Determines with modules to show on the page. Can be changelog
, roadmap
or all
. Defaults to all
.
header
Can be true
or false
. If false, the header with the title and description is hidden. This options allows you use an existing header or create a completely custom header.
cover-images
Determines whether the cover image will be shown. Can be true
or false
.
title
The title of the widget.
sub-title
The subtitle of the widget.
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.
top-offset
Expects a number (eg. 100
) or false
as values.
A value of 100
will create an offset of 100 pixels from the top for sticky titles. A value of false
will disable sticky titles.
To notify users about the availability of a new post, you can enhance the user experience by incorporating a notification badge on the link or button leading to the announcement page. This badge functions similarly to the notification badge found in the widget.
Follow the Installation instructions and copy the code for the badge.
It's best to place the <release-badge>
element inside the <a>
tag when adding the badge to a link.
You can adjust the position of the badge by styling it with CSS. We recommend two options:
Use the margin property to adjust the position
Use the transform property to adjust the position
Experiment with badge positioning on CodePen.