Visual Editor

Bot Studio’s visual editor allows you to create bots using JSON language. Bot Studio heavily uses JSON to operate its system. The visual editor lets you write custom node data, custom nodes, and customize anything within your functional data.

Data Verification#

The visual editor comes with a data verifier system that checks if your system is functional. You can use this system to debug your system when you are coding, making coding easier and more enjoyable.

How It Works?#

Here is an example of functional data written in JSON:

 1{
 2  "nodes": [
 3    {
 4      "id": 1,
 5      "data": {},
 6      "inputs": {},
 7      "outputs": {
 8        "action": {
 9          "connections": [
10            {
11              "node": 17,
12              "input": "action"
13            }
14          ]
15        }
16      },
17      "position": [0, -198],
18      "name": "Message Event",
19      "executed": {
20        "amirfarzamnia": 7
21      }
22    },
23    {
24      "id": 17,
25      "data": {
26        "text": "Hello World!",
27        "chat_id": "{message_chat_id}",
28        "disable_web_page_preview": false,
29        "disable_notification": false,
30        "protect_content": false,
31        "allow_sending_without_reply": false
32      },
33      "inputs": {
34        "action": {
35          "connections": [
36            {
37              "node": 1,
38              "output": "action"
39            }
40          ]
41        }
42      },
43      "outputs": {},
44      "position": [280, -391],
45      "name": "Send Message",
46      "executed": {}
47    }
48  ],
49  "comments": [
50    {
51      "text": "An example of comment system.",
52      "position": [-29.91446506852043, -71.17063540190969],
53      "links": [1],
54      "type": "inline"
55    }
56  ]
57}

A functional system consists of two array objects:

Nodes (important)#

The nodes array contains all nodes inside the editor. This object is important and must be included in your functional system. You can include all nodes inside this object. Here is how you must include a node data:

• id: The ID of the node.
• data: The node data is required for some nodes which use inputs, such as “Match” node and “API Request” node.
• inputs: The input connections of the node.
• outputs: The output connections of the node.
• position: Consists of 2 numbers, X and Y, indicating the position of the node within the editor area. (Default position is 0).
• name: The node name is the component name that this node is using.
• executed (Optional): How many times this node has been executed by executers. Used for analyzing nodes in analysis mode.

After including all parameters, you can successfully create a node. You can use this pattern to create all the nodes within the visual editor.

Comments#

The comments array consists of all comments within the editor. This value is optional and doesn’t affect the bot’s execution process on the server. It’s only used for the drag-and-drop editor to clarify the functional system. Here is how a comment value should look like:

• text: The comment’s text.
• position: Comment’s position within the editor area.
• links: The nodes that this comment is linked to.
• type: Type of comment. It can be an “inline” comment or a “frame” comment.

Using this visual editor, you can manage all the editor’s functions. It’s recommended to choose the drag-and-drop editor as the default editor for your bot, create a functional system, and make small changes on the visual editor. Remember that Bot Studio’s default editor is the drag-and-drop editor and we recommend using that instead.