Understanding Overlay Types

Overlays are a graphical user interface (GUI) element of interaction, such as a button or a pop-up bubble. Adopt empowers you to use these Overlays to navigate a user or a visitor throughout the application where they can get or edit information.

Context help

Context Help is always available and easily accessible in the Agent mode to all users or visitors. They can use the Context Help widget anytime they need any help/guidance by clicking on the Context Help widget. Note: By default, the Context Help icon is a question mark, but if you wish to customize and change the appearance, for example to your company logo, contact us for details.

Context Help consists of:

1. A search bar

2. Journey Tracker

3. List of available Tours

Journey Tracker

The Journey Tracker shows progress across multiple guides. You can set up the Journey Tracker to be embedded in the Context Help widget, or you can keep it as a separate widget right beside the Context Help.

Notice

This widget is designed to inform the user or the visitor in the form of a tip without interruption. It attracts users’ attention to notify them and to highlight some elements without putting the background into shadow. The tip widget does not require the user to take any action and can be set up to be closed automatically after a couple of seconds. You can provide text which will be displayed on the bottom of the screen wherever the widget is created. This is a brilliant way to boost user awareness and can also be used to create a good first impression without interrupting them.

Note: It is not possible to set a preferred position for the tip widget. Depending on the theme you have chosen, the tip can be displayed in different parts of the application; however, the default and the most usual position is at the bottom of the application screen.

Sidebar

This widget is like the tip; however, it will always be displayed vertically either on the left or on the right side of the application screen. You can use the Sideout widget to provide a sizable chunk of text or a customized picture.

Note: It is not possible to set a preferred position for sideout, and depending on the theme the sideout widget will always be positioned either on the left or the right side of the application screen.

Note: A use case of sideout can be when the step is related to the element that covers most of the screen and there is no space available for the bubble. In that case, sideout is used.

Smart Page

Unlike the other widgets, a Smart Page is not positioned based on the selected element. Instead, it's always displayed in the centre of the screen while blurring the background. We recommend using this as a welcome screen for new users or highlighting news/changes in the application.

Tooltip

A Tooltip is usually a small window associated with an element in your application. It draws the user’s attention and describes the element's purpose. It is displayed when the user hovers the mouse cursor over the object or clicks on an element.

Tooltips are helpful for new users because they enable the users to learn about each icon or object via basic interaction with the app.

The tooltip is fully customizable, as the layout and visual style can be changed. It may stay on the screen only until users or visitors interact with it. Like most of the other widgets, by default, the Tooltip shows the step title, a brief description, step counter (like step 1 of 12), and action buttons (next or previous).