Zingtree Classic

 

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

Update: There is a more recent Zingtree app for Salesforce, which is recommended. Please start here.

Original Post

The Zingtree Agent Scripting App for Salesforce makes it easy to add powerful call center scripts to Salesforce – both with Classic and Lightning.

Here’s how to set up the app:

Installing the App in Salesforce

Follow the prompts that Salesforce provides.

Object Support

The steps below are for Case objects, but you can install Zingtree decision tree scripts into any of the following object types:

  • Account
  • Asset
  • Campaign
  • Case
  • Contact
  • Contract
  • Idea
  • Lead
  • Opportunity
  • Order
  • Solution
  • User

You can also include scripts into custom objects with a little bit of Salesforce coding. See the end of this article for details.

Configure the App

You need to tell the Zingtree app what tree ID you will launch to start. The app also needs an API key from Zingtree. Here’s how to set this up:

  1. Click the App Launcher in Salesforce, from the upper left of the screen.

  2. Locate the Zingtree Configuration Link.

  3. Enter the Tree ID you want to start with, as well as the Zingtree API Key (which can be found here).

  4. Click Save when done.

Customizing  Layouts

Layouts can be set up in both Classic and Lightning. The following shows how to set up Case Layouts. 

For Lightning

You can have your agent script decision tree appear right inside the Case Layout screen. Here’s one way to display it:

Here’s how to setup the layout:

  1. In the Lightning, go to Setup, Platform Tools, User Interface, Lightning App Builder, and click edit by the Case Record page.

     

  2. At Page, Tabs, click Add Tab.

     

  3. You’ll see a new tab called “Details”. Like this:

     

  4. Click on Add Components Here.
  5. Pick Visualforce from the Components List on the left side.

     

  6. Pick Zingtree Page from the list of Visualforce page names on the right side, and set the height and label. We recommend a height of 1400 or more pixels to eliminate scrolling. Here’s how the setup should look:

     

  7. You’ll want to rename the tab label from “Details” to “Agent Scripting”, or something similar. Click on “Details”, and edit the tab label like so:

     

  8. Click Save to finish updating your Case Layout.


For Salesforce Classic

The Zingtree Agent Scripting App can be included as a collapsible section on the Case Layout page, or any other object type page.

Your decision tree becomes a collapsible section in your Case Details page, like so:

Here’s how it’s set up on a Case Layout page:

  1. Go to Setup, Build, Customize, Case Layouts, and click Edit on the Case Layout.

     

  2. Drag a new Section into your Case Layout page where you want the Zingtree script to appear (via Fields, Section):

     

  3. Click the Section Properties, and give the section one column, and a name like so:

     

  4. From the top, locate Visualforce Pages, Zingtree Page, and drag this into the new Section:

     

  5. Set the Properties of the Visualforce page for 800 pixels height (recommended), and set Show scrollbars, like so:

     

  6. Save the case layout.

     

Setting Up Field Mapping

When launching a Zingtree decision tree, you can have fields from your Salesforce case/object sent to Zingtree as variables. Changing these values in the decision tree can also update the case record.

The key to variable mapping is to make variables in Zingtree that begin with sf_ , and that match the Salesforce field names. Both standard and custom fields are supported.

To start, view  your field names from the Case Fields screen in setup, under Build, Customize, Cases, Fields:

For Standard fields, use the Field Name column. In the example below, the value of the Description field in the Salesforce object will be sent to Zingtree as the variable sf_Description.

Custom fields appear below the standard fields. You use the API name as the field name. In this example, if your tree has a variable called sf_ZingTree__Product__c, the Salesforce field Product would be sent along. Here’s how the Custom fields appear in Salesforce:

Adding to Custom Object Types

You can use your scripts in Custom Objects as well. You need to create a separate VisualForce file for each custom object with the following code:
 
<apex:page standardController="Test__c" extensions="ZingTree.zingTreePageController">
    <apex:pageBlock >
        <apex:pageBlockSection title="ZingTree">

        </apex:pageBlockSection>
    </apex:pageBlock>
    <iframe src="{!url}" scrolling="true" id="theframe" width="100%" height="1000" frameborder="false"/>
                
</apex:page>
Make sure to put the object name in standardController attribute. For example: replace Test__c with Custom_Object__c .


Updating the Salesforce Case or other Objects from Zingtree

See this article for setting up the Salesforce Object Updater from Zingtree

 

