Using the Visual Editor

Hexabot's Visual Editor provides an intuitive drag-and-drop interface to design your chatbot's conversation flows without writing any code. This guide walks you through the key elements and functionalities of the Visual Editor, making it easy to build engaging chatbot experiences.

1. Accessing the Visual Editor:

• Log in to your Hexabot account.

• In the main menu, click on "Visual Editor."

2. Understanding the Interface:

The Visual Editor typically consists of the following main areas:

• Canvas: The central workspace where you build your conversation flow.

• Block Palette: A menu or sidebar listing the various blocks you can use to design your chatbot's interactions (e.g., Simple Text, Quick Replies, Buttons, User Input, etc.).

• Configuration Panel: A panel that appears when you select a block on the canvas, allowing you to customize the block's properties, triggers, and responses.

• Toolbar: A toolbar located at the bottom right of the editor, primarily used for managing the canvas view with options to zoom in, zoom out, and reset the view to its default size.

3. Building a Conversation Flow:

• Drag and Drop Blocks: Drag blocks from the block palette onto the canvas to add them to your conversation flow.

• Connect Blocks: Click and drag from the connection points of one block to another to define the sequence of interactions. The connections determine the flow of the conversation.

• Customize Blocks: Click on any block on the canvas to select it. The configuration panel will open, allowing you to edit the block's properties:

  • Triggers Tab (Optional): Define the conditions that determine when the block should be activated. This could include specific keywords in the user's message, previously collected data, or other events.

  • Message Tab: Enter the text message the chatbot will send, configure buttons or quick reply options, or specify other chatbot actions (like displaying an image or collecting user input).

  • Options Tab (Optional): Set additional settings like the typing indicator delay, label targeting, or define fallback responses for unexpected user input.

4. Organizing Your Conversation Flow:

• Layout: Arrange blocks on the canvas to create a visually clear and logical flow.

• Branching: Use conditional logic (typically in the "Triggers" tab) to create branches in your conversation flow. This lets you handle different user responses and guide them down different paths based on their choices.

• Grouping (Optional): Hexabot allow you to group blocks into categories to keep related parts of your conversation flow organized in different tabs.

5. Testing and Iteration:

• Live Chat Tester: Most chatbot platforms offer a "Live Chat Tester" feature within the Visual Editor. This lets you test your conversation flow and see how your chatbot interacts in a simulated environment.

• Channel Testing: Once you're satisfied with the basic flow, test your chatbot on the actual messaging channels (e.g., website, Facebook Messenger) where it will be deployed to get a more realistic user experience.

• Iterate Based on Feedback: Gather feedback from testing and real user interactions. Use this feedback to continuously improve your conversation flow, making it more engaging, effective, and user-friendly.