What is SupportBot?

SupportBot is a no-code customer support automation platform. You design conversation flows visually, publish them, and your customers interact with them through an intelligent chat interface — all without writing a single line of code.

Logging In

Access the SupportBot platform from the login page. Your account credentials are set up by your company administrator or superadmin.

Navigating the Platform

After login, the platform has a top navigation bar with tabs to switch between the main views. The currently active tab is highlighted in white.

Top-right User Menu

Click your avatar or name in the top-right to open the dropdown menu. From there you can:

• View your account name, role and company
• Go to Team management page (admin/manager roles)
• Load Demo Data to prefill sample flows
• Seed KB & APIs sample data
• Sign Out of the platform

Dashboard

The Dashboard is your home for managing all conversation flows. It shows a grid of flow cards, organized by category, with search and filter tools.

Stats Bar

At the top, four stat counters show: Total Flows, Published, Total Nodes, and Drafts. These update in real time as you create or publish flows.

Category Sidebar

On the left side, categories let you organize flows into groups (e.g. "Hotel Services", "Billing", "IT Support"). Click a category to filter the flow grid. Right-click or use action buttons to edit/delete categories.

Creating a New Flow

Flow Card Actions

Each flow card shows the flow name, status badge (Draft / Published), node count, and category. Hover the card to reveal:

Flow Builder

The Flow Builder is a visual canvas where you design conversation flows by connecting nodes. Think of each node as one "step" in the conversation — a question, a message, a decision, an API call, and so on.

Canvas Controls

Properties Panel (Right Side)

When you click a node on the canvas, the right panel slides open showing two tabs:

• Edit tab — configure the node's content, input type, answer options, API settings, etc.
• Simulate tab — run a live chat simulation directly from this panel

All changes in the properties panel update the node on the canvas in real time.

Saving & Publishing

Node Types

Every node represents one step in the conversation. Drag them from the left palette. Here's what each one does:

Connecting Nodes (Wiring)

Each node has output ports (small circles on the right or bottom). Drag from an output port and drop onto another node's input port (left or top circle) to create a wire connection. For Question nodes, each answer option has its own output port so each choice can lead somewhere different.

Using Variables in Nodes

Any text field that supports {'{{'}vars{'}}'} allows you to inject dynamic values. For example:

Variables are set when a user answers a Question (via Save Input → Variable), from an API response mapping, or by a Set Variable node.

Preview & Simulate

Test your flow before publishing using the built-in chat simulator. You can simulate the exact conversation a customer would have — including API calls, variable injection, and branching logic.

How to Open the Simulator

Test Variables

Click TEST VARIABLES (collapsed panel inside the simulator) to pre-seed variable values before the simulation starts. Enter one key=value per line:

Then click the restart button to apply these values to the simulation.

Flow Path Tracker

The simulator shows a Flow Path tracker at the bottom that records every node visited, its type, and the user's answer at each step — useful for debugging branching logic.

Conversations

The Conversations page shows every chat session that has taken place — from preview simulations, the chat page, and the chat modal widget. All sessions are logged with outcome, duration, and full message history.

Date Filters

Use the date preset buttons to quickly filter conversations by time period:

For a custom date range, enter a From and To date and click Apply. All analytics cards and the chart update instantly.

Analytics Cards

Five stat cards summarize the filtered conversations:

Daily Chart

A bar chart shows conversations per day (or per hour for today/yesterday). Bars are color-coded: ■ Resolved, ■ Escalated, ■ Incomplete. Hover over any bar for exact numbers.

Outcome Filters & Search

Below the chart, use the filter tabs to narrow down by outcome (All / Resolved / Escalated / Incomplete), or type in the search box to find conversations by flow name, agent name, or outcome keyword.

Conversation List & Pagination

Conversations are listed 100 per page. Each row shows: session ID, flow name, outcome badge, duration, agent, and timestamp. Click a row to expand the full message transcript. Use the Prev / Next buttons or page numbers at the bottom to navigate pages.

Knowledge Base — Articles

The Knowledge Base stores internal support articles — troubleshooting guides, FAQs, standard procedures, escalation scripts. Agents and bots can reference these to give accurate answers.

Creating an Article

Organizing Articles

Articles can be filtered by Published / Draft status and searched by title keyword. Use the filter tabs above the article grid to quickly find what you need.

API Collection (Postman-like)

The API Integrations tab in the Knowledge Base is a full Postman-style API collection manager. Organize your external API calls into collections, test them live, and map their responses for use in flows.

