Category Archives: How To

How-to and tutorial articles.

How to Embed a Decision Tree on Your Website

November 8, 2018 | Categories: How To, WordPress | by Bill Zing

Interactive decision trees are most helpful and easily available to those who need them when included directly in your website. We made it easy to complete that ideal flow of customer interaction and self-help with options to embed your Zingtree decision trees wherever you may need them.

1. Embed Zingtrees into any web page

– Log in to your Zingtree account and go to My Trees.

– Tap on the decision tree you want to be embedded, then Publish.

Screen Shot 2016-02-15 at 9.44.04 AM

– You’ll see a few options for publishing your tree, including an embed code that you can paste directly into any web page, like this one below.

– Go to Advanced Embed Options to see how your Zingtrees look with different options in real-time, such as buttons vs. panels.

2. Add a pop-up decision tree as a clickable button.

You can also include decision trees on your site with a button, called a “pop-up overlay.” You can easily customize the button color, text, and look of the trees, and include multiple trees on one page. Here’s just a few examples:

    
 

3. Use the Zingtree plugin for WordPress

Simply download and install the plugin to your WordPress account to quickly add Zingtrees to your website anytime!

Examples:

To embed a Zingtree into your web page, enter a short code like this with the ID of your tree:

[ zingtree id=”148196706″ ]

To display in “panels” style and add persistent buttons to the bottom of each page:

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

To hide the name of the tree, and the back button:

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

You can visit our FAQ for more information on embedding and available short code parameters.

Need more help? Just ask our resident experts!

 
This article has been updated to include pop-up overlays.

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

Create Freshdesk Tickets from Zingtree Decision Trees

October 6, 2018 | Categories: Customer Support, Freshdesk, How To, Product Updates | by Bill Zing

Does your company use Freshdesk to manage technical support?

If so, you can use Zingtree decision trees to reduce your technical support team’s workload. Customers can either self-solve their issue, or you can get a new ticket in your Freshdesk that includes all the information from their decision tree session. By effortlessly gathering background information from the customer via the decision tree, you save a lot of time by reducing back-and-forth messages.

Here’s how a ticket generated by Zingtree appears in Freshdesk:

Note how the ticket includes a transcript of the Zingtree session.

Click the button below if you’d like to try a demo tree that generates a ticket in our Freshdesk sandbox:

Setup Overview

It’s easy to set this up – here’s an overview of the process:

  1. Add a new Application to Zingtree for creating Freshdesk Tickets.
  2. Create a “Ticket Submitted” node.
  3. Create a “New Ticket” node to obtain the customer’s name, email, a ticket subject, a description, and optional custom fields.

Add a new Application to Zingtree for creating Freshdesk Tickets.

A Zingtree application can be called from any node. You’ll need to add the Freshdesk App first as follows:

  1. Log into your Zingtree account.
  2. Go to Account > My Apps.
  3. Select the Freshdesk: New Ticket App.
  4. Enter your Freshdesk API key and domain name. (Instructions are on the page.)

  5. Click Add Freshdesk App to save the new App.

Create a “Ticket Submitted” Node

When this node appears, a new ticket is added to your Freshdesk installation. This is the end result of pressing a “Submit Ticket” button inside the decision tree. You can create this node as follows:

  1. Go to Tools > Add Node.
  2. Add a new Content Node.
  3. Give the node a title, and any text you want to appear in the content area – like “Thanks for submitting a ticket” etc.
  4. Click the Apps/Webhooks tab.
  5. Click Add App/Webhook.
  6. Select the Freshdesk App you just created. You should see something like this:

  7. Click Save Changes to save this node.

Now we’re ready to link a ticket entry page to this “Ticket Submitted” node.

Create a “New Ticket” node

After your customer goes through the troubleshooting session, if they haven’t been able to resolve the issue, you can direct them to a node which collects the following info:

  • Name
  • Email
  • Subject for the Ticket
  • Description of the problem.

You use Zingtree’s Data Entry Fields to get this info. The field variables need to be named as follows:

