Scripting Tool

Here we discuss an embedded tool provided with the ChaseData CCaaS system, which allows to create and maintain what in the system is known as custom Scripts, or HTML pages with optional embedded scripting (e.g. JavaScript) for presenting to the agent when handling calls.

In the Scripts section under General Tools and Data, when configuring a Script page, we were presented with a Script Content checkbox for the case of Dynamic Scripts, and we indicated that by clicking on it would start the Scripting Tool, or Script Editor. Refer to the following picture.

The following picture provides an example of a typical script page, already put together, opened in the Script Editor when we click on that icon.

Notice that the Script Editor has two areas; the left area is a control area where available editing tools are presented, while the right area displays the script page layout and the HTML Code Editor. Refer to the following picture for the same example with the Code Editor enabled.

By clicking on the Preview button at the bottom of the control area, you can see how the resulting Script page will be displayed. Refer to the following picture.

As you may have already deducted from this, it is possible to edit a Script page in two ways: by designing the page through inserting HTML elements on the form in a guided way; or by typing the HTML code/commands directly.  Furthermore, you can complement one with the other. As a matter of fact, you could even edit the Script page externally using a text or HTML editor.

Let’s see how it looks when we create a new Script page from scratch; since there’s nothing yet, the script Inspector shows an empty area indicating to start adding Elements. Refer to the following picture.

However, even though the script page is still empty, the Script Editor always adds basic HTML head information and stylesheet reference, which you can see by enabling the Code Editor area. Refer to the following picture.

If you have the basic Script page pre-designed externally, you probably want to copy the HTML code from the predesigned page and paste it in the body of your new Script page using the Code Editor. Otherwise, you can build the Script page using the different Elements available with the Script Editor; but you should be familiar with HTML and CSS in order to understand these elements and build a Script page properly.

The following pictures provide a glance to the available Elements.

Do note that these Elements are not just basic HTML elements, but rather pre-configured composite items to facilitate quickly building a Script page with typical components; when you drag and drop one of these items, they will be pre-configured with corresponding default components and values.

We’ll go through an exercise to show how to add and modify items. So, let’s start from scratch and add a Form from Dynamic Data using a drag-and-drop action from the control area to the layout area; this is a pre-configured dynamic form for Contact Information inserted in the body of the HTML page. Refer to the following picture.

The form contains a panel, which in turn contains a panel-heading, panel-body, and panel-footer. Within the panel-body there are three form-groups (First, Last, Address), and a section with three items (City, State, ZIP).

For our learning exercise, we’ll keep the form and panel, but remove the items within the panel-body (to then add our own); so, we click and delete each of them. Refer to the following pictures.

First thing we’ll do is to modify the panel-heading; we’ll edit the title, make it a header of level 3, and change the background color. We’ll make the changes directly on the Code Editor, both on HTML and CSS. Refer to the following pictures (before and after changes).

Let’s now modify the panel-footer. Refer to the following pictures.

At this point, within the body of the HTML page, we have a form with a panel within it, which in turn has a panel-heading, an empty panel-body, and a panel-footer. Let’s proceed to add some top-level form-groups within the panel-body. We’ll do this directly on the Code Editor by adding both HTML and CSS items. Refer to the following pictures.

Let’s now work on fields that correspond to the first form-group (Contact Person). There are many ways to do this, but for our example we’ll go the simple route; we’ll create separate form-groups for each line or row of fields, and we’ll do it directly on the Code Editor.

Here’s the first one, which contains two control-input elements, one for First Name and one for Last Name.

Notice that the style sheet (CSS) is indicating an even width distribution (49.5% and 49.5%) between the two control-input elements, allowing them to be in the same row, if there’s enough room.

Also notice that we have used hashmark-delimited ChaseData CCaaS fieldnames (standard or custom) for placeholder (e.g. #FirstName#); this will populate those form elements with the corresponding Contact record information in the database.

Let’s now continue with the rest of the form-groups and their embedded control-input elements for the rest of the Contact Person fields; Title will be on its own, Primary Phone and Alternate Phone will be grouped (i.e. same line, if possible), and Email and Spoke To will also be grouped. Refer to the following pictures.

Let’s proceed now to Company Information; the first three (Company Name, Address, Address2) are just like Title, full-line items. Refer to the following pictures.

We’ll do something a little different for the rest of the Company Information fields (City, State, ZIP); first, we will allow them to be on the same row, if possible; second, we will create a scroll list for State, using the select control. Refer to the following pictures.

We had to add some padding to the form-group that follows (Notes Section) to fix a side effect of what we just did. Refer to the following pictures.

Let’s now add a textarea for Notes Section. Refer to the following pictures.

And finally, a form-group with a scroll list within it, for Disposition the Call, using the select control once again. Refer to the following pictures.

To give it a final touch, we could change the panel background. Refer to the following pictures.

Following are previews of how the final Script page would look like. The width of the display window will have an effect; however, the look and feel should be the same if the HTML tags and style sheet (CSS) are properly put together (either with the Code Editor or using the ChaseData CCaaS pre-defined Elements).

We have concluded our example, which should give you a good jump start into creating or modifying Script pages. You should be aware of several things. For simplicity, we have built this example emphasizing the Code Editor, but the tool does provide pre-built Elements and an attribute editor (Inspector), which in most cases will allow you to build a Script page without the need to use the Code Editor.

Also for simplicity, we have not necessarily followed best practices for HTML and CSS; although effective, it could be argued that there are cleaner ways to do it. As a matter of fact, there are many ways to put together the same Script page, and you should follow the approach and design that makes more sense to you.

Finally, you could incorporate Java Script to your Script page, which we are not addressing in this guide.

As reference, let us share a couple of links where you can find HTML and CSS reference information; we do not endorse any of them, just provide them to you as one place to look at, but there are many more available.

https://www.w3schools.com/tags/default.asp

https://www.w3schools.com/cssref/default.asp

https://www.w3schools.com/jsref/default.asp