Creating A Guided Tour In UserIQ

In-app guided tours are effective onboarding tools that help your users navigate the software at their own pace. UserIQ makes it easy for you to set up customized guided tours without support from your development team. 

Here’s how to create a Guided Tour in the UserIQ customer success platform:

1. To start building your guided tour, you will need to login to both UserIQ and your web app in the same browser.
2. Navigate to the page in your web app where you would like to start the tour. 
3. Click the UserIQ bubble in the bottom right corner of the screen to expand the UserIQ sidebar.
4. Click the Tours button and it will display the list of Guided Tours created on that page.
5. Click on the Add New Tour button and select Single Page Tour or Multi Page Tour.
6. You will be presented with the Step Editor in the sidebar, as well as a preview modal in the default center position of the screen. Here you will see any changes you make in real time as a preview. Make all the necessary content changes to the tour step and hit Save Step.
7. To attach the tour steps to a UI element, click the step name (step 1) and enter Record Mode. Then, click the element on the screen you want to highlight. The positioning bubble will now appear by that object.
   • Note: If you want to place the modal on the result of the element click (as long as the URL does not change), click twice on the element to initiate behavior, now you can place the modal on the new section (Again, as long as the URL has not changed). 

There are two modes in the Record Mode:

• Select mode is used to select a UI element. 
• Navigate mode is used to navigate to hidden UI elements (e.g. all the elements in a drop-down).

NOTE: If the URL changes, you need to select the Multi Page Tour option or create a new tour and link the two tours together.

Use the arrows to orient the modal to the selected element. A Preview will display the modal as it will appear for the end user. The Expand will expand the clickable area (red box). For example, if you were clicking on a CSS button but only the text was selected, you can click Expand to select the surrounding area.

Once the position is set, click the DONE icon in the recording mode.

1. To create a new step, click the Plus + sign in the sidebar under your most recently created step. You can also remove a step by clicking the Trash Bin Icon on the tour step.
2. Once you finish adding & positioning all of your steps, click the Save Tour button. 

Modifying a Guided Tour in UserIQ

1. Switch to the UserIQ web app. From the menu click Engagements, View Engagements. Scroll down till you see the Engagement you created, then click the Edit link to the right of the tour.
2. Enter Engagement Name (this name will appear in the list of engagements)
3. Select a Theme
4. Enter the Tour URL
5. Modify tour setup Display Options 
   • Scroll to Each Step: Enabling this option would automatically scroll your users to each guided tour step
   • Open Links in New Window: Enabling this option would open any links either in the content or 'take me’ button in a new page 
   • Persist Tour on URL Change: Enabling this option would continue to present the tour even if the URL changes (this option would be best useful in scenarios where you would like the same tour step to show up on multiple URLs of your application)
6. Modify tour setup Advanced Options
   • Delay Presentation: You can delay your guided tour presentation by 'x’ seconds if you select this option (this option would be very useful if the load time of your web-app is slower than usual on certain URLs. Enabling this option and setting the tour to start after 6 seconds would make sure the tour would only start after your page load is wholly completed)
   • Show More Than Once: If you would like to display this tour to your users more than one time, please enable this option, and select the number from the scrollbar below (you can also configure the time interval between the presentation of the tours). Please be advised that your engagement will not be presented again if you have fully completed the tour (i.e. if your user has clicked on an „End” type button on the last step of a tour). The tour would only be presented again if your user has a status of „Presented” or „Dismissed” as the Action Taken.
   • Add Remind Me Button: Toggle this on to add a Remind Me button. This button will override the SHOW MORE THAN ONCE option and will display the Tour again 24 hours later.
   • Reset Impressions: This option would be best useful for presenting a tour once every 'x’ days – indefinitely until you pause the engagement. Enabling this option could be very dangerous – Ex: if you have enabled this option to reset engagement impressions once every '2′ days, this engagement would be presented to your end users once every 2 days (indefinitely until the engagement is paused), even if the user has already seen the engagement. One other important point to note is that – if you configure to reset impressions once every 'x’ days, the engagement results for that engagement would also be removed after the 'x’ day period–meaning, there won’t be a historical list of results unless you export the engagement result data once every two days.
   • Always Deliver: When enabled, this toggle will always deliver the engagement until the engagement is paused, or a “disable” button is enabled and the user clicks it.
