Customization is one aspect of decision tree creation that we’re really big on — Zingtree’s new Custom Buttons are the latest extension of that practice. With this tool, you can create buttons that look a little something like this:
Overview: All About Custom Buttons
With the new Custom Buttons, you can make a range of adjustments to the style of your decision tree buttons, including:
- Setting a button color
- Adding an icon to a button
- Combining colors and icons
- Creating your own custom buttons (CSS)
Customizing the style of a button is done by prefixing the button text with special classes. To choose a color, use a prefix like:
- .btn-orange
- .btn-red
- .btn-green
- .btn-blue
- .btn-yellow
- .btn-sky
- .btn-purple
- .btn-pink
To add an icon that helps to show a little more context, add a prefix like:
- .btn-yes
- .btn-no
- .btn-careful
- .btn-caret
- .btn-arrow
- .btn-thumbs-up
- .btn-thumbs-down
- .btn-information
- .btn-question
You can even make a special combo, mixing colors and icons together. For example, .btn-yes.btn-green will appear as:
Check out our Button Customization decision tree in the Zingtree Gallery to see more of the styling options in action.
Setting Up Custom Buttons
- Go to Overview, and edit the node to customize.
- Click Edit Buttons.
- Edit the button text, and prefix it with one of the color or icon options. For example, to make a red Stop button, enter:
![]()
- Click Save Changes when you’re done.
Other Decision Tree Customizations
The ability to customize decision trees is something that we offer to all plan types and free trial users. Some of the styling options provided include:
- Adding videos, GIFs, and image-based media.
- Inserting custom CSS files to adjust the overall look and feel
- Publishing and presenting as a fun pop-up overlay.
- Applying a pre-made color theme to spice things up.
Love this new customization feature? Have any ideas for other awesome ways to make your decision trees look and feel even better?