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
    • Custom domain
    • 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
  • Page properties
  • Notification badge

Was this helpful?

  1. Workspace
  2. Settings
  3. Portal

Page Embed

Embed announcements into your website or documentation

PreviousPortalNextWidget Embed

Last updated 2 months ago

Was this helpful?

Overview

The embed page enables you to integrate a portal seamlessly into your website or documentation. You can maintain your existing website header and footer, ensuring a consistent user experience across your site.

Basics

Demo

Configuration

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.

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 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.

Advanced options

Overwriting the UI settings

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.

Page properties

Property
Description

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

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.

Notification badge

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.

Installing the badge

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.

<a href="/changelog" class="nav-link">What's New? <released-badge channel-id="CHANNEL_ID"></released-badge></a>

Adjusting the position of the badge

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

<style>
released-badge {
  margin-top: -8px;
  margin-right: -8px; // example with margins
  transform: translate(50%, -50%); // example of transform
}
</style>

Experience a demo of the page embed on .

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

Experiment with badge positioning on .

CodePen
CodePen
Configuring Dark Mode
Embed Page Settings
The notification badge let's users know when a new update is available.