New Experience (Coming Soon)

 

Update: There is a more recent Zingtree app for Salesforce, which is recommended. Please start here.

Original Post

The Zingtree Agent Scripting App for Salesforce makes it easy to add powerful call center scripts to Salesforce – both with Classic and Lightning.

Here’s how to set up the app:

Installing the App in Salesforce

Follow the prompts that Salesforce provides.

Object Support

The steps below are for Case objects, but you can install Zingtree decision tree scripts into any of the following object types:

  • Account
  • Asset
  • Campaign
  • Case
  • Contact
  • Contract
  • Idea
  • Lead
  • Opportunity
  • Order
  • Solution
  • User

You can also include scripts into custom objects with a little bit of Salesforce coding. See the end of this article for details.

Configure the App

You need to tell the Zingtree app what tree ID you will launch to start. The app also needs an API key from Zingtree. Here’s how to set this up:

  1. Click the App Launcher in Salesforce, from the upper left of the screen.

  2. Locate the Zingtree Configuration Link.

  3. Enter the Tree ID you want to start with, as well as the Zingtree API Key (which can be found here).

  4. Click Save when done.

Customizing  Layouts

Layouts can be set up in both Classic and Lightning. The following shows how to set up Case Layouts. 

For Lightning

You can have your agent script decision tree appear right inside the Case Layout screen. Here’s one way to display it:

Here’s how to setup the layout:

  1. In the Lightning, go to Setup, Platform Tools, User Interface, Lightning App Builder, and click edit by the Case Record page.

     

  2. At Page, Tabs, click Add Tab.

     

  3. You’ll see a new tab called “Details”. Like this:

     

  4. Click on Add Components Here.
  5. Pick Visualforce from the Components List on the left side.

     

  6. Pick Zingtree Page from the list of Visualforce page names on the right side, and set the height and label. We recommend a height of 1400 or more pixels to eliminate scrolling. Here’s how the setup should look:

     

  7. You’ll want to rename the tab label from “Details” to “Agent Scripting”, or something similar. Click on “Details”, and edit the tab label like so:

     

  8. Click Save to finish updating your Case Layout.


For Salesforce Classic

The Zingtree Agent Scripting App can be included as a collapsible section on the Case Layout page, or any other object type page.

Your decision tree becomes a collapsible section in your Case Details page, like so:

Here’s how it’s set up on a Case Layout page:

  1. Go to Setup, Build, Customize, Case Layouts, and click Edit on the Case Layout.

     

  2. Drag a new Section into your Case Layout page where you want the Zingtree script to appear (via Fields, Section):

     

  3. Click the Section Properties, and give the section one column, and a name like so:

     

  4. From the top, locate Visualforce Pages, Zingtree Page, and drag this into the new Section:

     

  5. Set the Properties of the Visualforce page for 800 pixels height (recommended), and set Show scrollbars, like so:

     

  6. Save the case layout.

     

Setting Up Field Mapping

When launching a Zingtree decision tree, you can have fields from your Salesforce case/object sent to Zingtree as variables. Changing these values in the decision tree can also update the case record.

The key to variable mapping is to make variables in Zingtree that begin with sf_ , and that match the Salesforce field names. Both standard and custom fields are supported.

To start, view  your field names from the Case Fields screen in setup, under Build, Customize, Cases, Fields:

For Standard fields, use the Field Name column. In the example below, the value of the Description field in the Salesforce object will be sent to Zingtree as the variable sf_Description.

Custom fields appear below the standard fields. You use the API name as the field name. In this example, if your tree has a variable called sf_ZingTree__Product__c, the Salesforce field Product would be sent along. Here’s how the Custom fields appear in Salesforce:

Adding to Custom Object Types

You can use your scripts in Custom Objects as well. You need to create a separate VisualForce file for each custom object with the following code:
 
<apex:page standardController="Test__c" extensions="ZingTree.zingTreePageController">
    <apex:pageBlock >
        <apex:pageBlockSection title="ZingTree">

        </apex:pageBlockSection>
    </apex:pageBlock>
    <iframe src="{!url}" scrolling="true" id="theframe" width="100%" height="1000" frameborder="false"/>
                
</apex:page>
Make sure to put the object name in standardController attribute. For example: replace Test__c with Custom_Object__c .


Updating the Salesforce Case or other Objects from Zingtree

See this article for setting up the Salesforce Object Updater from Zingtree