Web Chat introduction overview

1. What is WebChat?

You can embed the AI assistant created in MaiAgent into your website to provide real-time customer service or other conversations. And Web Chat isresponsive in design and can perfectly adapt to desktop, tablet, and mobile.

MaiAgent currently offers the following two embedding methods:

1. Embed at the bottom right of the website

• Embed within the official site service, becoming a built-in smart assistant on the official site

• Does not interfere with the user's normal browsing; available whenever needed

• Suitable for general customer service and consultation services

2. Full-screen embed

• Provides a complete conversational experience

• Suitable for complex consultation and service flows

• Can be customized in design to meet enterprise needs

This design will bring:

• Immediacy：Visitors do not need to wait and receive professional answers immediately, enhancing user experience

• Convenience：The bottom-right floating design does not interfere with normal browsing and is available whenever needed

• Cost-effectiveness：AI assistant available 24/7, significantly reducing labor costs

• Professional image：Showcases the company's technological strength and service quality

2. Creating a company-branded Web Chat service

MaiAgent provides customization features such as custom LOGO, avatar, Q&A theme colors, etc., helping you create a company-branded Web Chat service

You can through

1. choose the assistant display name

2. upload your company LOGO

3. choose the AI assistant display avatar

4. choose the Web Chat theme color

5. choose the message background color when the AI assistant replies

and other features to create your Web Chat appearance:

In this way, you can create a Web Chat service that matches your corporate style according to your company color requirements

3. Message customization

When entering the Web Chat service for the first time, you can freely set your AI assistant's opening message according to the following scenarios.

1. Opening message customization

Branded greeting

Set: "Welcome to our website! I am your personal customer service assistant," to showcase the company's professional image and friendly service attitude

Guided opening

Set: "I can help you check product information, answer usage questions, and assist with order processing," to clearly inform users of the service scope and build trust in the service capability

2. Guided starter questions

• Set "conversation starter question" as quick options

• Users can directly click common questions without typing

• Sample questions:

  • "How do I view items I ordered?"

  • "How to place an order"

  • "Membership points rules"

  • "Business hours"

Users can tap starter questions to start a conversation and speed up the Q&A process:

4. Diverse Q&A content

1. Multilingual support

Respond according to the user's language to eliminate communication barriers.

• Automatic detection：Select the assistant's reply language based on the language of the user's input

Manual switch:

1. Use the Web Chat interface to select the language, see:Multilingual support：Web Chat chat settings.

2. When initializing Web Chat, use the script (javascript) to specify the AI assistant's 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

• Word processing documents: .doc, .docx, .odt, .pdf, .md, .txt

• Presentation files: .ppt, .pptx, .odp

• Web files: .html, .htm

• Data formats: .json, .jsonl

• Audio files: .wav, .mp3

Image content handling

Image recognition and analysis

• Upload image analysis：Users can upload product images; the AI automatically recognizes and provides related information

• Screenshot handling：Supports screenshot analysis to help resolve usage issues

• Image description：Automatically generate image content descriptions and related suggestions

Image reply features

• Product image display：Include product physical images in replies

• Operational guidance images：Provide step-by-step operation screenshots

Example:

1. User asks where to configure the MaiAgent assistant; the assistant responds with an image of the settings screen

2. User provides a screenshot to the assistant to confirm whether the path is correct; after correctly parsing, the assistant responds

Document handling capabilities

Supported document formats

• PDF documents：Automatically parse PDF content and answer related questions

• Word documents：Handle .doc/.docx format documents

• Excel spreadsheets：Analyze spreadsheet data and provide insights

• PowerPoint presentations：Extract presentation content and answer questions

Document interaction features

• Document content queries：Answer specific questions based on uploaded documents

• Data analysis：Automatically analyze table data and provide statistical information in table form

• Document summarization：Generate key summaries of long documents

Example 1: Ask the AI assistant to present data in a table format and provide reference links

Example 2: Ask the assistant to analyze sales content and provide a table analysis

Example 3: Upload a docx file and ask the assistant to help analyze issues with CV writing

5. Conversation history and sharing

1. Conversation history memory

To provide a continuous service experience, WebChat automatically remembers the user's conversation history so that each conversation can build on previous ones.

Scope of memory content

• Conversation content：Complete Q&A records, including text, images, documents, etc.

• Service status：Unfinished queries and pending issues

Users can view past conversation records in the left-side conversation list of Web Chat or start a new conversation

The memory conversation feature can be used for:

• Continuing consultations：User asks, "What was the tent model recommended last time?" and the AI can immediately recall and answer

• Progress tracking：User says "Continue last order inquiry," and the AI automatically pulls up related information

• Personalized service：Provide more accurate recommendations and suggestions based on historical conversations

2. Conversation sharing

After consulting the AI assistant, if you want to share the conversation with friends or colleagues, or the internal team needs to collaborate on customer issues, you can use MaiAgent to generate a conversation share link:

Shared content

• Full conversation record：Includes all text, images, documents, and other content

• Conversation summary：Automatically generated key point summary of the conversation

• Related resources：Product links, documents, etc. mentioned in the conversation

Sharing conversation records can be used for:

• Customer sharing："This camping gear recommendation is great; share it with the hiking group"

• Internal collaboration：Customer service staff share complex issues with the technical support team

• Training purposes：Share typical conversation cases as staff training materials

6. Choose whether to display used tools and cited document list

1. Display used tools list

You can choose whether to let users see the list of tools the AI assistant used during reasoning. If allowed, the AI assistant will show the following screen when producing a reply:

You can use this list to track whether the tools used by the AI assistant are correct.

2. Display cited document list

Each AI answer automatically generates a cited document list that clearly indicates information sources, improving answer credibility and traceability.

Display settings

Enterprises can set whether users are allowed to see the list of cited tools and reference document names according to needs. If display is enabled, the following list will appear at the bottom of the AI assistant's response. By clicking a "citation node," you can view the referenced document snippet:

Depending on different usage scenarios, you can choose whether to make citation information public:

• 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 easy student reference

7. Conversation permission protection - a secure and controllable conversation environment

1. Login feature settings

Mandatory login mechanism

To ensure the security and controllability of conversation content, enterprises can enable the login feature to require users to log in before using the AI assistant service. Once set, visitors clicking WebChat will first be directed to a login page, and only successfully logged-in users can start conversations with the AI assistant

Security advantages

• Authentication：Ensure each conversation user has a clear identity

• Permission control：Provide corresponding service content based on user identity

• Conversation tracking：Fully record each user's conversation history

• Data protection：Prevent unauthorized users from accessing sensitive information

2. Three login methods

AD (Active Directory) login

• Applicable scenarios：For internal company employees to use, integrating existing AD systems

• Features：Single sign-on (SSO), no extra account management required

• Configuration method：Configure AD server connection information and synchronization rules

• Practical application：Employees use company accounts to log in directly and automatically receive corresponding permissions

Keycloak login

• Applicable scenarios：For enterprises that need complex identity management, supporting multiple identity providers

• Features：Supports standard protocols such as OAuth2, SAML, OpenID Connect

• Configuration method：Configure Keycloak server, user pools, and identity providers

• Practical application：Integrate user identities from multiple systems for unified permission management

MaiAgent login

• Applicable scenarios：For simple user management needs and quick deployment

• Features：Built-in user management system, simple and intuitive operation

• Configuration method：Create user accounts and permissions on the MaiAgent platform

• Practical application：Create a dedicated login system for specific user groups

After enabling, the following screen will appear requesting login before starting a conversation: