Knowledge Base

Widget types

A widget is a graphical user interface (GUI) element of interaction, such as a button or a pop-up bubble. Your application users or visitors use these widgets to interact with the application through direct manipulation to get information or edit information. You must have encountered many widgets as it is a commonly used GUI element. 

YesElf empowers you to use these widgets to navigate a user or a visitor throughout the application. Similarly, a global positioning system (GPS) would navigate you on an unfamiliar road trip. Step-by-step until you reach your destination.

YesElf uses a combination of nine distinct types of widgets.   

1. Pop-up Window 

Unlike the other widgets, a pop-up is not positioned based on the selected element, but it’s always displayed in the center of the screen while blurring the background. Because of the features, YesElf recommends using this as a welcome screen for the new users or highlighting news/changes in the application. 

2. Bubble

A bubble is usually a small window associated with an element in your application. It brings the user’s attention by highlighting an element and hiding the background. It is usually used to describe the purpose of the element.  It is fully customizable as the layout and visual style can be changed and may stay on the screen only until the users or visitors interact with the bubble.  Like most of the other widgets, by default, the bubble shows the title of the step, a brief description, step counter (like step 1 of 12), and action buttons (next or previous).

Read about: Step Properties

3. Context help

Context Help (CH) 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.

Tip: In this example, the context help widget icon is the YesElf logo, but we can replace it with an icon of your choice. Such as your company logo. Contact us for more details.

CH consists of five parts:

  1. A search bar
  2. List of articles
  3. Journey Trackers
  4. List of available Tours
  5. A chatbot (On-demand)

4. Hotspot

The hotspot is an added feature that you can add to any step. It is designed to softly ripple while bringing a pink background to a defined position of the application. 

As above, you can see it highlights a hotspot on the screen. You can use this feature to highlight the most used feature or newly added content on your application.

5. Tip

The tip is a particular type of widget designed to inform the user or the visitor in the form of a tip without interrupting the user. It then just attracts users’ attention to notify them and to highlight some elements without 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 a text within 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.

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

6. Sideout

This widget is similar to 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. 

 Tip: 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.

Tip: 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.

7. Progress Indicator

The progress indicator may be  included in the YesElf Context help widget, which appears on the agent mode. It shows the guide completion percentage, which is an added feedback you can provide to users, encouraging them to finish the given tasks.

This is how the Progress Tracker appears when it is embedded in the Context Help.

And, this is how the Progress Tracker appears as a separate widget when it is not embedded in the Context Help. 

The Progress Tracker and the Journey Tracker are listed here as widgets because both do appear to users of your application as separate widgets when they are not embedded into the YesElf Context Help widget. 

Tip: The difference between the Journey tracker and the Progress indicator is that; the Journey tracker tracks the users’ progress across the application, including all the guides that belong to the same Journey (note that you can create multiple journeys). On the other hand, the Progress Tracker displays the completion percentage on the guide level. It includes the chosen guide and disappears from the list of the available tours when completed 100%. You can think of it as a comprehensive checklist.

8. Journey Tracker

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

9. Tooltip Widget

Alternatively known as a balloon, help balloon, or screen tip, a Tooltip is a text description near an object. The tooltip 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 in a very basic interaction with the app.  

The picture above shows an example of a tooltip provided by YesElf, giving a brief description of an element in an effortless but highly effective manner.

10. Feedback/Survey Widget

You can collect users’ feedback either about the guidance provided or the application itself by integrating a feedback form within the YesElf guide.

This is a brilliant way to get their opinion as they will not need to be redirected or leave the application. 

Tip: We recommend using this widget at the end of the guides. For example, you can create a rule to trigger this widget once all the guides are complete. Even if they do not respond, the act of asking for feedback itself is enough to keep your users from churning. 

Tip:  The feedback widget can not be set up in the YesElf editor/console at this moment.  Contact us should you wish to add this exclusive widget to your application. Our programmers will be happy to set it up according to your needs. Meanwhile, you can visit https://surveyjs.io/create-survey and utilizing their powerful editor to create a survey easily, we can then integrate it with YesElf.