Category Archives: Customization

Making Dynamic Data Collection Forms

YouAsked

One of our larger customers requested the ability to make a list box that can change depending upon a selection made previously while using a decision tree. If you are doing data collection, this can really simplify things for your end-users.

Demo

For a demo, we’ve built a tree that asks you to select a state in the USA, and from there shows a list of cities in that state.  You can try the demo here.

Setup Overview

This tree uses Zingtree Webhooks. Here’s how we built it:

  1. We created a PHP script for our state-to-city list box generator. This script receives a state code, and returns JSON with a variable called pick_a_city that contains an HTML list box to pick a city in that state. This will be the Webhook URL. It looks like this:
    https://zingtree.com/demo/get-cities-from-state.php?state=#state#

    Substitute #state# with the 2 letter abbreviation for your state to see the results, or just use this example for Alaska.

  2. We created a new Webhook called “City/State Lookup” (under Account > My Apps) with the URL in step 1.

  3. The first node contains a list box with all of the states. The selection is stored to a variable named state. The only button in this node goes to node #2. The end-user view for node #1 looks like this:

  4. Node #2 calls the Webhook we created with the state variable from node #1. The Webhook returns HTML for a list box that replaces a placeholder in node #2 called #pick_a_city#. Here’s the content area for node #2:

    Under Advanced Options, we tell node #2 to send a message to our City/State Lookup Webhook before it loads, like this:

Source Code

  • You can see the entire tree here.
  • The PHP source code for the Webhook URL script is here.
  • The URL for the Webhook is:
    https://zingtree.com/demo/get-cities-from-state.php?state=#state#

Need More Info?

Questions or suggestions? Just holler!

Zapier Decision Tree Integrations with Zingtree

zingtree-blogpost-zapier

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!

Generating Custom Documents Using Document Nodes

zingtree-banner-startup-1

We’ve had several requests to create a final, single page document based upon answers to decision tree questions. Zingtree’s Document Nodes makes this powerful document generation capability a reality.

With the help of Document Nodes, you can now complete tasks like:

  • Making custom sales brochures.
  • Building legal agreements.
  • Generating purchase orders.
  • Creating evaluations and assessments.

For a simple example, examine our What Computing Device Do I Need? decision tree from the Zingtree Gallery.

Document Nodes Overview

Document Nodes display the content from one or more answer nodes on a single page, based upon variables and values. Variables can be from one of these sources:

  • Data Entry field values.
  • Scoring variables from button clicks.
  • Scoring variables set from Data Entry field list boxes or radio buttons.

Here’s how it looks in the Document Node editor:

Note that scoring variables are a running total.  So if you set variable v to 1 in one place, and to 2 in another, the value of v will be 1+2 = 3.

Building a Tree to Generate a Document

To build a decision tree that generates a document based on answers selected, we recommend these steps:

  1. Create your question nodes, and assign variables to your responses.
  2. Create answer nodes for all of the possible snippets of content you’ll want to show in the final document.
  3. Create a document node.

Set Up: How to Create a Document Node

Here’s how to create a fully-functional Document Node, step-by-step:

  1. From Overview, click Add Node.
  2. Select New Document Node.
  3. Add the pieces of content you want to serve to your end-users.

Each piece of content is set up like the image shown below. In this example, if the variable phone_calls equals “Yes”, we add the contents of node #6 to the final document.

Using the Document Node Editor

Drag this to reorder the content:

Click this to delete the content from the document node:

Pick a variable to test:

Pick an operation:

Pick a value to test against:

Edit the contents of the included node:

Show the contents of the included node:

Try the Document Node editor with a demo page here.

Hint: Once the content from an answer node is inserted, it won’t be inserted again.

Debugging Tip

Use a node that shows your variables while you are testing. The What Computing Devices do I Need example tree uses Node #10 as an ending piece in the Document Node so you can see the value of all of your variables.

Live Example

The What Computing Devices do I Need tree demonstrates a simple tree with a Document Node at the end.  This tree helps an end-user decide whether they needs a phone, tablet or desktop PC, based upon the answers to some questions.

