Category Archives: How To

How-to and tutorial articles.

Frictionless Data Collection: The Easiest Way to Get Customer Information Online

We really can’t emphasize enough how important customer data is — for any company in any industry. Gathering data from customers should be easy for them, and it should lead to accurate information for you. Without collecting key information, you can never truly understand your current and potential customers and their desires. How long do you think your company could survive without good data?

Frictionless Data Gathering

Interactive decision trees simplify the process of collecting information on any web page that customers land on first. Just by prompting customers to click a button in a decision tree, you’re collecting data!

Once you get customers engaged with a decision tree, they’ll be hooked. You can then ask for name and contact information using data entry fields. This data is easily sent to you via email, viewed with Zingtree’s reports, or exported into any database or CRM system. Zingtree can validate this data as well.

Case Study: Zingtree

We use this technique ourselves – the Zingtree “Request a Demo” button on our Contact Us page is an example that asks some questions, and then leads to this form:

Before our potential customers see this form, they have clicked some buttons to answer a few basic questions. And at the end of the process, we get an email with all of their information and can schedule a demo with the right expert. It’s an awesome source of leads for us.

The emails we receive at the end of the process look like this:

XYZ Corp requested a demo

Zingtree session data:

Q: I would like to:
A:  Request  a Demo
Q: Next:
A: Continue
Q: How will you be using the Zingtree decisions trees you build?
A: External Use
Q: Are you looking to integrate Zingtree with other applications?
A: Yes
Q: Next:
A: Continue
Q: Are you interested in self-hosting Zingtree?
A: No
Q: Next
A: Continue
Q: Finish:
A: Send Demo Request

score: 0 
zt_browser_language: en 
zt_browser: IE 
zt_country: United States 
zt_regionName: California 
zt_city: San Diego 
zt_zip: 92121 
zt_ip: 208.87.212.000 
zt_isp: Surfer
zt_org: surfer.com 
name: Jane  
company: Customer 
email: jane@xyzcorp.com 
contact_number: 8882121000 
integrations: Looking to retrieve all data points and button elections in a spreadsheet  
send_out: 1


Step 1: Build a Tree, and add a  Data Collection Form

Ready to put this technique to use?

First, engage your customers with some questions answered as button clicks in an interactive decision tree, and at the end of the process ask for more info via a form. It’s easy for customers, and they are providing you fantastically helpful data.

What needs are you filling? Depending on the goal, you’ll want to be collecting different customer information. You can even automatically gather customer location, language, region, browser and more.

Step 2: Refine and Distribute Data

Before you send or publish any decision trees with forms, be sure to check your writing. It’s an often overlooked aspect of surveys, questionnaires and other means of data collection, but contributes greatly to the value of the information gathered.

Step 3: Analyze and Verify Collected Information

If you’re collecting certain information such as a customer’s shipping address, email, or phone number, validating that information before putting it to use can save you a lot of time and money. Bad information wastes valuable resources! Our interactive decision trees allow you to validate information using built-in data cleansing.

When all is said and done, Zingtree’s analytics and reports or API will help you collect and analyse key data directly from your customers themselves.

 

Take a look at the Gallery for a more in-depth look at how data entry forms work in different scenarios. Any questions? Reach out to us anytime.

Yonyx Alternative – Better Guided Customer Interactions with Zingtree

We often get requests from companies that have deployed decision trees in the past with Yonyx and are looking to migrate to Zingtree. These occur for some of the following reasons:

  • Zingtree offers a better price with our pay-for-what-you-use model.
  • Zingtree tools are more modern, and easier to use.
  • Zingtrees present better. Customers have more options to create the look and feel they envision, choose custom colors and button styles, use effects and transitions, and better match their branding.
  • Customers like Zingtree’s integrations capabilities more – specifically the Webhook system and Zapier integration.
  • And more…

In response, we’ve created an import tool to make it easy to migrate your Yonyx trees to Zingtree. You can test out your Yonyx trees in Zingtree, tweak them, and see for yourself how they render and perform.

Here’s how to import Yonyx decision trees into the Zingtree alternative:

  1. Export your Yonyx tree into XML.
  2. In Zingtree go to My Trees, and click Import.
  3. Pick Import from Yonyx XML file.
  4. Select the Yonyx XML file to import. It will be uploaded and converted into a fully functional Zingtree decision tree.

