Editor Manual

Terminology

Tip - also called tooltip, callout, help balloon, popover; this is the UI element that provides additional information and/or instructions about something on the web page
Target element - the element on the page to which the tip is pointing.
Splash - a special type of tip that does not have a target element, it is simply a modal dialog that is displayed at the center of the web page.
Selector - a unique identifier of an element on the web page.
Step - a set of tips that are run in parallel.
Guide - an interactive tutorial; an ordered set of steps used to provide the end user with relevant information as he is using the application.
Player - the Iridize piece of software embedded in the hosting web application which is responsible for launching all guides.

Iridize editor components: Red - Content Editor, Green - Top Panel, Purple - Flow Panel, Yellow - Step Settings Panel and Cyan - Tip Preview

Tip Preview

Shows a live preview of the currently selected tip as it would be shown as part of the guide. The Next, Back and Close (x) buttons are all functional.

Content Editor

The content editor allows you to define the contents of the tip. The content editor has two modes - Minimal and Expanded. The minimal mode supports the most important commands used in the majority of Guides. The Expanded mode empowers you to create rich content tips and splash screens which can include media.

The commands of the minimal mode are detailed below. For a full reference of the Expanded mode see the Expanded Content Editor Reference.

The Top Button Bar

  •  - Click the button and start entering content to make it bold. You can also highlight part of the tip's content and click this button.
  •  - Click on the button and start entering content to make it italic. You can also highlight a part of the tip's content and click this button.
  •  - Click on the button and start entering content to underline it. You can also highlight a part of the tip's content and click this button.
  •  - Click to add a bullet item list to your tip's content
  •  - Select a part of the tip's content and click this button to convert it into a link.
  •  - Click to add an Iridize Session Variable button. Session Variable buttons can be used to create rich guide flows based on user choices. Clicking on a Session Variable Button dynamically sets a Variable which can be used in Step and Branch conditions to control step activation and guide flow. The Variable can also be persisted as a User Field, which can be used in Guide Activation Conditions.

The Bottom Button Bar

  •  - Click to change the target element
  •  - Click to change to placement of the tip relative to the target element
  •  - Click to expand the content editor into Expanded mode
  •  - Click to discard the changes you have made to the tip
  •  - Click to save your changes and create another tip.

 

Top Panel

  1. "My Guide" - this is your guide’s name, click to edit it in place. For a new guide this will be "Untitled".
  2. Done - click to save your changes and return to the manage page.
  3. Preview - click to preview the guide in a new browser tab as it would display in the live site. If you have already opened the preview, click this again will refresh the preview tab and relaunch the guide with your recent changes.
  4. Publish changes - An Iridize guide has multiple revisions. Each time you edit a guide a new revision of that guide is stored in our database. A revision can either be a published revision or a draft revision. To complement this, Iridize supports a dual deployment mode. While you can only see published revisions in your production environment, Iridize allows you to see draft revisions in your staging environment. This is very useful if you want to create a guide for new feature that is not yet live in production. Check this checkbox to make this revision published.

Flow Panel

Here you ca view a list of all steps in your guide. You can click on any step to view it. You can drag and drop steps to reorder them.
Use the _ button to delete a step
Use the _ button to toggle the step settings panel.
Click on the green + button at the bottom of the panel to append a new step to the guide.

+/- Symbol:

A step can display more than one tip simultaneously. To add or remove tips from a step use the +/- icons.

For example:

Display settings

Highlight Target Element

Setting this option tells Iridize to highlight the target element and mask the rest of the page. Except for the target element all other elements will be visible but inaccessible to your end user. This setting allows you to focus your user’s attention on a specific element or section on the page and help him avoid mistakes.

Hide Next button

By default, every Iridize tip has a Next and a Back button which allows your users to navigate back and forth within a guide. However, sometimes it is considered best practice to remove the Next button. To remove the Next button, check the Hide Next box in Settings.

For example: when you want to make a button mandatory, add a tip that reads “Click this button” and use the Hide Next setting to drive the user to complete the guide without skipping any steps.

Change Next Button Text

Use this to change the text of the Next button.

For example: on the first tip of guide consider changing the text to something more engaging like “Let’s Go” or “Show Me”. For the last tip, try “That’s It”.

Hide Close Button

This will remove the ‘X’ from the top right corner of the tip, compelling the user to read the tip content and act on it.

Best practice: use this setting when launching a guide for first time users.

Show Back button

By default, every Iridize tip has Next and Back buttons which allow users to navigate back and forth within a guide. However, sometimes it is considered best practice to remove the back button, to do so - Uncheck the Show Back box in Settings.

Show Remind Me Later button

Use this setting to show a “Remind me Later” button for the tip. If clicked, Iridize will launch the tip again for the same user at a later time. To define that later time you will need to define Guide Activation Conditions.

Tip Width

Use this to determine the width of the tip. The default tip width was set after multiple testing to accommodate just the right amount of text. If you need to change this often - your tips are probably too long. This field's value is measured in pixels.

Tip Placement

Use this setting to define the position of the tip in relation to the target element. This is similar to the function of [button] in the tip editor.

Change Highlight Element

While the tip will always point at the target element you can choose to highlight a different element on the screen. Normally this is used to highlight a container of the target element. for example, while the tip can point at the submit button of a form you could opt to highlight the entire form.

Activation Settings

Invisible Step

