Zingtree Tags: building a Zingtree

Custom Styling for Your Decision Trees

customize-blog

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 */
     .panel-primary>.panel-heading {
     /* Set Font Color */
     color: #ffffff;
     /* Set Background Color */
     background-color: #CC1D1D;
     /* Set Border Color */
     border-color: #CC1D1D;
     }

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 */
     .list-group-item-question {
     background-color: #CC751D;
     }

  • 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 */
     .fa-chevron-right:before {
     /* paste your icon’s unicode between the quote marks below */
     content: “\f069”;
     }

  • For Buttons style, you can customize the button colors editing the CSS below:

     /* custom buton color for buttons style */
     .btn-primary {
         color: #ffffff;
         background-color: #CC1D1D;
         border-color: #CC1D1D;
     }

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

Happy Zinging!

Divide & Conquer!

sub-trees-zingtree

Use Sub-trees For Tackling The Trickiest Trees

Have you had trouble developing intricate, multi-step trees? Is maintaining an easy flow for your users throughout a complex decision process a challenge? Are you having issues scaling your trees up to accommodate more users and use cases?

If you know you’re going to have a large project ahead of you, planning is crucial. You’ll want to break up your larger tree into individual threads and themes. Once they’re broken up, you can refine the smaller pieces until they’re perfected, and then create discrete, small to medium sized trees. Finally, once your sub-trees are ready and working properly by themselves, you can use Tree Nodes to connect them into your finished, mega-Zingtree.

While in the planning stages of complex decision trees, many users find these sub-trees occur naturally. So pause your active tree development (just for a minute) in Wizard or Designer, make an outline of your tree and its constituent sub-trees.

Try using sub-trees for your most intricate trees today.

Introducing Zingtree “Panels” Style

Updates2

We don’t live in a bubble. Our team is constantly looking for web sites that spent a lot of money (and time) to custom code something similar to our Zingtree interactive decision tree, and we’ve seen a different style of user interface that we like, and we think you might too. So we adopted it as an option, which we call the Panels style.  It looks like this:

You can choose between the traditional Buttons style, or the new Panels style, when you deploy your tree. You can also try any of our Gallery trees in Panels or Buttons style.

In case you are new here, here’s how the Buttons style looks:

Plus, you can even use your own CSS to redefine the standard colors, fonts and spacing used in the Panels style – just go to the Settings for your tree.  (You can also change the default preview style from this screen as well.)

As we mentioned, this new Panel style is great for long answers. Hopefully you’ll enjoy using it as much as we enjoyed creating it for you. Let us know what you think and how you use this format!

How To Write Effective Nodes

 

z_blog_writing

So, you’ve spent some time building the basic elements to your tree? Now you find yourself in a bit of a pickle –

  • What do I say in the Question or Answer Node?
  • Should I use the Link Node or should I just provide all of the information without linking?
  • How do I even begin tying Nodes together so that their function is truly realized?

Writing Nodes can be a bit challenging. This is because oftentimes writing nodes requires you to teardown your product or service in ways that you may not have EVER done before or maybe it has been a very long while since you have. Either way, there are four key tools to help you accomplish this! In this session, we will couple these tools along with fresh look inside the support that you dream of providing to your users.

 Learn about our methods to write the best nodes! (more…)