Designer - Visual Builder

Your no-code bot building studio

Overview

Designer is the visual bot builder in General Bots Suite. Create conversation flows, design user interfaces, and build automations without writing code. Designer uses a drag-and-drop interface that makes bot development accessible to everyone.

Features

Creating a New Flow

Step 1: Open Designer

1. Click the apps menu (⋮⋮⋮)
2. Select Designer
3. Click + New Flow

Step 2: Configure Flow

Step 3: Add Components

Drag components from the left panel onto the canvas.

Step 4: Connect Components

Click and drag from one component’s output to another’s input.

Component Types

Communication Components

Talk Component Options:

• Message text with variations (AI picks randomly)
• Use AI to personalize
• Include typing indicator
• Delay before sending

Ask Component Options:

• Question text
• Variable name to save response
• Expected type: Text, Number, Email, Phone, Date, Yes/No, Multiple Choice
• Validation message for invalid input

Logic Components

Branch Configuration:

• Set condition using variable comparisons
• Add multiple AND/OR conditions
• TRUE and FALSE output paths

Action Components

Action Error Handling:

• Stop flow and show error
• Continue to error path
• Retry N times

AI Components

Classify Example Categories:

• support - Customer needs help with a problem
• sales - Customer interested in buying
• billing - Payment or invoice questions
• feedback - Customer giving feedback
• other - Anything else

Working with the Canvas

Navigation

Canvas Controls

Using Variables

Variables store information during the conversation.

System Variables (read-only):

Flow Variables: Variables you create using Ask or Set Variable components.

Reference variables with double curly braces: {{variableName}}

Testing Your Flow

Preview Mode:

1. Click Preview button
2. A chat window opens
3. Test the conversation
4. Watch the flow highlight active steps

The Preview panel shows:

• Flow visualization with active step highlighted
• Test conversation area
• Current variable values
• Clear and Reset buttons

Deploying Your Flow

When your flow is ready:

1. Click Deploy
2. Choose deployment options:
   • Production or Staging only
   • Immediate or Scheduled
3. Configure triggers:
   • Specific phrases (e.g., “help”, “support”)
   • As default fallback
   • On schedule
4. Review changes since last deploy
5. Confirm deployment

Templates

Start faster with pre-built templates:

Keyboard Shortcuts

Canvas

Components

Flow

Tips & Tricks

Design Tips

💡 Keep flows simple - Break complex flows into smaller sub-flows

💡 Use descriptive names - “Ask for Email” is better than “Step 3”

💡 Add comments - Right-click any component to add notes

💡 Test often - Preview after every few changes

Organization Tips

💡 Use folders to organize related flows

💡 Version your flows - Save before major changes

💡 Use templates for consistent starting points

💡 Color-code paths - Use colors for different intents

Performance Tips

💡 Minimize API calls - Cache results when possible

💡 Use AI classification early - Route users quickly

💡 Set timeouts - Don’t let flows hang indefinitely

💡 Handle errors - Always add error paths

Troubleshooting

Flow not triggering

Possible causes:

1. Flow not deployed
2. Trigger words not matching
3. Another flow has priority

Solution:

1. Click Deploy and confirm it’s active
2. Check trigger configuration
3. Review flow priority in settings
4. Test with exact trigger phrases

Variables not working

Possible causes:

1. Typo in variable name
2. Variable not set yet in flow
3. Wrong scope

Solution:

1. Check spelling matches exactly (case-sensitive)
2. Ensure variable is set before being used
3. Use Preview mode to watch variable values
4. Check the Variables panel for current values

Component errors

Possible causes:

1. Missing required configuration
2. Invalid connection
3. Action failed

Solution:

1. Click the red error icon for details
2. Fill in all required fields
3. Check that connections make logical sense
4. Review error logs in Preview mode

Preview not matching production

Possible causes:

1. Changes not deployed
2. Different data in production
3. External service differences

Solution:

1. Deploy latest changes
2. Test with same data as production
3. Check API connections are identical
4. Review production logs

BASIC Integration

Designer flows generate BASIC code. You can view and customize it.

View Generated Code

Right-click any component and select “View Code”:

' Generated from "Customer Support" flow

TALK "Hello! How can I help you today?"

HEAR userMessage AS TEXT

intent = CLASSIFY userMessage INTO ["support", "sales", "billing", "other"]

IF intent = "support" THEN
    TALK "I'm sorry to hear you're having issues!"
    HEAR orderNumber AS TEXT "What's your order number?"
    result = SEARCH KB "order " + orderNumber
    TALK result.answer
ELSE IF intent = "sales" THEN
    ' ... sales flow
END IF

Mix Designer and Code

Use the Code component to add custom BASIC:

' Custom calculation
discount = 0

IF userType = "premium" THEN
    discount = orderTotal * 0.15
ELSE IF orderTotal > 100 THEN
    discount = orderTotal * 0.05
END IF

finalPrice = orderTotal - discount

See Also

• Sources App - Manage prompts and templates
• Chat App - Test your flows
• How To: Write Your First Dialog
• BASIC Keywords Reference