Setting WalkThrough Global Styles

In addition to giving you the flexibility to customize styles at the Step and WalkThrough level, you can also set Global Styles that will apply to all WalkThroughs. 

In order to adjust WalkThrough 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.

To access WalkThrough Global Styles, navigate to In-App Tools > Style Settings > Walkthroughs Tab

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 Styling Tips and Tricks

• Stylization precedence is as follows:
  • Step Styles trump all stylization options
  • If the Step Style is not customized, the Step will inherit the Walkthrough Style
  • If the WalkThrough Style is not customized, then the step will inherit the WalkThrough Global Style
• If you change a setting within Global Styles, this will affect all WalkThroughs with uncustomized WalkThrough Styles or Step Styles.
• When on the WalkThrough Global Styles page, clicking "Reset to Defaults" will return the WalkThrough stylization to system defaults. 
• Check out our WalkThrough Documentation for more information on WalkThrough and Step Stylization.