Are you looking to move from Yonyx? Tell us your story!

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. 

Upload File Attachments into Decision Tree Sessions

Many customers have asked for a way to include file uploads as a part of a Zingtree decision tree session. Some use cases include:

  • Attaching a screenshot.
  • Including a photo.
  • Uploading a document.

Overview

Using Data Entry Fields, you can pick the File Upload field type. This allows you to include one or more files in the session data gathered by Zingtree. When the end-user uploads a file, here’s what happens:

  1. The file is copied from the end-user’s computer to a Zingtree file storage server.
  2. Zingtree assigns a variable to the URL where the new file resides.

Security note: Each file uploaded has a random 7 digit prefix or session ID attached to it, so that files with the same name aren’t overwritten, and the file names cannot easily be discovered by hackers.

How It Works

When the end-user reaches a node with a file upload, they will see something like this:

Clicking Upload Document File allows them to choose a file on their computer. Once a file is chosen, the button changes:

How to Set up File Uploads

When editing a node, do the following:

  1. Go to Data Entry Fields, and select Add:

  2. Choose File Upload as the field type, and enter a variable name and label for the upload button:

  3. Click Add Field.
  4. Now click Save Changes to save changes in the node you were editing.

It’s that simple! This gallery example shows how a simple file upload tree is built.

If this is useful for you, let us know. We love customer stories!

Tree Nodes: How to Automatically Return to a Previous Decision Tree

Tree Nodes are one of Zingtree’s most popular decision tree building features. By allowing one tree to launch another, you can better organize your work and use smaller components repeatedly as a part of larger processes.

For example, a hardware company that makes lots of products may have a specific troubleshooting process for power-on problems that are common to many trees. By linking to a subtree, this troubleshooter can be authored just once, and used from several different trees.

A common request when implementing tree nodes is to be able to automatically return to the original decision tree that launched the process – just like a return statement in any programming language. This is done using a special type of tree node that is labeled as “return to previous tree.”

Summary: Setting Up a Return to a Previous Tree

Setting up a return tree node requires these steps:

  • Create a tree node in the starting tree, and specify a node number to return to.
  • In the subtree, use a tree node selected as return to previous tree. When this node is reached, the return node in the calling tree appears next.

Setup: Step by Step

  1. Create your starting tree and the subtree that will be launched from the starting tree.
  2. In the starting tree, create a tree node. Include the tree to launch, as well as a node in the starting tree that you want to return to when the subtree is finished (highlighted in red below). It looks like this when editing a tree node:

  3. In the subtree, create a new tree node and specify it as “return to previous tree.” Like this:

When the “return to previous tree” node is reached in the subtree, the return node from the starting tree will appear.

Example

The Zingtree Gallery has an example, both the starting tree and the subtree.

Thanks for Shawn G. and others for the inspiration!

Publishing Pop-Up Decision Trees

Zingtree makes it fun to include decision trees on your site by enabling them to appear on top of any page, simply by clicking a button. We call this publishing method a “pop-up overlay.” You can easily customize the button color, text, and look of the trees.

You can also include multiple trees on one page. Try these examples:

    

 

Here’s how to set up pop-up overlays:

  1. Click the My Trees button at the top of the screen.
  2. Choose the tree to embed.
  3. Select Publishing Links.
  4. Click Pop-up Overlay via Button Click.
  5. Copy the default button code to your web site, or click the Advanced Options button to do some cool customization.

Shortcut: Go here to create a button that launches a pop-up overlay for your tree.

We think this is yet another cool way to incorporate interactive decision trees into your web site. Do you like it? Or have a better idea?

Send us feedback and let us know what you think!

Using a Timestamp Variable in your Decision Tree

Some of our customers have asked for a way to display the current time/date/day of the week in a node, set the time zone, and custom format it. There’s a predefined Zingtree Webhook to do just that!

This webhook sets a variable named #timestamp# which you can use in any part of your decision tree, format it in a variety of ways, and even perform logic operations on it. Click through below to see our demo of how it all works…

 

Example uses:

  • Display the day of the week.
  • Use a Logic Node to route customers to different nodes for work hours, after hours or weekends.
  • Show the current date and time, display it in a node, and save it as a part of your session.

