Category Archives: How To

How-to and tutorial articles.

Automatically Including Location Data in your Decision Trees

Zingtree can tell a lot about your end-users just by gleaning information from their browser. For example, you can determine their preferred language, and where they are located.  Zingtree gives you an option to collect this information, and use it in your decision trees.

For example, you can pre-fill a Zip code field in a Data Entry field, or use Logic Nodes to branch to a node depending on the end user’s language or country.

Using the Collect Location Data option in the Settings tool, you can gain access to the following information:

  • Language
  • City
  • State/Region
  • Country
  • Zip or Postcode
  • ISP
  • Origin/domain of server
  • User’s IP address

Getting Set Up

Adding this data to your Zingtree session is easy. Here’s how to do it:

  1. Select your tree, and go to the Settings tool.
  2. Select Collect Location Data.


    If you want to do this for ALL your trees, also click on all my trees. (You can disable enhanced data collection on all your trees in the same way.)

  3. Click Update Settings.

From now on, any sessions with your tree will also include these variables:

  • zt_language (The 2 letter code of the user’s preferred language. “en” is English.)
  • zt_country
  • zt_regionName (this is a USA state)
  • zt_city
  • zt_zip (also Postal Code)
  • zt_isp (the user’s Internet Service provider)
  • zt_org (the origin domain of the user.)
  • zt_ip (the user’s IP address.)

When you examine a session (like from the Sessions List report), you’ll see these variables as a part of your session, like this:

Got any cool uses for this? Let us know!

Integrating a Decision Tree Transcript into CRM (and Other Apps)

doodle_banners

Beyond troubleshooting and support, Zingtree makes a handy interactive front-end for getting people to the right page on your website. We consistently see our customers building trees for sales prospecting, medical appointments, loan qualification, hiring and other environments where a little bit of automated filtering goes a long way. Plus, Zingtrees are a great means for information gathering, too!

We also get requests for integrating Zingtree within various back-end platforms – most notably, CRM. Often, when a customer’s data gets imported into another system, you’ll want the Q&A transcript of their Zingtree session attached.

We’ve created a Simple Sales Funnel demo tree and a basic back-end script in the Zingtree Gallery so you can see a working example.

Here’s how to pass a Zingtree Q&A transcript along to ANY system:

1. From your tree, create a link node to your contact form (i.e. contact_form.php), with a URL like this:

contact_form.php?session_id=#session#

2. In contact_form.php, add this JavaScript right above the ending </body> tag:

<script
id="zingtree_field_id"
value="session_data"
src="//zingtree.com/api/add-session-data-to-form.js">
</script>

3. In the form itself, add a hidden field with an id of “session_data”. The name can be whatever you like. Example:

<input id="session_data" name="zingtree_stuff" type="hidden" value="" />

That’s it!

Under the hood: When the form is loaded, the add-session-data-to-form.js script reads the session_id parameter, then loads the session transcript into the hidden field with the id=”session_data”.


BONUS:

Rather than having a field that must have an id of “session_data”, you can also specify the ID of the field that you want to insert Zingtree data into. This is especially helpful for Salesforce or other CRM apps that generate forms for you.

For example, if you added a multi-line text field to your CRM system form with an ID of “my_data_field”, you could use this piece of code instead:

<script
id="zingtree_field_id"
value="my_data_field"
src="//zingtree.com/api/add-session-data-to-form.js">
</script>

 

This article was originally published October 5, 2016.

Announcing Decision Trees with Logic Nodes

In order to make decision trees that can help solve real world problems, sometimes you need the ability to do more than just choose a path based upon a finite set of choices. For these reasons, we’ve introduced Logic Nodes into Zingtree.

In addition, we’ve found that many of our customer’s integrations are passing data variables into Zingtree, and there are situations where they would like to act on the value of those variables. Logic Nodes make this easy.

If you’re an existing Zingtree author, Logic Nodes replace Scoring Nodes from previous versions. Any tree that is using Scoring Nodes is automatically migrated to this new system, without losing any functionality or you having to do any updating of your trees.

Here’s How Logic Nodes Work

When you edit or create a Logic Node, you’ll see something like this:

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. You can also assign a default node to jump to in case no rules apply.

In the example above, if the variable fruit equals banana, then Zingtree will open node #8, the “Banana” node. If fruit is watermelon, then the default “Something Else” node opens.

About Variables

Variables can be numeric or text, and the comparisons work for either data type. You can bring variables into your trees in several ways:

Note: Your choice of variables is shown in a drop-down list. If Zingtree hasn’t encountered a variable yet in one of the above scenarios, then it won’t appear as an option.

Editing Rules

When editing your Logic Nodes, you can edit your rules as follows:

  • Reorder rules by dragging them up and down with this tool: Reorder Logic test
  • Delete a rule by clicking on this: Delete logic test
  • Select any existing variable from the Variables drop-down.
  • Select an operator (=, ≠, <, >, ≤, ≥ ).
  • Enter a value to perform the test upon.

You must also enter a default node to jump to if no conditions are met.

Conclusion

Zingtree Logic Nodes give your decision trees a bonus option for adding extra intelligence to your processes and troubleshooters. Do you have a cool application for Logic Nodes you’d like to share with us? Reach out and tell us your story!

The Most Simple Ways to Build an Interactive Decision Tree

Zingtree’s decision tree platform makes it easy to offer your end-users an interactive way to find answers, optimize workflows, and a whole lot more. Below, we’ll walk you through how to make a basic decision tree using our most popular methods of creation in order to help you get a closer, step-by-step look at how it’s all done.

How to Use the Wizard

The Wizard is our most-used creation tool, offering simple prompts to build your tree, question by question (and answer by answer). It’s one of the easiest ways to work through an accurate flow for your customers or users.

1. Log in to your Zingtree account, go to My Trees and select Create New Tree. Choose the option to fill out forms with the Zingtree Wizard.

2. After naming your decision tree, choosing your ideal display style and providing a description, just click the Create Tree button to move on to the next step.

3. Once you start the Wizard, you’ll see an entry screen that will prompt your first question and answer options, along with some body content to give users context.

You’ll also be able to see a live preview of what the decision tree will look like, off to the right:

When you’re finished setting up your first question, click Save and Continue.

4. You’ll next be asked to fill out an unfinished part of your decision tree. Click to Offer a Solution, and fill out the form presented to you. Since this is a solution node, you won’t need to ask any other questions.

Click Save and Continue again when you’re finished.

5. Next, you’ll continue to fill out more questions and answers to reach the end paths of your decision tree. For greater selection, try providing more answer choices.

6, Next, you’ll see a page with an overview of the sequence you’re building. In this case, choose to Offer a Solution. This will be the end of one of the paths in your decision tree for your end-user.

7. Continue to complete the rest of the forms that the Wizard prompts. When you’re all done with the interactive building process, the Overview page will appear to show you every node and path in an easy-to-digest way.

Watch our tutorial video for more information about the Zingtree Wizard. 

How to Use the Designer

The Designer tool is another great way to create decision trees in a more visual way. Presented in a white board-style screen, you can easily build out every node, connection and pathway, while being able to see a high level overview the whole time.

1. Log in to your Zingtree account, go to My Trees and select Create New Tree. Choose the option to visually draw out your decision tree with the Zingtree Designer.

2. Once you start Designer, you’ll see the white board-style screen like the one shown below. Click on the green box for Node #1. This will be your starting node – the very first page your end-users will see.

2. Next, you’ll see an edit window appear on the right hand side. Change the Title, Question and Content areas to fit your tree needs.

Next, add another question by dragging a New Question node into the drawing area. Click the green box for the new question node, and edit it like the first time.

3. Drag a Final Answer node answer node into the drawing area, and edit it.

After adding your first questions and a Final Answer node, the Designer area will show everything like this:

You can drag as many question and Final Answer nodes into the Designer drawing area as it makes sense for your needs, and label them respectively.

5. After adding the question and answer nodes to your decision tree, it’s time to link them together. Hover over node #1 until you see a large dot appear, then drag it over to its connecting node.

After finishing linking all of your nodes correctly, it’ll look something like this:

6. The next step is to create the buttons your end-users will click, by editing the connecting arrows. Click the connector – in our example, titled “Check the Weather” – and an edit form will appear. Change it to look like the form below:

After you connect the rest of the choices in your tree, and relabel the connecting arrows, your decision tree will look something like this one:

Watch our tutorial video for more information about the Zingtree Designer. 

The Finished Decision Tree

No matter the route you take to get there, you’ll end up with the same stunning, super-powerful decision tree. Click through our demo tree below, and examine it within the Gallery to check out even more.

 


Have any questions about getting started with Zingtree decision trees? We’d love to speak with you anytime!

 

This article was originally published on September 14, 2016. 

Single Sign-On for Zingtree Decision Trees

security-blog

