1 - System Overview
Asternic Scripter lets you build web based interactive decision trees, surveys, dynamic forms or tutorials.
Not only can you embed them in Asterisk based applications like FOP2, Issabel Call Center CE, but also in any kind of web based application that allows you to open or link to external URLs.
Data collected can be saved to any datastore that has a RESTFul API, and dynamic data can be gathered from remote web based tools that offer web based APIs.
In this tutorial we will see how to create a simple form survey and saving the data into the builtin datastore.
2 - Creating a new script
Creating forms is simple: whenever you create a node, you have a "Data Entry" tab where you can add form fields to that particular node.
All of the data entry fields will be listed at the end of the node content, and before the question or answers it might have defined.
For this tutorial we will create a new script, with a "Satisfaction Survey" name.
Once filled, click Save
3 - Adding the data entry node
Once you create your script, you will be back to the scripts view:
We need to add our content. Click the Edit Nodes button to start doing it.
As this is a new script, our node list will be empty:
Go ahead and click the Add button to create our first node.
We will use the name "Satisfaction Survey" and leave it as type Question because we want to have a second step on the survey. Having a question node let us link our node to another one.
As we want to create a form to enter data, we need to click on the Data Entry tab as shown below:
Once there, a new button will reveal: Add Field.
In this tutorial we will use three fields: name, email and survey.
So, click the Add Field button and create our first input form:
We want a single line of text to ask for the customer's name. We will also mark this input as required. The user or agent won't be able to continue unless it fills that input box. Click Add Field to save the data.
Then click Add Field on the node editor one more time to add the email data entry field:
Save it by clicking the Add Field button, and again click Add Field to create the last form entry, this time a likert scale:
Likert scales are widely used to measure attitudes and opinions with a greater degree of nuance than a simple “yes/no” question. Notice that its configuration is a little bit more complex than regular single line inputs.
The label will be the actual question, in this sample we will ask: How would you like to rate our Products or Services for the following parameters?
Notice that we have then Topics and Values. We need to enter them one by line (do not leave an empty line at the end as it will be given as an empty topic or value).
The survey will be presented as a grid with topic as rows and values as columns, as we will see at the end of the tutorial.
4 - Completing the data entry node
After adding the form fields we will see something like this:
Our initial node is not yet completed. We added three form fields, but we now need to give the option to finish the survey. We also want to save results using the built in Scripter data store.
For that we first(1) need to click on the Answers tab and click the Add Answer button. We will give the answer the text Continue.
Our second(2) action will be to click on the Link select box to create a new node, as shown:
On this new node we will be thanking the user for completing the survey, and saving the data in the datastore. Fill the information on the popup and click the Add Node button.
We will see something like this:
Notice how our new node is now created and appears as node 2 in the link select box. Finally click Save to finish with the first node in our Survey.
5 - Saving the Data
The first node is finished and the second node for saving the data was quickly created, but needs to be populated with actual actions and content.
Go ahead and click the Edit icon on the second (Save Data) node.
We will add some content to it, thanking the user:
Look at the content: Thank you {name}. We are using the name variable. Variables are enclosed between curly braces. This is the same name we chose as the variable name on the first data entry field we created previously. It will be replaced with whatever is filled on the survey form at presentation time.
We are not only going to thank the user, this node will serve a very important purpose: save the data. To do so we need to:
1) Click on the Web Hook tab
Web hooks are the tool we will use to interact with other applications, or perform some actions like saving data or sending an email.
2) Once the Web Hooks tab is open, we need to add a new one, so we click the Add Web Hook button.
When the web hook appears, we need to select an API Template. We will use the built in data store included with the Scripter. Select "scripter-datastore" from the drop-down selection.
Some fields will hide as we do not need them for the scripter-datastore web hook. Notice also that the Data field will be automatically populated.
We do not need to change anything, basically we will be saving all of the data using the {alldata} variable.
For doing so click the Save button to save the node and its contents.
We are done!
Look at the node grid, and how now the second node shows that we have a web hook configured in it:
6 - Final Result
We completed the Survey script!
As a summary, we created two nodes: one with the actual survey form using type question so we can add an Answer to just link/continue to the second node, and with three input fields: name, email and survey.
On the second node we use type solution as it is an ending node: there is no branching/continue from there. As content we thank the user and we also add a webhook to save the data into the Scripter data store.
Here is how the final result looks like:
7 - Inspecting saved data
Asternic Scripter comes with a simple built in data store that you can use to save form information from your scripts.
Take into account that you can use web hooks to interact with *any* web based API or application, so you can save data to your own applications or external CRM, you are not limited to the scripter data store.
To access the stored data from your scripts, look into the Saved Data icon on the scripts grid:
A window will open with all your saved information. There are a number of fixed fields with form meta data, like campaing/queue, agent name, timestamp, and then a column for every field you created in your form. In the following screenshot we hide those columns from view to concentrate on the actual answers provided (You can hide/show column by clicking the eye button in the top toolbar).
You can export the data to csv, excel and pdf formats, perform searches and sort by any row. Take into account that this is a data viewer, not an editor.