Skip to content
Documentation

    Scroll Sites for Confluence

    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.

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

    Installation

    Section titled “Installation”

    1. Get the Hub 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 Hub integration

      ScrollSites Integration

    4. Enter the Channel ID

      Enter the channel ID noted down in step 1 into the Channel ID field in the Hub 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 Hub will now automatically appear in your Scroll Sites help centre.

    Adding a feedback form

    Section titled “Adding a feedback form”

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

    Section titled “Legacy installation”

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

    1. Get the Hub 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).

      image?url=https%3A%2F%2F1499735372 files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook x prod.appspot.com%2Fo%2Fspaces%252FCU5VgN3YVTfigwSnbdbk%252Fuploads%252FYVr4u8IDii6feTxi0ogM%252FConfluence%2520PageID

    4. Add the custom JavaScript snippet to your Viewport theme

      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>'
        });
      }