Tag Archives: webhooks

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!

Updates: Launch Apps when Trees Load (and a Couple More)

Untitled design-7

This week’s update has focused on some improvements in the Settings tool. The big news is that a Zingtree Webhook app can be launched when a tree opens. This is useful for populating data in the tree from third party sources before the tree displays.

Some other notable enhancements:

  • Bug fix: Updating Settings now saves a snapshot of the tree and clears the tree cache.
  • Update: Scoring nodes can now be set as root node.
  • Bug Fix: Scores on link buttons transfer to subtrees. (Thanks Christina).

As always, send us your ideas!

Sending and Receiving Data from Decision Trees with Webhooks

YouAsked

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

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

Example

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

Try this demo tree in the Zingtree Gallery here.

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

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

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

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

The PHP source code for the webhook URL is here.

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

Process

Here’s a summary of how this works:

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

Adding the Webhook:

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

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

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

Calling the Webhook when a node is visited:

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

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.