The Interactive Chat Response (ICR) is a robust designer interface, allowing you to seamlessly build automated self-serve bots and construct interactive flows for digital conversations. This versatile and powerful tool empowers businesses to provide efficient and personalized interactions.

Now, let's explore the functionality and operation of each node in the ICR designer.

Question

In the chatbot flow, the Question node prompts customers for input, directing them based on preset intents. For instance, if a user types "sales," they'll be directed to the next node aligned with the "sales" intent. Alternatively, if the user provides a different response, the direction will be based on the corresponding intent.

Additionally, customer responses can be saved as variables, serving as inputs for subsequent nodes in the chatbot flow.

Message

The message node sends direct messages to customers.
It supports text formatting like bold or italic and includes emojis.
Messages can provide information, and statements, or redirect to external links.
To add a link, click the link icon, and enter the title and link address.
To remove a link, use the unlink button.

Multimedia

The multimedia node allows users to send images, audio, or videos to customers as information. Here's how to use it:

Image: Add the URL for the image or upload it locally using the upload button next to the URL bar.
- Include a caption to provide context for the image.
Audio: Provide the URL for the audio file or upload it locally using the upload button.
Video: Add the URL for the video or upload it locally using the upload button.

Document

The document node allows users to share document files such as .doc or .pdf formats with customers. Here's how to effectively use this node:

File Upload: Add the document file by uploading it locally using the upload button.
URL: Alternatively, provide the URL if the document is hosted elsewhere.
Caption: Include a caption to provide context for the document.
File Name: Specify the name of the document for easy identification.

Knowledgebase

The Knowledge base allows you to provide information in a URL or Document, and then train an AI model based on the provided information. This can then be used in the flow using the knowledgebase node. Here is how it works:

Create a custom knowledge base repository, utilizing the toolbar option at the top. For more details, refer to the Knowledge Base section.
After creating the knowledge base repository, the knowledge base node will present a dropdown list of options for selecting the desired one.

Carousels

The Carousel node offers an interactive user interface to display multiple cards with images, titles, and descriptions in a horizontal slideshow format. Here's how to customize it:

Available Operations:

Carousel Items: The node showcases a series of items, each with an image, title, and description. Customers can navigate through these items using arrow buttons.
Adding Carousel Items: To add an item, input the image URL, title, and description, then click "Add another Item."
- Image: Upload or enter the URL of an image.
- Title: Title for the card.
- Description: Description of the card.
Removing Carousel Items: To remove an item, navigate to it and click "Remove Item."
Button Options: You can add up to four button options by clicking "Create new Button" or "Add another."
Removing Button Options: Hover over a button option and click the "delete" icon to remove it.
No Match Option: Use the "No Match" option when none of the button options match the user's selection.

Buttons

The Buttons node enables you to create a node containing multiple interactive buttons. Each button represents a choice that the customer can select. Only a single choice can be selected from the options.

Here are the fields that are involved:

Title: Editable title acting as a header for the options.
Options: Dynamic list of choices that can be modified. Each choice appears as a button in the chat. You can add, edit, or remove choices as needed.
No Match option: The "No Match" option appears at the bottom of the list and is selected when none of the other options match the user's selection. This option cannot be edited or deleted.
Removing Options: To remove an option, hover over it and click the delete icon that appears.

List

The List node allows users to create a dropdown with multiple options. Each option can have its description if necessary. This allows customers to search and select any option with a description from the dropdown menu.

Available Fields:

Title: The title is editable, and changes to the title are saved to the node's data.
Options[]: Each option is represented by a button. You can add, edit, or remove options when placing your mouse in the option.
Description: Each option can have its description if necessary.
No Match option: The "No Match" option will appear at the bottom of the list. This option is used when none of the other options in the list are selected. You cannot edit or delete this option.
Removing Options: If you want to remove an option, you can do so by hovering over the option and then clicking on the delete icon that appears.

CCTransfer

The CCTransfer node facilitates transferring the chat from the bot to an agent. It includes the following fields:

UUI: If available, you can provide the UUI number.
Agent Id: If available, specify a particular agent ID.
Skill Name: If available, specify a particular skill.

Office hours

The Office Hours node restricts flows based on specified timings. If the current date and time are within the designated office hours and not on holidays, nodes under the "yes" option will trigger; otherwise, nodes under the "no" option will be activated. This node is useful for limiting flow availability, such as only during weekdays.

Available Operations:

