Zingtree Tags: interactive flowchart

Beginner’s Guide to Starting a Zingtree: 8 Hacks For Success

Screen Shot 2015-05-08 at 10.17.52 AM

Our interactive decision tree tool is a must-have for any business looking to skyrocket their customer service through self-help, organizations hoping to logically deliver answers, and even contact centers to guide their customer-facing agents through how-tos and support.

No matter what you use Zingtree for, getting your first tree deployed can be daunting for some. So have no fear, here are our top tips for breaking into the awesomely helpful world of Zingtrees:

1. Sketch out a Roadmap

Remember in school when you’d sit down, brainstorm a strategy, and whip out the perfect outline for getting started? It’s just like that! Whether it’s in list, mind map, or spreadsheet form, getting down the touchstones you need your tree to cover before you start building your tree is crucial and will make building your nodes and connecting them in a flow much easier. Compiling an outline is essential and will make the creation much more streamlined.

2. Go with What’s Already Been Built

We’re continuously updating the decision tree examples present in our Gallery. Here you’ll find a huge variety of pre-made decision trees for various use cases and industry-specific needs that you can edit, adjust, and customize to fit your needs. 

Simply click the “Examine button to take a closer look, and the “Copy” button within that to create a replicated version that you can adjust as needed.

3. Use the Right Building Tool

We all know that there are different styles of learning, creating, coding and strategizing — for this reason, we’ve equipped Zingtree with a robust set of tools fit for everyone.

Visual Designer allows for a “white board” to create nodes, connections, and truly see the decision tree as it’s being built. Some Zingtree builders only use this mode as a way of aesthetically assembling decision trees.

Importing from spreadsheets lets you start the process in Excel or Google Sheets and then upload it all into Zingtree. A perfect solution for spreadsheet lovers!

The Wizard tool is ideal for anyone who likes simple question-and-answer style forms and will get you up-and-running after collecting some key information.

Learn more about how to create a decision tree using our methods here.

4. Use Placeholders When Undecided

When you’re on a roll mapping out your decision tree you’re bound to run into a speed bump here or there, especially when dealing with conditional node flows. In practice, this means if you need two nodes connected you need to create both nodes before you create the connection between them.

Screen Shot 2015-05-08 at 10.17.09 AM

If you’re stumped on the additional nodes, we recommend that you create simple untitled/undefined nodes to help you continue through the process. You can always go back to that node and edit appropriately as needed.

5. Use Sub-Trees for More Complexities

If you know you’re going to have a large project ahead of you,  prepare more than one Zingtree to ease the pain in constructing one whole decision tree. In fact, when you’re in the planning stages, you will find these sub-trees occur naturally in complex decision trees. By containing themes and varying elements in different trees, and then later, linking them up into one final tree using Tree Links, you can concentrate on one element at a time!

 

6. Go Back With Snapshots

A very helpful feature we’ve built into Zingtree is Snapshots. Snapshots allow you to review edits and go back to previous versions of your tree – helpful when creating trees with multiple revisions. To find this tool, select More Tools > Snapshots. You can see any other team members’ work and revisions, not to mention, recover that past version.

Screen-Shot-2015-12-09-at-2.10.34-PM

 

7. Try Logic Nodes for Test, Questionnaires & More

Moving from A-to-B as easily as possible is our most base-level goal. Going a bit deeper, however, many businesses, educators, and other types of users benefit from having logic steps involved to quickly jump end-users to where they need to be, collect values associated with each selection, and more.

Logic Nodes test the value of your Zingtree variables with a series of rules and jump to a node when a condition is met. The rules are applied in order, so once a rule condition is met, the node assigned to the rule opens next.

8. Customize and Personalize Away!

We’ve said it before and we’ll say it again — customization is key. That’s why we make it easy to add in color and style wherever it’s needed! Need a pop of branded personality or just want to showcase your information in a visually-stunning way? No problem. With options to insert custom CSS files, adjust the appearance of buttons, and add videos, GIFs and other types of media, you can get as customized as you want.


We’d love to hear your tricks and tips for starting a Zingtree. Feel free to share on our Facebook Page!

This article was originally published in 2015 and has been updated for relevancy. 

Need a Creative Boost? Our Top Decision Tree Examples

Interactive decision trees can be incredibly powerful tools for technical support, troubleshooting, call centers, corporate procurement, purchasing and processing, scheduling, and so much more. The possibilities are endless for businesses, and even individuals, but it can often be a little difficult gathering the right inspiration to get started.

Our blog, gallery, website, and tutorials are full of decision tree examples to help you start off on the right path. In fact, we built our Gallery for exactly this purpose: To arm you with all of the tools and examples you might need. With the gallery, you can explore and examine decision trees to see how they are built for different functions, test out different themes and styles, and even duplicate existing decision trees so you don’t have to start from scratch.

We’ve hand-picked a few favorites to show just how dynamic these trees can be. Plus, we offer up some tips on customizing and personalizing decision trees to make them look and feel exactly how you want.

Great Decision Tree Examples

Basic Support Example

Click here to examine this decision tree example. 

Content Marketing Example

Click here to examine this decision tree example. 

HR Questionnaire Example

Click here to examine this decision tree example.

Personality Test Example

Click here to examine this decision tree example.

Appointment Scheduler Example

Click here to examine this decision tree example. 

Customizing Your Decision Trees

Personalizing and customizing decision trees is a fun way to inject a little character into your interactive experience. Once you’ve got those creative juices flowing, give some of these custom tweaks a try:

1. Use a Zingtree theme to mix and match different styles and colors.

2. Insert your own custom CSS to perfectly match your business or organization’s branding.