Collections & Requests

The API panel has a 2-level tree structure:

• Collection — A group of related API requests (e.g., "Hotel PMS API", "Payment Gateway"). Each collection holds its own auth settings.
• Request — A single API endpoint (e.g., GET /bookings/{'{'}id{'}'}, POST /payments/charge). Belongs to a collection.

Creating a Collection

Adding & Testing Requests

Click a collection in the sidebar, then click + Add Request. The request editor opens with 6 tabs:

Click Send to execute the request live. The response pane shows the HTTP status, time taken, response size, and formatted JSON body.

AI-Assisted Descriptions

If an OpenRouter API key is configured by the Superadmin, you can click:

• AI Describe — Automatically generates a plain-English description of what the API request does
• AI Suggest Outcomes — Analyzes the request and suggests outcome mapping rules based on typical API response patterns

MCP Tool Definitions

Each API request can generate an MCP Tool Definition — a JSON schema in the OpenAI function-calling format. These definitions let AI agents (like GPT-4, Claude, etc.) know when and how to call your APIs.

Generating an MCP Tool

Team Management

Managers and Account Admins can access the Team page to invite, manage, and remove team members. Each member has a role that determines their access level.

User Roles

Inviting a Team Member

Chat URL & Widget

In the Team admin page, the Chat URL tab shows the embeddable chat widget code and the direct link to the customer-facing chat page. Share this link or embed the snippet in your website so customers can access the support bot.

Customer Chat Page

The chat.html page is what your customers see. It's a standalone, dark-themed chat interface that lists your published flows and lets customers start conversations.

Category Grid

The chat page opens with a category picker showing all published flow categories as cards. Customers click a category to see the flows available in it, then select a flow to start a conversation.

Conversation Interface

Once a flow is selected, the full chat UI appears:

• Header — Shows the flow name and Online status indicator
• Messages area — Bot and user bubbles appear here
• Choice buttons — Scrollable row of option buttons for Question nodes
• Text input — Shown for text/phone/email/number input nodes
• Footer — "← All topics" link and Powered by SupportBot branding

Superadmin Panel

The Superadmin panel (superadmin.html) is accessible only to the platform-level super administrator. It manages all companies, users, platform-wide settings, and data backup.

Companies Tab

View and manage all company accounts on the platform. Create new company accounts, set their plan tier, and emulate any company's session for troubleshooting.

Users Tab

See all users across all companies. Reset passwords, change roles, or deactivate accounts from this panel.

Backup Tab

Export or restore platform data. Useful for migrations or disaster recovery scenarios.

Platform Settings Tab

Configure global platform settings including:

• OpenRouter API Key — Used to power AI features (AI Describe, AI Suggest Outcomes) in the API Collection panel
• AI Model — Choose which language model to use (GPT-4o-mini, Claude 3 Haiku, Gemini Flash, Mistral, etc.)
• Test Key — Verify the API key is valid and has credits before saving

Tips & Best Practices

Flow Design

• Always start with a Question or Message node as your first node and mark it as the start node.
• Every flow path should end with either an End / Resolve or Escalate node — never leave paths open-ended.
• Use Set Variable nodes before Condition nodes to ensure variables are populated before evaluation.
• Use Auto Layout frequently to keep your canvas tidy — especially after adding many nodes.
• Test with Preview after every major change before publishing.
• Use Go to Flow nodes to split large flows into smaller, reusable modules.

API Call Nodes

• Always use {'{{'}varName{'}}'} syntax for dynamic values in URLs, headers, and body.
• Map important response fields to variables so downstream nodes can use the data.
• Add a Save Raw Response → Variable as a debug fallback during testing.
• Test your API call in the API Collection panel first, then use the confirmed URL/method in the flow node.

Conversation Quality

• Keep bot messages short and clear — one idea per message bubble.
• Limit multiple-choice options to 4–6 items for a better mobile experience.
• Always include an Escalate path as a fallback option so customers can always reach a human agent.
• Use variable interpolation (e.g., Hello {'{{'}name{'}}'}) to personalize the conversation.

Using Analytics

• A high Escalated % may indicate that your flow isn't answering the most common questions — review and add more branches.
• A high Incomplete % often means users are abandoning mid-conversation — check for confusing nodes or broken API calls.
• Use the Flow Path Tracker in the simulator to trace exactly where conversations go wrong.
• Check the Avg Duration — very long conversations may need to be simplified or split.

Glossary

Key terms used throughout the SupportBot platform.