7. Navigate to Tour Steps to modify individual step content
8. Enter a Step Header
9. Add Body Content, which can include text, image(s), video, links, etc.
10. Configure the button behavior:
    • Left Button – usually used for End or Back. No Button is a common type for the left button. 
    • Right Button – usually the action button, typically Next. Take will allow you to use the Named Features list to navigate to a page or external URL (depending on the named feature). Link is used to link to another tour.
11. Modify Display Options as desired
    
    • Darken Background – Activate the toggle to darken the background when this engagement is displayed. This is useful when calling attention to important and critical information.  

    • Step Resolution: This option determines what happens to the messages, for example, if your page renders slower at certain times, you should click the Wait for it box so the message does not appear before the item it’s pointing to displays. If your end-users have access to limited portions of the application based on subscription tiers, and you would still want to create only one tour that fits all, you can use our Skip It option to skip a specific step if a user does not have access to a part of the application where the tour step is being displayed. Center it option would just display the tour step in the middle of the page.

12. Set Advanced Options if desired:
    • Partial Visibility: This option would be best useful if your tour step is attached to a UI element that is not completely visible in UI on the initial page load of your web-application (for example, a UI element that is present on a pop up window)
    • Pin to Window: If you would like the guided tour step to stay in it’s position even when you are performing several actions on a specific page of your app, this option would be best useful
    • Advance on Click of Element: This option is selected by default, and would essentially take your users to next step if your end-users were to click on the UI element to which the tour step is attached to.
    • Step URL: You could also provide a different URL to each step within a tour if needed (only if your app is framed i.e. contains iFrames).
    • Step anchors (selectors): Step anchors (selectors) can be leveraged for advanced tour configuration if your tour steps are not being attached/tethered to the right UI element with either of the options mentioned above. These anchors (selectors) contain the information required by us to identify the element that your tour step is supposed to be attached to (if it is supposed to be attached to an element). An anchor would typically look like the following:
      

      :nth-child(3) > .layout-align-start-start > #layout-fill > :nth-child(7)

      The anchor displayed above denotes a path to reach the desired UI element that you are trying to attach/tether your tour step to. An anchor could also contain just
      

      .layout-align-start-start

      or
      

      #layout-fill

      depending on what element you are trying to attach your tour step to. Please note that we automatically populate anchor information as soon as you attach/tether a tour step to your UI element using our Admin Panel (UIQ bubble), and do not recommend any modification unless the tour step is not attaching to the desired element.
      
      There are three anchors (selectors), namely: Primary, Secondary, and Tertiary. If you would like to modify these anchors, please be advised that the priority order in which these anchors would be respected is Primary > Secondary > Tertiary i.e. we are going to try and attach the tour step to the Primary anchor, and if that does not exist on page, fall back to Secondary anchor or Tertiary anchor.
      
      We use Sizzle JavaScript to capture the anchor information and if you would like to learn more on how to best use these anchors to your advantage, we advise you to refer to their documentation here: https://github.com/jquery/sizzle/wiki.
13. Click Segment once you are finished with the tour configuration to modify your audience. You can create a new segment, or use an existing one. 
14. Once you’ve completed all modifications and selected a segment, you can review your Guided Tour by clicking the Review button. If everything looks good, click Save Engagement on the bottom right of the page to save your changes!

Related Articles

Click here for details on Wildcarding parts of URL’s

Click here for more details on Audience & Segments

Click here for details to Schedule, Go Live or Test your tour