3. Add video, GIFs, and images to help support your questions, and add new visual elements to your decision trees.

4. Include icons (or even emojis) in your page titles and buttons.


Ready to get started? 

Check out the Zingtree Gallery for even more creative inspiration, and log in to work on your own. 

How to Use the Decision Tree Gallery

Zingtree-Gallery

Interactive Decision Trees can be utilized for all kinds of specific requirements, whether they concern customer support, business and marketing, training simulations, medical triage or any other use case. The difficult part isn’t figuring out what your end-goal or purpose is, it’s knowing how to get started and present information in the best way possible.

The Zingtree Gallery is our go-to resource for seeing how others build decision trees that may be similar to your application. You can copy these trees into your account to modify them, view them to see how an end-user would interact with them, and examine how they are built.  The Gallery is also a great way to explore Zingtree if you haven’t yet set up an account.

Deep Dive Into Decision Trees

The existing decision trees in the Gallery have all been created from scratch by Zingtree users. Anyone is free to examine any of these decision trees from every angle, so you can see exactly how it’s all done.

Click around to see how different types of trees look and feel, or you can use the top navigation to filter decision trees by your specific use case.

1

Once you open the Zingtree Gallery, it’s easy to find the type of decision tree you’re looking for. Click the blue Play button to see the end-user experience. Or, click the orange Examine button in order to see how it’s built with the Designer or Wizard tools, check out the overview of nodes, and much more.

Copy & Customize for Any Need

While just diving in is a great way to get started, you’re also welcome to make an exact copy of any decision tree in the Gallery to modify to your liking. Once you have a free Zingtree account and are logged in, the brown Copy button adds a copy of the tree to your account.

2

Submit Your Own

We made it simple to submit your favorite, most popular, or most interesting decision tree for all to see! To add your own Zingtree to the Gallery, select My Trees, navigate to the decision tree you want to submit, then select More Tools. Click to Submit to Gallery, read and accept the rules, and finally fill out the short application form to submit.


Check out the Zingtree Gallery here! Need more help or inspiration? Read out to our team today.

How to Include a Search Form in Your Trees

Your troubleshooters and FAQ-style decision trees are chock-full of answers, insight and other information just waiting to be discovered. In addition to guiding people to find answers step-by-step, you can also insert a Search Form into your decision tree.

With the functionality of a Search Form, your customers can quickly and easily search for text in the current tree, and then jump directly to that section.

Why Use a Search Form?

Our clients pointed out that, while decision trees are built for customers to navigate through, it’s often much faster to directly locate a specific piece of content. Search Form queries match text within your decision tree nodes or titles, making it easy to search for specific information in a tree.

Note: This is different from Tree Search Forms, which lets you search through all the trees in your organization. 

How to Insert Search Forms

Placing this type of form is as easy as clicking a button while creating your decision tree…

Open your decision tree of choice and navigate to Overview. Next, open “Edit” for the node you want to place it in, then select Templates in the Content Editor to insert your Search Form.

There you have it! Now your customers, employees or anyone else using your decision tree will quickly and easily be able to search for the solution they are looking for.

Ready to get started? Log in or sign up to launch your own decision trees with search capabilities today. 

Sending and Receiving Data from Decision Trees with Webhooks

YouAsked

Our larger corporate clients have asked us for a way to be able to exchange Zingtree data with other applications. Some customers want to send data from a Zingtree session to another application, or include data from another application in Zingtree.

Zingtree’s data exchange feature make use of Webhooks with JSON formatted data. (A lot of the tools we utilize work the same way.)

Example

To demonstrate how to send and receive data from your decision trees, we will walk through how to build a simple tree that asks for a USA zip code, and then shows the city and state for that zip code inside the tree.

Try this demo tree in the Zingtree Gallery here.

We will send data to a custom webhook we built, which takes a parameter of a zip code. It returns a JSON structure with the city and state info.  Here’s an example of the webhook in use:

http://zingtree.com/apps/webhook/filters/zippopotamus.php?zip=94960

If you click the link above, you’ll see these results:

{"zip":"94960","state":"California","state_abbreviation":"CA","city":"San Anselmo"}

The PHP source code for the webhook URL is here.

The variables #city#, #state# and #state_abbreviation# will now be usable by Zingtree. So to show the city, just enter #city# into the content area of any node.

Process

Here’s a summary of how this works:

  1. Add the webhook to your organization’s apps.
  2. Include a call to the webhook in a node. When the node is visited, the call is executed.
  3. Any JSON variables returned by the call become Zingtree variables.

Adding the Webhook:

  1. Go to Account > My Apps.
  2. Click the Webhook button under My Apps.
  3. Enter a name for the webhook, and the URL as shown:The URL is:
     http://zingtree.com/apps/webhook/filters/zippopotamus.php?zip=#zip#

    #zip# will receive the zip code variable entered by the end-user.

  4. Click Add Webhook. This makes the hook available to your trees.

Calling the Webhook when a node is visited:

  1. Go to Overview, and edit the node you want to trigger the webhook call.
  2. Under Send Message To, select Webhook: Zip Lookup.

Adding Security/Authorization

You can add an extra layer of security to your webhooks by passing an authorization token into the URL that launches your tree. The token is passed back to the webhook URL in the HTTP header.

To send the authorization token MYTOKEN, add this to the URL that launches the tree:

&auth_token=MYTOKEN

To check the token in your webhook, look at the X-Auth-Token value in the HTTP header.

Please note: The auth_token remains the same for the entire tree session.

Credits

The demo uses the free zippopotam.us postal code lookup service.


Any questions? We’re here to help – please reach out at any time via the feedback page or the orange chat window at the bottom right of our homepage.