Have any questions, comments, or suggestions on this feature? Talk to us on live chat or by email!

It’s All About Context: Seeing More with History & Breadcrumbs

Making sure you are seeing the full context is best for complete understanding. Our interactive decision trees come with advanced hosting/publishing capabilities that allow your customers and end-users to easily see, and then understand, where they are in the process.

History: See Every Step

Our History feature allows your customers to view every step taken while using your decision tree. With this publishing option, users can easily click on a link and go back to any previous node visited.

When implemented, it will display the path history information like this:

history

Breadcrumbs: Your Tree’s Flow

Our Breadcrumbs feature shows the exact progression of nodes that appeared during your customer’s journey through your tree. With this publishing option, users can also click on any link and automatically jump back to another point in their decision tree journey.

When implemented, it will display the sequence information like this:

breadcrumbs

Setting Up History & Breadcrumbs

1. Login to your Zingtree account, go to My Trees and head to the decision tree you want to publish with history and/or breadcrumbs shown.

2. Click to open Publish.

3. Select the tabbed “Have Zingtree host your Tree” option, then click on the Advanced Hosting Options button shown below.

4. Select Show History and/or Show Breadcrumbs, depending on the information you’d like to display.

That’s it! Your customers and end-users will now see their decision tree history and breadcrumbs, and be able to easily identify where they are (and where they’ve been) in your tree.


Any questions? Please reach out anytime!

Please Note: History is available only for Zingtree-hosted trees and the Agent Portal. Breadcrumbs are for Zingtree-hosted trees only.

How to Build & Maintain Decision Trees in Different Languages

Across how many countries does your business or organization operate?

Do you want to customize trees for different dialects or regions? 

When you create interactive decision trees or troubleshooters for many languages or dialects, you are reaching and helping more people. When our customer IT Works realized that they needed to localize their frequently-changing decision trees, managing translations in Zingtree was an ideal next step.

This article shows you the process IT Works uses to keep their trees up to date in many languages. With the help of localization management software, coupled with Zingtree’s decision tree platform, it’s easy to create and maintain trees in multiple languages.

Here’s how to translate your decision trees:

1. Export your decision tree (which creates a JSON file).

2. Use an online localization tool, (IT Works uses Sisulizer) to extract strings from the JSON files, and deliver them to a translator. Once translated, Sisulizer will make a new JSON file with the replacement strings.

3. Import the translated JSON file back into Zingtree. The Import option lets you overwrite an existing tree, or create a new tree.

One great feature within Sisulizer is that it automatically tracks text changes from updated versions of your decision trees; the translation software flags only those changes, so the translator can quickly locate and modify just the new changes.

Learn more about Sisulizer, and get started with your perfectly-translated decision trees.

Tip: Re-translated files can be easily imported back into an existing tree with the “Import and Replace” option, located under More Tools.


Have a suggestion for us, or any other helpful tips to share? Please feel free to send them along!

Updates: Browser Back Button, Scoring Enhancements

Updates2

Up until today, people using your decision trees needed to click the Back button inside of the tree itself in order to move to the previous step.

For short content embedded on a web page that was doable, but for longer content or Zingtree-hosted decision trees the natural inclination was to click the browser’s Back button to view the previous page; this would not act as the end-user expected.

Today’s update makes the browser’s Back button work exactly as you’d expect:

  • For Zingtree hosted trees, or our Agent portal, clicking Back goes to the previous node.
  • For trees embedded in your web site, you can select the new “Make Browser’s BACK Button go to Previous Node” option in the Advanced Publishing Options area of the Publish page. This will give you new embed code to use to activate this feature.

We also added some enhancements to Scoring:

  • We increased the maximum number of buttons per node from 30 to 50. This is especially helpful for those with complex scoring scenarios.
  • The Simple Overview shows what variable is used in the scoring process for each node.
  • Editing scoring nodes with incomplete links or ranges from 0 to 0 saves properly.

Now that we’ve made back work properly, we’re looking ahead. If you have suggestions for us on how to make Zingtree better, please let us know!