Consider the following use case, you want to show a tip as soon as the user clicks on a certain button. To do this set an “invisible step” on the button. This will tell the player to wait until that button is clicked before advancing to the next step thus showing the first tip. Learn More.

Advance On Event

By default the player advances from one step to the next as soon as the user clicks on the next button. However the make the guide flow more smoothly you can tell the player to advance based on user interaction like clicking a button or enter text in a form field. Iridize support all these events.

Best practice: use this when guiding users to fill out forms. Use Keypress and select events to advance the guide to the next step automatically.

Manually setting the event to and empty value (while keeping the checkbox checked) will set the guide to advance as soon as the target element appears on the page and all the step conditions set for this tip are true.

You can get some inspiration from the most commonly used events:

  • Mouse Events
    • click - use this to advance when the user clicks on the selected element
    • dblclick - use this to advance when the user double clicks on the selected element
    • mouseover - use this to advance when the mouse pointer enters the selected element
    • mousedown - use this to advance when the user starts to click on the selected element. This is most commonly used as a substitute for when the click event cannot be used.
  • Keyboard Events
    • keypress - use this to advance when a character key (or enter) is pressed. Note: use this to handle a user filling out a form field.
    • ir-enter - a custom iridize event used to advance when the user clicks on the Enter key.
    • ir-tab - a custom iridize event used to advance when the user clicks on the Tab key.
    • ir-esc - a custom iridize event used to advance when the user clicks on the ESC key.
    • ir-backspace - a custom iridize event used to advance when the user clicks on Backspace key.
    • ir-space - a custom iridize event used to advance when the user clicks on the Space key.
  • Form Events
    • blur - use this to advance when the selected element has lost focus.
    • change - use this to advance when the user has made a selection a drop down list, clicked on a radio button or a checkbox.
    • focus - use this to advance when the selected element has received focus.

Delay Advance by

This will tell the player to wait x milliseconds before advancing to the next step. If the step has an Advance on event set the delay period starts after that event occurs. If there is no Advance on event set the delay period starts as soon as the target element is found.

Best practice: use this in conjunction with the advance on Keypress. The next tip will appear automatically x milliseconds after the user has started typing text.

Note: with this setting the guide does not advance to the next step before the delay period is over. Thus, a page refresh or navigation during the delay period will cancel the advancement to the next step. Use the "Delay showing this tip" setting above to set the delay on the next tip directly for such use cases.

 

Change Advance on Event Target

On occasion,  you may want the tip to point to one target element and at the same time wait for the user to interact with another element.

Best practice: If you want to highlight an entire form section & set the “advance on” selector to be the “Submit” button so that the guide will advance when the Submit button is clicked)

Show Tip after page refresh

If the next tip’s element selector exists in the current page, then the tip will flash twice.  This prevents that flashing tip. We consider this better UX.

Show tip after

This will tell the player to wait x milliseconds before showing the current tip.

Bet practice: use this as an alternative for Show Tip after page refresh if you need to prevent a tip from "flashing" but there is not page refresh or navigation when advancing between the steps. This can sometime happen when parts of the page (or Dialog modals) are dynamically rendered.

Note: this setting only delays the showing of the tip. If the tip has an Advanced on event set it would wait for the event even while the tip is still waiting to show.

 Show tip on hover

Only show this tip when the user moves their mouse over the target element.

Best practice: use this to provide additional information about a form field.

Skip if element not found

Knowing that web pages are dynamic in nature, the Iridize software embedded in your website continuously looks for Elements, even if they are not visible at that moment. These Elements will show the tip as soon as they become visible. You can tell Iridize not to wait for an element by setting the Step as Optional.

For example: If you want to create a guide on the Settings page of your application, your first tip should probably be: "Click on Settings”. But what if the user launched the guide from the Settings page? The solution: set that first step to be optional.

Add/Edit Conditions

There are cases where you want to condition the showing of a specific tip in a step on the state of the page the guide is running on. For example, whether a page element, other than the target element of the tip, exists or is visible on the page. Another example can be to only show a tip on a specific page based on the page URL (and maybe skip the step on other pages). Use this setting to add/edit a list of page conditions to the tip. The tip will only be shown when all the conditions are fulfilled and will be hidden as soon as any of the conditions becomes false. For a full description of the different condition types see here- Page Condition Types.

Best practice: This setting is very useful in cases where you have multiple tips in a step. It is especially useful for conditional branching of a guide, where the different tips in a step have different conditions and are set to launch different guides (or continue with the current guide). Another common use case is for optional navigation steps, that should only show if the user is not already on the page where the guide is built to run.

Advanced Settings

Allow changing number of targets

Use this setting when attaching a tip to multiple targets, where the number of targets may dynamically change while the tips are showing.

Track target position

If the element’s position moves dynamically (fixed positioning), this will ensure that the tip stays on the target element.  (E.g.: virtual customer service agent that can be on different areas of the page.)

Scroll Parent Container

If the target element is within an internal element with an internal scroll, this will enable us to scroll down to the target element. 

Limit the wait on target to 1000 ms

Our guide tips wait for the target element to appear indefinitely.  This setting sends Iridize an error message if the current target element does not appear within x ms so that we can notify you and fix the problem.

Step Branches: add/edit

This setting allows you to set one or more branches to the step, either jumping to another step on the current guide or launching a different guide. For further details please see the Editing Step Branches page.

Target selector

This enables you to use the developer tools & select selectors (often complex elements) via jquery/css selector. Use the up-arrow to go up the DOM tree and automatically select the container of the existing target element.

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.