Customize experience steps

Who can use this feature?

Global admins and users with advanced permissions can view, edit, and/or publish experiences
Totango In-App is a premium feature—contact sales to learn more

Depending on the experience, the available steps and options may vary.

The following applies to most announcement and tour experiences. Refer to the linked articles here for checklist and NPS experiences.

Steps

Experiences can have one or many steps. Each step displays the type and the order in which the step will appear in the experience.

Optionally add a "Celebration" animation overlay when the user reaches the end of all steps.

Content

Adjust the styling and contents of the message. Click inside the experience to modify text directly. Formatting options include:

Heading style: Level, font family, font size
Text formatting: Bold, italics, underline, text color, background text color, bulleted list, numbered list, text alignment
Additional items: Links, images (upload or link), video (YouTube, Vimeo, Loom, Sendspark), or pre-formatted code.

Default font options are available. You can also type into the font box to search for a supported Google font. Custom fonts are not supported.

Design

Adjust the overall settings for the experience. Options include:

Placement: The location of the screen where the experience will appear.
Width: Small, medium, or large
BG color: Background color of the experience
Corners: Number of pixels for rounding
Padding: Number of pixels for space on top, bottom, left, right
Show overlay: Dim the background of the application by the percentage shown.
Exit on click: Close the experience automatically if the user clicks a call to action.
Include Exit icon: Optionally hide/show the X option. Clicking the X will count as "quitting" the experience.

Buttons

Choose the formatting options for a button:

Primary | Secondary: Optionally add more than one button. Primary buttons indicate the preferred call to action.
Button color: Background color of button(s)
Button text: Label of button(s)
Button size: Small, medium, large
Position: Location of the experience to display the button(s)
Corner radius: Number of pixels for button rounding

Additionally, choose the action that is performed when a user clicks on each button:

No action
Advance step
This option is useful when designing tour steps that act as previews or explainers where no interactiveness is desired.

For example, when a user clicks the button located in the bottom right corner of the active tour step, the tour will simply advance to the next step without triggering any website clicks or actions.

Other examples:
- A text paragraph with important info
- A menu button that you'd like to showcase without actually navigating the user away from the current page
- A button that triggers a modal to open
Advance step & redirect to URL
This option is useful when designing a tour step that navigates a user to a new page without requiring them to click through your website's navigation menus.

For example, when a user clicks the button located in the bottom right corner of the active tour step, the tour will advance to the next step while simultaneously redirecting the user to a webpage URL that you've designated. After the new page loads, the tour will continue there without any additional action from the user.

Other examples:
- Guiding a user to a page that would have normally required clicking multiple times
- helping the user explore a brand new page that they might not know exists
Redirect to URL without advancing step
This option is most useful when designing a tour step that relates to a website element or action that you'd like to require the user to click or perform.

For example, when a user clicks the button located in the bottom right corner of the active tour step, the tour will advance to the next step and the active step's associated website element (if one exists) will be programmatically clicked. By triggering a click of the associated website element, you can be sure that the user will navigate to the correct page, open the necessary menu, or perform a specific action even if they decide to click the step button rather than the website element.

Other examples:
- A menu button that opens a dropdown or slider
- A link to another page or subpage
- A button that triggers a modal to open
Advance step & open URL in new tab
Open URL in new tab without advancing step
This option is useful when designing a tour step that includes a link to an outside webpage that a user can explore away from the active tour. For example, when a user clicks the button located in the bottom right corner of the active tour step, a new tab will be opened at the designated URL in the user's web browser. On this tab, the user can explore the webpage and no tour will appear. If the user returns to the original browser tab, they will see the original webpage exactly how they had left it with the tour still open.

Other examples:
- Sending a user to a support center or documentation page with in-depth information about a concept
- A button that triggers a modal to open
Navigate to previous step
Navigation to previous step & referring URL
Navigate to previous step & specified URL

Extras

Include profile header: Optionally display the experience designer's name in the upper, left corner of the step. If enabled, you can upload a custom image and adjust text and formatting.
Show progress: Optionally remove the dots in the corner of each step of the experience to indicate progress.
Trigger when advancing next step: Optionally run JavaScript code
Do not exit tour on unexpected navigation: By default, experiences are designed to exit immediately if a user navigates away from the expected path of an experience. You can optionally disable this safety measure so that users can navigate freely around your application while the experience remains open. However, we recommend taking strong precautions before disabling because it can result in broken experiences.
Use cases for turning off the safety measure:
- Banner announcements that you'd like to display on every page of your application
- Surveys that users must close out of manually in order to skip them
- Tours that launch immediately prior to a URL change or custom navigation
User actions that could cause an unexpected navigation:
- Clicking a navigation menu item that is not associated with the current experience step
- Clicking any website element that causes a URL redirect and is not associated with the current experience step
- Clicking to "go back" or "go forward" in browser history with the web browser arrow controls
- Manually changing the URL in the web browser address bar

Positioning [or Highlight Element]

Applies to a Hotspot, Highlight, or Tooltip step types.

Position: Side of the hotspot/tooltip pointer where the experience should appear
Website reference element: Select the page element to focus on. Use the top Builder toolbar to help you navigate to the right page and find the right element.
Open menus by holding down the 'D' key before clicking on an element. Cycle through overlapping elements using the 'Up' and 'Down' arrow keys.
Scroll step into view: Scroll the page if item is not in view
(Applies to Tooltip and Highlight types only)
Color: Color of the hotspot
(Applies to Hotspot and Highlight types only)
Include blink animation: Pulse the highlight
(Applies to Highlight type only)
On website element click:
- Close announcement / Advance tour step & trigger website element click
- Close announcement / Advance tour step only
- Trigger website element click only
- Do nothing

Surveys

Available only for a feedback step type or NPS experience. Options include Thumbs Up / Down, NPS, or Short Answer.

NPS surveys are a particular type of feedback experience with steps pre-built to align with standard NPS methodology. Therefore, you cannot modify certain settings within that experience.

Survey steps can include the following options.

Short answer

A short answer form option allows you to ask your users any question and have them fill in a text-based response. Within the In-App Builder Settings, you can view every response submit through the form and associate each response with a user based on their unique User ID.

Common use cases for a short answer form include:

Collecting detailed feedback about your product
Understanding why a user rated their experience positively or negatively
Recording feature requests

0-10 Score

A 0-10 score form option allows you to ask your users any question and have them submit any score between 0 and 10. Within the In-App Builder Settings, you can view how many users responded for each value between 0-10.

Common use cases for a 0-10 score form include:

Asking users to rate their overall experience with your platform
Asking users to score the ease of use or value of a new feature
Asking users to rate their experience with a tour or support conversation

Thumbs Up or Down

A thumbs up or down form option allows you to ask your users any question and have them respond by selecting a thumbs up icon (positive) or thumbs down icon (negative). This is a simple and quick way for users to provide you with a positive or negative response. Within the In-App Builder Settings, you can view how many users responded positively versus negatively.