Category Archives: API

Sending and Receiving Data from Decision Trees with Webhooks

September 20, 2018 | Categories: API, How To, Integrations, Product Updates | by Bill Zing

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 makes use of Webhooks with JSON formatted data. In fact, a lot of the tools we utilize work the same way.

Here’s an 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.

Webhooks 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.

Universal Parameters

Every call to the webhook URL you provide always includes the following parameters:

  • node_id
  • session_id

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.

This article was originally published on April 28, 2016, and has been updated for accuracy. 

Tags: , , , , , , , , | Comments

Zapier Decision Tree Integrations with Zingtree

May 23, 2018 | Categories: API, CRM, Customization, How To, Integrations, Product Updates, Salesforce, Zingtree News | by Bill Zing

zingtree zapier integration

Our Zapier app makes it easy to send data collected during each Zingtree session to 1000+ 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 into 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. 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. Click the Apps/Webhooks tab.
  3. Click Add App/Webhook. You’ll see something like this:

  4. Under Call App or Webhook, select Zapier: Zingtree to Email. This is the new Zap you created.
  5. Click Save Changes.
  6. 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!

Tags: , , , , , , | Comments

How to Use Process Flows to Build Mailchimp Lists

December 5, 2017 | Categories: API, Business, How To, Integrations, Product Updates | by Bill Zing

As end-users are using your Zingtree decision trees, you can add any information collected during the session into a MailChimp mailing list. Zingtree has a handy MailChimp App for just this purpose.

Here’s how to add data from Zingtree to a MailChimp list.

  1. In Zingtree, go to Account, My Apps, and click add Add MailChimp. The MailChimp configuration screen appears:

  2. Enter a name for this App. For example: “Add to Mailing List”.
  3. Enter the MailChimp API Key. To find your API Key, log into MailChimp, and select Account, Extra, API Keys. Generate an API key if you haven’t done so already.
  4. Enter your MailChimp List ID into the configuration. In MailChimp, click Lists, then select Settings from the drop-down next to your list. The List ID will be at the bottom of the page.
  5. Click Add MailChimp App when finished.
  6. Edit the node where you want to add to a MailChimp list. Look under Show Advanced Options, Send Message To App. Pick the name of the app you just created: “MailChimp: Add to Mailing List”.

  7. Important: The field names you are using in Zingtree must match the merge tag names in MailChimp. So if you have merge tags NAME and ADDRESS in MailChimp, you would use variables named NAME and ADDRESS in Zingtree. You can find the merge tags for each field in MailChimp from List, Settings under List fields and *|MERGE|* tags. They will appear like this:

  8. In Zingtree, the email address of the end user should be a variable named either EMAIL or email.

Once the end-user reaches the node you built in step 6, MailChimp will receive the information collected by Zingtree and add all matching fields to the list for email.

Do you have a cool application for this feature? Let us know on our Feedback page.

Tags: , , | Comments

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

May 12, 2017 | Categories: API, CRM, How To, Integrations, Salesforce | by Bill Zing

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.

Tags: , , , , , , , | Comments

Updates: Reporting Enhancements, API Tweaks

January 20, 2017 | Categories: Analytics & Reports, API, Product Updates | by Bill Zing

updates-blog

Being able to see how much time and money you are saving with Zingtree makes us all feel good and useful. So this past week we’ve been working with some of our customers to make reporting cleaner.

Here’s what’s new with reporting:

  • Fix: All Tree Stats, Clicks and Usage and Popular Nodes now using same measurement techniques for engagement (Olivier).
  • Fix: Session Detail report now shows duration from first click (Jane A.).
  • Update: Added Agent Details to All Agents report.

Our APIs and integrations also needed a few tweaks to help solve some business problems for our customers. Here’s what’s new on the API side:

  • Fix: Zendesk session ID stuffer leaves existing session IDs in place in case of error submitting ticket form (Iggy).
  • Fix: Back button keeps data entry field values. (Chrispy).
  • Update for Zendesk tag matching (Jorge).
  • Update: /api/tree-tag-search.php now takes a minimum number of tags to match (Jorge).
  • Update: Zendesk API now returns a blank instead of “false” if no session IDs present (Bryan M.).
  • Fix: API for tree tag matching strips trailing commas from search string.
  • Update: Tree tag matching now returns results in alphabetical order.

Got any great ideas? Chat us up!

Tags: , , , , , , , | Comments

Making Dynamic Data Collection Forms

January 10, 2017 | Categories: API, Call Centers, Customization, How To | by Bill Zing

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!

Tags: , , , , , , , | Comments

Integrating Zingtree with Freshdesk

January 3, 2017 | Categories: API, Freshdesk, Integrations | by Bill Zing