name = fd_name
email = fd_email
subject = fd_subject
description = fd_description

  1. Edit the node where you want the customer to submit the ticket.
  2. Click the Data Entry Fields tab.
  3. Add fields for fd_name, fd_email, fd_subject, fd_description. When you are done, your Data Entry Fields will look something like this:

  4. You can also optionally add Custom Fields into the ticket. In the above example, we have a custom field named product in our Freshdesk installation. So the Zingtree equivalent is fd_cf_product.
  5. If you want to set the status and priority, you can also get variables named fd_status and fd_priority. This is optional.
  6. Click the Action Buttons tab, and add a “Submit” button to go to your submit ticket page.
  7. Save the changes to this node.

Summary

Examine this tree from the Demo Gallery to see a real live setup.

That’s how easy it is to create Freshdesk Tickets from Zingtree. Any questions, comments or suggestions for improvement? Talk to us!

Tags: , , | Comments

How to Send Email from Decision Trees

September 25, 2018 | Categories: Customer Support, How To, Integrations, Product Updates | by Bill Zing

send email from trees

One of the most frequent requests we get from customers is about sending email. We’ve spent a lot of time to make this process as simple as possible.

With Zingtree, you can use Email Nodes to send email in two ways:

  • Automatically, with no end-user interaction.
  • Showing a pre-defined form for the end-user to enter a message.

Emails can include everything you need:

  • The Session transcript.
  • Variables entered during the session.
  • Images and formatted text.
  • Attachments.

Sending  Emails Automatically

Emails can be sent automatically, with no end-user interaction. Start by creating an Email Node as follows:

  1. Click Tools, then Add Node.
  2. Select Email Node as the node type. The Send Method should be set to Send Automatically.
  3. The Email Node editor appears.
  4. Add a Page Title (mostly for your reference when using the Zingtree editing tools)
  5. In Send Email to, enter the delivery email address. You can enter multiple recipient email addresses separated by commas.
  6. Enter a subject and a message. The message can include images, formatted text, or placeholders for variables. For example, if you collect a variable called name, just add #name# into the email body for it to appear.
  7. Check Include Session Data in Email to include the Q&A transcript, and any data collected in the email. You can also check “Securely deliver session data via Link”, which will provide a link to the session information, instead of including it in the email body.
  8. In After Sending, choose a node to go to next. Or, choose Go to URL, and enter a URL to launch instead, like this:
  9. Click Save Changes when finished.

How to Create an Email Form Node

Your end-users can be presented with a stock email form, which looks like this:

You can make a node that displays this form by creating an Email Node as follows:

  1. Click Tools, then Add Node.
  2. Select Email Node as the node type. The Email Node editor appears.
  3. IMPORTANT: For the Send Method, select Show Form Before Sending.
  4. Add a Page Title (mostly for your reference when using the Zingtree editing tools)
  5. Add text for the Send Message button.
  6. In Send Email to, enter the delivery email address. You can enter multiple recipient email addresses separated by commas.
  7. You can enter a default subject or message. These are pre-filled in the email form.
  8. Check Include Session Data in Email to include the Q&A transcript, and any data collected in the email. You can also check “Securely deliver session data via Link”, which will provide a link to the session information, instead of including it in the email body.
  9. In After Sending, choose a node to go to next. Or, choose Go to URL, and enter a URL to launch instead, like this:
  10. Click Save Changes when finished.

Summary

These two methods are the recommended ways to send an email and should be used in place of any other methods.

As always, if you have any ideas to share with us on this or any other features, please let us know!

This article was originally published on June 15, 2018, and has been updated for accuracy. 

Tags: , , , , | Comments

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

The Most Simple Ways to Build an Interactive Decision Tree

August 28, 2018 | Categories: For Beginners, How To | by Bill Zing

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 a 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 whiteboard-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. 

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 trees within the Gallery to check out even more.

How to Import from Spreadsheets

You can also use Google Sheets or Excel to begin building your decision tree in a spreadsheet format, then importing it into your Zingtree account to customize, clean up, and publish. You’ll need to first learn more about the specific rules in place for starting the formation of your decision tree in a spreadsheet. 

Here’s how our example tree used in the tutorials appears in Google Sheets:

Here’s how our example tree used in the tutorials appears in Excel:

Once your decision tree content is looking and feeling well fleshed-out, you can easily import the file from Google Sheets or Excel into Zingtree to refine further before making it live. Here’s how it’s done:

  1. In your spreadsheet, select the entire range of cells for your tree, and copy to the clipboard (Ctrl+C or Cmd+C).
  2. In Zingtree, go to the Import via Copy and Paste tool

  3. Choose Microsoft Excel or Google Sheets as the source, depending on what you used to set up.
  4. Enter a name for your decision tree.
  5. Paste the data copied from step 1 into the data area. (Use Ctrl+V or Cmd+V).
  6. Click Import and Create Tree.

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, and has been updated to include new creation methods. 

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

