Customization
Customizing the look of your Decision Trees. Match your brand, custom CSS and more.
-
Importing Trees from a Previously Exported Zingtree JSON File
You can import a previously exported Zingtree JSON file to create a new tree. Here's how: Begin by selecting Create New Tree. From the Create New Tree page name your tree, then select the Import b...
-
CSS Snippets to Change Font Size and More
Here are some simple recipes to alter the look of your trees. These all involve using the Settings tool, and entering some basic CSS into the Code area. Example: Change the content font size to 20...
-
Buttons Style and Panels Style
When creating trees, you have two distinct rendering options for the choices you give end-users: Horizontal Buttons and Vertical Panels. Buttons style is best for short answers, where you can have ...
-
Persistent Buttons: How to Add or Hide
You can add buttons that appear on every page of your Tree. We call these Persistent Buttons. These buttons take the end-user directly to any node. They appear after the Back and/or Restart button,...
-
Custom Buttons: Colors and Icons
Zingtree makes it easy to create custom-colored buttons, that can also use stock icons. Overview Customizing button styles is done by prefixing the button text with special classes. To choose a co...
-
Arranging Buttons
For trees with long button text, here is a trick to make them appear nicely:1. Switch to Panels style. In the Settings tool, under the Rendering tab, you can choose between Buttons or Panels style....
-
How to Reorder buttons
There may be times when you want to reorder your Answer buttons. This can be done very easily by dragging the specified Answer button up or down to reset its order location. Here's how: In the nod...
-
Enabling or Disabling the Back and Restart Buttons
By default, when you deploy a decision tree, it includes "Back" and "Restart" buttons. You can enable or disable these for your entire tree, or for individual nodes. "Back" and "Restart" may appea...
-
How to Hide Titles or Show Tree Titles
When publishing a tree, you may want to hide the tree title. This is easy to do. Go to the Settings tool, and click the Display tab. Make sure Show Tree Name is unchecked.
-
How to remove the "Powered by Zingtree" Referral icon
When embedding a tree on your website, Zingtree by default includes a referral icon linking back to Zingtree.com: If you're a free or business plan member you won't have the option to remove it or...
-
Add Hover Text to Buttons
If you want to add extra detail to your tree navigation, Zingtree has an option to include "hover" text over any button in your decision tree. Here's how it looks: Configuring Button Hovers You ca...
-
Scrolling Options for Embedded Trees
When you're embedding a tree into another web page, each button click can scroll the decision tree part in different ways: Scroll the containing page to the top Scroll the decision tree part to th...
-
Session Notes Option
Your end-users of the tree can have the ability to take notes continually throughout the session. For this, Zingtree has a Session Notes option. When Session Notes is enabled, end-users will see a ...
-
How to make Image Buttons
You can insert images in the content area of your nodes, and be able to click on them to have them behave like buttons. This requires a little HTML coding. Here's how to do it: First of all, when e...
-
How to Create an Image Map that Opens a Node
An image map turns specific areas of an image into a link. In this case, we make that link go to another node of the tree. The first node of this tree is an image map. Click the buttons on the remo...
-
Reordering Nodes
You can change the order of your nodes. Select the node you want to move and drag it up and down using the in the upper left part of the node. Note: The node must be selected before the appears. ...
-
Customizing Zingtrees with Themes and Custom CSS
Overview Zingtree lets you customize in these ways: Pick from several stock Themes provided by Zingtree. Customize colors within any of the Themes. Create your own CSS file to use instead of a Zin...
-
How to Make Buttons Appear Above the Content Area
Here's a simple setting to make the button area appear above the content area: Select your tree, and go to the Settings tool. Under the Rendering tab, click Pick a Color Theme. In the Theme picker...
-
Transition Effects
Here's what the Fade effect looks like: And here's the Slide effect: Here's how to add these effects to your trees: In your tree's tools, open Settings. Then the Rendering tab. Under More Render...