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.

3.1.6.12 Human Takeover

A Human Takeover Command allows human escalation of a chat.

When your user is interacting with the chat and the chatbot is unable to fulfill the user’s expectations, their frustration levels may be gauged and used as a decision point to pass on the conversation to a human operator. Human operators may interact seamlessly with your user through a call center interface of your choice.

Querlo provides this service through call center partners across the globe. If you wish to leverage this feature, please contact our sales department at info@Querlo.com

Adding a Human Takeover 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 “Human Takeover“.

Contact us

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

3.1.6.11 Start Campaign

A Start Campaign Command allows a chat to run a campaign based on a chat.

Adding a Start Campaign 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 “Start Campaign“.

Contact us

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

3.1.6.10 Set Variable

A Set Variable command allows you to specify the value of a variable.

Adding a Set 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 “Set Variable” for this command node.

(Q2): Variable Name. Enter a name for the variable you wish to set.

(Q3): Variable Value. The value the variable should assume. It can also be compounded with other variables. I.E. “New value is {anotherVar}”

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

(Q5): Save.

Example

Step 1:

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

Step 2:

The Set Variable Command node in the Chat Builder.

Set Variable & Conditional Branch

A Set Variable Command node may be used together with a Conditional Branch Question node. Please read Conditional Branch to learn more.

3.1.6.6 Enable share buttons

An Enable share buttons Command allows you to hide or show the share buttons in the Chat HTML Client.

Adding an Enable share buttons 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 “Enable share buttons” for this command node.

(Q2): Option: Hide/Show.

(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.

Step 2:

(Q1) The Enable share buttons 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.

In the Chat HTML client, when the Enable share buttons command node is executed the share buttons on the right of the page will disappear.

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: