Engage Voice | Use case #1:
Using Branch, WWW, and Javascript tools

Dan Clay owns a propane and propane accessories company in Arlen, Texas, and currently the company takes all large propane orders over the phone. He has a script set up that agents can use to take down important information about the customer, including their name, phone number, email address, and shipping address. 
 
Recently, Dan’s company starts receiving a larger volume of calls, meaning longer queue wait times. Dan also notices that the majority of the calls are from existing customers looking to make another purchase. To reduce customer wait times, Dan wants to reduce the time it takes for agent’s to document customer information. 
 
Dan decides to configure his existing script to have his agents select at the start of the call whether the caller is a new or existing customer. Depending on their selection, the agent will be presented with one of two scripts. If the caller is a new customer, then the agent will get the existing script where they can take down the new customer’s information. However, if the caller is an existing customer, the agent will get a script that presents them with the requested customer. 
 
However, Dan’s company recently moved to using a third party CRM system to manage their customer’s history and information. If Dan would like to present the agent with customer information in his script, then he will need to set up web requests and JavaScript code to pull specific customer information from the CRM and populate it into the script.
 
Please note: Advanced knowledge of JavaScript and web requests is required to correctly set up this script.

Goals

Edit an existing script that can:
1. Allow agents to select if a caller is a new or existing customer
2. Route customers to two different scripting paths determined by whether the customer is new or existing

a. Create one scripting path for new customers which will contain Dan’s existing script page

b. Create a second scripting path for existing customers 

3. For the second scripting path, collect customer information from the CRM and populate that info in the script

Plan

Edit an existing script by adding the following:
1. Page tool that contains the following:

a. Radio Buttons element that allows agent’s to choose if the customer is new or existing

b. Button element agents can click to navigate to the next page (determined by the radio button selection)

2. Branch tool that splits the script into two different script paths: a script path for existing customers and a script path for new customers
3. Javascript tool and a WWW tool that sends and verifies the agent’s credentials to the CRM. This is so the system can properly collect information from the CRM 
4. A second Javascript tool and WWW tool that retrieves the specified customer information 
5. A third Javascript tool that takes the collected customer information and populates it into a script page
6. Page tool that contains the following:

a. Text Block element containing tags that will populate the customer information collected from the CRM

Lessons

1. Using and configuring the Branch tool
2. Using and configuring the WWW tool
3. Using and configuring the Javascript tool

Recommended reading

Preconditions

Remember that Dan is editing an existing script, which he built using the instructions provided in Use case #1Use case #2, and Use case #3. In order to follow alongside the steps below, he needs to make sure that his script is built according to the specifications of the previous use cases.
 
Keep in mind that for some steps, an advanced  knowledge of JavaScript and web requests is required to correctly set up this script. Dan may ask for help from his CSM.

Actions

1. Adding and connecting Script Studio tools to the existing script
2. Configuring the first Page tool: adding a Radio Buttons and Button element
3. Configuring the WWW tools
4. Configuring the Javascript tools
5. Configuring the second Page tool: adding a Text Block element and data tags
6. Configuring the Branch tool

Step 1: Adding and connecting Script Studio tools to the existing script

1. Open the existing script in Script Studio
2. Disconnect the Start tool from the existing Page tool used for collecting customer information and move the existing Page tool to the right to make space enough for a two new tools
3. Click and drag a new Page tool onto the canvas and place it to the right of the Start tool
4. Connect the Start tool to the new Page tool. This page will be for selecting if the caller is a new or existing customer
5. Click and drag a Branch tool onto the canvas and place it between the new Page tool and the existing Page tool
6. Connect the new Page tool to the Branch tool
7. Connect the Branch tool to the existing Page tool used for collecting customer information. This page will now be used for new customers 
8. Click and drag three Javascript tools to the canvas, with enough space to place WWW tools in between the three. The first Javascript tool should be placed below the Branch tool
9. Click and drag two WWW tools to the canvas and place them between the three Javascript tools. They should be organized this way: Javascript > WWW > Javascript > WWW > Javascript
10. Click and drag a Page tool onto the canvas and place it to the right of the last Javascript tool
11. Connect the Branch tool to the first Javascript tool
12. Connect the first Javascript tool to the first WWW tool
13. Connect the first WWW tool to the second Javascript tool
14. Connect the second Javascript tool to the second WWW tool
15. Connect the second WWW tool to the third and last Javascript tool
16. Connect the third Javascript tool to the Page tool placed in step 10
Adding and connecting Script Studio tools to the existing script

