3.1.2 Image Link nodes

Nodes” are the essential parts of a chat on Querlo. An Image Link node is one of them.

Adding an Image Link node

Step 1:

Go to the chat builder.

(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 image link” to open up the edit form.

In the screenshot below, the last node is a Text node which is a blue rounded rectangle. 

Step 2:

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

(Q1): Image. Click “Upload Image” to upload your image.

(Q2): Link. Add a link to your image.

(Q3): Text editor. Type your text here.

(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 image dialogue, fill the form as per the screenshot below and click save.

(Q1) Click “Upload Image” to upload your image.

(Q2) If you want to delete the image that you have uploaded, click on the “Trash bin” icon.

(Q3) Add a link to the image. Here we have added “Https://www.Querlo.com

(Q4) Type a description in the Text editor. Here we have entered “Querlo, Artificial Intelligence with a heart”.

(Q5) Click “Save“.

Step 2:

(Q1) The Image link 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.

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.1 Text nodes

Nodes” are the essential parts of a chat on Querlo. A Text node is one of them.

Adding a Text node

Step 1:

Go to the chat builder

(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 text” to open up the edit form.

In the screenshot below, the last node is a Text node which is a blue rounded rectangle. 

Step 2:

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

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

Example

Step 1:

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

Step 2:

(Q1) The Text 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.

how_to_use_querlo

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 Types of Node

Nodes” are the essential parts of a chat on Querlo. Knowing the types of node helps you build and manage a chat.

The image below is a simple chat and you can see how it is presented in the chat builder.

A chat is built up with nodes that are shown in different colors, and the colors represent specific functions.

Text nodes

Blue is a Text node, and it means the flow proceeds in a straight line.

Image Link nodes

An Image link node shows the thumbnail of the image.

Video Embed nodes

A Video embed node shows the thumbnail of the video.

Branching/Question nodes

Red is a Branching/Question node, and it means the flow will branch.

Answer nodes

Green is an Answer node, and it represents the beginning of a new branch in the flow.

Command nodes

Grey is a command node, and it shows the command type that you selected to use.

1.7 Embed a chat

The embed code allows you to embed a chat on different websites.

Embedding a Chat

Step 1:

Go to the chat builder.

(Q1) On the left side of the chat builder, click the “Embed” button.

Step 2:

The pop-up window labeled “Distribution options” appears, and this is where you can find the permalink and Embed code of your chat.

(Q1) Embed code for popup widget.

There are three fields: (1) Speaker name (2) Intro message (3) Auto open delay(ms).

(Q2) Embed code for iframe.

There are two fields: (1) Width (2) Height.

Step 3:

Scroll down and you will see of the preview of the chat HTML client.

1.6 Share a chat

The permalink of a chat allows you to easily share a chat.

Sharing a Chat

Step 1:

Go to the chat builder.

(Q1) On the left side of the chat builder, click the “Embed” button.

Step 2:

The pop-up window labeled “Distribution options” appears, and this is where you can find the permalink and Embed code of your chat.

In the Permalink section, you can easily find the link of the chat that can be pasted into emails or onto websites. 

Step 3:

Scroll down and you will see of the preview of the chat HTML client

Setting up a permalink with Custom URL

The permalink is a reuseable link that includes a number that is generated by the system as the ID of the chat. For example, https://www.querlo.com/chat/12361 

You can change the ID to a text with the “Custom URL” feature. Please read Chat Options to learn how to set up a permalink with Custom URL.

1.5 Edit a chat

You may edit a chat with the Chat builder that provides many features to help you build a chat.

Editing a Chat

Step 1:

(Q1) On the menu, click “Chats” to see all your chats.

(Q2) Select and click a chat that you’d like to edit.

Step 2:

This is the chat builder

(Q1) On the top of the page, it shows the title of the chat.

(Q2) The highlighted area in the middle is the chat builder which you can edit the content for your chat. 

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

Step 3:

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

In our example, the last node is a text node which is a blue rounded rectangle. (Read related article: The Types of Node)

The actions include:

Note: We will explain these features in detail in other blogs.

1.4 Delete a chat

“Delete” is a basic feature to eliminate unwanted chats.

Deleting a Chat

Step 1:

(Q1) On the menu, click “Chats” to see all your chats.

(Q2) Select a chat that you’d like to delete and click the “Trash bin” icon.

Step 2:

A pop-up window appears to confirm the deletion of the chat, click “OK“.

Step 3:

(Q1) On the top of the page, the pop-up message “Item deleted successfully” appears.

(Q2) Then you will see that the chat that you had selected in step1 has disappeared in the list of your chats.

Note: The deletion procedure can take up a few seconds, please wait patiently for the pop-up message to appear.

1.3 Copy a chat

“Clone” is a basic and important feature to increase productivity in building and managing your chat.

Copying a Chat

Step 1:

(Q1) On the menu, click “Chats” to see all your chats. 

(Q2) Select a chat that you’d like to copy and click the “Clone” button.

Step 2:

(Q1) On the top of the page, the pop-up message “Chat duplicated successfully” appears.

(Q2) Then you will see that the duplicated chat shows up in the list of your chats.

Note: The cloning procedure can take up a few seconds, please wait patiently for the pop-up message to appear.

1.2 Chats list

Locate the chats list to manage your chats.

Finding the Chats List

After logging in to Querlo, you’ll see a menu on the left side of the page.

(Q1) Click “Chats“.

(Q2) This is where you can see and access all your chats.

Filtering and Ordering the chats list

There are two buttons on the right side of the page.

Filter by:

  • All – This option displays everything that you have created.
  • Workspaces: This option only displays workspaces.

A Workspace is designed for a team to manage related chats in a project. Workspaces help breaking down big workflows into simpler and more manageable functional units.

A Workspace contains a group of chats that may be created by different users. All the chats in the same workspace are shared among the owners and can be seen and managed by any of them.

  • Chats: This option only displays chats that you have created.

Order by:

  • Most recent: This option display chats in chronological order.
  • Name: This option display chats in alphabetical order.

1.1 Create a chat

The first step in learning how to use Querlo is creating a chat.

Creating A New Chat

Step 1:

After logging in to Querlo, you’ll see a menu on the left side of the page.

(Q1) Click “Chats“.

(Q2) Then click the “+ New Chat” button.

Note: “Chats” is the page where you can see and access the list of all your chats.

Step 2:

The “Chat Customization” form appears.

(Q1) In the “Name” field enter a title that is suitable for your chat.

(Q2) Keep the default options and click the “Create” button which is located at the bottom of the page. 

Note: “Chat Customization” is the page where you can change some options to customize your chat.

Step 3:

This is the chat builder.

(Q1) On the top of the page, it shows the title of the chat.

(Q2) The highlighted area in the middle is the chat builder which you can edit the content for your chat. 

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