How to: manage advanced step settings (the Advanced panel)

With the Advanced panel in the Authoring Tool, you can further customize your tooltips and steps of your walkthroughs.

With the Advanced panel, you can set up:

· Custom Class,
· Path filter (walkthroughs),
· Max continuation attempts (walkthroughs),
· Frames,
· Scroll type.

In this article, we’ll describe the above functionalities of the Advanced panel.

The Advanced panel appears in the Authoring Tool when you create and edit steps of your walkthroughs and tooltips. In this article, we will start at this point and won’t explain how to build a walkthrough as such. To learn how to create it, please check this article first.

To open the Advanced panel:

  1. In the Authoring tool, while you’re editing or adding a walkthrough or a tooltip, select a step from a list of steps or click “+” to create a new one.

  2. Scroll down to the Advanced panel and expand the tab. Now, you see the Advanced panel.

With the Advanced panel, you can set up:

· Custom Class - you can add a custom CSS class to a step or tip.
· Path filter (walkthroughs) - it sets the specific path for the step to appear on, it won't appear on any other path than the one specified.
· Max continuation attempts (walkthroughs) - it tells the player how many times it should try to redirect the user to the path if set.
· Frames - if your application is using frames (iFrames), we can enable this feature for you (it is part of Pro features). Contact Support for more info It tells the player which iFrame this step should appear in to avoid duplicates.

In the Advanced, panel you can also set up a scroll type, this helps in various situations, where the application might not work properly with default scroll behavior. E.g. you can set padding (area to avoid) in case you have a fixed top navigation bar, in order to avoid step and element being displayed behind it.

  1. Expand the Scroll tab and click Override for this step.

  2. From a drop-down menu, you can choose:

· Inherit global settings - settings from the Inline Manual portal will be used.
· Precise - it uses a custom method. It allows you to adjust options such as scroll position and scroll padding.
· Legacy - it checks if an element is inside a viewport. Then it uses native Element.scrollIntoViewport() method. It is the default behavior of scrolling.
· Native - it uses native Element.scrollIntoViewport() method without any additional checks. It will use browser's scrolling ignoring the scroll padding if set. You should use it when the target element is nested in multiple scrollable parents. This option does not allow any customization (e.g. animations) and may behave differently between browsers.
· None - it won’t do any scrolling. It is designed to be used in rare cases when scrolling the element into viewport would break the page layout (e.g. when there are global overflows).

We describe in details the precise scrolling option here.

walkthrough
Tooltips
Was this article helpful?