We’ve had several requests to incorporate Single Sign-on (SSO) into Zingtree, as a means of restricting access to trees.  Many customers have sensitive corporate processes or procedures encapsulated in their trees, and ensuring these trees are accessible only to certain employees can be invaluable.

Single Sign-on is a service provided by many vendors, including Okta, Microsoft (Active Directory / Azure), Google (G-Suite), Salesforce and more.  These services are known as Identity Providers.  A single log-in through an Identity Provider gives a user secure, authenticated access to applications provided by Service Providers like Zingtree.

Once you log in through your Identity Provider, you don’t need to re-enter your login credentials. SSO is a very convenient way to secure access to your applications, while not burdening end-users with extra hurdles.

Zingtree supports any service that is SAML 2.0 compliant, which is a common standard.

Set Up Overview

Configuring SSO requires your Identity Provider and Zingtree to share information with each other:

  1. Your Identity Provider needs information about Zingtree.
  2. Zingtree needs information about your Identity Provider.

SSO just needs to be set up once for your organization. Once you have Zingtree and your Identity Provider successfully working together, you can mark any of your trees as “SSO restricted” via the Settings tool to require a login to get access.

Configuring Zingtree for SSO

To start, in the Zingtree top menu, go to Account, Single-Sign-on. You’ll see the parameters (specific to your organization) to share with your Identity Provider:

Configure your Identity Provider with these parameters.

Next, click the blue button to Enter Identity Provider Data into Zingtree. The following screen appears:

Copy the rest of these settings from your Identity Provider.

If you’re ready to test, make sure Enable access restrictions on specified trees is checked.

Click Save Identity Provider Settings when finished.

Testing Your SSO Setup

Once you’ve set up your Identity Provider and Zingtree for SSO, you can test from Zingtree as follows:

  1. In Zingtree, go to Account, Single Sign-on.
  2. Click the orange Test Setup button at the lower right of the page.

From here. you can test logging into your Identity Provider from Zingtree.  If you’re already logged in, the test will just return your email or other identifier from your Identity Provider.  If you’re not yet logged in, the Identity Provider’s login screen will appear, and then you will be returned to the Zingtree SSO test page after logging in.

Enabling SSO on Your Trees

Once SSO is working properly from your test, you can restrict access to any tree as follows:

  1. Go to My Trees, and select the tree that you want to require SSO login.
  2. Click the Settings tool.
  3. Check Require Single Sign-on (SSO) Login to Access.
  4. Click Update Settings.

Release Notes

SSO has been tested with a variety of Identity Providers.  If you’re having trouble configuring with a specific service, please let us know!

Embeddable Decision Trees for WordPress

There’s no getting around it – we love WordPress! As a powerful piece of software that enables people around the world to spread and share ideas, build amazing websites and more, we understand the need to be as integrative with this ever-popular tool.

Zingtree’s robust toolkit allows WordPress users to directly embed interactive decision trees into any web page needed, making it easy for customers and end-users to navigate through any process on your site in a simple question-and-answer flow.

Many of our amazing customers are already taking advantage of this plugin, by hosting powerful, customized decision trees directly on their respective websites! See if you could survive in the wild with this interactive journey built by Live Out There, then check out a robust and helpful troubleshooter decision tree from Screen Time.

Here’s how to get started with your own WordPress-hosted decision tree:

1. Download the plugin and install it into WordPress.

2. Use your Zingtree decision tree’s specific short code (which will appear like this) in your post:

[ zingtree id=”851580502″ ]

Hint: To locate your short code, login to Zingtree and go to My Trees. The ID number to the left of the decision tree title is your code.

Installation Video

Some more examples: 

To customize with a persistent button that will immediately take the user to whichever node you’d like while displayed in “panels” style, enter a short code like this:

[ zingtree id=”148196706″ style=”panels” persist_names=”Restart|Submit Ticket” persist_node_ids=”1|5″ ]

To hide the name of the decision tree, as well as the “back” button, enter a short code like this:

[ zingtree id=”148196706″ hide_title=”yes” hide_back_button=”yes” ]

Get the WordPress Plugin!

Don’t want to embed into WordPress? Zingtree can host your decision trees for you! Learn more here or contact us today.

This article was originally published May 2015.

How to Use Existing Login Credentials to Restrict Access to Decision Trees

security-blog

Some of our customers have asked for an extra level of security for their trees, such that only people authenticated via a corporate intranet can access it. This article shows how it’s done, for ANY login system on ANY intranet.

