Released Documentation
HomeSupport
  • Getting started
    • Overview
    • Concepts
    • Setup Guide
      • Installing Released
      • Embedding the Widget
      • Embedding the Page
      • Implementing User Verification
      • Changelog Description Field (optional)
  • Permissions
  • Global Settings
    • General
    • Design
    • Internal Domains
    • User Verification
  • Workspace
    • Overview
    • Dashboard
    • Changelog
      • AI Settings
      • Changelog filter
      • Creating and Managing Posts
      • Writing a Post
      • Publishing Updates
      • Templates
      • Editor
        • Images
        • Videos
        • Emojis
        • Keyboard Shortcuts
        • Categories
        • Versions
      • Filter
    • Roadmaps
    • Settings
      • General
      • Access
      • Portal
        • Page Embed
        • Widget Embed
      • Publishing
        • Confluence
        • Email
        • Jira issue links
    • Integrations
      • Framer
      • Webflow
      • Slack
      • Aura
      • Cosmos
      • Karma
      • Scroll Viewport for Confluence
  • Resources
    • AI Tips
      • Create Output in Other Languages
      • Include a Documentation Link in the Output
      • Creating Structured Output
    • Troubleshooting
      • Permissions Issues
    • How-Tos
      • Accessing Custom Fields
      • Configuring Dark Mode
      • Finding the Channel ID
      • Ensuring JavaScript Resource Stability for PCI Compliance
      • How to Open the developer console to check for errors
      • How to Apply Atlassian Marketplace App Promo Codes for Cloud
      • Configuring Content Security Policies (CSP) for Released Embeds
Powered by GitBook
On this page
  • Overview
  • Basics
  • Demo
  • Configuration
  • Installation
  • Advanced options
  • Overwriting the UI settings
  • Widget Properties
  • Data Attributes
  • Default values

Was this helpful?

  1. Workspace
  2. Settings
  3. Portal

Widget Embed

Embed announcements into your app or site

PreviousPage EmbedNextPublishing

Last updated 3 months ago

Was this helpful?

Overview

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.

Basics

Demo

Configuration

The embed widget settings provide a number of options to customize the appearance of the widget.

Via the right-hand sidebar settings, you are able to change the title and subtitle, color scheme and locale of the widget.

Supported locales

🇺🇸 American English 🇩🇪 German 🇫🇷 French 🇪🇸 Spanish 🇵🇹 Portuguese 🇳🇱 Dutch

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 in the Design section.

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

  • Follow the installation instruction in the slide out panel.

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)

trigger

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

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

z-index

The z-index to use for the widget.

Data Attributes

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>

Experience a demo of the widget on .

You can find a demo and experiment with different options on .

A string specifying a 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.

The color scheme to use for the widget. Can be system, dark, or light. See for more details.

Allows for passing data-* attributes to the host container for the widget. For more details see the below.

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

CodePen
Lenis
Configuring Dark Mode
Codepen
css selector
Attributes section
Embed Widget Settings