AGET 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): CommandType. 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’.
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): CommandType. 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.
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): CommandType. 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): CommandType. 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) Thesecond 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
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.
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): CommandType. 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.
AHuman 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 CommandType field, choose “Human Takeover“.
Contact us
For more information regarding this feature, please contact the Querlo Team at info@Querlo.com
