Scroll Sites for Confluence

Let your help center visitors view your latest releases notes and roadmaps, published straight from Jira.

Scroll Sites is an Atlassian marketplace app by K15t that allows you to transform Confluence pages into a public or restricted online help center for your users.

Released integrates with Scroll Sites through a native integration. Setting up this integration is a breeze and requires just a few simple steps, taking less than 2 minutes to complete.

See a demo

https://released.scroll.site

Installation

Pre-requisites

• Scroll Sites in installed in Confluence.

• Released is installed in Jira.

1

Get the Released Channel ID

Find the Channel ID for the portal you want to embed and note it down.

2

Navigate to the integrations section in Scroll Sites

1. Open the theme configurator under Site Settings > Look and Feel > Customize theme.

2. Click the Integrations tab.

3

Enable the Released integration

4

Enter the Channel ID

Enter the channel ID noted down in step 1 into the Channel ID field in the Released integration

5

Rename the header link (optional)

The Roadmaps and changelogs will be accessible via a link in the header. Change the link title to best match your use-case.

6

Save changes

Click Save changes and close the theme configurator.

7

Publish the site

In the Site settings screen, click Save changes or Publish Changes.

Congratulations, you're done 🎉

Roadmaps and posts published with Released will now automatically appear in your Scroll Sites help centre.

Adding a feedback form

Pre-requisites

A Released form ID (FORM_ID).

1

Open look and feel settings

In your Help Center, navigate to: Site settings → Look and feel.

2

Add a header link

Under the Section (header) configuration, create a new link in the header navigation.

Label: e.g. “Give feedback” (or any label you prefer).

URL: Use any URL you like, but note it down; you will need to use the exact same URL in the script below.

The URL itself does not need to be a real destination; it’s used only as a selector to detect clicks on this link. Although you may pick a real URL as a fallback.

3

Add Custom Code

• In Look and feel, go to the Code section.

• Paste the following script into the custom JavaScript area.

• Replace:

  • FORM_ID with your actual Released form ID.

  • FEEDBACK_URL with the exact URL you used for the header link in step 2.

(function () {
  const SCRIPT_URL = "https://embed.released.so/1/embed.js";
  const FORM_ID = "b67de5f5-2ece-46ba-aa84-602ab58f40ea";
  const FEEDBACK_URL = "https://released.so/feedback";

  function init() {
    if (!document.querySelector(`released-form[form-id="${FORM_ID}"]`)) {
      const form = document.createElement("released-form");
      form.setAttribute("form-id", FORM_ID);
      document.body.appendChild(form);
    }
    if (!document.querySelector(`script[src="${SCRIPT_URL}"]`)) {
      const script = document.createElement("script");
      script.src = SCRIPT_URL;
      script.defer = true;
      document.head.appendChild(script);
    }
  }

  if (document.body) init();
  else document.addEventListener("DOMContentLoaded", init);

  document.addEventListener("click", function (e) {
    const selector = `a[href="${FEEDBACK_URL}"]`;
    const link =
      e.target.closest(selector) ||
      e.target.closest("li")?.querySelector(selector);
    if (!link) return;

    e.preventDefault();
    e.stopImmediatePropagation();

    window.Released?.show("form", FORM_ID);
  }, true);
})();

4

Save and publish

• Click Save in the Look and feel settings.

• Publish the site so the changes go live.

---

Legacy installation

These instructions apply to Scroll Viewport and are not applicable to the new Scroll Sites app.

1

Get the Released Channel ID

Find the channel ID for the announcement page and note it down.

2

Create a placeholder page in Confluence

• Create a page where you want the release notes to appear in your Sites documentation.

• Give the page your preferred name, e.g. "Release Notes".

• Leave the page empty and save.

3

Get the Confluence Page ID

Note down the Confluence Page ID from the URL (see screenshot below).

4

Add the custom JavaScript snippet to your Viewport theme

• Navigate to your Sites theme settings.

• Inject the following JavaScript.

if (vp.source.confluencePageId === "PAGE_ID") {
  vp.loadScript('https://embed.released.so/1/embed.js').then(() => {
    document.getElementById("article-content").innerHTML = '<released-page channel-id="CHANNEL_ID" color-scheme="light" color-scheme="light" top-offset="80px" color-primary="#FFF"></released-page>'
  });
}

Ensure you replace the Page_ID and CHANNEL_ID placeholders with the IDs noted in the previous steps.