Step 2: Configuring the first Page tool: adding a Radio Buttons and Button element

1. In Script Studio, hover your mouse over the first Page tool (connected to the Start tool) and select Edit from the popup menu
2. Name your tool via the Tool Name field at top right (optional)
3. Add a Radio Buttons element from the Add Element dropdown menu
4. Hover your mouse over the Radio Buttons element and select the gear icon at top right of the element
5. Select Edit to open the Radio configuration modal window

a. Provide a name from the element via the Field Name element. This should not start with a number or contain any spaces or special characters

b. Under the Options section, select the Add Option button 

c. Name this radio button option under the Name field. We’ll name this option ‘Existing customer’

d. Insert a value for this option in the Value field. For example, ‘existing’

e. Add another radio button option by selecting the Add Option button

f. Name this radio button option under the Name field. We’ll name this option ‘New customer’

g. Insert a value for this option in the Value field. For example, ‘new’

h. Toggle the Required Field setting on

i. Click Done to save the Radio Buttons element

Configuring the first Page tool: adding a Radio Buttons
6. Add a Button element from the Add Element dropdown menu
7. Drag the Button element beneath the Radio Buttons element
8. Hover your mouse over the Button element and select the gear icon at top right of the element
9. Select Edit to open the Button configuration modal window

a. Give your button a name via the Input Label setting

b. Navigate to the Actions tab

c. Select Navigation under Button Action

d. Under Change View (on click), select Go to Page and Next Tool from the two dropdown menus

e. Select Done to save the Button element

10. Configure the rest of the script page as desired
11. Select Save & close at top left
12. Select Render to test and view your script

Step 3: Configuring the WWW tools

1. In Script Studio, hover your mouse over the first WWW tool and select Edit from the popup menu 
2. Name your tool via the Tool Name field at top right (optional)
3. Select Post from the dropdown menu at far left of the API request field at the top of the page
4. Insert your API request in the form of a URL in the field at the top of the page
5. Navigate to the URL Params tab
6. Click the + Add Variable text beneath the Note section
7. Enter the name of the parameter, or variable, you’d like to add to the web request. This will depend on the server to which you are making the request, and the type of information you’re requesting. For example, since Dan’s using this web request to verify the agent’s credentials, Dan might add a variable named password
8. Type the name of the value or use the {{add a tag}} button at far right
9. Repeat steps 6-7 for any other variables you wish to add
Configuring the WWW tools
11. Click Send at far right of the the API request field to execute the request
12. Once you’ve finished configuring this WWW tool, click Save & close at top left
13. In Script Studio, hover your mouse over the second WWW tool and select Edit from the popup menu
14. Select Get from the dropdown menu at far left of the API request field at the top of the page
15. Insert your API request in the form of a URL in the field at the top of the page
16. Repeat steps 5-10. Remember: this request is for gathering customer information (e.g., phone number, street address, etc.), so the variables for this web request will reflect the information Dan would like to populate into the script

Step 4: Configuring the Javascript tools

1. In Script Studio, hover your mouse over the first Javascript tool and select Edit from the popup menu

a. Name your tool via the Tool Name field at top right (optional)

b. Click into the first line and begin inputting your JavaScript code, or use Ctrl + Space to bring up a dropdown list of preexisting JavaScript functions

c. Continue entering code as desired

i. Reference the variables added in the first WWW tool (see substeps 6-9 under Step 3)

ii. Use the putData() JavaScript function to ensure the first web request performs correctly

d. Click Save & close at top left once you’ve finished configuring your code
Configuring the Javascript tools 1
2. In Script Studio, hover your mouse over the second Javascript tool and select Edit from the popup menu