How to Set Up Timestamps

  1. Edit a node, and open the Show Advanced Options link.
  2. Under “Send Message to App”, select Webhook: Zingtree Timestamp.

  3. You can also include an optional timezone or a date format as parameters to sent to the webhook. (More details below). It looks like this:

  4. In the content area for your node, the timestamp will appear wherever you enter #timestamp#.
  5. Click Save Changes when you are done.

See the “Timestamp Webhook Demo” tree from the Zingtree Gallery.

Customizing

In the Message area, you can include two parameters:

  • &tz= to set a time zone.
  • &format= to set a custom date format.

Example message area customizations:

&tz=America/New_York&format=F j,Y h:i:s A
This sets the time zone to Eastern Time (USA), and makes the timestamp variable look like ” July 25, 2017, 11:37:27 AM“.

&tz=Australia/Sydney&format=d/m/Y
This sets the timezone to Sydney, Australia, and makes the date appear as “25/07/2017”.

&format=l
This sets the #timestamp# variable to the day of the week.

See the “Timestamp Webhook Demo” Gallery tree for other examples.

Reference

The full list of timezones is here.

The full list of date formatting options is here.

How to Display a Session Summary in your Trees

We get many requests to make it easy to show a session summary inside of a node. This can be helpful for an end-user to see how they reached a certain decision while traveling through the tree.

This is accomplished using the Zingtree Session Summary webhook. It loads the transcript of the session into a variable named session_history. You can also display any data entered or collected in the session using the variable data_entered.

Try this quick demo from the Zingtree Gallery to see how this works:

Configuring a Node to Show the Session Summary

This requires two pieces:

  • Sending a message to the Zingtree Session Summary webhook at the end of the session.
  • Inserting #session_history# into the node where you want to show the session history.

Optional: To show any data collected via Data Entry fields, you can include #data_entered# in the content area as well.

Step by step:

  1. Edit the node where you want to show the session summary.
  2. Click Show Advanced Options.
  3. Under Send Message to App, choose Webhook: Zingtree Session Summary.

  4. Insert the text #session_history# (or also #data_entered#) into the content area of the node.
  5. Click Save Changes when finished.

The Session Summary Demo gallery tree demonstrates this. Look at node #5 for specifics.

Advanced: Adding a “Copy to Clipboard” Button

To make it easy to copy data to the clipboard, do the following in HTML code view:

  1. Surround the area you want to copy with <div id=”zt-summary> and </div>.
  2. Add this code for the “Copy to Clipboard” button:
    <a class=”btn btn-orange” onclick=”copyToClipboard($(‘#zt-summary’)); return (false);”>Copy  to Clipboard</a>

Node #5 in the demo has this in place for you to examine.

Pro Tip: Returning a Plaintext Summary.

If you want your variables to be formatted as text (instead of HTML), add &formatted=2 to the Message field – like so:


Any questions? We’re here for you

Repeating Forms in Decision Tree Data Gathering

Our call center customers are so enthusiastic about Zingtree that we get some awesome feature requests. In particular, more and more operations are using decision trees for collecting data. One essential part is to be able to collect information on an indeterminate number of items.

For example, an insurance application may need to collect names and ages of each family member – be it one or twenty. Zingtree’s Repeating Forms capability fulfills this need.

How Repeating Forms Work

Quick dive: Try this demo tree from the Gallery.

The details: A node can collect multiple forms, one at a time. First, the agent starts with one form:

The agent can click Add Another to enter a second family member:

This can continue for multiple family members. At the end of the process, when the agent clicks the Continue button in this tree, the tree’s session will data variables set for each family member, like so:

Configuring Forms for Repeat Entries

When editing a node, there’s an option in the Data Entry Fields part to configure repeating items. Here are the details:

  1. Edit the node with the form you want to make repeating.
  2. In the Data Entry Fields area, click the Repeat Form option:

  3. Enter the maximum number of items to repeat (up to 50):

  4. Click Save Changes to save your work.

That’s all you need to do! The data variable names for your repeating forms will have an underscore and an item number at the end. So, in the example above, the variables for name and age will be name_1 and age_1,  name_2 and age_2, etc.

Thanks again to Tom K. for the great feature suggestion. While your trees can gather repeating items, great ideas like this need to be repeated only once to make it into the product.

So if you have a killer suggestion, please share!