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.
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.
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.
- "My Guide" - this is your guide’s name, click to edit it in place. For a new guide this will be "Untitled".
- Done - click to save your changes and return to the manage page.
- 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.
- 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.
Here you can 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.
A step can display more than one tip simultaneously. To add or remove tips from a step use the +/- icons.
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.
For more information about 'remind me later' read this article.
Hide steps count footer
Use this to toggle the display of the step counter at the bottom right corner of your tooltip.
Use this to determine the width of the tip. This field's value is measured in pixels.
Offset the tip from it's center position. Use a negative number in the top setting to place the tip further on top. Use a negative value for left to take the tip further to the left.
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.
Blocks the user from interacting with the highlighted element. For example, if you want to highlight a button and explain it while making sure the user will not click it.
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.
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.
Best 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 currently visible. Iridize 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.
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.
When using a splash tip you can use this setting so that the tip will remain visible even if the user scrolls up or down the page.
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.)
By default, Iridize will scroll the page so that the tip and the highlighted element will be visible. This setting allows you to disable this behavior.
Advanced visibility check
On some applications, Iridize might think that an element is visible while it is not. This can happen if the web application uses multiple layers and an element could be hidden behind another on that was added on top of it.
This setting tells Iridize to run some extra checks against the element.
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 3000 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.
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.
Navigates the user to a new page when clicking on the next button. This is very useful if you want to create a site tour.
Change Highlight Stretch
make the highlighted section of the screen smaller or bigger using pixel precision. This is very useful if the section you want to highlight does not have a corresponding HTML container.
Note that this setting is not responsive.
Only display one tooltip
This setting is on by default.
When you select an element Iridize tries to find a unique identification for this element. Sometimes that identification is not strong enough and could result in multiple tooltips appearing on the screen at once. Un-check this setting to allow for the display of duplicate tips. This could be very useful if you want identical tooltips to appear next to each item in a list.