A Start Campaign Command allows a chat to run a campaign based on a chat.
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 “Start Campaign“.
For more information regarding this feature, please contact the Querlo Team at info@Querlo.com
A Set Variable command allows you to specify the value of a variable.
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.
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.
After opening the new command dialogue, fill the form as per the screenshot below and click save.
The Set Variable Command node in the Chat Builder.
A Set Variable Command node may be used together with a Conditional Branch Question node. Please read Conditional Branch to learn more.
An Enable share buttons Command allows you to hide or show the share buttons in the Chat HTML Client.
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.
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.
After opening the new answer dialogue, fill the form as per the screenshot below and click save.
(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.
To edit nodes, click on a node to access the contextual menu and choose “Edit” to open up the Edit form.
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:
A Breadcrumb Command allows a chat to enable the breadcrumb navigation that is shown on the top right of a chat.
Breadcrumb navigation is a term used to describe a hierarchical navigation menu presented as a trail of links. It is often used as a secondary navigation that allows users to go up and down in the hierarchy of links.
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 “Breadcrumb“.
For more information regarding this feature, please contact the Querlo Team at info@Querlo.com
A Geo Location command allows a chat to display Google Maps in a frame.
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.
This is the “Edit” form where you can modify the content of this node.
(Q1): Command Type. Choose “Geo Location” for this command node.
(Q2): API Key. Enter a Google Maps API key. (Please scroll down to see the “Creating a Google Maps API Key” section to learn more)
(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): Latitude and Longitude. Enter a Latitude and Longitude to set the initial center of the map.
(Q6): Zoom Level. There are several levels: World, Landmess/Continent, City, Streets, Buildings.
(Q7): Pins in JSON. Set up the pins by following the JSON structure below. (Please scroll down to see the “Setting up Pins in JSON” section to learn more)
(Q8): Add a Label. Labels are used to reference nodes in various functions of the chat builder.
(Q9): Save.
Go to Google Cloud Platform and login with your Google account.
(Q1) On the top blue bar, click on the drop-down menu “Select a project“.
(Q2) Click on “New Project“.
(Q1) In the “Project name” field, type a name for your new project.
(Q2) Click the “Create” button.
(Q1) Click on the drop-down menu “Select a project“.
(Q2) Select and go to the project “Google Maps API Key” that you have just created.
(Q1) Click on the Navigation Menu on the top left of the page.
(Q2) On the menu, click on “APIs & Services“.
(Q3) Then choose “Credentials“.
(Q1) Click on the “+ CREATE CREDENTIALS” button.
(Q2) Choose “API Key“.
The API Key has been created.
Now, we need to enable Google Maps Services.
(Q1) On the menu, click on “Library” to access the API Library page.
(Q2) Look for the “Maps” section and click on “View all”.
Enable Geocoding API and Geolocation API.
The following example shows a possible JSON representation describing 2 pins.
“label”, “address”, “lat”, “lng” are strings that are delimited with double-quotation marks.
“label” is the name of the pin on the map.
“address” is the id that’s given to the pin.
“lat” and “lng” are the latitude and longitude of the pin.
After opening the new command dialogue, enter your Google Maps API Key, fill the form as per the screenshot below and click save.
The Geo Location command node that we have just created is now in the Chat Builder and it has automatically generated 2 answer nodes: [Failure], [Success].
The 2 answer nodes begin 2 new branches in the flow.
Extend the branches by adding more nodes – Text nodes, Image Link nodes, Video Embed nodes, Branching/Question nodes and Command nodes.
(Q1) The Geo Location command node and the 2 new branches 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, a Geo Location command node displays Google Maps in a frame. The red marks on the map are those pins we have entered in the command node.
When the user selects a pin, a small pop-up window appears, click the “CONFIRM” button to confirm the selection.
To edit nodes, click on a node to access the contextual menu and choose “Edit” to open up the Edit form.
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:
A Change Background command allows a chat to change background image dynamically.
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.
This is the “Edit” form where you can modify the content of this node.
(Q1): Command Type. Choose “Change Background” for this command node.
(Q2): Choose to upload an image from your device or enter a valid URL of an image.
(Q3): Add a Label. Labels are used to reference nodes in various functions of the chat builder.
(Q4): Save.
After opening the new answer dialogue, fill the form as per the screenshot below and click save.
(Q1) The Change Background 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.
Go to the Chat builder and click the “Customize” button on the left side of the page to access the “Chat Customization” form. In the “Layout” section you can upload a background image for your chat.
Read Chat HTML Client’s Appearance setting to learn how to set up a background image for your chat.
To edit nodes, click on a node to access the contextual menu and choose “Edit” to open up the Edit form.
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:
“Nodes” are the essential parts of a chat on Querlo. A Command node allows you to use commands to perform various actions.
(Q1) Click on the last node to access the contextual menu which contains all the actions that you can perform on the selected node.
(Q2) Choose “New Command” to open up the edit form where you can select a type for the new command node.
These are the command types that you can select for a new command node:
An Upload Question node allows your user to upload an image in a chat.
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): Text editor toolbar. It includes Bold, Link, Email, Underline, Strike-through, Italic.
(Q2): Text editor. Type your text here.
(Q3): Emoticons. Add emoticons to your text.
(Q4): Type. Choose “Upload” for this question node.
(Q5): Variable name. You can assign the user’s answer to a variable. To make Querlo repeat the user’s answer, just type {variable name} within the text in any node following this question.
(Q6): Add leading space. It generates a new paragraph in the text script.
(Q7): Add a Label. Labels are used to reference nodes in various functions of the chat builder.
(Q8): Save.
After opening the new question dialogue, fill the form as per the screenshot below and click save.
The Upload Question node that we have just created is now in the Chat Builder and it has automatically generated 2 answer nodes: Upload failed, Upload successful.
The 2 answer nodes begin 2 new branches in the flow.
Extend the branches by adding more nodes – Text nodes, Image Link nodes, Video Embed nodes, Branching/Question nodes and Command nodes.
(Q1) The Upload Question node and the 2 new branches 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.
This is how an Upload Question node shows in the Chat HTML client.
To edit nodes, click on a node to access the contextual menu and choose “Edit” to open up the Edit form.
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:
The Conditional Branch is an important and advanced feature that evaluates the content of a variable and directs the flow to the appropriate branch.
The Conditional Branch works like “if statement”.
An if statement is a programming conditional statement that, if proved true, performs a function or displays information.
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.
This is the “Edit” form where you can modify the content of this node.
(Q1): Text editor. Type your text here.
(Q2): Emoticons. Add emoticons to your text.
(Q3): Type. Choose “Conditional branch” for this question node.
(Q4): Add leading space. It generates a new paragraph in the text script.
(Q5): Add a Label. Labels are used to reference nodes in various functions of the chat builder.
(Q6): Save.
After opening the new question dialogue, fill the form as per the screenshot below and click save.
The Conditional Branch Question node that we have just created is now in the Chat Builder and it provides the action “New Answer” for you to create multiple answer nodes via contextual menu.
(Q1) Click on the Question node to access the contextual menu.
(Q2) Choose “New Answer” to create an answer node.
Repeat this step to create multiple answers.
The Conditional Branch Question node and its Answer nodes in the Chat Builder.
A Set Variable Command node may be used together with a Conditional Branch Question node. Please read Set Variable to learn more.
Insert a Set Variable Command node before the Conditional Branch Question node. (Please read Insert a node to learn more)
After opening the new command dialogue, fill the form as per the screenshot below and click save.
In the Chat HTML client, the conditional branch evaluates the content of the variable {dessert} and directs the flow to the appropriate branch: ice cream.
After opening the new command dialogue, fill the form as per the screenshot below and click save.
In the Chat HTML client, the conditional branch evaluates the content of the variable {dessert} and directs the flow to the appropriate branch: cakes.
To edit nodes, click on a node to access the contextual menu and choose “Edit” to open up the Edit form.
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:
A Multiple Selection Question node allows you to create multiple pre-designed answer nodes, and in which more than one answer can be selected by the user.
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): Text editor toolbar. It includes Bold, Link, Email, Underline, Strike-through, Italic.
(Q2): Text editor. Type your text here.
(Q3): Emoticons. Add emoticons to your text.
(Q4): Type. Choose “Multiple Selection” for this question node.
(Q5): Variable name. You can assign the user’s answer to a variable. To make Querlo repeat the user’s answer, just type {variable name} within the text in any node following this question.
(Q6): Add leading space. It generates a new paragraph in the text script.
(Q7): Add a Label. Labels are used to reference nodes in various functions of the chat builder.
(Q8): Save.
After opening the new question dialogue, fill the form as per the screenshot below and click save.
The Multiple Selection Question node that we have just created is now in the Chat Builder and it provides the action “New Answer” for you to create multiple answer nodes via contextual menu.
(Q1) Click on the Question node to access the contextual menu.
(Q2) Choose “New Answer” to create an answer node.
Repeat this step to create multiple answers.
(Q1) The Multiple Selection 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.
This is how a Multiple Selection Question node shows in the Chat HTML client.
To edit nodes, click on a node to access the contextual menu and choose “Edit” to open up the Edit form.
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:
