New features released – New Node Labels, Improved Search functionality

At Querlo we are always at work to improve our product and your experience, here is the summary of the new features.

  • Node Labels
  • Search for a node

New Node Labels

A chat on Querlo is built with “Nodes”. Knowing the types of node helps you build and manage your workflows. We have added node labels in the Chat Builder to help you easily identify the types of node.

Text nodes

Different types of Branching/Question nodes

A Multiple Choice Question node
An Open Answer Question node

Answer nodes

Different types of Command nodes

A Geo Location Command node
A Change Background Command node

Search for a node

A search function has been added in the Chat Builder.

Step 1:

Go to the chat builder.

Click the “Search” button on the right side of the page to access the search function.

Step 2:

In the search field, type the text you want to find and the result of the search will show up immediately below.

Step 3:

Click on a node from the result of the search and the Chat Builder will automatically zoom-in to the node of your choice.

In this example, we have selected the Multiple Choice Question: Please choose a topic.

Introduction

The Querlo Chat Builder is a web App tool that individuals and companies can use to build chat flows through a Graphical RAD system.

The Querlo Chat Builder provides various options for customization and NLU (Natural Language Understanding) Integration with the main Cognitive Service providers like Microsoft LUIS and IBM Watson.

A chat created with the Querlo Chat Builder is accessible on-line through a URL and can be linked on social media or embedded on a company’s website. Querlo chats can also be accessed through other chat clients such as WhatsApp, Facebook Messenger and similar providing a consistent omnichannel experience.

Querlo chats are hosted on a proprietary server architecture which provides redundancy, scalability and security. Depending on a client’s needs it is possible to deploy Querlo solutions on a shared managed cloud, on a managed private network or on-premise.

4.2 Making a dynamic multiple choice question

Source Variable is available in Multiple Choice Question nodes. This node type can be made dynamic by assigning it a source variable which contains a properly structured data source at runtime.

Locating the Source Variable field

Add a Question node by clicking on the last node to access the contextual menu and choose “New Question” to open up the Edit form.

(Q1) Choose “Multiple Choice” for this question node.

(Q2) Source Variable.

Example – Test Datasource URL for dynamic Questions

https://www.querlo.com/tests/get_dynamicQuestion

The result of this call should contain a JSON structure like in the above screenshot where s:1 means the call was completed successfully and questionData contains a string-encoded version of the JSON structure contained in the screenshot below:

Example – Making a dynamic multiple choice question

Step 1:

Add a Get from remote command node by filling the form as per the screenshot below and click save.

The GET from Remote Command node has automatically generated 2 answer nodes: [Failure], [Success] that begin 2 new branches in the flow.

Step 2:

Under the [Failure] branch, add a text node.

Under the [Success] branch, add a Multiple Choice Question node by filling the form as per the screenshot below and click save.

Step 3:

The Multiple Choice Question node that we have just created provides the action “New Answer” for you to create multiple answer nodes via the contextual menu.

(Q1) Click on the Question node to access the contextual menu.

(Q2) Choose “New Answer” to create an answer node.

Step 4:

Create two branches “a” and “b” as per the screenshot below.

Step 5:

Click the “Preview” button to open the chat HTML client which shows you how your chat is presented to the viewers.

>> Case 1: First answer, branch A

>> Case 2: Second Answer, branch A

>> Case 3: Third Answer, branch B

3.1.6.9 GET Client Variable

A GET Client Variable Command allows a chat to get a value from the client and pass it to the server, adding it to the scope of the client session variables.

Adding a GET Client Variable Command node

Step 1:

Add a New Command node by clicking on the last node to access the contextual menu and choose “New Command” to open up the Edit form.

Step 2:

This is the “Edit” form where you can modify the content of this node.

(Q1): Command Type. Choose “GET Client Variable” for this command node.

(Q2): Client Variable Name. Enter a name for this variable. This name can be used to identify the request in the corresponding Javascript event handler.

(Q3): Server Variable Name. Enter a name for this value to be referenced in the client session scope.

(Q4): Add a Label. Labels are used to reference nodes in various functions of the chat builder.

(Q5): Save.

Example – A possible implementation of the GET Client Variable handler

Add this listener on the parent page:

window.addEventListener("message", receiveMessage, false);

function receiveMessage() {

        if (e.origin !== 'https://www.querlo.com') return;

        if (e.data.querloMessageType === 'getClientVariable') {
           if (e.data.command.varName === 'myClientVar') {
               e.source.postMessage('myValue', e.origin);
           }
        }
};

