In App Help

Display a simplified view of your help content within your app using an iframe.

How it Works

With in-app help, you can bring your help content directly into the context of your apps without forcing users to navigate to your help center. By adding a query in the URL of a help page, you can display a simplified view of your help center that's focused on the most important thing, the content. If you call a help article with inAppHelp query in the URL, it will look something like this:

These page attributes aren't displayed when the inAppHelp query is used:

• Page tree

• Table of Contents

• Breadcrumbs

• Header

• Footer

• Third-party Integrations

Also, links within the page are opened in a new tab.

Add Help in Your App

Implement a help article within your app using the inAppHelp query:

1. Implement an iframe within your app at the position your help article should be shown

2. Go to your help article in the viewport and pick the article you want to display

3. Copy the Url of the article and add the query "inAppHelp" to the URL

   1. The URL should look something like this: https://help.k15t.com/scroll-viewport/get-started-168363875.html?inAppHelp

4. Use this URL as the source for the iframe.

Break Up Long Articles with Page Inclusion

It may be the case that your help articles contain information related to more than one area in your app. If your user opens the in-app help, they probably want help for the specific area of the app, and not general information. You can achieve this by separating the content into separate pages in Confluence.

For example:

• In our help center we have an article with the title "Get started" which describes the onboarding process which contains 5 onboarding steps.

• In our UI the onboarding process is a step-by-step wizard. Steps 1-5.

Here is what we need to do in our help center first:

1. Create 5 new article pages, one for each onboarding step. If you use an include library, you could include these there. Learn more

2. On your "Get Started" page, use Include Page or Include+ macros to include the 5 articles.

Potentially, we could already implement our in-app help feature for the 5 onboarding steps in the UI with our 5 new articles. Also our "Get Started" article will still contain all onboarding-steps on one page but we would also have 5 new navigation entries in our documentation with duplicate content. So here is what we need to do next:

1. On each of the 5 new article pages, add the scroll-help-center-exclude-page label to each page.

By adding the label, the article pages won't show up in the navigation, search, or in the topic list of the space overview. Those articles are still live and can be visited from the web, but the pages are hidden within the help center itself.

Make In-App Help Links More Robust with Scroll Versions

If you followed the steps from above, you already have a pretty good solution to include help content in your app.

But what happens if your article URL changes? In this case, the in-app help article in your UI won't be reachable anymore. To prevent this issue, and to future-proof your URLs, use the page key feature of Scroll Versions.

1. Add a page key to the Confluence page

2. Make use of the page key in Scroll Viewport by adding the query "contentKey=<pageKey>" to your URL
   Your in-app help article URL should look something like this: https://help.k15t.com/scroll-viewport/?contentKey=get-started&inAppHelp

With that implemented your team can even delete and add a new page with the same page key and your app will still refer to the correct help article.