Engage Voice | Editing Page elements: the basics
-
Script Designer
-
Script Studio
-
The Page tool and its elements
-
Tagging data in scripts
-
The WWW tool
-
The JavaScript tool
-
The Branch tool
-
The Data Builder tool
-
The Recording tool
-
The Mapping tool
-
Agent scripting knowledge base
-
Agent scripting use cases: The basics
-
Agent scripting use cases: Advanced
-
References
-
Phone books
-
Email templates
Now that you know what the Page tool’s elements are and how to adjust them on a script page, let’s dive into the element configuration process. Since there are many elements with a variety of different functions, you’ll find you have many configuration options.
We’ll discuss the more common options here, and in the following articles, we’ll go into additional and advanced options for the elements that require it. Please note that only those elements that contain additional configuration options not covered in this article will be addressed in separate articles.
Editing elements
Click Edit on the gear icon of any Page element and you’ll see a modal window appear with three to four tabs in the top row: Configuration, Scripting, Styles, and Actions. Simply click on the tabs to access configuration settings for each. Bear in mind that each tab will contain different options depending upon the element in question.
Configuration
Click on the Configuration tab for basic element configuration options. Here, you’ll find a number of settings that cover everything from naming to data variable values. Let’s go over the most common options.
Field Name
The Field Name setting lets you choose a name for the field in question. This name will be used to create model, or custom, data tags, both for future reference and for reporting purposes. Please note that the name cannot contain any spaces or special characters, and it also cannot start with a number.
Input Label
The Input Label setting refers to the text that will be displayed above the element. You can use this setting to give agents more information on what they’ll be encountering within the element itself — or you can use it to give them directions on how to interact with the element. This information can be entered manually, and sometimes you’ll have the option to choose a tag for this field’s data as well.
Help Text
The Help Text setting lets you either choose a tag or enter your own text, which will then appear in the field (in light grey font) to serve as a guide for the agent so they know what information to provide in the field.
Data Source
The Data Source setting only appears for elements that offer the agent an array of options to choose from, such as a checkbox list or dropdown menu selection. You can choose an array from any existing, compatible data source and apply that array to this setting. When the script is rendered, it will supply your agents with the array inputs you chose in the form of options they can select from.
Please note that this field only accepts input in the form of a data set or an array. If you would like to know more about creating a data set or array and learn how to implement that into a script, you can read this article on using the Data Builder tool for more information.
To access a data source, use the {{add a tag}} button at far right of the Data Source field located in the Configuration tab of select elements. A modal window labeled Available Data - Tagging will pop up. Navigate to the Model tab and select your table array data source from a list of options.
When you finish selecting your data source and close the window, the following options will appear below: Option Name Attribute and Option Value Attribute. Alternatively, if you have created a Table element and you want to insert a data source into your script via a table, you’ll see the settings Column Name and Data Key appear instead.
Option Name Attribute and Option Value Attribute (or Column Name and Data Key)
The Option Name Attribute and Option Value Attribute settings (or Column Name and Data Key settings if you’re configuring a Table element) only appear once you've chosen a data set or array from the Data Source setting, as described above.
Once you've identified the data source that holds your options, all you have to do is direct the system to the attribute within that data set or array that you wish to generate your options from. An attribute is just a data set that lives within your larger data source. (If you’re displaying your data in a Table element, you’ll be dealing with column names and data keys, which are analogous to attributes and attribute values).
You can use the Option Name Attribute and Option Value Attribute settings to direct the system to create options that come from your data set. To do so, you can use the dropdown menu in the Option Name Attribute setting to select a name for the attribute of your choice. This setting can take a name from any one of the existing data points in your array.
Next, you can use the dropdown menu for the Option Value Attribute setting to select a value you wish to assign to that attribute. The value simply refers to the data you wish to actually display to the agent as options. The Option Value Attribute value can be whatever you wish to assign to the option, or you can have the value match your Option Name Attribute. Please note that the values you enter here can be accessed elsewhere in the platform for tracking and reporting purposes.
If you would like to learn more about how to create and incorporate a data set or array into your script, please refer to this article on using the Data Builder tool for more information.
Options
The Options setting only appears for elements that offer the agent multiple options to choose from, such as the Checkbox or Dropdown Select element.
Think of this setting as the manual counterpart to the Data Source setting we discussed above. While that setting generates a list of your options from an existing data set that you point the system to, this setting allows you to enter each option manually. Please note: You can only use either the Options setting or the Data Source setting. You cannot use both settings simultaneously.
Wherever this setting is available, you’ll be introduced to the following settings:
- Name: Enter a display name for your option here. This is the option name that the agent will see
- Value: Choose a value, or alternate identifier, for your option here. A value can be anything you like, from an abbreviation of the option name to an external identification code. The value you choose will be used for tracking and reporting purposes later. Please note that values do not appear anywhere on the agent interface — they are strictly for admin use
- Add Option: Click this button to add more options, and click the x to the right of any option to delete it
- Sort: Click here to sort your options in alphabetical order
An alternative to the Sort setting is to manually sort your options by dragging and dropping each option above or below other options.
Add Option settings for a Checkbox element:
Add Option checkbox settings; rendered
Multiple Default Value
If your script element contains multiple options and you would like one (or more) of these options to be preselected on the script by default, then click the Add Default button under the Multiple Default Value section and enter that option’s value into the field that appears.
Multiple Default Value setting
Multiple Default Value setting; rendered
Required Field
The Required Field setting simply indicates whether you wish the element to be a required field. Toggle on to prevent the agent from continuing if their entry into this field is incorrect or incomplete. When toggled on for any element, you’ll see an asterisk beside the element’s name in the Page Configuration pane as well as in the rendered version of the script.
Scripting
The Scripting tab is an advanced option and does not appear for all elements. When it does appear, it means you have the option to use JavaScript to further customize your element. This can be useful in situations in which you don’t wish to bring multiple JavaScript tools into the script to execute custom logic based on user input. You’ll see the following setting available for most elements:
- Run the following script on [your element]: This field lets you choose one of the following JavaScript focus actions for your element:
- Blur: An action where the user removes their cursor (or keyboard focus) from the element in question and clicks anywhere else on the page
- Click: An action that occurs when the user clicks on the element in question
- Change: An action that occurs when an OnKey event takes place. For example, if the user begins typing into a text box, each keystroke is considered a Change action
Styles
Use the Styles tab to edit your element’s appearance. The options here will vary depending on the element you choose. You will always, however, have the option to edit the element’s color.
- Color: Use this field to access a color configuration menu and make a selection from a color wheel or slider, or choose your own custom color using the built-in color picker. Please note that your color style options may differ depending upon your browser’s settings and capabilities
- Element CSS: Use this field to enter your own custom element display code. Please note that once you choose a color via the Color field, its CSS will automatically populate in the Element CSS field below
- Display Inline: This setting only appears for certain elements that can be displayed inline. Toggle this option on if you wish to display your element’s content inline (for radio buttons, for example, this means your button options will display in a horizontal line)
Actions
This tab allows you to choose the action you want each element to take. Options will vary here as well, but you’ll always be able to use this tab to create disabled and hidden conditions. Disabled and hidden conditions are settings that allow you to disable or completely hide an element based on the conditions you specify.
Let’s say you wish to present an agent with various options to continue their workflow, but the options you plan to display will depend entirely upon the answer they chose for a preceding question.
- Disabled Condition: If you choose this option, it means that if the condition you specify here is not met, then the agent will be able to see the potential options, but they won’t be able to interact with them
- Hidden Condition: If you choose this option, it means that if the condition you specify here is not met, then the agent will not be able to see or interact with the potential options at all
When you create a disabled or hidden condition, you’re just telling the system: hide or disable this element based on this condition (or set of conditions).
Let’s say you want to add your customers to a mailing list — but only if they give their consent.
One way you can achieve this is by creating a ‘consent checkbox’ for agents to click when a customer consents to being placed on your mailing list. Then you can add an Email Input element that remains hidden or disabled until that consent checkbox is clicked. Just remember that you’ll have to add a bit of JavaScript to indicate the conditions under which the Email Input field will become accessible.
Please note that only experienced JavaScript developers should attempt to use disabled/hidden condition settings (contact your CSM if you’re interested in utilizing our professional services to help you build more complex and/or JavaScript-based scripts).
Please also note that if you run custom JavaScript on an element, it will perform both the action outlined in your code and the action specified under this tab.
Another setting you might see under this tab is a toggle button that lets you specify how to deal with invalid inputs.
- Disable if form is invalid: When toggled on, this setting will prevent users from accessing the button if the form is incomplete or any input is invalid
When you finish editing your page elements, click Done to close the modal window and return to the Page Configuration screen. Then click Render to preview your changes as they’ll appear on a live script. (Don’t forget to save your changes frequently as you go along!)
Now that we’ve reviewed all the settings that can be found in most (or all) Page tool elements, we’ll spend some time in the following articles reviewing any settings specific to each individual element. Let’s review the Button element first.
© 1999-2022 RingCentral, Inc. Tous droits réservés.