Category Archives: Customization

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

Tags: , , , , , , | Comments

How to Pick the Best Live Chat Solution

April 19, 2018 | Categories: Customer Support, Customization, Intercom | by Debbie McCormick

We’re huge fans of live chat – at Zingtree, it has been a terrific way for us to get to know our customers and their needs. Not only is live chat proven to be the most sought-after way to contact a company, it also is a sound way to respond to site visitors and potential customers in a quicker and more personalized way. With many viable solutions out on the market, it can be difficult to narrow down your options to find the best possible one for your use case. For Zingtree, Intercom chat has been a gamechanger (you can read all about how we use Intercom and what it’s best features are here).

To nudge companies in the right direction, Practical eCommerce came up with a list of live chat features that should always be at the top of the list. Here’s just a sampling of their article that we thoroughly enjoyed:

Phone, email, and web support still rank as important when it comes to instilling trust. But the presence of live chat exceeds them all — even if shoppers don’t use it. Compared to other methods of communication, 92 percent of consumers prefer communicating via live chat. Roughly 80 percent prefer communicating via social networks.

Via MarTech

Here’s why live chat appeals to shoppers.

  • Quicker than any other method.
  • Allows visitors to multitask.
  • Instills trust.
  • Helps reduce the language barrier.
  • Can be implemented proactively.

The list that Practical eCommerce included is a great checklist to keep in mind when shopping around for a live chat support tool. From the complete list, we hand-picked some of the top live chat features you need to look out for:

  1. Canned responses
  2. Knowledge base or frequently-ask-questions integration
  3. File upload support
  4. Support and agent ratings
  5. Visitor tracking
  6. Chat tags and keywords
  7. Analytics integration

Self-service support is hugely popular among the majority of consumers – the ability to integrate with knowledge base customer support tools, like interactive decision trees, tutorials, and FAQs, is the perfect way to streamline support efforts and link online support systems together better. We use it ourselves to make sure that our support presence is simple, straightforward, and always helpful. Whenever customer data is collected through a decision tree form, this information can be stored and sent directly to the live chat window in order to fill in information gaps, as well as give you a better understanding of who you are talking to and what issues they are dealing with.

Keep reading on the Practical eCommerce blog for the rest of their recommended live chat implementation features, and get in touch with us to talk about how to get the most from your live chat and knowledge base integration.

Tags: , , , , | Comments

3 Simple Ways to Show Customers That You (Really) Care

February 15, 2018 | Categories: Customer Support, Customization | by Tiffany

While February is typically reserved for the romantics of the world and sharing appreciation to those in our lives, we believe the practice of showing people that you care should be a year-round effort. For businesses in industries from retail to technology and everywhere in between, customer appreciation and true customer care are vastly important to long-term successes.

From a purely bottom-line perspective, happy and loyal customers are worth up to 10 times as much as their first purchase on average. From a more human point of view, happy and loyal customers are more informed about the product, satisfied with the results or experience, and get far more use out of a purchase. So, what are some simple ways to insert more customer care into your over-arching customer support strategy?

1. Pay attention to their feedback (and make it easy for them to provide it).

Customer feedback is golden – for every customer who complains about a product or service you’re offering, 26 other customers remain silent. Every part of customer feedback should be carefully considered, analyzed internally, and taken into action when needed in order to really show that you are listening to what your customers have to say. To show your customers that you are really listening would be to:

  • Ask for their ideas. Find a way to kickstart a discussion and open up their ideas with clever questions that can open the feedback they provide.
  • Reward their suggestions. No one incentive is ever recommended, as it largely depends on the type of company in question. Some offer cash, vouchers, discounts, or other value-based incentives.
  • Send them a ‘thanks.’ Always send a thank you! Your thanks will show your customers that you care about how they’re enjoying the product or service and thank them for choosing you.

