Scroll Viewport uses the pages and page tree of your Confluence space or Scroll Document to define articles pages and an article navigation for your site.

All the pages in your space or Scroll Document (except your space overview page or document root page) are transformed into article pages, like the one below:

article page on a live Viewport site

  • Your Confluence page title will be your article title.

  • Your top-level parent pages will additionally show as topics on your content source page.

  • Your space or document’s page tree will show as an expandable article navigation on the left sidebar of article pages.

  • You can customize the appearance of your articles using the theme editor.

To change the order of articles and topics, move pages within your page tree in Confluence.

To add new articles and topics use the page Create option in Confluence. Edit article content using the Confluence Cloud editor.

Using the Confluence Editor

Open the Confluence editor to add and edit content on new or existing articles. Click Publish when you are done.

Your content updates will not appear on your Scroll Viewport site immediately after clicking ‘publish’ within Confluence. We recommend reviewing your content via the article preview before making your updates live. Once you’re happy with the content, update your site to go live with changes.

There are a few things to consider when using the Confluence editor:

  • Confluence editor features and macros are a great way to enhance your content – but not all macros are supported by Scroll Viewport yet. Please refer to our list of Supported Macros and Features for an overview of macros that will work on your site.

  • Blog post page types in Confluence are currently not supported.

  • The image sizes you set within the Confluence editor will also be displayed on your site. If images exceed the width of the article content column and/or a maximum height of 1000px then they will be scaled smaller to fit. Learn how to Resize and Align Images.

  • Videos will also be displayed on your Scroll Viewport site. Refer to our list of Supported Macros and Features to find out more.

Creating Theme-Optimized Content

Follow these tips to optimize the content you wish to publish to a Scroll Viewport site. All sites use the Help Center theme.

Use formatting – especially on headings

Format your text to increase readability and navigability of content. Make use of headings to structure articles and help users navigate the content.

If you enable the table of content (TOC) option for articles in the Theme Editor, Scroll Viewport will automatically generate a structured list of links pointing to the first three levels of headings found on your article:

  • If you start your Confluence pages with H1s: The TOC will show H1, H2 and H3.

  • If you start your Confluence pages with H2s: The TOC will show H2, H3 and H4.

In the Help Center theme, your article titles will display the HTML Heading 1 style. To ensure a hierarchical structure in the HTML output, any headings that you have formatted as H1s in Confluence will automatically be transformed into H2s by Scroll Viewport.

Display a list of children on topic pages

Add the children display macro to parent pages to help your users overview the content of a specific topic. Scroll Viewport overrides the Confluence view of the macro to generate a nice, themed output.

Define meta descriptions for articles

By default, Scroll Viewport uses the first 150 characters of your Confluence page to define meta description for your site’s pages. Meta descriptions are used by search engines to create short descriptions of your pages.

To improve how search engines rank and index your site's articles, we recommend optimizing meta descriptions with the help of the excerpt macro. Add the macro to all pages and set it to ‘hidden’ if you don’t want the content to be part of the article itself.

If you have placed more than one excerpt macro on your page, Scroll Viewport will always take the very first excerpt macro that appears on the page to define the meta description. The description limit is 165 characters.

Name files and add image alt-texts

Make sure your images have meaningful file names. Check and edit file names from the Confluence Attachments page. When inserting an image in the editor, include alt-text to describe the image as this enables users with visual limitations who use screen readers to know what is shown in the image.

Insert links to other articles

Add links to other articles in your help center to help users find relevant or related content.

Select Link from the editor toolbar and use the search bar to find the right page in your space or document.

Inserting links via page search will ensure that they remain stable even if you rename or move pages around (as long as they remain in the same Confluence space or document).

Insert links to article sections

Add links to article sections to help users skip to the relevant or related content right away.

To be able to link to specific sections, on the same or on another article of your help center, you will need to place an anchor macro in your target section in Confluence first. Then, opt for one of the following options:

  • If the section is on the same page: Place anchor links (via the editor’s link option) in your Confluence page to link to the corresponding section of the page.

  • If the section is on another page: Manually build an anchor link to link to the section of the other page and place this link in your Confluence page. Links need to have the format https://yourname.atlassian.net/wiki/spaces/space-name/pages/7453179996/Topic+Article#task1

If you’re looking to share a link (not embed a link on an article), we recommend to generate your Viewport site and copy the (section) link directly from your live help center. Learn more on Share Links

Display a list of related articles

Add the Confluence content by label macro to your pages to show and reference a list of related articles from your Scroll Viewport site. Add it to the end of your articles to point your site visitors to the next most interesting or helpful pieces of content in the site.

The macro will only display pages that are part of your Scroll Viewport site. Pages that aren’t included in your site’s content sources won’t show up. You’ll be notified in the preview report if there are any empty macros on a page.