Flow Builder

Overview

The Flow Builder lets you create guided conversation flows without writing any code. Access it from your WordPress admin dashboard by navigating to Helpon → Flows. From there you can create new flows, edit existing ones, duplicate flows, and organize them into folders.

Flows are ideal for structured interactions where you need to collect information step by step, qualify leads, triage patient inquiries, book appointments, or walk visitors through a decision tree. Each flow consists of connected nodes that define what the chatbot says, what it asks, and how it responds to user input.

Visual Editor

The visual editor is a drag-and-drop canvas where you design your conversation flows. Nodes are placed on the canvas and connected with lines to define the conversation path. The editor supports the following controls:

Canvas Controls

Node Types

Each node in the Flow Builder serves a specific purpose. Drag nodes from the left panel onto the canvas to build your conversation path.

Input Types

Question nodes support multiple input types that control how visitors provide their answers. Choose the input type that best fits the data you need to collect.

{
  "type": "buttons",
  "question": "What service are you interested in?",
  "options": [
    { "label": "General Dentistry", "value": "general", "icon": "tooth" },
    { "label": "Orthodontics", "value": "ortho", "icon": "braces" },
    { "label": "Cosmetic", "value": "cosmetic", "icon": "sparkle" },
    { "label": "Emergency", "value": "emergency", "icon": "alert" }
  ],
  "variable": "selected_service"
}

Branching Logic

Branching logic lets you create dynamic conversations that adapt based on visitor responses, data conditions, and external factors. Use Condition nodes to split the flow into multiple paths.

Branch Types

• If/Else — Two-way split based on a true/false condition. The simplest form of branching.
• Switch Case — Multi-way split that matches a variable against multiple values. Each case leads to a different path.
• Pattern Match — Routes based on keyword detection in the visitor's response. Supports comma-separated keyword lists.
• Regex Match — Advanced routing using regular expression patterns for precise input validation and branching.

Conditions & Variables

Variables store data collected during the flow and can be used in messages, conditions, and actions. Helpon supports several variable types that you can reference using double-curly-brace syntax.

Variable Types

Hi {{contact.first_name | default:"there"}}! Thanks for choosing
{{session.selected_service}}. Your appointment is confirmed for
{{session.appointment_date | date:"F j, Y"}} at {{session.appointment_time}}.

We'll send a confirmation to {{session.email}}.

Comparison Operators

Combining Conditions

You can combine multiple conditions using AND and OR logic groups within a single Condition node. Click the Add Condition button to add more rules and toggle between AND/OR grouping.

IF (
  {{session.selected_service}} == "emergency"
  AND
  {{system.business_hours}} == false
)
THEN → After-Hours Emergency Path
ELSE → Standard Booking Path

Templates

Templates are pre-built flows that you can import and customize for your needs. They save time by providing proven conversation structures for common use cases.

Pre-built Templates

Using Templates

Testing Flows

Before publishing a flow to your live site, use the built-in testing tools to verify every path works correctly.

Session Management

When a visitor enters a flow, Helpon creates a session to track their progress, store collected data, and allow resumption if the visitor leaves and returns. Session behavior is configurable per flow.

How Sessions Work

{
  "session": {
    "timeout": 1800,
    "resume_enabled": true,
    "data_persistence": true,
    "max_sessions": 0,
    "clear_on_complete": false,
    "storage": "both",
    "expired_action": "send_followup",
    "followup_delay": 3600
  }
}

Troubleshooting

Common issues and their solutions when working with the Flow Builder:

Flow not triggering

• Verify the flow status is Published (not Draft or Paused) in Helpon → Flows.
• Check the flow's trigger conditions. Go to Flow Settings → Triggers and confirm the URL match, visitor segment, or event trigger is configured correctly.
• Ensure no other flow with a higher priority is intercepting the same trigger. Flows are evaluated in order of priority (lower number = higher priority).
• Clear your browser cache and any WordPress caching plugins. Cached pages may serve an outdated widget script without the new flow configuration.
• Check the browser console (F12) for JavaScript errors that may prevent the widget from loading.

Stuck at a node

• Open the flow in the editor and use Test Flow to reproduce the issue. Enable Debug Mode to inspect the exact variable state at the stuck node.
• Ensure the Question node has a valid input type configured. Missing or broken input configurations can prevent the visitor from responding.
• Check that all outgoing connections from the node are properly linked. A node with no output connection will halt the flow.
• If the node is a Condition, verify that at least one branch (including the default/else path) is connected. If no conditions match and there is no default path, the flow stops.
• For Action nodes, check the action logs in Helpon → Settings → Logs for API errors or timeouts that may block execution.

Variables not passing

• Confirm the variable name in the Question node matches exactly (case-sensitive) with the reference in your Message or Condition node. For example, {{session.email}} will not find a variable named Email.
• Check that the Question node's Save to Variable field is filled in. Without this, the visitor's answer is not stored.
• Use the correct prefix: session. for flow-collected data, contact. for CRM fields, visitor. for browser/device data, and custom. for Action-set values.
• In Debug Mode, inspect the Variables panel after each node to confirm values are being stored as expected.

Editor lagging with large flows

• Flows with over 50 nodes may cause the editor to slow down. Break large flows into smaller sub-flows and link them using the Transfer node with Go to Flow action.
• Disable the mini-map for complex flows if you experience rendering delays. Toggle it off with Ctrl M.
• Close unused browser tabs to free up memory. The visual editor uses a canvas renderer that benefits from available system resources.
• Use Chrome or Edge for best editor performance. Firefox and Safari may be slower with large canvas operations.