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 your Released announcement page or widget into your Scroll site.

Released.so integration in the Help center theme

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 on one of the pages in your Scroll site. For that we will use an empty page that acts as a placeholder.

This page will always reflect the latest updates that you publish with Released, without having to update your Scroll site. You can embed the announcement page following these steps:

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

(function () {
  /* ----- SCRIPT CONFIGURATION -----
   * Add your Page IDs here with the matching channel ID and which modules you want to show.
   */
  const PAGE_MAPPINGS = {
    "663257133": { // Confluence pageId
      channelId: "5cca688e-d54f-4819-ae29-3b8775bc306a", // Released channelId
      modules: "" //roadmap, changelog or empty for both
    } 
  };
 // ----- SCRIPT CONFIGURATION -----*/

  const SCRIPT_URL = "https://embed.released.so/1/embed.js";
  const MARKER_ID = "released-embed-root";

  // ----- LOGIC -----
  const currentPageId =
    document.documentElement.dataset.confluenceContentId ||
    (window.vp && vp.source && vp.source.confluencePageId);

  const config = PAGE_MAPPINGS[String(currentPageId)];

  if (!currentPageId || !config) return;

  function injectRoadmap() {
    if (document.getElementById(MARKER_ID)) return;

    // We target the article container to keep the header visible
    const article = document.querySelector("#content.fb-layout-container");
    const articleBody = document.querySelector(".article-body");
    
    if (!article || !articleBody) return;

    // 1. Build the custom element tag
    const moduleAttr = config.modules ? ` modules="${config.modules}"` : "";
    const embedHtml = `<released-page channel-id="${config.channelId}"${moduleAttr}></released-page>`;

    // 2. Hide only the restricted body and the TOC
    articleBody.style.display = 'none';
    const toc = document.querySelector('.toc');
    if (toc) toc.style.display = 'none';

    // 3. Create wrapper
    const wrapper = document.createElement("div");
    wrapper.id = MARKER_ID;
    wrapper.style.width = "100%";
    wrapper.style.display = "block";
    wrapper.innerHTML = embedHtml;
    
    // 4. Inject into the article container
    // This keeps it below the original <header> but replaces the body
    article.appendChild(wrapper);

    // 5. Load the Released script
    if (window.vp && typeof vp.loadScript === "function") {
      vp.loadScript(SCRIPT_URL);
    } else {
      const script = document.createElement("script");
      script.src = SCRIPT_URL;
      document.head.appendChild(script);
    }
  }

  const check = setInterval(() => {
    if (document.querySelector("#content.fb-layout-container") && document.querySelector(".article-body")) {
      injectRoadmap();
      clearInterval(check);
    }
  }, 100);
})();

Replace the placeholders PAGE_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.

To override the standard width of the help center theme and enable full-page width for roadmaps, insert the following CSS styles into Scroll Sites' CSS editor:

CSS

/* Selector with Confluence pageID to apply the styles only to those pages.  */
html[data-confluence-content-id="663257133"]{

    --_content-width: 100% !important;
    --theme-container-width: 100% !important;

    & .article-page .main-content {
        display: block !important; 
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 40px !important; 
    }

    & #released-embed-root {
        display: block !important;
        width: 100% !important;
        min-height: 800px;
    }

    & .footer {
        display: flex !important;
        clear: both !important;
    }
}

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 the Widget from Released into Scroll Site