Because ChurnZero is integrated with the systems that contain your customer data- including your application, CRM, Support ticketing system, finance/invoicing system, email inbox and more – it has a very deep understanding of your customers’ and users’ behavior and engagement. This means ChurnZero WalkThroughs are smarter and more targeted – and therefore are more relevant to your customers.

Some examples of WalkThroughs in action:

Show the “Super Admin” WalkThrough for users who are “Admin” users at “Enterprise” accounts that have been “Onboarded”.
Show the “Don’t Forget About This Feature” WalkThrough after a user has been with you for 3 months or more, logged in five times, and as given you an NPS score of 6 or above.
Show the “Did You Know?” WalkThrough the third time a user has searched in your system but not saved that search for quicker results.

Enabling WalkThroughs

Before beginning a WalkThrough, make sure you have handled the following prerequisites:

Your ChurnZero CSM has enabled DevLess and WalkThroughs for your ChurnZero account. If you are not sure whether you have DevLess and WalkThroughs, please reach out to your CSM.
Under Admin > User Permission Groups, the "DevLess - WalkThrough Creation" permission has been set to "All" for the ChurnZero user(s) who should be able to access the in-app Admin Panel and create WalkThroughs.
1. A WalkThrough must be associated with a PageTag, so it's recommended that users also have the "Devless - EventMaps and PageTags" permission set to "All". For more details on this step, see Instrumenting Your App using ChurnZero DevLess.
You've started a DevLess session (by clicking on your name in the upper right and selecting "Start DevLess") and you've logged into your application in a separate browser tab or window.

Once in your application, click the Success Panel Launch Avatar to open the Success Panel. Since you have an active Devless session running, your user will be able to access the Success Panel regardless of the panel's visibility settings. You'll either the normal avatar you chose for your panel, or this ChurnZero logo avatar on the Panel Launcher:

Click the wrench icon in the upper right to open the ChurnZero Content Panel.

Configure the WalkThrough

Select WalkThroughs from the navigation bar in the Admin Panel to begin:

WalkThrough Overview Page

You will now be on the WalkThroughs Overview Page. This will show you all of the WalkThroughs that you have configured across your application, as well as some high-level information such as which page it launches on, how many steps it contains, and whether or not it is enabled. You can search for specific WalkThroughs by using the Search bar at the top of the page, or even filter to only show the WalkThroughs for the page you are currently on.

To create a new WalkThrough, click the "Add WalkThrough Button" at the top right side of the panel. If you want to edit an existing WalkThrough, click on the hyperlinked name. You can copy or delete a WalkThrough by hovering over the WalkThrough to bring up the additional options.

WalkThrough Settings

This is where you can configure the settings of your WalkThrough. See an in depth description of all of the settings below. Once you have configured all of your WalkThrough Steps, you can also use the "Preview All" option to see a preview of your WalkThrough in action!

Name - Name your WalkThrough; the name you use should be concise but clear. This name will not show to your customers.
Description - Internal note to describe what this WalkThrough is for. This will not show to your customers.
Page - Select the Page where the WalkThrough will appear. You should also be on this page as you design the WalkThrough so your previewing will work. If you want the WalkThrough to appear on a Page that has not been tagged, create a new PageTag (see Step 8 of these instructions). A reminder that to create new PageTags, you need the "Devless - EventMaps and PageTags" permission.
Trigger - You will have a few options to determine how the walkthrough should be triggered:
- Element Click- WalkThrough will begin when the user clicks a particular element on the page. You will be prompted to search and select the element on the page that should trigger that WalkThrough to appear.
- Page Visit-WalkThrough will begin when the user visits the selected Page.
- Anchor- Allows you to select an icon that will appear on the page, prompting a user to click to begin the WalkThrough. Like an element click, you will be prompted to search and select an element on the page where we will place the Anchor. You will see the following settings when using an Anchor:
  - Target- Select the element where the Anchor will live
  - Background- The color of the background of the Anchor
  - Color- The color of the Anchor itself
  - Type- Choose the icon that you want to use for your Anchor
  - Size- Size of the Anchor
  - Position- Where the anchor will appear in relation to the element you selected
  - Vertical Offset- allows you to make adjustments to the position of the target. Numbers above 0 will push the offset up, while negative numbers will push the offset down.
  - Horizontal Offset-allows you to make adjustments to the position of the target. Numbers above 0 will push the offset to the right right, while negative numbers will push the offset to the left.
  - Tooltip- Optional text that can appear upon hover of the Anchor that can provide more information.
Enabled- Is your WalkThrough currently on? If this is set to Yes the WalkThrough will begin showing to your customers after you end your Devless Session. Be sure your WalkThrough is disabled until you are ready to share it with the world!
Start and End Date (optional)- Use the Start and End Dates if you only want to have your WalkThrough be active for a specific period of time. Think of this as a Campaign period. The WalkThrough will only show if a user accesses the page within your specified time frame.
Audience - Set the Account and/or Contact Segment(s) that qualify to engage with this WalkThrough. If you do not select any Segments, the WalkThrough will be available to all active Accounts and Contacts.
Show - Set if the WalkThrough should show "Just Once" (i.e. the first time the user hits the defined Trigger while qualifying for the Audience) or if it should show "Every Time" the Trigger occurs.
Expires (Optional)- This setting will appear when the "Show" setting is set to Every Time. Use this setting to set an expiration time frame for the WalkThrough once a contact enters the campaign. For example, if you could set the expires option for 7 days. This would mean that when the user first sees the WalkThrough, they would then see it every time they return to the page. After 7 days from the initial WalkThrough interaction, that user would no longer see the WalkThrough.