Generating Custom Documents Using Document Nodes

August 19, 2018 | Categories: Customer Support, How To, Product Updates | by Bill Zing

Updated August 19, 2018, with PDF Generation option.

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 the What Computing Device Do I Need? decision tree from the Zingtree Gallery.

You can also provide PDF files as a download option, or as a link to include in an email.

This companion video illustrates how document nodes work, and how to create and edit them:

Document Nodes Overview

Document Nodes display the content from one or more content 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.
  • Variables set from Data Entry field list boxes or radio buttons.
  • Variables introduced from calls to Webhooks.
  • Merge Variables passed into the session.

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

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 Button Click Variables to important responses.
  2. Create content nodes (with no button options) for all of the possible snippets of content you’ll want to show in the final document.
  3. Create a document node that pulls everything together.

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 a node is inserted in the document, it won’t be re-inserted again.

Continuing On After Creating a Document

You can add a “Next” button to the bottom of the document node, and have the end-user continue on to another node after viewing the generated document. Just configure your document node like you see here:

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.

Making PDF Versions Available

You can provide PDF versions of a generated document in two ways:

  • As a “Download PDF” button when the document node appears.
  • As a document URL, uploaded to the Zingtree servers.

Please note that any PDF file generated is charged to you at $0.01 USD per 500 Kb.

Download PDF button option

Here’s how a document node can appear with a “Download PDF” button:

This can be configured in the Document Node editor like this:


PDF URL option

The other option is to have Zingtree generate a PDF file, upload it to a server, and create a link to the PDF as a Zingtree variable. Here’s how that’s set up in the Document Node editor:

You need to do these three steps:

  1. Select Generate PDF File and Continue.
  2. Enter a PDF URL variable. This variable will contain the URL for your PDF file.
  3. Select a node to go to once the PDF has been generated.

In the above example, the variable pdf_url will contain the URL of the PDF file generated by this document node. See this article to learn how to make links in emails or content nodes to a PDF document URL.

Note that in this setup, the end-user will not see their document node until they open the PDF URL.

PDF hint: Pagination

If you want to force a page break, add ##PDF Page## anywhere in the content area of a node.

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 need a phone, tablet or desktop PC, based on the answers to some questions.

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

This article was originally published on November 29, 2016, and updated on August 19, 2018.

Tags: , , , , | Comments

Decision Trees that Send Notifications via Text Message, Email or Slack

August 14, 2018 | Categories: Business Process Management, How To, Product Updates | by Tiffany

notifications from zingtree

A lot of business processes can be enhanced by sending notifications to people when certain stages are reached. For example, the Zingtree Task Manager makes it easy to notify key stakeholders when a process reaches a certain point, and if they need to act upon it. Notifications are simple messages that can be triggered from any node in your decision tree.

You have these options:

  • Text Messages: You’ll receive a simple SMS message to your mobile phone.
  • Emails: A simple, text email message.
  • Slack: Send a message to any of your Slack channels.

Notifications can be sent to one or more people and can include variables gathered during your Zingtree session.

How to Add Notifications

Text messages, Emails, and Slack Notifications are available via Account > My Apps:

Here’s how to add a notification:

  1. From Account, My Apps, pick from Slack, Text Message or Email notification.
  2. Add information about the notification. Text messages notifications look like this:Email notifications like this:Slack notifications let you select a channel to post to, like this:

    Once you’ve added a notification to your organization, you can attach it to any node.

  3. Edit the node where you want to send the notification from.
  4. Click the Apps/Webhooks tab, and then Add App/Webhook.

  5. Pick the notification you added previously, and enter the message to send. In this example, we’ll choose a Slack notification, and send a message about a new blog post.

    Notice that the message above contains a variable #task_name#. You can include any variables from the Zingtree session in notification messages.

  6. Click Save Changes when done.

You can add several notifications to a node; so, for example, you could send a text message and an email all at once.

Do you have a cool application for using notifications? Please share, or contact us if you have questions or suggestions.

Tags: , , , | Comments