Setting Working Days and Timings: Define your working days and hours by selecting the days of the week and setting the working hours.
Setting Holidays: Add holidays to the schedule by selecting the dates and adding them to the holiday list. To remove a holiday, simply click on the date and use the "Remove" button.
Editing Information: Easily edit working days, timings, or holidays by clicking on the respective fields and entering updated information.

Condition

The Condition Node allows you to set conditions using various operators:

Available Operations:

Setting Conditions: Define conditions using two operands and an operator, which evaluates to true or false. For example, you can check if one variable is greater than another.
Choosing Operands: Operand 1 refers to a user variable created in the variable option available on the top right toolbar, while Operand 2 can be any variable or number defined. Operand 2 only accepts numeric values for operators that involve length evaluation.
Choosing an Operator: Select from a dropdown list of operators including 'Equal To', 'Greater Than', 'Less Than', etc.
Entering Operands: Depending on the operator, input one or two operands. For operators requiring two operands, two input fields are provided.
Checking the Condition: The Condition Node evaluates the condition, directing the flow to 'Yes' if true and 'No' if false.

Fields include Operand 1, Choose an Operator, and Operand 2.

API call

The API call node is used to save data in response from Api into variables which allows us to use these variables in other nodes in the flow.

If the API list is empty, you can create one by accessing the "Rest API" option in the top right toolbar. For instructions on creating a Rest API, refer to the Rest API section.

Fields & Operation:

API: The API Call Node provides a dropdown list of APIs that you can select from. Once you select an API, the node will be configured to make a request to that API when it is executed.
Select Api: After selecting the API from the list, click on the “Add” Response button. This will display two additional dropdown fields to save response information in variables.
Editing a Response Variable: After clicking the add button two fields are displayed: 'API response variables' and 'Variable'. The 'API response variables' field is a dropdown list that allows you to select the part of the response that you want to save. The 'Variable' field allows you to select the variable that you want to save the response part to. You can save multiple parts of response in different variables.

Builtin Functions

The 'Builtin Function' node offers a range of operations to manipulate variable data, including functions like trim, append, to Lower, etc.

Fields & Operations:

Adding an operation: Choose an operation from the dropdown list provided. Once selected, the node will execute the chosen operation.
Configuring Parameters: After adding an operation, you will see a list of parameters for that operation. These parameters are the inputs to the operation. You can enter values for these parameters in the text fields provided.
Deleting an operation: To remove an operation, click the delete icon next to it.
Understanding Operations: Each operation serves a specific purpose. For instance, 'trim' removes whitespace from the start and end of a string, 'append' joins two strings, and 'toLower' converts a string to lowercase. The 'params' field indicates the type and number of parameters required for each operation.

Dynamic List

The 'Dynamic List' node provides a user interface that allows you to use an API response to generate a list or button node.

Fields & Operations:
1. Select API: Choose an API from the dropdown list of APIs created using the Rest API option. You can type in this field to filter the list of APIs and select the one you want to use.
2. Show Response As: This is a toggle button that allows you to choose how you want to display the response from the selected API. Toggle between 'List' and 'Button' to determine the format of the API response display.
3. API Response format required for Dynamic list:
```
{

"DATA": [

{

"DESCRIPTION": "TELUGU",

"TITLE": "TELUGU"

},

{

"DESCRIPTION": "HINDI",

"TITLE": "HINDI"

},

{

"DESCRIPTION": "ENGLISH",

"TITLE": "ENGLISH"

}

],

"TITLE": "CHOOSE YOUR LANGUAGE."

}
```

Forms

The Form node enables the creation of customized forms with options to add an input field, email field, phone number field, and dropdown field.

Fields & Operations:

Title and Subtitle: Enter the title and subtitle for the form.
Form Fields: Below the title and subtitle, there is a list of form fields. Each field has a type (displayed as a capitalized title), a key (value that is used for internal purpose), a label (value that will be displayed), and optionally, options for dropdown fields. Each field also has a checkbox to indicate whether the field is required or not.
Add Field: At the bottom of the node, there is a dropdown and an "Add" button. You can select a field type from the dropdown and then click the "Add" button to add a new field of the selected type to the form. The new field will be added to the bottom of the list of fields.
Handle Options: For dropdown fields, give the options by comma-separated values. For example, if you need the dropdown to have cities as options then provide as: Hyderabad,Chennai,Delhi. Now the dropdown will have 3 cities to select from.

Menu items