feshdesk call center scripts

Update October 2018: See this article for an even better way to integrate Freshdesk and Zingtree.

Freshdesk is one of our most popular integrations, so we’ve made sure it’s easy to import Zingtree session transcripts into a Freshdesk ticket. With the integration in place, support staff can see all of the steps a customer went through in a decision tree before needing to ask for help – it’s a huge time-saver for agents!

When the integration is set up, agents will see a Zingtree transcript with each ticket, like this:

Requirements:

You will need the Estate or Forest plan from Freshdesk to accomplish this integration.

Overview:

You’ll first need Freshdesk Admin privileges to complete the process. This method will create a new field called Zingtree Session Data; it gets hidden from the customer, but it appears for the agent answering the ticket. It includes the entire Q&A transcript of the user’s Zingtree session prior to opening a new ticket in Freshdesk.

Here’s how to set up the Freshdesk side:

  1. In Freshdesk, go to your Admin panel, and select Ticket Fields.
  2. Create a new “Multi Line Text”  ticket field named Zingtree Session Data. (This field must be set up as “display to customer” and “customer can edit”, but will be hidden from the end-user once you implement step #7 below. Trust us!) The properties will look like this:
  3. Click Done.
  4. Click Save to add the field.
  5. Next go to Admin, Portals, and click  Customize Portal next to the portal that will receive Zingtree data.
  6. Go to Layout and Pages, Portal Pages.
  7. Click New Ticket, then add this code to the new ticket edit area: 
    <script src="//zingtree.com/api/freshdesk-new-ticket.js"></script>

    This is what it looks like (new code outlined in red):

  8. Click Save and Publish.

On the Zingtree side:

You need to make Link Nodes that go to your Freshdesk New Ticket form, and add this to the end of the URL:
?session_id=#session# 

Example:

If this is the link to your ticket form:
http://support.mycompany.com/support/tickets/new

Use this URL within a Zingtree Link Node to go to the ticket form, and have the Zingtree session transcript transferred:

http://support.mycompany.com/support/tickets/new?session_id=#session#

We’ve set up a sample Gallery tree (“Freshdesk Integration example”) for you to examine here. You can copy this tree, and then change the URL link to point to your own Freshdesk domain.

Follow these steps and in 15 minutes or less you’ll have a powerful integration between Freshdesk and your Zingtrees.

Any questions? Reach out to us anytime.

Tags: , , , , , , , , , , , , , , , , | Comments

Managing a “Forest” of Decision Trees Using Tagging

October 7, 2016 | Categories: API, How To, Integrations, Product Updates | by Bill Zing

As Zingtree is getting more and more larger companies as clients, we’ve received a lot of requests for being able to better manage a large library of trees. Some customers are planning on creating hundreds or even thousands of trees.  Our latest update makes it even easier to locate and organize large decision tree “forests.”

First Step: Tag Your Trees!

If you haven’t done so already, you should tag your trees. A tag is like a category – any tree can have multiple tags. This is the first step to being better organized.

To tag a tree:

  1. Start at My Trees, and select a tree.
  2. Go to the Settings tool.
  3. Enter a tag, or pick from a list of existing tags:
  4. Click Update Settings to save.

Locating Trees by Tag

Once you’ve tagged your trees, Zingtree has a few different ways to make it easy to stay organized:

  • For Authors: Filter your list of trees by tag in the My Trees tool.
  • For Authors: Use Tree Search to enter a list of tags to find trees that have any or all of the desired tags.
  • For Agents or End-Users: Authors can use new Macros to present a list of trees to an end-user that contain any or all tags in a list.

Authors: Filter by Tag in the My Trees Tool

When you use the My Trees tool, you’ll see an option at the top right for Has Tag. This contains a list of all the decision tree tags in use for your organization:

Select a tag, and you’ll see all the trees that have that tag.

Authors: Use Tree Search

For more powerful searching using tags, use the Search button in My Trees. You have four different search options. These two apply to tag matching:

  • Match Tree Tags (any): Enter a comma separated list of tags. The results return a list of trees that include any of the tags in the list.
  • Match Tree Tags (all):  Enter a comma separated list of tags. The results return a list of trees that include all of the tags in the list.

Using Macros to Present Lists of Trees by Tag

Inside the content area of any tree, you can insert a special macro to show all the trees in your organization that match any or all tags in a list. You can examine the Tree Tag Demo in the Zingtree Gallery to see how this is done.

The two macros you can insert into the content area are:

  • ##treetaglist-any: tags##
  • ##treetaglist-all: tags##

In the examples above, replace tags with a comma separated list of tags. treetaglist-any will return a list of trees that match any of the tags in the list.  treetaglist-all returns only those trees that contain all the tags in the list.

Examples:

#treetaglist-any: demo,gallery## – matches trees that are tagged with either demo or gallery.

#treetaglist-all: demo,gallery## – matches trees that are tagged with both demo and gallery.

Shortcut: When editing a node, you can insert these macros from the Templates editing tool in the Content editor:

Bonus: Dynamic Lists

When publishing a tree, if you add a tags= parameter to the tree URL, you can dynamically import the list of tags used by the tree macros.  Be sure to separate the tags with | characters. Example:

http://zingtree.com/host.php?style=panels&tree_id=287688184&tags=demo|gallery

Inside the tree, this macro will list trees that have tags that match ALL the tags in the passed-in tags= parameter:

##treetaglist-all:##

This macro will list  trees that have tags that match ANY tags in the passed-in tags= parameter:

##treetaglist-any:##

Node #6 from the Tree Tag Demo in the Zingtree Gallery shows how this is done. Try it!

Integrations: Dynamic Tree Lists by Passing Tags

Our customers Corey and John asked for a way to send a list of tags from their Help Desk system, and open a specific tree or show a list of matching trees. Here’s how to do it.

  1. Go to My Trees, and click Search.
  2. Use one of the tree tag searches.
  3. In the search results, click the Integration Link Template button at the bottom of the page.  This will show you a URL to use as the basis for linking from your Help Desk/CRM system to the Zingtree search.  You can add style parameters to this link from the Advanced Hosting Options page as well to ensure your trees appear with the desired look and feel.

Example:

This link is derived from a search in the Zingtree Gallery. The search, style and transition parameters are changed from the template example to customize the result.

http://zingtree.com/host-trees.php?jump=1&key=6a103737e44e4aa6e1e4b6b0bcb46f83&type=treetag-all&search=demo,gallery&style=panels&transition=fade

Credits

Thanks to Corey, John, Elise, Trey and a few others for sharing their tree management needs.  If you have a suggestion, comment, or question, please reach out and talk to us!

Tags: , , , , , , , | Comments

New! REST API for Decision Tree Sessions

February 5, 2016 | Categories: API, Integrations, Zingtree News | by Bill Zing

NL-header-updates3

An important piece of any web application is to be able to connect to other systems. And, while we’ve had a basic API in place for a while, we’ve received requests to make it more standard. So, today we’re happy to announce the release of our REST API and PHP wrapper!

REST is a common standard for applications to exchange information. Ours works like all the other popular systems, and is easy to implement.

Using our API, you can retrieve:

  • Session data, and a full transcript of what occurred during the session.
  • Form field entries during a session.

Go here to see the Zingtree REST API reference, with examples.

And thanks to “Red Ben” for his helpful feedback during the process!

 

Tags: , , , , , , , , , , | Comments

Tree Search API

November 29, 2015 | Categories: API, How To, Integrations, Product Updates | by Bill Zing

Some of our customers with a lot of trees have asked us to incorporate a tree search feature into Zingtree.  This is handy for both internal use (Call Centers/Agent Scripting), as well as external use (support and troubleshooting). The goal is to make it easy for someone to find the proper tree.

Our Tree Search uses two pieces of information to locate trees: the tree Name, and the tree’s Tags.  Both of these are found in Settings.

Agent Interface

For internal use, our Agent Portal now includes the ability to find trees in two ways:

  • You can filter trees by tags from a drop-down list.
  • You can enter text to search.

Zingtree Hosted End-User Interface

For external use, you can have a search form where your end-users enter a search term, and any trees with Names or Tags matching the search term are displayed as links.

The easiest way is to use a Zingtree hosted search form.  Go to your Organizations and Billing page, and locate the Hosted Tree Search link at the bottom of the page. Click this link to open the search form.  You can share this URL with your customers.

An example using the Zingtree Gallery is here.

Tree Search API

If you want to include Tree Search on your own site, you’ll need to make use of our simple API. You can see a demo of the API in action here.

The process is:

  1. Locate your API Key at the bottom of the Organizations and Billing page.
  2. Create your search form.
  3. When the search is submitted, call our API like this: 
    http://zingtree.com/api/tree-search.php?apikey={your API key}&search={your urlencoded search query)
  4. The API returns a JSON object of trees that match the search query. The JSON has the tree ID, and the tree name. The data looks like this: 
    {"815089605":"Agent Script - Set Appointment",
"164166011":"Pet Rock Demo",
"666464897":"Simple Sales Funnel Demo",
"506992892":"Training Simulation Template",
"867287049":"Zingtree Tour"}
  5. Parse the JSON data to make links for each tree.

We’ve built a PHP sample to illustrate one way to implement this API. Download the example source code here.

You can try the sample here.

 

Tags: , , , , , , , , | Comments