This function:

(1) ensures the message is coming from Querlo.com to prevent exploits.

(2) checks the message is of type ‘getClientVariable’

(3) checks against known variable names. In the example above, we handle requests for ‘myClientVar’.

(4) Sends the desired value back to the server. In the example above, we send the string ‘myValue’.

3.1.6.5 Client Event

A Client Event command allows a chat to trigger an event in the host website.

Adding a Client Event command node

Step 1:

Add a New Command node by clicking on the last node to access the contextual menu and choose “New Command” to open up the Edit form.

Step 2:

This is the “Edit” form where you can modify the content of this node.

(Q1): Command Type. Choose “Client Event” for this command node.

(Q2): Event Name. Enter a name for the event.

(Q3) Parameters. Enter your parameters in a JSON object encoded string.

For example, the below object with two fields could be used to specify a new size for the client frame:

width:500, height:500

(Q4): Add a Label. Labels are used to reference nodes in various functions of the chat builder.

(Q5): Save.

Example – A possible implementation of the client event handler

Add this listener on the parent page:

window.addEventListener("message", receiveMessage, false);

function receiveMessage {

    if (e.origin !== 'https://www.querlo.com') return;
    if (e.data.querloMessageType === 'clientEvent' && e.data.command.name === 'NAVIGATE_PAGE') {
      let url = e.data.command.params.url;
     window.location = url;
    }
};

This function:

(1) ensures the message is coming from Querlo.com to prevent exploits.

(2) checks the message is of type ‘clientEvent’.

(3) checks the command name that has been passed. In the case above, we have set up “NAVIGATE_PAGE” as an example. This is the command that we use to cause the embedding client to change to a different URL.

By following the above template, you can trap and distinguish events and their parameters and implement any Javascript logics to consume them.

Edit Nodes

To edit nodes, click on a node to access the contextual menu and choose “Edit” to open up the Edit form.

Add Nodes

To add nodes, click on the last node to access the contextual menu which contains all the actions that you can perform on the selected node.

The actions include:

3.1.6.3 Change CSS Class and Add CSS Styles

An Add CSS Styles command allows you to inject new CSS code in a chat.

A Change CSS Class command toggles a custom CSS class attribute on the main container element allowing the switch between multiple customized styles.

Adding an Add CSS Styles command node

Step 1:

Add a New Command node by clicking on the last node to access the contextual menu and choose “New Command” to open up the Edit form.

Step 2:

This is the “Edit” form where you can modify the content of this node.

(Q1): Command Type. Choose “Add CSS Styles” for this command node.

(Q2): Add Style.

(Q3): Add a Label. Labels are used to reference nodes in various functions of the chat builder.

(Q4): Save.

Example

Step 1:

After opening the new answer dialogue, fill the form as per the screenshot below and click save.

In the “Add style” field, there are two CSS styles that define different font-family. test1 and test2 are the class name.

Step 2:

(Q1) The Add CSS Styles command node in the Chat Builder.

(Q2) Click the “Preview” button to open the chat HTML client which shows you how your chat is presented to the viewers.

The new CSS code has been injected in the chat. The font in the Chat HTML client is the default font.

Adding a Change CSS Class command node

Step 1:

Add a New Command node by clicking on the last node to access the contextual menu and choose “New Command” to open up the Edit form.

Step 2:

This is the “Edit” form where you can modify the content of this node.

(Q1): Command Type. Choose “Change CSS Class” for this command node.

(Q2): Class name.

(Q3): Add a Label. Labels are used to reference nodes in various functions of the chat builder.

(Q4): Save.

Example

Step 1:

Add the Add CSS Style command node by following the example above.

Step 2:

Click on the last node to access the contextual menu and choose “New Command” to open up the Edit form.

Step 3:

After opening the new answer dialogue, fill the form as per the screenshot below and click save.

Step 4:

(Q1) The Add CSS Style command node in the Chat Builder.

(Q2) The Change CSS Class command node in the Chat Builder.

(Q3) Click the “Preview” button to open the chat HTML client which shows you how your chat is presented to the viewers.

In the Chat HTML client, the Change CSS Class command node has added the class name “test1” to the main container element. Therefore the font has been changed to courier as defined in the CSS snippet we injected previously.

Step 5:

Add one more Add CSS Style command node by clicking on the last node to access the contextual menu and choose “New Command” to open up the Edit form.

After opening the new answer dialogue, fill the form as per the screenshot below and click save.

Step 6:

(Q1) The first Change CSS Class command node in the Chat Builder.

