Sending JS Messages from Embedded Decision Trees to Container Pages

 

This documentation is for Zingtree Classis. Click the tab above if you are using the New Experience (Beta). 

When you’re embedding a decision tree into a web page (via Zingtree’s iFrame embed code), you have the ability to send Javascript messages to the container page. This is useful for custom integrations. For example, one of our customers has built an outbound call center platform around Zingtree scripting, and uses this capability to control the call. They can trigger “hang up” or “stop screen recording” events right from within Zingtree. This is extremely powerful, and simple to implement.

Another way we use this is to pop-up a chat window after collecting data. This article explains how it’s done with Intercom chat.

How it Works

Each node in a Zingtree decision tree has an option to send a Javascript message to the containing page. When editing a content node, go to the Other tab, and look for the Send Javascript Message box:

The messages can also contain variables, or the session ID. You can also format these like JSON if you prefer. For example, to send a variable called name and the session ID to the container in JSON format, you might make a message that looks like this:

{name:#name#, session:#session#}

In your containing page, you’ll make a standard message listener in Javascript that looks for these messages. (Note that by default Zingtree also sends status messages to the container, including the state of data collected, breadcrumb/history info, as well as the current node number).

Here’s some basic Javascript code for trapping messages and sending them to the browser console:

<script>

// Listen to message from child window
// we get BREADCRUMBS: message, and insert breadcrumb data into the containing page DOM

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

eventer(messageEvent,function(e) {
   console.log(e.data) ;
   
},false);

 

Now it’s your turn! If you can come up with creative ways to use this feature, please share.

 

 

When you’re embedding a decision tree into a web page (via Zingtree’s iFrame embed code), you have the ability to send Javascript messages to the container page. This is useful for custom integrations. For example, one of our customers has built an outbound call center platform around Zingtree scripting, and uses this capability to control the call. They can trigger “hang up” or “stop screen recording” events right from within Zingtree. This is extremely powerful, and simple to implement.

Another way we use this is to pop-up a chat window after collecting data. This article explains how it’s done with Intercom chat.

How it Works

Each node in a Zingtree decision tree has an option to send a Javascript message to the containing page. When editing a content node, go to the Other tab, and look for the Send Javascript Message box:

The messages can also contain variables, or the session ID. You can also format these like JSON if you prefer. For example, to send a variable called name and the session ID to the container in JSON format, you might make a message that looks like this:

{name:#name#, session:#session#}

In your containing page, you’ll make a standard message listener in Javascript that looks for these messages. (Note that by default Zingtree also sends status messages to the container, including the state of data collected, breadcrumb/history info, as well as the current node number).

Here’s some basic Javascript code for trapping messages and sending them to the browser console:

<script>

// Listen to message from child window
// we get BREADCRUMBS: message, and insert breadcrumb data into the containing page DOM

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

eventer(messageEvent,function(e) {
   console.log(e.data) ;
   
},false);

 

Now it’s your turn! If you can come up with creative ways to use this feature, please share.