Chatbot Builder

The Chatbot Builder is a visual drag-and-drop editor that allows you to create automated conversation flows for your chat widget. Build interactive chatbots without any coding knowledge.

Overview

The Chatbot Builder uses a node-based visual editor where you:

1. Add different types of steps (nodes) to your flow
2. Connect nodes to create conversation paths
3. Configure each node with messages, options, and actions
4. Save and preview your chatbot

Getting Started

Accessing the Builder

1. Log in to your Chatim dashboard
2. Select your project from the sidebar
3. Click Chatbot in the navigation menu

Interface Overview

Toolbar Actions

Templates

Click Templates to browse pre-built chatbot flows. Templates help you get started quickly with common use cases like lead generation, FAQ bots, appointment booking, and more. See Chatbot Templates for the full list.

Note: Loading a template will replace your current flow. You'll be prompted to save unsaved changes first.

Preview

Click Preview to test your chatbot in a new browser tab. This opens a preview page where you can interact with your chatbot exactly as visitors will experience it.

Add

Click Add to open a panel with all available node types. Click or drag a node type to add it to your canvas.

Center

Click Center to zoom and pan the canvas so all your nodes fit on screen. Useful when working with large flows.

Save

Click Save to save your chatbot configuration. The save button turns green when you have unsaved changes.

Important: Always save your changes before leaving the page. Unsaved changes will be lost.

Node Types

Start Node

The Start node is automatically created and marks the beginning of your conversation flow. Every chatbot must have exactly one Start node. It cannot be deleted or edited and has a single output that connects to your first step.

Message Node

Display a text message to the visitor. Supports rich text formatting: bold, italic, underline, links, ordered and bullet lists. Automatically advances to the next connected node after displaying.

Use cases: Welcome messages, information delivery, instructions, transitions between conversation sections.

Selection Node (Multiple Choice)

Present the visitor with multiple clickable options to choose from. Each option creates a separate output on the node, allowing you to create branching conversation paths.

Configuration:

• Message - Optional text displayed before the options (rich text)
• Options - List of choices the visitor can select

Use cases: Qualifying questions, navigation menus, quick replies, branching conversation paths.

Form Node

Collect information from visitors through form fields. The configuration has two tabs: Message (optional introduction text) and Fields.

Supported field types:

Each field supports a label, placeholder, help text, and a required toggle.

Notification Node

Trigger notifications and update visitor status when reached in the flow. This node runs silently in the background and automatically advances to the next step.

Configuration:

• Status Change - Set the visitor's status (New, Lead, Customer, Closed, Archived)
• Push Notifications - Enable browser push notifications with a custom message
• Email Notifications - Add one or more email addresses to receive alerts

AI Chatbot Node

Hand off the conversation to an AI-powered chatbot that can answer questions based on your Knowledge Base.

• Welcome Message - Optional message shown when AI takes over
• The AI takes over the conversation permanently - the rule-based flow does not resume

Use cases: 24/7 automated support, FAQ answering, product information queries, after-hours coverage.

Live Chat Node

Transfer the conversation to a live human agent from your team.

• Waiting Message - Message shown while waiting for an agent
• Notification Message - Optional message in the push notification sent to your team
• The chat switches to live mode permanently - the rule-based flow does not resume

Carousel Node

Display a scrollable set of cards with images, descriptions, and action buttons.

• Introduction Message - Optional text shown before the carousel
• Items - One or more cards, each with an image URL, title, description, and up to 2 buttons

Button types: URL button (opens a link) or Flow button (continues to the next node, creating a separate output like Selection options).

Use cases: Product showcases, service offerings, feature highlights, portfolio displays.

Building Your Flow

Adding Nodes

1. Click Add in the toolbar
2. A panel opens showing all available node types
3. Click a node type to add it to the canvas, or drag it
4. The canvas automatically rearranges to keep your flow tidy

Connecting Nodes

1. Click on the output port (right side) of a node
2. Drag to the input port (left side) of another node
3. Release to create the connection

Tips:

• Selection and Carousel nodes can have multiple outputs (one per option or flow button)
• AI Chatbot and Live Chat nodes have no output - they are terminal steps
• Other nodes have a single output that auto-advances

Editing Nodes

1. Click the Edit button on any node
2. A configuration panel slides open on the right
3. Make your changes
4. Click Save in the panel

Deleting Nodes

Click the Delete button on a node to remove it. The Start node cannot be deleted.

Best Practices

Keep It Simple

• Limit the number of steps to avoid overwhelming visitors
• Use clear, concise messages
• Offer 3-5 options maximum in selection nodes

Design for Mobile

• Keep messages short (viewable on small screens)
• Use simple form fields
• Test on mobile devices

Guide the Conversation

• Always provide a clear next step
• Use selection nodes to direct the flow
• Include an option to talk to a human using the Live Chat node

Collect Information Strategically

• Don't ask for too much information at once
• Explain why you need the information
• Mark only essential fields as required

Test Thoroughly

1. Use the Preview button frequently
2. Test all conversation paths
3. Verify notifications are received
4. Check on both desktop and mobile

Common Flow Patterns

Lead Qualification

Start → Welcome Message → "What brings you here?" (Selection)
  ├─ "Pricing inquiry" → Contact Form → Notification (Lead) → Thank You
  ├─ "Product demo" → Demo Form → Notification (Lead) → Confirmation
  └─ "Support" → AI Chatbot

Customer Support with Escalation

Start → Welcome Message → "How can we help?" (Selection)
  ├─ "Quick question" → AI Chatbot
  ├─ "Return an item" → Return Form → Notification → Instructions
  └─ "Talk to someone" → Live Chat

Product Showcase

Start → Welcome Message → Carousel (3 products)
  ├─ "View Product A" (URL) → opens product page
  ├─ "Learn More about B" (Flow) → Details Message → Contact Form
  └─ "Get a Quote" (Flow) → Quote Form → Notification (Lead)

Troubleshooting

Flow Not Working

1. Ensure all nodes are connected
2. Verify the Start node has an outgoing connection
3. Check that required fields are properly configured
4. Save your changes and test again

Notifications Not Sending

1. Verify email addresses are correct
2. Check spam/junk folders
3. Ensure push notifications are enabled in your browser settings
4. Confirm team members have accepted push notification permissions

Preview Shows Old Version

1. Make sure you saved recent changes
2. Refresh the preview page
3. Clear browser cache if needed