New! Customize Your Decision Tree with Zingtree Themes

We’ve always believed in custom decision trees. It’s important to build question-and-answer style troubleshooters and FAQs as seamless extensions of your brand to not only solve customer problems, but also to make people feel more happy with your company’s identity.

While we’ve always offered ways to add your own custom CSS for personalization, we’re excited to launch a new feature that helps guide you through with a live preview. With our new Zingtree Themes, you can mix and match colors and navigation styles to create your perfect decision tree.

Here’s how to get started: 

1. Login to your Zingtree account, select the decision tree you wish to customize and then go to its Settings page.

2. Locate the Theme / CSS Customization section at the right of the page and select to Pick a Theme.

3. You’ll be presented with a live preview of your style choices within a decision tree. At the top of the window, you’ll see options for Theme (colors) and Style to try out.

4. For now, you can select a range of classic colors and pair it with your ideal navigation style – buttons or panels. For this example, we’ve chosen “Moonlight” grey with the Panels style.

5. Upon selecting either option, you’ll automatically be able to see a live preview of your customizations in the display window. Once you’ve found the perfect match, just click Save!

zingtree-themes

6. Once Saved, your selected theme will appear in the CSS file window of your Settings page.

For those who prefer an alternate way, you can still upload a custom CSS file or download our simple CSS file to modify in order to customize the colors, node styles, icons and more that appear.

Ready to get started? Log in or sign up for a Zingtree account today!

4 Unexpected Ways to Personalize Decision Trees

Anyone with a Zingtree account can make a decision tree (trust us, we designed it to be simple!), but it takes a certain level of commitment to your trees and your organizational needs to take things just a little bit further.

Customization is one of our strong points; we understand the importance of creating an extension of your brand within the decision trees you build. For that reason, we made it as easy as possible to personalize troubleshooters, FAQ’s, scripts and more in a few fun, helpful ways.

1. Images

Visuals can often go over-looked when it comes to more technical use-cases. In fact, around 65% of people are “visual learners” — appeal to the majority! Including how-to’s and other types of images into your decision trees can help your users understand what you’re trying to convey as well as beautify the whole process.

2. GIFs

Images that can actually move are incredibly useful for describing specific steps, pointing out where one needs to click to on your website, and even injecting a bit of personality into decision trees. Inserting GIFs in your trees can help customers understand and absorb much more easily than a general, text-heavy explanation.

3. Icons

Small, yet mighty tools of design, icons are just another way to customize your decision trees’ look and feel. Zingtree taps into the amazing power of FontAwesome, so you can add the icons you want just by inserting the proper HTML. For example, to add a little car icon to a button, just insert this code into the button text:

<i class=”fa fa-car”></i>

4. Custom CSS

For everything else and then some, upload your own custom CSS file to our platform, or download our simple CSS file. You can use Zingtree styling to modify every element to your liking —  tweak everything from colors and icons (mentioned above), to logos and fonts.

Looking for more great ways to build your decision trees? View our blog for inspiration, ideas and more.

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!

Updates: Decision Tree Customization and More

updates-blog

There’s nothing we love more than hearing from you. Your issues and uses of Zingtree. Which is why our March 8th update was inspired in response to several customers who asked for more ways to tailor the look and feel of your Zingtrees. Plus, we added a few more nifty reporting options, and some general cleanup based on your feedback.

We have more details on customization here, but here’s the summary of what else is new:

  • We now have a LinkedIn group set up for discussing all things Zingtree.
  • New option to customize by including custom CSS in Zingtree hosted, iFrame deployments.
  • Fixed alignment on deployed nodes with 1 or 2 buttons across.
  • Page titles and buttons can now include HTML — including FontAwesome icon code.
  • Clicks and usage reports with no data no longer show an error message. (h/t Blair)
  • Better session tracking reporting, with more accurate button click information.
  • Added source-tracking for iFrame.
  • Zingtree-hosted deployments now have tracking for individual agents or traffic sources.
  • The sessions list report shows total time for each session.
  • Properly track button clicks to open link nodes.

Have a feature request? Let us know! We’re listening.