Monthly Archives: September 2015

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!

Call Center Case Study: AireBeam

Here’s an example of how Zingtree‘s interactive decision trees are improving agent productivity in a real call center.

We recently joined forces with AireBeam to see how our interactive tools could help their navigational flow during customer service inquiries, and the results were remarkable. By switching from a traditional outsourced method of customer support to Zingtree’s Agent Scripting Solution, they were able to effectively reduce service costs and call minutes by nearly 50%!

The case study is below, and you can also view a PDF here.

casestudy-airebeam

Want to see more? Explore the Zingtree Gallery for examples of how our decision trees and interactive solutions provide value for businesses!

Medical Decision Trees

z_blog_med

Update: See this post on how health care providers are using decision trees to eliminate medical scheduling errors.

Medical diagnosis is one of those things in life that lends itself to a troubleshooting process. By asking a few questions, and reacting to the answers with follow-ups, a skilled triage nurse or doctor can narrow down the possibilities of what’s affecting a patient, and streamline treatment options or next steps.

Similarly, a Zingtree interactive decision tree built with advice from a medical expert, can take a patient (or prospective patient) through a process to help determine what to do. You can see some real live examples using medical decision support in the Zingtree Medical Decision Tree Gallery.

Zingtree also includes a scoring option, so you can build a sophisticated diagnosis system based upon both logic and numerical weighting of answers. We built a diabetes risk assessment as a simple example, and you can see how it works here.

Besides offering medical advice via a decision tree, there are other ways for health organizations to utilize Zingtree technology. For example, we have clients that are using Zingtree for screening patients, and routing them to the proper department or clinician.  When a person interacts with a Zingtree, and then fills in a contact form at the end of the process, their entire Q&A session is delivered with the email. And for HIPAA compliance, there’s an option to include a secure link to the patient’s answers, so only authorized people can have access.

Are you considering building a medical decision tree? Or are you working on one now? Talk to us and share your vision.