Flow path design is a critical aspect of chatbot solutions defining the end-to-end scenarios of chatbot actions and responses. With the increased complexity of the business logic for the chatbot, the flow path design also gets complicated to visualize and build as a whole. This leads to frequent errors and loss of time. The Conversation Modeler is an innovative representation of the flow path designer allowing for flows to be edited and visualized on a single canvas. 


Introduction to the new Canvas

A bot could consist of multiple paths and each path consists of multiple nodes. A user can navigate between paths by either choosing a path on the Path Selector available on the left hand side of the canvas or by creating a new path. On the top left-hand side of the canvas, the user has the option to toggle presence of the path selector. The canvas on also provides the option to zoom-in and out available on the top bar.


Each node is a logical step in the path flow and is represented on the canvas by a different color and consists of additional elements depending on the type. For example, a Send Message will show a preview of the message on the canvas whereas a Carousel will show the various cards as part of the Carousel.


Adding a Node

A node can be added by clicking on the “+” available on the bottom right. Alternatively, a node can also be added by clicking on “+” available at the bottom section of the node.


Editing a Node

A node can be edited by clicking on the edit icon next to the node. The option appears when the cursor hovers over the node. Alternatively, the node can be edited by double clicking the node which opens up the dialog box.


Building Connections

A connection between two nodes can be created by clicking on “+” available at the bottom of the first node and dragging the connection to the second node that it needs to be connected to. This option is also available from nodes that support branching. This includes the “Send Message with Options”, “Carousel” and “Decision” nodes. Each such option to build connections to existing paths or to add a new node at that point, is represented by a “+” icon. 


Deleting a Node

A node can be deleted by clicking on the delete icon next to the node. The option appears when the cursor hovers over the node.


Setting up Path Changes in the Bot

To redirect the flow to a different path, use the “Trigger Path” node and select the path that you would want the flow to be redirected to. 


The Start Node

The Start node is the root node for a path and is identified by a ‘START’ text above the node. If the user requires to delete the Start node, then another node has to be chosen as the Start node for the path