Universally restricting access is accomplished by having an internal server access the tree via a server-side include, rather than via a user’s browser via embedded code in the page. This means that all accesses of the tree come from a single corporate IP address or range. Zingtree has an IP filtering option for any tree, so it’s easy to restrict access and use whatever authentication processes are already in place on the corporate intranet.

The method described here can work with organizations using SSO (Single Sign On), or any other login system.

Here are the basics:

  1. Restrict access to your tree to just the IP address of your server(s). This is done via Zingtree’s Settings tool.
  2. Create a web page for the tree to display on your internal server. This page will include the necessary JS and CSS files to show the tree. Load your tree using a server-side call, instead of embedding it into an iFrame or linking to a URL hosted at Zingtree.com.

Examples

Here’s PHP source code for a simple server-side include.

See how this page appears.

Technical Details

The example above is written using PHP, but any server-side scripting language can be used.  Our demo is a template around which a URL for a tree can be loaded. This template contains all the CSS and JS files needed to display a functioning Zingtree decision tree.

Zingtree is built on top of Bootstrap 3, so the basic Bootstrap files are loaded.  There are a few custom controls as well included in the template.

You can swap out the PHP with Python, Ruby, Perl, or any other scripting language you choose.
Have any questions or comments about making your trees more secure? Talk to us!

How To Use One Tree for End-Users and Employees/Agents

updates-blog

We’ve had requests to make it easy to use one tree for both end-user support and internal agent usage. Rather than maintaining two separate trees, being able to have one source of content and show (or hide) parts between agents and end-users can be extremely helpful. So, we’ve introduced two new template tags that allow this to happen.

Demo

The Dual Use Agent and End-User Example Tree from the Zingtree Gallery shows how this type of tree is built and operated. You can switch between End-User and Agent views by opening the Show More Display Options link.

Creating Agent-Only or End-User Only Buttons

The first node in the demo has a button labelled “Other Options for Agents only”.  This button only appears when agents are viewing the tree, but not for end-users.  Here’s how this magic is done:

  • If you prefix the button label with AGENT_ , only agents will see that button.
  • Prefix a button with USER_ to show it to just end-users.

Creating Nodes with Dual Content

In the content area for any node, you can insert special tags that make the text visible to just agents, or just end-users.

To show content for agents only:

Surround the content with [[AGENT-ONLY]] and [[/AGENT-ONLY]].

To show content for end-users only:

Surround the content with [[USER-ONLY]] and [[/USER-ONLY]].

You can access these template tags from the content editor in any node:


Example

If your node content area looks like this…

This is the content for a node.

[[AGENT-ONLY]]Agent stuff shows here[[/AGENT-ONLY]]

[[USER-ONLY]]User content shows here[[/USER-ONLY]]

An end user will see this…

This is the content for a node.

User content shows here

And your agents will see this…

This is the content for a node.

Agent stuff shows here

How to Preview

The updated Preview tool lets you see content views for agents or end-users:

Implementation

Your agent-only content will appear in trees accessed via the Zingtree Agent Portal. You can also make this content appear by adding the following parameters to the URL for Zingtree hosted or embedded trees:

&agent_mode=1&apikey=YOUR_API_KEY

Substitute your API key for YOUR_API_KEY in the URL. You can find the API Key from the API page, or if you have multiple organizations at the bottom of the Organizations and Billing page.


Do you like this new feature? Or have any other comments? Please share with us!

Zapier Decision Tree Integrations with Zingtree

zingtree zapier integration

Our Zapier app makes it easy to send data collected during each Zingtree session to more than 500+ applications supported by Zapier. In case you haven’t heard of it, Zapier is a tool that simplifies data exchange between various web applications. We’re big fans.

Here are some cool things you can do with Zingtree and Zapier:

  • Send data collected in a Zingtree session to Salesforce, Zoho, Highrise, or any other CRM.
  • Add an email address entered in a tree into Mailchimp.
  • Send  yourself an email or SMS message when a customer reaches a critical node in a tree.
  • Save new customer information in a Google Sheets row.
  • Create Trello cards from trees, and include customer notes and session data.
  • And tons more!

When using Zapier, you create “Zaps.” A Zap has a “trigger,” which is the source of the data, and an “action,” which is where the data gets sent. Most of our customers want to send data from Zingtree to another app, so we’ll demonstrate how this is done here.

Before starting, you may want to examine a demo tree from our Gallery that gathers data and sends it to Zapier, or copy it to your account.

