Zingtree iFrame + Ada.support Web Chat Integration (Zendesk Guide Knowledgebase)

Purpose:

This SOP outlines the process of using Zingtree within our Zendesk Guide knowledgebase to enable self-service troubleshooting and escalate to a chat message through Ada.cx if the customer encounters difficulties in resolving their issue independently. The SOP covers the implementation of two methods: embedding Zingtree within a Zendesk article and using a popup iframe for the same purpose within a Zendesk Guide Category page (both deployments can be done by following the instructions on the belowmentioned Zingtree documentation.

Table of Contents:

1. Video Demonstration: Embedding Zingtree in a Zendesk Article

2. Video Demonstration: Using a Popup iFrame

3. Node Configuration in Zingtree

4. JavaScript Implementation in Zendesk Pages

5. Explanation of JavaScript Functionality

6. Ada Greeting Settings

7. Embed 2 by Ada Documentation

8. Zingtree Publishing and Deployment Documentation

1. Video Demonstration: Embedding Zingtree in a Zendesk Article

Download here.

2. Video Demonstration: Using a Popup iFrame

Download here.

3. Node Configuration in Zingtree

In the Zingtree troubleshooting tree, make sure to configure the "Javascript Message" field within the content node. This field allows us to send a JavaScript message to the parent page whenever this node is used in the tree.

4. JavaScript Implementation in Zendesk Pages

Below is the JavaScript code used to integrate Zingtree into Zendesk "Category" and "Article" pages. Note that this script allows chat escalation when customers reach the end of the troubleshooting process. This is particually going to be implemented to your respective article.hbs files within your Zendesk theme. If your new to coding or have never updated your Guide template before please ensure to follow Zendesk's documentation.

<script>

// Define adaSettings with different greetings

var adaSettingsOrderStatus = {

greeting: "63374728a16e955135df25e3"

};




var adaSettingsOtherPage = {

greeting: "6500b875eade39f7602a1276"

};




// Function to handle messages

function receiveMessage(event) {

// Check the origin of the message to ensure it's from a trusted source

if (event.origin === "https://zingtree.com") { // Replace with the actual origin

// Check the message content or data

if (event.data === "Launch") {

// Determine which adaSettings to use based on the page or condition

var useAdaSettings = adaSettingsOtherPage; // Change to adaSettingsOrderStatus if needed




// Do something when the "Launch" message is received from the iframe

window.adaSettings = useAdaSettings;

window.adaEmbed.toggle();

}

}

}




// Attach message event listener

window.addEventListener("message", receiveMessage, false);

</script>

5. Explanation of JavaScript Functionality

The JavaScript code above serves the following purposes:

*OPTIONAL* It defines two sets of `adaSettings` based on the specific page or condition. (these are only used if you need the chat to start at a specific point in the conversation. You can replace the greeting IDs with your answer IDs from Ada if needed). See below example on how to find your Answer ID:

- It listens for a "Launch" message from an embedded Zingtree iframe (originating from "https://zingtree.com").

- When the "Launch" message is received, it selects the appropriate `adaSettings` and triggers the Ada chat widget using `window.adaEmbed.toggle()`.

6. Ada Greeting Settings

Ada's "greeting" setting can be used to direct customers to a specific answer within Ada, bypassing the standard conversation start. This is useful when customers have completed self-service troubleshooting and need advanced assistance. Configure the "greeting" setting with the corresponding greeting ID.

7. Embed 2 by Ada Documentation

For detailed information on integrating Ada's Embed 2 into your web pages, including customization options and advanced functionalities, please refer to the [Embed 2 by Ada documentation].

8. Zingtree Publishing and Deployment Documentation

To learn more about publishing and deploying Zingtree decision trees, refer to Zingtree's [Publishing and Deployment documentation].

This SOP provides a step-by-step guide for implementing Zingtree for self-service troubleshooting and chat escalation using Ada embedded within Zendesk. It includes video demonstrations, screenshots, and explanations of JavaScript functionality for both embedding methods.