Setting Up an Onboarding Widget

The Iridize Onboarding Widget allows you to create a virtual training agenda for your users/employees.

The widget creates a list of tasks/goals that the user should finish in order to complete his/her training. Upon completion of a task/goal the widget is automatically updated to reflect the progress.

The Iridize onboarding widget is composed of 2 resources:

  1. irTodoWidget.js
    This Javascript file encapsulates the widget for the developer. It handles all functionality of loading the guides, adding them to a visual element on screen and checking if they were completed. Feel free to use this code as a baseline and write your own implementation.
  2. irTodoWidget.css
    This handles the styling of the widget. The default style is what can be seen in the image above. You are more than welcome to update the style to match your branding.

Adding Items to the Widget

Like anything in Iridize, the widget requires IT involvement only on the initial setup. After that, anyone with editor permissions in your Iridize account can define which guides will display in it.

All you need to do is to amend the description of the guides and add the tag tagName to them. The description of a guide can be found in the guide's advanced settings page (see image below).

For example, if in the embed the IT set the tagName to be onboarding, than you will need to add the following to the description:

<onboarding/>

Note: you can define the position of the guide in the widget by adding the pos attribute. the tag bellow will cause the guide to appear first in the widget.

<onboarding pos="1"/>

guide_description.PNG

Embedding the Onboarding Widget

To embed the Onboarding Widget in your application you will need to first load the two resource above onto the page.

Once these resources are added to the page you only need to tell the widget to show itself. 

iridize.showWidget(options);

The following options are supported:

  • header: the heading for the widget. (e.g. "Welcome to your ____ training course")
  • motivation: tell your user what he will achieve after completing the training. This is the green box at the bottom of the image above.
  • tagName: This will filter which guides should show in the widget. A guide will show in the widget only if the text provided by tagName appears in its description (e.g. <todo/>)

DOWNLOAD

For your convenience, attached below you will find a fully functional embed script code sample.

Customization

Consider the following when using the widget:

Minimized Display

Normally, you'd like to have some visual element on the screen available for the user to click at any time. Clicking that element would open the widget.

To do that all you need to so is to add a click event handler to this element and call iridize.showWidget()

Launching 

Aside from the first launch, you may want the widget to re-appear as soon as the user completes a guide.

To do that you can use the Iridize Javascript API as follows:

iridize("api.guide.onStopGuide",  {}, function(data)  {
    //launch the widget if the user closed a guide.
    if(data.apiName != 'autoload')
        loadTodoWidget();
});
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.