The Menu Node provides the option to add nodes that are currently in the flow, enabling the end user to switch between nodes easily provided by the menu node. It acts as a convenient shortcut, allowing users to switch between nodes without traversing the entire flow.

Fields & Operations:

Adding a Menu Item: Utilize the autocomplete field labeled 'Add Menu Item' to quickly add nodes to the menu. As you type, available nodes will be suggested for selection.
Modifying a Menu Item: Customize the name of each menu item by clicking on the corresponding text field. Changes are automatically saved when you click outside the field.
Deleting a Menu Item: Hover over a menu item to reveal a delete icon (trash bin). Clicking this icon removes the menu item from the list.

All the toolbar options icons can be found in the top right corner of the window.

Rest API

Rest Api provides the flexibility to integrate data from any rest Api into the designer, which then can be saved in a variable which allows us to use these variables in many nodes.

APIs created using this option can be later used in the "API CALL" node. From there you can save the API response to a variable in the APICALL node which allows us to use the saved variable in the flow.

These APIs can also be used in "Dynamic List" to generate list and button nodes using the API response data.

Fields and Operations:

Select API: With in the 'REST APIS" tab, at the top of the drawer, there is a dropdown menu labeled "Select API". This is where you can select an existing API request to edit. If the API you want is not listed, you can add a new one by clicking the "Add New API" button.
Add New API: Clicking this button opens a form where you can enter details for a new API request.
API Form: In this form, you can specify the following fields:
1. Name: The name of the API request. This is a required field.
2. Type: The type of the HTTP request. This can be either GET, POST, or JSON-POST.
3. URL: The URL where the request will be sent. This is a required field.
4. Timeout: The maximum time to wait for a response before the request times out.
5. Params: You can add parameters to your request by clicking the "Add Params" button. This opens a new section where you can add, edit, or remove parameters.
6. Headers: You can add headers to your request in the "Headers" section.
7. API Response: This section allows you to specify how the response from the API should be handled. For example, from the response, if you want to save a particular key then add the name of the keys in this list.
8. The "Name" and "URL" fields are required. You will not be able to save your API request unless these fields are filled out.
Save/Update/Delete: Once you have filled out the form, you can click "Save" to save a new API request, "Update" to save changes to an existing request, or "Delete" to delete an existing request. If you have made changes but decide you do not want to save them, you can click "Revert" to revert the form back to the last saved state.
Cancel: If you want to close the form without saving any changes, you can click "Cancel".
Usage:
1. Once Rest Api is created, it will generate multiple variables with the Api name combined with __http_code, _error, _error_message, _body, _response_time, _content_type, and others with respect to Response Json key present in the API response section like ApiName_key.
2. Once Rest API is added to the list, it will be available to use in the API Call node. We can select our created API in the API node and select any generated API key as API response variable and select the variable in which you want to store the above API response variable.
3. After storing the response in a variable then these variables can be used in other nodes connected after API Call Node. Check out the Variable section on how to use variables.

To access nested JSON Variables from response.

[ 

  { 

    "id": 1, 

    "name": "Leanne Graham", 

    "username": "Bret", 

    "email": "[email protected]", 

    "address": { 

      "street": "Kulas Light", 

      "suite": "Apt. 556", 

      "city": "Gwenborough", 

      "zipcode": "92998-3874", 

      "geo": { 

        "lat": "-37.3159", 

        "lng": "81.1496" 

      } 

    }, 

    "phone": "1-770-736-8031 x56442", 

    "website": "hildegard.org", 

    "company": { 

      "name": "Romaguera-Crona", 

      "catchPhrase": "Multi-layered client-server neural-net", 

      "bs": "harness real-time e-markets" 

    } 

  }, 

  { 

    "id": 2, 

    "name": "Ervin Howell", 

    "username": "Antonette", 

    "email": "[email protected]", 

    "address": { 

      "street": "Victor Plains", 

      "suite": "Suite 879", 

      "city": "Wisokyburgh", 

      "zipcode": "90566-7771", 

      "geo": { 

        "lat": "-43.9509", 

        "lng": "-34.4618" 

      } 

    }, 

    "phone": "010-692-6593 x09125", 

    "website": "anastasia.net", 

    "company": { 

      "name": "Deckow-Crist", 

      "catchPhrase": "Proactive didactic contingency", 

      "bs": "synergize scalable supply-chains" 

    } 

  }, 

 

]

To access data from the above response. Create variables in the below format.

0.name
0.email
0.address.city

