Scroll Viewport for Confluence

Add Release Notes to your Scroll Viewport help centre.

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

Integrating Released with Scroll Viewport

Released now integrates with Scroll Viewport through their custom JavaScript inject functionality. Setting up this integration is a breeze and requires just a few simple steps, taking less than 5 minutes to complete.

Prerequisite

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

1. Create a placeholder page in Confluence

1. Create a page where you want the release notes to appear in your Viewport documentation.

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

3. Leave the page empty and save.

2. Note down the Confluence page ID

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

Note down the Confluence page ID from the URL

3. Add the custom JavaScript snippet to your Viewport theme

1. Navigate to your Viewport theme settings.

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

To customize the look and feel of your release notes page, you can add additional parameters to the <release-page> tag in the above snippet. For all available settings, see the Page Embed documentation.

3. Lastly, save the changes to your theme.

4. Optional style fine-tuning

By default, Scroll Viewport adds a 10cm padding at the top of the page. To remove the padding on your release page, you can inject the following CSS in the theme settings:

The below code most be added into the Custom CSS section. Not in the Custom JavaScript section where we added the above code.

#article-content:has(> released-page)
{
    padding-top:0px;
    grid-template-columns:1fr;
}

Congratulations, you're done 🎉

New posts published with Released will now automatically appear in your Viewport help centre.