Web Chat Introduction Overview
This article introduces Web Chat interactive features and custom interface, enabling you to build a Web Chat service that aligns with your corporate style
1. What is WebChat?
You can embed AI assistants created in MaiAgent into your website to provide real-time customer service or other conversations. Web Chat features responsive design, perfectly adapting to desktop, tablet, and mobile devices.
MaiAgent currently offers the following two embedding methods:
1. Bottom-Right Corner Embedding
Embed into your official website as a built-in intelligent assistant
Does not interfere with normal user browsing, available anytime when needed
Suitable for general customer service and consultation services
2. Full-Screen Embedding
Provides a complete conversation experience
Suitable for complex consultation and service processes
Customizable design to meet enterprise needs
This design brings:
Real-time response: Visitors receive professional answers immediately without waiting, enhancing user experience
Convenience: Bottom-right floating design doesn't interfere with normal browsing, available anytime when needed
Cost-effectiveness: AI assistant provides 24/7 service, significantly reducing labor costs
Professional image: Demonstrates the company's technological strength and service quality
2. Building a Corporate-Style Web Chat Service
MaiAgent provides customization features such as custom LOGO, avatar, Q&A theme colors, etc., to help you build a corporate-style Web Chat service
You can create your own Web Chat appearance by:
Selecting assistant display name
Uploading your corporate LOGO
Selecting AI assistant display avatar
Selecting Web Chat theme color
Selecting message background color for AI assistant replies
This way, you can build a Web Chat service that aligns with your corporate color scheme and style
3. Message Customization
When first entering the Web Chat service, you can freely customize your AI assistant's opening message based on the following scenarios.
1. Opening Message Customization
Branded Greeting
Set: "Welcome to our website! I am your dedicated customer service assistant" to showcase the company's professional image and friendly service attitude
Guided Opening
Set: "I can help you inquire about product information, answer usage questions, and assist with order processing" to clearly inform users of the available service scope, building user trust in service capabilities
2. Guided Starter Questions
Set "conversation starter questions" as quick options
Users can directly click common questions without typing
Example questions:
"How to view ordered items?"
"How to place an order"
"Member points rules"
"Business hours"
Users can start conversations by clicking starter questions, accelerating the Q&A process:
4. Diverse Q&A Content
1. Multi-Language Support
Responds in the user's language, eliminating communication barriers.
Auto-detection: Selects assistant reply language based on user input language
Manual switching:
Use the Web Chat interface to select language, see: Multi-Language Support: Web Chat Settings.
Use Web Chat initialization script (javascript) to specify AI assistant reply language, see: Technical Manual—Web Chat Initialization.
2. Multimodal Q&A
In addition to text Q&A, the AI assistant can also support different types of file uploads:
Spreadsheets: .xls, .xlsx, .csv, .ods
Document files: .doc, .docx, .odt, .pdf, .md, .txt
Presentation files: .ppt, .pptx, .odp
Web documents: .html, .htm
Data formats: .json, .jsonl
Audio files: .wav, .mp3
Image Content Processing
Image Recognition and Analysis
Upload image analysis: Users can upload product images, AI automatically identifies and provides relevant information
Screenshot processing: Supports screenshot analysis to help resolve usage issues
Image description: Automatically generates image content descriptions and related suggestions
Image Reply Function
Product image display: Includes actual product images in replies
Operation guide images: Provides step-by-step operation screenshots
Examples:
User asks where to set up MaiAgent assistant, assistant responds with settings screen image
User takes screenshot to confirm path with assistant, assistant correctly interprets and responds
Document Processing Capability
Supported Document Formats
PDF documents: Automatically parses PDF content and answers related questions
Word documents: Processes .doc/.docx format documents
Excel spreadsheets: Analyzes spreadsheet data and provides insights
PowerPoint presentations: Extracts presentation content and answers questions
Document Interaction Functions
Document content query: Answers specific questions based on uploaded documents
Data analysis: Automatically analyzes table data and provides statistical information in table format
Document summary: Generates key content summaries of long documents
Example 1: Ask AI assistant to present data content in table format and provide reference links
Example 2: Ask assistant to analyze sales content and provide table analysis
Example 3: Upload docx file, ask assistant to help analyze CV writing issues
AI assistant uses Markdown format to reply, organizing response content in an orderly manner.
5. Conversation History and Sharing
1. Conversation History Memory
To provide a continuous service experience, WebChat automatically remembers user conversation history, allowing each conversation to build on previous interactions.
Memory Content Scope
Conversation content: Complete Q&A records, including text, images, documents, etc.
Service status: Unfinished queries, pending issues
Users can view past conversation records in the left conversation list of Web Chat or start a new conversation
Conversation memory function can be used for:
Continuous consultation: User asks "What was the tent model you recommended last time?", AI can immediately recall and answer
Progress tracking: User says "Continue the previous order inquiry", AI automatically retrieves relevant information
Personalized service: Provides more accurate recommendations and suggestions based on conversation history
2. Conversation Sharing
When you want to share a conversation with friends or colleagues after consulting the AI assistant, or when internal teams need to collaborate on customer issues, you can use MaiAgent service to generate conversation sharing links:
Shared Content
Complete conversation records: Includes all text, images, documents, etc.
Conversation summary: Automatically generates conversation highlights summary
Related resources: Product links, documents mentioned in the conversation, etc.
Conversation record sharing can be used for:
Customer sharing: "This camping equipment recommendation is great, sharing with the mountaineering club"
Internal collaboration: Customer service staff shares complex issues with technical support team
Training purposes: Shares typical conversation cases for employee training materials
6. Choose Whether to Display Tool Usage and Referenced Document List
1. Display Tool Usage List
You can choose whether to let users see the list of tools used by the AI assistant during reasoning. If allowed, the AI assistant will display the following screen when generating responses:
You can track whether the tool content used by the AI assistant is correct through this list.
2. Display Referenced Document List
Each AI answer automatically generates a referenced document list, clearly indicating information sources, enhancing the credibility and traceability of answers.
Display Settings
Enterprises can configure whether to let users see the referenced tool list and reference document name content according to their needs. If display is enabled, the following list will appear at the bottom of the AI assistant's response. Click "Citation Node" to see the referenced document excerpts:
Depending on different usage scenarios, you can choose whether to disclose citation information:
Public customer service: Display all citation information to build trust
Internal support: Hide sensitive documents to protect confidential information
Educational institutions: Display learning resources for student reference
7. Conversation Permission Protection - Secure and Controllable Conversation Environment
1. Login Function Settings
Mandatory Login Mechanism
To ensure the security and controllability of conversation content, enterprises can enable the login function, requiring users to log in before using the AI assistant service. After configuration, when visitors click WebChat, they will first enter the login page, and only successfully logged-in users can start conversations with the AI assistant
Security Advantages
Identity verification: Ensures each conversation user has a clear identity
Access control: Provides corresponding service content based on user identity
Conversation tracking: Completely records each user's conversation history
Data protection: Prevents unauthorized users from accessing sensitive information
2. Three Login Methods
AD (Active Directory) Login
Application scenario: Internal employee use, integrating with existing AD system
Features: Single Sign-On (SSO), no additional account management needed
Setup method: Configure AD server connection information and synchronization rules
Practical application: Employees log in directly with company accounts and automatically obtain corresponding permissions
Keycloak Login
Application scenario: Enterprises requiring complex identity management, supporting multiple identity providers
Features: Supports OAuth2, SAML, OpenID Connect and other standard protocols
Setup method: Configure Keycloak server, user pool, and identity providers
Practical application: Integrates user identities from multiple systems, unified permission management
MaiAgent Login
Application scenario: Simple user management needs, rapid deployment
Features: Built-in user management system, simple and intuitive operation
Setup method: Create user accounts and permissions in the MaiAgent platform
Practical application: Create dedicated login system for specific user groups
After enabling, the following screen will appear requesting login before starting a conversation:
Last updated
Was this helpful?