Note: 0 is the index here. Use indexes for lists and use object names in case of objects.

Once you save the rest API, these will be saved as variables in the variables section with the API name like below

Test_api_0.Name
Test_api_0.Email
Test_api_0.Address.City

'Test_api' is my API name in this example. You can use these variables in other nodes using ‘’{{‘’

Name: {{Test_api_0.name}},
Email: {{Test_api_0.email}},
Address: {{Test_api_0.address.city}}

Knowledge Base

Knowledge Base provides the option to train an AI model with specific information provided in the form of a URL or Document which can be later used in the flow to answer questions based on the information trained. This can be achieved using the Knowledge base node in the flow which allows you to select any knowledge base item you created.
The Knowledge Base List component is the main interface for viewing and managing the list of knowledge bases. It displays a list of existing knowledge bases and provides options to add new ones or edit existing ones.
1. Viewing Knowledge Bases: To view the list of knowledge bases, simply open the Knowledge Base List component.
2. Adding a New Knowledge Base: Click the "New/Add" button to add a new knowledge base. Fill in the required fields and click "Save" to add it to the list.
3. Editing an Existing Knowledge Base: Select a knowledge base from the list to edit it. Make the necessary changes and click "Update" to update it.
4. Training a Knowledge Base: If a knowledge base is not yet trained, click the "Train" button to start the training process.
The Knowledgebase Form is used for adding new knowledge bases or editing existing ones. It provides a form with fields for entering the details of a knowledge base.
1. The fields include:
  1. Type: Choose between 'URL' and 'Document'. This determines the type of knowledge base you are adding or editing.
  2. URL/Document: Enter the URL or upload a document file. This field is required.
  3. Name: Enter a name for the knowledge base. This field is required.
  4. Default Message: Enter a default message for the knowledge base.
  5. Terminate Message: Enter a terminate message for the knowledge base.
  6. Page Limit: If the knowledge base is a document, enter the page limit.
  7. Status: Displays the status of the knowledge base (e.g., 'Not Added', 'Not Trained', 'Training', 'Trained').
2. Actions:
  1. Save: Click to save the changes to the knowledge base. If adding a new knowledge base, it will be added to the list. If editing an existing knowledge base, the changes will be saved.
  2. Train: Click train to initiate the training process for the knowledge base. This is only available for knowledge bases that are not yet trained.
  3. Refresh Training Status: Click to refresh the training status of the knowledge base.

Variables

Variables enable the storage of values from API responses into keys, facilitating their use across multiple nodes. These keys can be manually added using the variables sidebar or dynamically generated when creating a REST API.

Adding a New Variable:

Variable Name: Start by entering the name of the variable you wish to add in the first text field labeled "Name". This field is crucial as it identifies your variable uniquely.
Variable Value: Next, input the value for your variable in the second text field. This is the data that will be associated with the variable name you have entered.
Input Variable: If the input option is marked then when a variable is created, then it cannot be edited later.
Add Variable: Once you have filled in the name and value fields and optionally marked the variable as an input, click the "Add" button. This action will add the variable to list of variables.

Managing Variables List

After adding variables, you will see them listed under the "Variables List" section. Each variable in the list displays its name and value, along with additional options if it is not marked as an input variable.
Editing a Variable: To edit a variable's value, hover over the variable in the list. This will reveal an "Edit value" button. Clicking this button toggles the edit mode, allowing you to change the variable's value directly in the list. This is not available if Input is checked when the variable is created.
Removing a Variable: If you need to remove a variable from the list, hover over the variable to reveal a "Remove" button. Clicking this button will remove the variable from your list. This is not available if Input is checked when the variable is created.
Viewing Input Variables: Variables marked as input will display an "Input" chip next to their name and value. This visual indicator helps you quickly identify which variables are designated as inputs.

Fields and Options

Name: The unique identifier for your variable.
Value: The data associated with the variable.
Input: A checkbox indicating whether the variable is an input variable.
Edit value: An option to edit the variable's value directly from the list.
Remove variable: An option to remove the variable from the list.

Usage:

Once the variables are created it can be used in multiple nodes.
To trigger the variables option in node that supports it, click an input field start the word with ‘{{‘ then a dropdown list will appear with all the available variables to choose from.
Select the variable from the list to use in the node.

Node Support for Variables:

Listed are the nodes below that support storing information via variables:

Question
Message
Multimedia
Document
Carousel
Buttons
List
CCTransfer
Condition
API Call
BuiltinFunction.