​
Web Editor

The AI Chat Assist Web Editor is a powerful visual tool that allows you to customize and configure your chatbot without writing any code. This intuitive interface makes it easy to design conversation flows, customize appearance, and manage your chatbot’s knowledge base.

AI Chat Assist Web Editor Interface

​
Accessing the Web Editor

1

Log In to Dashboard

  1. Go to AI Chat Assist Dashboard
  2. Enter your email and password
  3. Click Sign In
2

Select Your Chatbot

  1. From the dashboard, locate the chatbot you want to edit
  2. Click on the chatbot name or the Edit button
  3. You’ll be taken to the Web Editor interface

​
Editor Interface Overview

The Web Editor is divided into several key sections:

Conversation Builder

Design conversation flows and decision trees

Knowledge Base Manager

Upload and organize your chatbot’s information

Appearance Customizer

Style your chatbot to match your brand

Settings Panel

Configure behavior and integration options

Analytics Dashboard

View performance metrics and conversation data

Testing Environment

Preview and test your chatbot before publishing

​
Conversation Builder

Conversation Builder Interface

The Conversation Builder allows you to create structured conversation flows using a visual, drag-and-drop interface.

1

Create a New Flow

  1. Click the + New Flow button
  2. Enter a name for your flow (e.g., “Product Inquiry”)
  3. Click Create
2

Add Conversation Nodes

  1. Drag nodes from the left panel onto the canvas
  2. Available node types include:
    • Message: Send a text, image, or button message
    • Question: Ask for user input
    • Condition: Create branching logic
    • Action: Perform operations like saving data or API calls
    • Integration: Connect to external services
  3. Connect nodes by dragging from the output dot of one node to the input dot of another
3

Configure Node Properties

  1. Click on a node to select it
  2. Use the properties panel on the right to configure:
    • Message content
    • Response options
    • Variables and conditions
    • Actions and integrations
  3. Click Save to apply changes

​
Knowledge Base Manager

  • Document Upload

  • FAQ Management

  • Web Import

1

Add Documents

  1. Go to the Knowledge Base tab
  2. Click Upload Documents
  3. Select files from your computer (supported formats: PDF, DOCX, TXT, HTML)
  4. Click Upload
2

Process Documents

  1. The system will automatically extract and process text
  2. Review the extracted content
  3. Make any necessary edits
  4. Click Save to Knowledge Base

​
Appearance Customizer

Appearance Customizer Interface
1

Basic Styling

  1. Go to the Appearance tab
  2. Customize:
    • Primary color
    • Secondary color
    • Font family
    • Button style
    • Chat bubble shape
  3. See changes in real-time in the preview panel
2

Widget Configuration

  1. Choose widget type:
    • Floating button
    • Embedded chat
    • Full page
  2. Set position (bottom-right, bottom-left, etc.)
  3. Configure size and spacing
  4. Set animation style for opening/closing
3

Advanced Customization

  1. Click on Advanced tab
  2. Upload custom icons and images
  3. Add custom CSS if needed
  4. Configure mobile-specific appearance
  5. Set up dark mode options

​
Testing Your Chatbot

1

Preview Mode

  1. Click the Preview button in the top-right corner
  2. Interact with your chatbot as a user would
  3. Test different conversation paths
  4. Verify that responses are accurate and helpful
2

Debug Mode

  1. Enable Debug Mode in the preview panel
  2. See detailed information about:
    • Which conversation nodes are triggered
    • Knowledge base matches
    • Variables being set
    • API calls and responses
  3. Use this information to troubleshoot issues
3

User Testing

  1. Click Share Preview
  2. Copy the generated link
  3. Send to team members for testing
  4. Collect feedback
  5. Make improvements based on feedback

​
Publishing Changes

1

Review Changes

  1. Click the Review Changes button
  2. See a summary of all modifications made since last publish
  3. Verify that everything is correct
2

Publish

  1. Click the Publish button
  2. Confirm that you want to make changes live
  3. Your updated chatbot will be immediately available to users
3

Version Control

  1. Each publish creates a new version
  2. View version history in the Versions tab
  3. Roll back to previous versions if needed
  4. Compare different versions to see what changed

​
Keyboard Shortcuts

For power users, the Web Editor offers several keyboard shortcuts to speed up your workflow:

ActionWindows/LinuxMac
SaveCtrl+S⌘+S
UndoCtrl+Z⌘+Z
RedoCtrl+Y⌘+Shift+Z
CopyCtrl+C⌘+C
PasteCtrl+V⌘+V
PreviewCtrl+P⌘+P
PublishCtrl+Shift+P⌘+Shift+P
New FlowCtrl+N⌘+N
Zoom InCtrl++⌘++
Zoom OutCtrl+-⌘+-

​
Next Steps

Advanced Settings

Configure advanced options for your chatbot

API Reference

Integrate your chatbot with custom code

Bot Management

Learn about managing multiple chatbots

Analytics

Understand chatbot performance metrics