Showing Context in Decision Trees: History and Breadcrumbs

August 8, 2018 | Categories: Call Centers, Customization, How To, Product Updates | by Bill Zing

NL-header-updates3

Update August 2018: You can now include History or Breadcrumbs in embedded trees.

When using a Zingtree, have you ever thought how nice it would be to see some more context of where you are in the tree? Or the steps it took to get to where you are? Come and discover Zingtree’s two contextual publishing options: History and Breadcrumbs.

History allows you to see every step you took while using the tree:

Breadcrumbs show the sequence of node titles that appeared throughout your journey through the tree:

With both options, you can click on a link and travel back to any previous node in your journey. Visit the Zingtree Gallery and see for yourself what your end-users will experience.

How to Add History or Breadcrumbs

The Publishing Links tool makes it easy to add History or Breadcrumbs to your published trees. This works for both Hosted and Embedded trees.

  1. Go to the Publishing Links tool.
  2. Click Advanced Hosting Options underneath Hosted or Embedded.
  3. Select Show History or Show Breadcrumbs from the Path Options:

  4. Use the URL or embed code provided to add the option to your published tree.

Advanced Stuff: Modifying URLs Directly

You can also modify the URL for your published trees to add history or breadcrumbs.

For hosted trees:

  • Add &show_history=1 or &show_breadcrumbs=1 to the URL for the tree.

For embedded trees:

  • Add &embed_history=1 or &embed_breadcrumbs=1 to the iFrame URL.


Enjoy your history and breadcrumbs, and let us know what you think!

This article was originally published on October 23, 2015, and has been updated to reflect recent updates. 

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

How to Setup Zingtree Decision Trees for Business Processes

August 1, 2018 | Categories: Business, Business Process Management, How To, Zingtree News | by Bill Zing

Business Process Management with Zingtree

Getting your organization ready to use business process decision trees via the Zingtree Task Manager is relatively simple.

Here’s an overview of the process:

  1. Setup your organization to use the Task Manager.
  2. Create your “agents”, and assign them to one or more Agent Groups.
  3. Create your decision trees for the workflows your agents will follow.
  4. Assign decision trees to your Agent Groups.
  5. Assign the steps in your workflows to your Agent Groups.
  6. End the workflows with Success or Failure.

Setting Up Agents and Task Manager

To enable your organization top use Task Manager, start by going to Account > My Agents. Select Task Manager for agent logins, like this:

Next, you’ll need to add agent logins – one for each person who will be using the system. Click Add One New Agent, the enter the agent’s name, a login (usually their email), a password, and what groups they are assigned to, like this:

The groups will be used later to determine who is allowed to act on each step of the workflow. In the above example, Joe Smith is assigned to the employee group.

Assigning Decision Trees for Agent Groups

Each tree you create can be assigned to one or more groups. Any agent in the assigned group can start a new project using that tree as a business process workflow. This is done via the Settings tool.

For example, if we want Joe Smith to be able to run a procurement process decision tree, we would assign that tree to the employee group, as follows:

  1. Select the tree from My Trees.
  2. Open the Settings tool.
  3. Under the Groups tab, enter the group or groups to assign to this tree.

Here we entered the employee group:

Be sure to click Update All Settings when finished!

Assigning Nodes to Agent groups

Each step in the business process workflow corresponds to a node in your decision tree. And just like trees, you can assign nodes to agent groups. This has the effect that only agents in that group can act upon a specific node.

Here’s how to assign a group or groups to a node:

  1. Edit the node.
  2. Go to the Groups tab, and enter the group or groups that are allowed to act on this node.

It will look like this:

Click Save Changes when finished.

Now, repeat this for the other nodes in your tree.

Setting Endpoints

A project ends when you reach a node that has a “success” or “failure” result on it. You can set the result of the node as follows:

  1. Edit the node.
  2. Set the Result to Success or Failure, from here:

Handy Tips

Tip #1: The name of the current task can be used as a variable in your tree. Just enter #task_name# where you want the name of the task to appear.

Tip #2: You can see the results and the groups for every node in a tree from the Simple Overview tool. Here’s a procurement tree with the Results and Groups highlighted:

Tip #3: For all your trees, you can see the Agent Groups allowed to start a project via My Trees. Like this:

See more about our online task management tool for streamlining business processes. 

Tags: , , , , | Comments