TIP: The Trigger, Show, and Audience settings can be used together to target customers/users in highly specific scenarios, allowing you to deliver extremely relevant guidance at the ideal time.

Example: Let's say your application allows users to search. Your users don't have to save their searches, but it is recommended that they do for faster searching going forward. To target users who do not seem to know about saving a search, your Trigger would be the "Search" button, your Show would be "Just Once" and your Audience would a Segment of contacts who have searched at least 3 times but have never saved a search.

WalkThrough Styling

Here is where you can control the stylization of each WalkThrough. WalkThrough Styles allows you to set stylization guidelines at the WalkThrough level. Customizing the settings here will apply to all of the steps in this WalkThrough only. By default, the WalkThrough will inherit whatever was set at the Global Styles level. Settings customized here will supersede any Global WalkThrough Styles, and any style changes made at the Step level will supersede the Walkthrough Styles.

When on the WalkThrough Styles page, clicking "Reset to Defaults" will return the Step stylization to whatever is set within the Global WalkThrough Styles.

Note: In order to adjust styles (Global Styles, WalkThrough Styles, or Step Styles) you must have the "Devless - WalkThrough Styling" Permission assigned. If you do not have access, please contact your ChurnZero Administrator.

Content

This is where you can set the format options for the WalkThrough Content. Remember that for all color settings, you can choose from our color picker, or enter in a specific Hex value.

Font Size- Determines the size of the text.
Font Family- Choose from over 15 of the most popular Google Fonts.
Text Alignment- Is the default alignment going to be Left, Right or Center? We recommend Centered text for in-app content!
Pop Up Width / Slider Width / Tooltip Width- can choose Small, Medium, Large, or Custom
- Note: The height of each step is determined by how much content is included
Background Color- Determines the background color of the WalkThrough.
Text Color- Determines the color of the WalkThrough Text.
Border Color- Set a border color that is different than the background color.
Border Width- How much of a border do you want? The higher the number, the larger the border. If you want no border, set as 0.
Border Radius- Do you want the border edges sharp or rounded? The lower the number, the sharper the edges.
Allow Close- Do you want people to be able to abandon your WalkThrough? We recommend leaving this setting set to ON.
- Close Color- Determines the color of the "X" icon to abandon the WalkThrough
- Close Hover Color- Determines the color of the "X" icon to abandon the WalkThrough when you hover over it
Show Step Number- Displays the step number out of the total number of steps.
- Step Number Position- If showing step numbers, where do you want them displayed?
- Step Number Color- If showing step numbers, choose the color.

Call To Action

Text- What do you want the call to action to be? We recommend short and sweet for this setting!
Font Size- Determines the size of the text.
Font Family- Choose from over 15 of the most popular Google Fonts.
Alignment- Choose if you want the call to action button to be on the left, right, or center of the box.
Background Color- Determines the background color of the call to action box.
Text Color- Determines the color of the Call to Action.
Button Color- Determine the color of your Call to Action button.
Button Border Color- Set a border color that is different than the button color.
Button Hover Color- The color of the button when your mouse hovers over the Call to Action.

WalkThrough Steps

Select the "Steps" option to configure each step of your WalkThrough. From this page, you will be able to see all of the steps you have already created. Click the hamburger menu to edit, duplicate, preview a specific step, delete a specific step, or click the "Add New Step" option to create a new step from scratch.

There are three (3) available step types:

Pop Up - A pop up appears in the middle of the user's screen and grays out the app behind it. To engage with the app, the user must either close the pop-up or move to the next step of the WalkThrough.

Slider - A slider appears from a selected direction (top center, bottom right, etc.). While it will cover part of the app, it does not block the user's engagement with most of the app.

Tooltip - A tooltip highlights a specific element/section of a page, focusing the user's attention.

For each step, you'll be able to define the step settings, step specific styles, as well as the content of each step.

Configuration Options

Step Name - Name the step; the name you use should be concise but clear. This name will not show to your customers.
Type - Pop Up, Slider, Tooltip
- Pop Up Specific Settings - There are a few settings that will only show if you set Pop Up as your step type:
  - Size- Do you want the Pop Up do be Small, Medium or Large?
- Slider Specific Settings - There are a few settings that will only show if you set Slider as your step type:
  - Position - Set the direction the slider should come from (Top, Bottom, Left, Right, etc.).
- Tooltip Specific Settings - There are a few settings that will only show if you set Tooltip as your step type:
  - Target - Search and select the element on the page that the Tooltip should highlight.
  - Position - Set where the Tooltip should show in relation to the selected Target. Note that if the Tooltip will be unable to show based on your selection (i.e. it would be off the page), ChurnZero will automatically select a new position.
  - Insert Into- Allows you to customize if the step points to the Body or Parent of the Element. By default, this should be left to "Body".

Style

Here is where you can control the stylization of each WalkThrough Step. By default, the step will inherit whatever was set at either the Global Styles level or WalkThrough Level. If you choose to customize the individual step style, it will take precedence over what was set at either the Global or WalkThrough stylizations. Refer to the WalkThrough Styles section to see information on the specific settings.

When on the WalkThrough Styles page, clicking "Reset to Defaults" will return the Step stylization to whatever is set within the WalkThrough Styles.