With the right tools and platforms in place to collect this valuable data – like an embedded feedback form or survey – you’ll be able to take the guesswork and manual effort out of the gathering, analyzing, and taking action on customer feedback.

2. Personalize and humanize the service they’re getting.

When providing a service, you should always make the customer feel as if it is personal to them. This can be as simple as using their name during contact or through online communications; it’s about going the extra mile to make sure they know they’re being heard. This can be adapted and worked into customer service training programs, used when crafting your customer-facing newsletters, and tapped into during any other customer interaction that may be had.

Going hand-in-hand with personalization is the concept of being human – at no point should the customer feel like they’re talking to a robot when on the line with your customer service team. If you have one basic call script and a team of agents reading from the same one, but no one includes any personalization or humanity into the interaction, the customer will likely walk away feeling disconnected. 

3. Always ask, never assume.

Rather than assuming what your customer might expect from you, it’s far more effective and engaging (and less risky) to ask them. Research shows that businesses are wrong more than 50% of the time due to assumptions, which will easily result in an annoying customer experience that could have easily been dealt with from the very start of any interaction.

Ask questions, gently nudge for more information, and listen intently to the response. If you reach out for further help with new product ideas and other suggestions and actually put those into practice, customers will know that you care and that they have an impact on (and direct connection to) your business. The real way to show customers you care about them is to take action to improve their experiences; show gratitude by proving you’re listening, and take the feedback to your advantage to work toward a better future.

Many of our own customers have submitted feature requests, brand new use cases, and incredibly helpful suggestions that we’ve taken to heart and implemented over the course of many, many decision tree updates over the years – it’s been a win-win situation for ourselves as a growing and evolving product, and them as customers gaining more value every day out of what we offer.

If you’re looking for an easier way to personalize the customer experience or allow your employees to connect and collect better data, see how a decision tree gives you full flexibility in the way your customers are being cared for. If you need more guidance, our team is more than happy to assist you – reach out to us for more advice!

Tags: , , , | Comments

Generating Custom Documents Using Document Nodes

December 6, 2017 | Categories: Customization, How To, Product Updates | by Bill Zing


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.
  • Variables introduced from calls to Webhooks.

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.

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.

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. 

Tags: , , , , | Comments

Decision Tree Customizations – Animated Themes and Custom Colors

September 27, 2017 | Categories: Customization, How To, Product Updates, Zingtree News | by Bill Zing

One of the most common requests we have had from customers is to make it easier to make Zingtree decision trees look even more awesome. So our design team and engineers worked together to make new animated themes, some colorful static themes, and an easy-to-use mechanism to make tree color customizations easy.

You can try this now on one of your existing decision trees. Go to the Settings tool, then click Display, Pick a Color Theme. If you don’t have a tree built yet, try it using one of our Demo trees.

Once you launch the customizer, you can choose from various themes, and also customize the color scheme used in each theme. The control panel is easy to use – it looks like this:

This video shows some of the capabilities:

Here are a couple of examples of what your decision trees can look like:

Default View with Panels

Animated Radio Buttons View with Panels

Advanced Customization – Technical Details

Zingtree’s theme and color customization scheme works by generating a CSS file, which controls how your decision tree appears. If you want even more customization, you can:

  1. Extract the CSS file that Zingtree builds – this is in the Custom CSS URL field in Settings. (Just open that URL in your browser.)
  2. Modify the file in any text editor.
  3. Upload the modified file to your own server. (Note that this file must be accessible via an https URL. If needed, we can host it for you. Just ask!)
  4. Enter the URL of the new file in the Custom CSS URL field in the Settings tool.

Like this? Love this? Have a suggestion to make customizations even better? Let us know!

Credits: Iggy made the animated themes, and McDeb did some tweaks and cleanup to make them work with our customization scheme. Great stuff, people!

Tags: , , | Comments

How to Customize Your Decision Trees with Color Buttons

August 22, 2017 | Categories: Customization | by Bill Zing

