Points on page overlay modal widget

A new user has joined the company and will be using the Intranet site for the first time.The company needs a way to allow users to log in for the first time and understand the main features independently. The page overlay model widget will be the best solution for this.  This widget can be configured so that it provides a step by step help tour which points out important features on the screen. This widget can be configured on any page on the site. 

I configured this widget by: 

  1. Navigating to ‘Administration’ and selecting ‘Points on page overlay model’ located under ‘Intranet tools’ 
  2. I then specified the point positions that should be highlighted on the screen to give more information to the user and then ‘SAVE’
  3. I then navigated to the page where I would like the ‘Points on page overlay model’ widget to be displayed. 
  4. I selected ‘Edit’ and then ’Widgets’ 
  5. And then I selected the ‘+’ (Add widget) option to open the Widget library
  6. I selected ‘Points on page overlay modal’ widget
  7. On the ‘TITLE’ tab, I added a title for the tour I am creating
  8. From the ‘DISPLAY’ tab I added a:
  • Heading for the step
  • Summary for the step
  • The features that I would like the pointer to highlight 

9. I clicked ‘+ADD NEW STEP’ to add another point on the page

10. From the ‘TARGET’ tab: 

  • I selected ‘New starter’
  • I then selected how many weeks I want the content to be displayed
  • Once I was happy with the configuration, I selected the ‘ADD’ option 


The following screenshot shows how the slideshow is displayed in the section 

Now when a user logs in they will be able to see the pointer displayed on the first option which I have configured. The user can click ‘NEXT’ to see the pointer run through all the features I had configured in the correct order

Summary

The Points on page overlay modal widget provides a step by step user help tour that points out specific elements of the screen. This widget can be used on any page across the Invotra content.

 

Configure Points on page

Each Point position needs to be a created before they can be selected in the Points on page overlay modal widget

  1. Access the Points on page overlay modal at Administration > Intranet tools > Points on page overlay modal
  • Point Title – Give the Point a descriptive name
  • CSS selector – Add the CSS selector e.g. .profile-completion-widget

At the bottom of the list are the:

  • ADD ANOTHER ITEM button
  • SAVE button

 

Create Points on page overlay modal widget

The Points on page overlay modal widget can be used to give a step by step tour for all staff or to target it at certain users, including the option to trigger the popup modal to a specific ‘Timeframe’ from the New Starter’s Start date.

TITLE tab

  1. Type in a title for the tour

DISPLAY tab

  1. Heading – Type in a heading for this step

2. Summary – Type a summary description for this step (max 255 characters)

3. Point on page – Select the point on page for  this step

4. The bottom of the drawer has the following:

  • REMOVE CURRENT STEP button
  • < > to move back and forth through the Steps
  • ADD NEW STEP button

TARGET tab

  1. The new target category of New Starter enables the selection of a specific New Starter Timescale, to display the widget’s specific tasks based on that ‘Timeframe’ from the New Starter user’s Start date.
  • Everyone – Default
  • Locations – Only users in the locations you select will be able to view this content
  • Teams – Only users in the teams you select will be able to view this content
  • Role grades – Only users in the role grades you select will be able to view this content
  • New Starter – Only new starters within the timeframe you select will be able to view this content
    • Select New Starter Timeframe, for this set of tasks