(Q2) The second Change CSS Class command node in the Chat Builder.

(Q3) Click the “Preview” button to open the chat HTML client which shows you how your chat is presented to the viewers.

In the Chat HTML client, the second Change CSS Class command node has added the class name “test2” to the main container element. Therefore the font has been changed to cursive as defined in the CSS snippet we injected previously.

Custom CSS Style

Change CSS Class and Add CSS Style are the advanced features that work better with custom CSS style.

Contact us

For more information regarding this feature, please contact the Querlo Team at info@Querlo.com

3.1.5 Answer nodes

Nodes” are the essential parts of a chat on Querlo. An Answer node represents the beginning of a new branch in the flow.

Answer nodes are created through these types of Question node:

Depending on the type of Questions, some of them automatically generate answer nodes and some of them provide the action “New Answer” for you to create multiple answer nodes via the contextual menu.

Adding an Answer node

Step 1:

(Q1) Add a Multiple Choice Question node, then click on it to access the contextual menu.

(Q2) Choose “New Answer” to open up the edit form to create an answer node.

Step 2:

This is the “Edit” form where you can modify the content of this node.

(Q1): Answer – Text editor. Type your text here.

(Q2): Emoticons. Add emoticons to your text.

(Q3) Extend Answer – Text editor. Type your text here. Optional: once the short answer is clicked, this will be shown in the chat.

(Q4) Display condition. This answer will only be displayed if the following condition is satisfied or empty, eg: {varName}=Yes

(Q5): Save.

Example

Step 1:

After opening the new answer dialogue, fill the form as per the screenshot below and click save.

Step 2:

Repeat Step 1 to create multiple answer nodes.

(Q1) The Multiple Choice Question node and its Answer nodes in the Chat Builder.

(Q2) Click the “Preview” button to open the chat HTML client which shows you how your chat is presented to the viewers.

Edit Nodes

To edit nodes, click on a node to access the contextual menu and choose “Edit” to open up the Edit form.

Add Nodes

To add nodes, click on the last node to access the contextual menu which contains all the actions that you can perform on the selected node.

The actions include:

3.1.6.7 GET from Remote

A GET from Remote Command allows a chat to execute a GET request to get data from a server.

Read related article: POST to Remote Command

Adding a GET from Remote Command node

Step 1:

Add a New Command node by clicking on the last node to access the contextual menu and choose “New Command” to open up the Edit form.

Step 2:

This is the “Edit” form where you can modify the content of this node.

(Q1): Command Type. Choose “GET from Remote” for this command node.

(Q2): URL. Enter the URL of the endpoint you wish to query. If you wish to include a variable in the URL, please use double curly brackets to ensure proper URL escaping.

(Q3): Persist. The data fetched from the endpoint will be available in the selected Variable across sessions.

(Q4): Variable name. Enter a name for this variable. The destination container where the fetched data is stored.

(Q5): Token. An optional token to be sent over to the endpoint for authentication. This must be implemented on the server side to be functional.

(Q6): Add a Label. Labels are used to reference nodes in various functions of the chat builder.

(Q7): Save.

Example

The GET from Remote Command node has automatically generated 2 answer nodes: [Failure], [Success]

The 2 answer nodes begin 2 new branches in the flow.

  • [Failure] branch – When the GET request fails, the flow directs to this branch.
  • [Success] branch – When the GET request is successful, the flow directs to this branch.

You may add more nodes to extend both branches by clicking one of the answer nodes to access the contextual menu which contains all the actions that you can perform on the selected node.

Edit Nodes

To edit nodes, click on a node to access the contextual menu and choose “Edit” to open up the Edit form.

Add Nodes

To add nodes, click on the last node to access the contextual menu which contains all the actions that you can perform on the selected node.

The actions include:

3.1.6.8 POST to Remote

A POST to Remote Command allows a chat to send a POST request to pass data to a server.

Adding a POST to Remote command node

Add a New Command node by clicking on the last node to access the contextual menu and choose “New Command” to open up the Edit form.

In the Command Type field, choose “POST to Remote“.

Read related article: GET from Remote Command

Working in Progress

This feature is currently under development.

3.1.6.13 Change Avatar

A Change Avatar Command allows a chat to change the avatar images dynamically.

Adding a Change Avatar command node

Step 1:

Add a New Command node by clicking on the last node to access the contextual menu and choose “New Command” to open up the Edit form.

Step 2:

In the Command Type field, choose “Change Avatar“.

Working in Progress

This feature is currently under development.