Customization is one aspect of decision tree creation that we’re really big on — Zingtree’s new Custom Buttons are the latest extension of that practice. With this tool, you can create buttons that look a little something like this:

Overview: All About Custom Buttons

With the new Custom Buttons, you can make a range of adjustments to the style of your decision tree buttons, including:

  • Setting a button color
  • Adding an icon to a button
  • Combining colors and icons
  • Creating your own custom buttons (CSS)

Customizing the style of a button is done by prefixing the button text with special classes. To choose a color, use a prefix like:

  • .btn-orange
  • .btn-red
  • .btn-green
  • .btn-blue
  • .btn-yellow
  • .btn-sky
  • .btn-purple
  • .btn-pink

To add an icon that helps to show a little more context, add a prefix like:

  • .btn-yes
  • .btn-no
  • .btn-careful
  • .btn-caret
  • .btn-arrow
  • .btn-thumbs-up
  • .btn-thumbs-down
  • .btn-information
  • .btn-question

You can even make a special combo, mixing colors and icons together. For example, .btn-yes.btn-green will appear as:

 

Check out our Button Customization decision tree in the Zingtree Gallery to see more of the styling options in action. 

Setting Up Custom Buttons

  1. Go to Overview, and edit the node to customize.
  2. Click Edit Buttons.
  3. Edit the button text, and prefix it with one of the color or icon options. For example, to make a red Stop button, enter:
  4. Click Save Changes when you’re done.

Other Decision Tree Customizations

The ability to customize decision trees is something that we offer to all plan types and free trial users. Some of the styling options provided include:

  • Adding videos, GIFs, and image-based media.
  • Inserting custom CSS files to adjust the overall look and feel
  • Publishing and presenting as a fun pop-up overlay.
  • Applying a pre-made color theme to spice things up.

Love this new customization feature? Have any ideas for other awesome ways to make your decision trees look and feel even better?

Send us feedback!

| Comments

Publishing Pop-Up Decision Trees

July 26, 2017 | Categories: Customization, How To, Product Updates, Zingtree News | by Bill Zing

Zingtree makes it fun to include decision trees on your site by enabling them to appear on top of any page, simply by clicking a button. We call this publishing method a “pop-up overlay.” You can easily customize the button color, text, and look of the trees.

You can also include multiple trees on one page. Try these examples:

    

 

Here’s how to set up pop-up overlays:

  1. Click the My Trees button at the top of the screen.
  2. Choose the tree to embed.
  3. Select Publishing Links.
  4. Click Pop-up Overlay via Button Click.
  5. Copy the default button code to your web site, or click the Advanced Options button to do some cool customization.

Shortcut: Go here to create a button that launches a pop-up overlay for your tree.

We think this is yet another cool way to incorporate interactive decision trees into your web site. Do you like it? Or have a better idea?

Send us feedback and let us know what you think!

| Comments

Custom Themes with CSS: A Look At Duda’s Decision Trees

January 25, 2017 | Categories: Customization, Use Cases | by Bill Zing

Duda is a is a self-service software suite built for creating optimized, responsive and personalized websites for businesses. As a company with a large focus on customer communication, support and self-service solutions, they take advantage of interactive troubleshooter decision trees with a custom theme to help site visitors help themselves.

Created with powerful custom CSS for decision trees, Duda was able to create a completely unique and personal experience through Zingtree with a theme that fits seamlessly with their brand. Complex in its code, the experts at Duda built a truly incredible customized decision tree for their customers that we’re in awe of!

You can view the live tree here, and see some previews below.

The tree’s Welcome Page has a clean, beautiful design that showcases each major section of knowledge base information. 

 

Learn more about personalizing decision trees with Zingtree Custom CSS, and see some great tree examples on the Zingtree Gallery. Any questions? Let’s talk!

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

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

October 12, 2016 | Categories: Customization, For Beginners, How To | by Bill Zing

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.

Tags: , , , , , | Comments