# Web Chat Introduction Overview

## <mark style="color:blue;">1. What is WebChat?</mark>

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

<figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202025-08-15%20125237.png" alt=""><figcaption><p>Bottom-right corner embedding (draggable window)</p></figcaption></figure>

### 2. Full-Screen Embedding

* Provides a complete conversation experience
* Suitable for complex consultation and service processes
* Customizable design to meet enterprise needs

<figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(116).png" alt=""><figcaption><p>Full-screen embedding example</p></figcaption></figure>

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

## <mark style="color:blue;">2. Building a Corporate-Style Web Chat Service</mark>

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:

1. Selecting assistant display name
2. Uploading your corporate LOGO
3. Selecting AI assistant display avatar
4. Selecting Web Chat theme color
5. Selecting message background color for AI assistant replies

<div><figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(118).png" alt=""><figcaption><p>Default style</p></figcaption></figure> <figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(119)%20(1)%20(1).png" alt=""><figcaption><p>Customized style</p></figcaption></figure></div>

This way, you can build a Web Chat service that aligns with your corporate color scheme and style

<figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(120).png" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">3. Message Customization</mark>

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

<figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202025-08-15%20152318.png" alt=""><figcaption><p>Customize opening message</p></figcaption></figure>

### 2. Guided Starter Questions

* Set "<mark style="color:blue;">conversation starter questions</mark>" 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:

<div><figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202025-08-15%20153127.png" alt=""><figcaption><p>Starter question setup example</p></figcaption></figure> <figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202025-08-15%20153719.png" alt=""><figcaption><p>Users click to start conversation</p></figcaption></figure></div>

## <mark style="color:blue;">4. Diverse Q\&A Content</mark>

### 1. Multi-Language Support

Responds in the user's language, eliminating communication barriers.

* **Auto-detection**: Selects assistant reply language based on user input language

<figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(127).png" alt=""><figcaption></figcaption></figure>

**Manual switching**:

1. Use the Web Chat interface to select language, see: [Multi-Language Support: Web Chat Settings](https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/build/multi-language-support.md#id-2.-web-chat-liao-tian-she-ding).
2. Use Web Chat initialization script (javascript) to specify AI assistant reply language, see: [Technical Manual—Web Chat Initialization](https://docs.maiagent.ai/tech/api-integration/web-chat-chu-shi-hua#e5-9b-9bweb-chat-e5-b5-8c-e5-85-a5-e8-88-87-e8-aa-9e-e8-a8-80-e8-a8-a-d-e5-ae-9a).

{% hint style="info" %}
For supported language list, see: [Multi-Language Support: Supported Language List](https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/build/multi-language-support.md#zhi-yuan-yu-yan-qing-dan)
{% endhint %}

### 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

{% hint style="info" %}
You can disallow users from uploading attachments, using only text for conversations to ensure conversation security.
{% endhint %}

#### 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:

1. User asks where to set up MaiAgent assistant, assistant responds with settings screen image
2. User takes screenshot to confirm path with assistant, assistant correctly interprets and responds

<div><figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(122).png" alt=""><figcaption><p>Assistant responds with image</p></figcaption></figure> <figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(123).png" alt=""><figcaption><p>Assistant interprets user screenshot content</p></figcaption></figure></div>

#### 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

<div><figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(132).png" alt=""><figcaption><p>Organize information in table format</p></figcaption></figure> <figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(133).png" alt=""><figcaption><p>Provide external links</p></figcaption></figure></div>

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

<figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(131).png" alt=""><figcaption></figcaption></figure>

Example 3: Upload docx file, ask assistant to help analyze CV writing issues

<figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(134).png" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
AI assistant uses Markdown format to reply, organizing response content in an orderly manner.
{% endhint %}

## <mark style="color:blue;">5. Conversation History and Sharing</mark>

### **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

<div><figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202025-08-15%20171142.png" alt=""><figcaption></figcaption></figure> <figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(135).png" alt=""><figcaption></figcaption></figure></div>

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:

<div><figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(136).png" alt=""><figcaption></figcaption></figure> <figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(137).png" alt=""><figcaption></figcaption></figure> <figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(138).png" alt=""><figcaption></figcaption></figure></div>

**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

## <mark style="color:blue;">6. Choose Whether to Display Tool Usage and Referenced Document List</mark>

### **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:

<figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(140).png" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/image%20(139).png" alt=""><figcaption></figcaption></figure>

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

## <mark style="color:blue;">7. Conversation Permission Protection - Secure and Controllable Conversation Environment</mark>

### 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:

<figure><img src="https://github.com/Playma-Co-Ltd/maiagent-user-guide-gitbook/blob/main/en/zh-tw/.gitbook/assets/%E8%9E%A2%E5%B9%95%E6%93%B7%E5%8F%96%E7%95%AB%E9%9D%A2%202025-08-15%20174017.png" alt=""><figcaption></figcaption></figure>