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...

  • 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: Remove the quotation mark symbol...

  • Buttons Style and Panels Style

    When creating trees, you have two distinct rendering options for the choices you give end-users: Buttons and Panels. Buttons style is best for short answers, where you can have multiple options p...

  • 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 butto...

  • 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 ...

  • Arranging Buttons (Tricks)

    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 styl...

  • How to Reorder buttons

    There may be times that 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: Using th...

  • 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 app...

  • How to Hide Titles or Show 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. When publishing a ...

  • 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 ...

  • How to Resize a Button

    The appearance of your Zingtrees are highly customizable, including the ability to change the size of your answer buttons. You can also alter the font type and size and even add icons to the butt...

  • 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 ...

  • 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 ...

  • Session Notes Option

    Some Zingtree customers want the capability for end-users of the tree to take notes continually throughout the session. For this, Zingtree has a Session Notes option. When Session Notes is enable...

  • 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...

  • 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 Z...

  • How to Make Buttons Appear Above the Content Area

    Here's a simple trick to make the button area appear above the content area, using Custom CSS: Select your tree, and go to the Settings tool. Under the Rendering tab, click Pick a Color Theme. I...

  • 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 Rend...