We’ve always believed in custom decision trees. It’s important to build question-and-answer style troubleshooters and FAQs as seamless extensions of your brand to not only solve customer problems, but also to make people feel more happy with your company’s identity.
While we’ve always offered ways to add your own custom CSS for personalization, we’re excited to launch a new feature that helps guide you through with a live preview. With our new Zingtree Themes, you can mix and match colors and navigation styles to create your perfect decision tree.
Here’s how to get started:
1. Login to your Zingtree account, select the decision tree you wish to customize and then go to its Settings page.
2. Locate the Theme / CSS Customization section at the right of the page and select to Pick a Theme.
3. You’ll be presented with a live preview of your style choices within a decision tree. At the top of the window, you’ll see options for Theme (colors) and Style to try out.
4. For now, you can select a range of classic colors and pair it with your ideal navigation style – buttons or panels. For this example, we’ve chosen “Moonlight” grey with the Panels style.
5. Upon selecting either option, you’ll automatically be able to see a live preview of your customizations in the display window. Once you’ve found the perfect match, just click Save!
6. Once Saved, your selected theme will appear in the CSS file window of your Settings page.
For those who prefer an alternate way, you can still upload a custom CSS file or download our simple CSS file to modify in order to customize the colors, node styles, icons and more that appear.
Ready to get started? Log in or sign up for a Zingtree account today!
Anyone with a Zingtree account can make a decision tree (trust us, we designed it to be simple!), but it takes a certain level of commitment to your trees and your organizational needs to take things just a little bit further.
Customization is one of our strong points; we understand the importance of creating an extension of your brand within the decision trees you build. For that reason, we made it as easy as possible to personalize troubleshooters, FAQ’s, scripts and more in a few fun, helpful ways.
Visuals can often go over-looked when it comes to more technical use-cases. In fact, around 65% of people are “visual learners” — appeal to the majority! Including how-to’s and other types of images into your decision trees can help your users understand what you’re trying to convey as well as beautify the whole process.
Images that can actually move are incredibly useful for describing specific steps, pointing out where one needs to click to on your website, and even injecting a bit of personality into decision trees. Inserting GIFs in your trees can help customers understand and absorb much more easily than a general, text-heavy explanation.
Small, yet mighty tools of design, icons are just another way to customize your decision trees’ look and feel. Zingtree taps into the amazing power of FontAwesome, so you can add the icons you want just by inserting the proper HTML. For example, to add a little car icon to a button, just insert this code into the button text:
<i class=”fa fa-car”></i>
4. Custom CSS
For everything else and then some, upload your own custom CSS file to our platform, or download our simple CSS file. You can use Zingtree styling to modify every element to your liking — tweak everything from colors and icons (mentioned above), to logos and fonts.
Looking for more great ways to build your decision trees? View our blog for inspiration, ideas and more.
Here at Zingtree, we believe flexibility is everything.
The power of your dynamic decision trees – for automating complex, repetitive tasks and business processes – wouldn’t be what it is without Zingtree’s ability to merge seamlessly with your existing tools and practices. At each and every phase of Zingtree’s development, we’ve taken steps – like building WordPress and Zendesk integrations – to ensure maximum compatibility with the tools you’re already using.
But, the ability to work with other platforms is just one aspect of Zingtree’s flexible nature. In this age of design-first thinking and unified branding, Zingtree also gives you the ability to customize the style, look, and feel of your trees for integration into any brand.
For example, you can turn the default Zingtree Panels style into a page that looks like this:
Applying your brand’s styling to your Zingtrees is easy using custom CSS – just follow these steps:
- Create a Zingtree or choose an editable Zingtree template from the Gallery. Build or edit the tree to your satisfaction.
- While managing your Tree, click Publish, and use the Advanced options for Zingtree hosted or embedded trees. When you’re done customizing deployment options, copy your iframe code into any webpage or use the Zingtree-hosted link provided.
- A simple CSS file for Zingtree styling you can easily modify is available here. Download this file, and open it in any text editor. Note that the CSS file has a section for Panels style, and a section for Buttons style.
- In Panels style, edit the CSS below from the sample file you downloaded, and change the colors to your liking:
/* node title */
/* Set Font Color */
/* Set Background Color */
/* Set Border Color */
Colors are set using Hex Values (a pound sign ‘#’ followed by 6 characters). Check out this site for Hex color reference.
- To style the heading text of question nodes in Panels style, edit the CSS below from your .css file:
/* question area for panels style */
- For Panels style, you can also customize the answers area. You can choose from hundreds of icons in the FontAwesome tool kit and include them in your own trees. Simply head over to FontAwesome, choose the icon you want to use, and copy its Unicode value. Once you find the icon you want and copy its Unicode, you can edit that part of the custom CSS file we’ve been working on:
/* icon to left of answers in Panels Style */
/* paste your icon’s unicode between the quote marks below */
- For Buttons style, you can customize the button colors editing the CSS below:
/* custom buton color for buttons style */
- Once you’ve styled all the elements of your tree to match your brand, save your .css file, then upload it to a publicly accessible URL on your server.
- Open the link to your uploaded CSS file in your browser to test it, and make sure it appears.
- Go to your tree’s Settings, and look for “CSS Customization URL”. Paste the link to your new .css document here. Scroll to the bottom of the page and hit Update Settings.
That’s it – all the power of dynamic decision trees made to blend right into your site or brand’s look and feel.
There’s nothing we love more than hearing from you. Your issues and uses of Zingtree. Which is why our March 8th update was inspired in response to several customers who asked for more ways to tailor the look and feel of your Zingtrees. Plus, we added a few more nifty reporting options, and some general cleanup based on your feedback.
We have more details on customization here, but here’s the summary of what else is new:
- We now have a LinkedIn group set up for discussing all things Zingtree.
- New option to customize by including custom CSS in Zingtree hosted, iFrame deployments.
- Fixed alignment on deployed nodes with 1 or 2 buttons across.
- Page titles and buttons can now include HTML — including FontAwesome icon code.
- Clicks and usage reports with no data no longer show an error message. (h/t Blair)
- Better session tracking reporting, with more accurate button click information.
- Added source-tracking for iFrame.
- Zingtree-hosted deployments now have tracking for individual agents or traffic sources.
- The sessions list report shows total time for each session.
- Properly track button clicks to open link nodes.
Have a feature request? Let us know! We’re listening.