Integrate Release Notes and Roadmap from Released.so

Integrate release notes or changelogs and roadmaps from the Jira app Released into your Scroll site.

Released is a Jira app that helps you create release notes and roadmaps straight out of your Jira issues using the assistance of an AI copywriter. These release notes and roadmaps can then be published as an announcement page or widget.

This guide will show you how you can embed one or multiple Released announcement pages or a widget into your Scroll site.

Released.so integration in a help center site

The announcement page is ideal if you would like the Released content to tightly integrate with the rest of your documentation. The widget is best if you would like to let your users easily find out what’s new from everywhere in your site.

Embed the Announcement Page from Released into Scroll Site

Released lets you publish all your release posts into a standalone announcement page.

You can make this announcement page and its content appear from a link in the header of your Scroll site by enabling our Released.so integration from the theme configurator.

→ Learn how to enable the integration on Release Notes and Roadmaps Integrations .

Embed multiple announcement pages into your site

If you prefer embedding multiple announcement pages in your site (e.g. one per content source), please follow the approach detailed below. It uses an empty Confluence page within one content source that acts as a placeholder for loading the content from Released.

Create a new Confluence page, right where you want the announcement page to appear in your Scroll site.
Enter a page title and leave the rest of the page empty. Make sure the page is published to your Scroll site.
From the newly created Confluence page, note down the Confluence Content ID from the URL (e.g. example.atlassian.net/wiki/spaces/example/pages/123456/example+page).
Navigate to the Released settings in your Jira project, find the channel ID for the announcement page and note it down.

Copy the following Javascript code:

JavaScript

injectReleasedAnnouncementPages({
    "<CONTENT_ID>": {
        released_channel_id: "<CHANNEL_ID>",
        // modules: "" // Optional modules "roadmap" or "changelog" to enable. Omit to display both. 
    }
})

function injectReleasedAnnouncementPages(pages) {
    const currentContentId = sts?.confluence?.contentId;
    const config = (new Map(Object.entries(pages)))?.get(currentContentId);
    const articleBody = document.querySelector('.article-body');

    if (!currentContentId || !config || !articleBody) return;

    document.querySelector('[data-component="toc"]')?.remove();

    const releasedPage = document.createElement('released-page');
    releasedPage.setAttribute('channel-id', config.released_channel_id);

    new MutationObserver(syncColorScheme).observe(document.documentElement, {
        attributes: true,
        attributeFilter: ['data-color-scheme']
    });

    syncColorScheme();

    if (config.released_modules) {
        releasedPage.setAttribute('modules', config.released_modules);
    }

    articleBody.replaceChildren(releasedPage);
    const styles = new CSSStyleSheet();
    styles.replaceSync(`
      [data-page-template="article"] {
        :is(.breadcrumbs, .article-page header) { inline-size: 1024px }
        .article-body { inline-size: 100% }
      }
    `);
    document.adoptedStyleSheets.push(styles)
    sts.loadScript('https://embed.released.so/1/embed.js');

    function syncColorScheme() {
        releasedPage.setAttribute('color-scheme', document.documentElement.dataset.colorScheme);
    };
}

Replace the placeholders CONTENT_ID and CHANNEL_ID in the code above with the IDs noted in the previous steps.
Insert the complete code into Scroll Sites' Javascript editor.

Save and close the editor.
Publish the changes.

When opening the specified page in your Scroll site, your announcement page will be rendered over it. Any changes you make in Released that affect the announcement page will automatically reflect on this page - no site update needed.

Embed the widget with the help of a simple widget code:

Navigate to the Released settings in your Jira project and locate the channel ID in the embed code of the Widget settings.
Note down the channel ID from the embed code.

Copy the following Javascript code:

JavaScript

sts.loadScript('https://embed.released.so/1/embed.js').then(() => {
  document.body.insertAdjacentHTML('beforeend', '<released-widget channel-id="CHANNEL_ID"></released-widget>')
});

Replace the CHANNEL_ID placeholders in the code above with the ID noted in the previous step.
Insert the complete code into Scroll Site’s Javascript editor.
Save and update your site.

Your widget will now appear on all pages of your site and can be opened with the help of a small icon from the bottom right corner of your pages.

Embed the Announcement Page from Released into Scroll Site

Embed multiple announcement pages into your site

Embed the Widget from Released into Scroll Site