How to Set up Zapier for Zingtree

The Zingtree Zapier app is currently invite-only. But if you’re reading this article, you’re invited!

  1. Create a free Zapier account at Zapier.com.
  2. Go here to accept an invitation to use the Zingtree app. The invitation appears:

    Accept the invite.
  3. You’ll be prompted to make a new Zap:
    Click Make a new Zap.
  4. You’ll be asked to choose a Trigger App, which is the source of the data exchange.
    Search for Zingtree, and select Zingtree (Beta).
  5. You’ll be asked to choose a single trigger.
    Click Save + Continue.
  6. Next, you’ll need to connect your Zingtree account, and a tree to Zapier.
    Click Connect a New Account. 
  7. You’ll be asked for your Zingtree API Key, which you can find here at the bottom of this page. Also enter the Tree ID that will be sending data to Zapier.
    Click Continue when finished.
  8. Change the name of the account, then click Test.

    You should see “success.” Click Save + Continue.
  9. Next, Zapier will attempt to retrieve any variables or sample data from your tree. If this is a new tree, you may want to run through it once and gather some data.
    Click Fetch & Continue.
  10. You’ll see some of the stock data that Zingtree always provides, as well as any custom data for your tree. Again, if you don’t see all the data you expect, do a test run through your tree, and enter some data at least once. This will make the rest of the process easier.
    Click Continue.

Set up the Action App – Email Example

So now you’re done with the Zingtree part. Congratulations! Next, you need to set up an Action App, which will receive data from Zingtree. Let’s set up email delivery as an action, as follows:

  1. Search for email, and choose Email by Zapier as an action app.
    Select Email by Zapier.
  2. This app has just one action.
    Click Save + Continue.
  3. Fill in details for the outbound email. You can insert fields from Zingtree in the body of the email as well.Click Continue when the email is set up correctly.
  4. You’ll see  a preview of what to expect.
    Click Create & Continue to save the action and send a test email.
  5. You should see another “success” screen.
    Click Finish when the email appears as you like.
  6. Name your Zap Zingtree to Email, and turn it on!

Your Zapier Zap is all set.

Making Zingtree Send Data

The final step is to tell Zingtree when to send all the data collected in a session to Zapier. This can be triggered from one or more nodes, when they are seen by the end-user of your tree.

  1. From Overview, Edit Node, edit the node that you want to trigger sending data to Zapier.
  2. Go to Send Message to, and pick Zapier: Zingtree to Email. This is the new Zap you created.
  3. Click Save.
  4. Now try a test from Zingtree. Using Preview or the Publish tool, navigate your tree, and when you reach the node that triggers the send, you should see something in your inbox. IMPORTANT: Make sure to use https in your published Zingtree URL when using Zapier.

Once you get your first Zap done, it becomes easy and addictive to hook Zingtree to the other applications that your business depends upon. So keep going!

Have any questions? Contact us anytime!

The Visual Designer: Drawing Out Your Decision Tree

Everyone prefers their own way of creating, and it can come in many forms. To address this, we built Zingtree with a few different ways to design and construct an interactive decision tree.

For the more visual learner, the Zingtree Visual Designer allows you to draw out your decision tree. This “white board” style lets users to create nodes, along with their connections, and see the nitty gritty details of how the tree functions.

Here’s how to get started with the Visual Designer:

1. Once you log in to your Zingtree account and start Designer, you’ll see a screen that looks like the one shown below, with one node already in place as a green box. This is the very first node your users will see and interact with.

2. Click on Node #1, and you’ll see an edit window pop up on the right hand side. You can edit the Title, Question and main Content segments to your liking.

3. Drag new nodes into the design area – these correspond to the pages in your decision tree. Again, select the green box to edit each node’s Question, Content, etc.

4. When you’re ready, add a Final Answer Node and edit to fit your needs. These will appear in blue, to differentiate from your green Question Nodes.

5. Continue to create these Questions & Answer Nodes by dragging new nodes into the design area, and then connect them using labeled arrows. The connecting arrows represent the button selections from each node.

6. Finish linking all of your nodes using this method, and you’ll end up with a finished product that looks something like this image below. Often times, Zingtree users only use this mode as a way of assembling their decision trees. Please keep in mind that things can get confusing for more complex trees that require more nodes.

For a more in-depth tutorial, watch this video to see how to build the example tree above using Zingtree Designer:

 

 

To view more ways of building your decision trees, check out our Zingtree Design Tutorials.