a. Name your tool via the Tool Name field at top right (optional)

b. Click into the first line and begin inputting your JavaScript code, or use Ctrl + Space to bring up a dropdown list of preexisting JavaScript functions

c. Continue entering code as desired

i. Reference the variables added in the second WWW tool (see substep 15 under Step 3)

d. Click Save & close at top left once you’ve finished configuring your code

Configuring the Javascript tools 2
3. In Script Studio, hover your mouse over the last Javascript tool and select Edit from the popup menu

a. Name your tool via the Tool Name field at top right (optional)

b. Click into the first line and begin inputting your JavaScript code, or use Ctrl + Space to bring up a dropdown list of preexisting JavaScript functions. 

c. Continue entering code as desired

i. Reference the variables added in the second WWW tool (see substep 15 under Step 3)

ii. Use the getData() JavaScript function to retrieve information acquired from the second WWW tool

iii. Use the putData() JavaScript function to place the retrieved customer information on the script page (see Step 5)

d. Click Save & close at top left once you’ve finished configuring your code
Configuring the Javascript tools 3
4. Click Render at the top right to view and test your script

Step 5: Configuring the second Page tool: adding a Text Block element and data tags

1. In Script Studio, hover your mouse over the Page tool at the end of the existing customer script path. Select Edit from the popup menu
2. Name your script page via the Tool Name field at top right
3. Add a Text Block element via the Add Element dropdown menu
4. Hover your mouse over the Text Block element and select the gear icon at top right
5. Select Edit to open the Text configuration modal window

a. Select the {{add a tag}} button at top right of the text box to open the Available data - tagging modal window

i. Navigate to the Model tab

ii. Search for and select one of the tags associated with the JavaScript variable provided in the third JavaScript tool. This variable represents one part of the requested customer information 

iii. Click Done to populate that tag in the text box

b. Repeat step 4a for all additional customer information tags you’d like to populate in the Text Block element

c. Configure the remaining Text Block element as desired

d. Click Done

Configuring the second Page tool: adding a Text Block element and data tags
6. Click Save & close at the top left
7. Select Render at the top right to view and test your script

Step 6: Configuring the Branch tool

1. In Script Studio, hover your mouse over the Branch tool and select Edit from the popup menu
2. Name your Branch tool via the Tool Name field at top right
3. In the first branching statement, under the If section, configure the following:

a. In the first field, select {{add a tag}} at far right to open the Available data - tagging modal window

i. Navigate to the Model tab

ii. Locate and select the tag associated with the Radio Buttons element you added in the first Page tool (Step 2)

iii. Select Done to close the modal window

b. Select Equals from the dropdown menu

c. In the last field, select {{add a tag}} at far right to open the Available data - tagging modal window

i. Navigate to the Value From Data Source tab

ii. Select the value you assigned to the ‘New Customer’ option in the Radio Buttons element. In this case, the value would be ‘new’

4. Under Then, go to…, select the script Page tool agents will use for new customers
5. Select the + Add case text below the first branching statement. This will create a new branching statement
6. In the new branching statement, under the If section, configure the following:

a. In the first field, select {{add a tag}} at far right to open the Available data - tagging modal window

i. Navigate to the Model tab

ii. Locate and select the tag associated with the Radio Buttons element you added in the first Page tool (Step 2)

iii. Select Done to close the modal window

b. Select Equals from the dropdown menu

c. In the last field, select {{add a tag}} at far right to open the Available data - tagging modal window

i. Navigate to the Value From Data Source tab

ii. Select the value you assigned to the ‘Existing Customer’ option in the Radio Buttons element. In this case, the value would be ‘existing’

7. Under Then, go to…, select the first Javascript tool in the existing customers script path 
8. Click Save & close at top left
9. Select Render at top right to view and test your script
Configuring the Branch tool
© 1999-2021 RingCentral, Inc. All rights reserved.
Close X
Thanks!
We've sent you a link, please check your phone!
Please allow a full minute between phone number submissions.
There was an issue with SMS sending. Please try again. If the issue persists, please contact support.