# Integrate Chat Platform: Website

## <mark style="color:blue;">1. Access Settings Page</mark>

### 1. Path 1: Add Website Customer Service Conversation

Click on the left menu "<mark style="color:blue;">Customer Service Conversation > Conversation Platform</mark>", click the "<mark style="color:blue;">+ Integrate Conversation Platform</mark>" button in the upper right corner, and select the platform "<mark style="color:blue;">Website</mark>"

<figure><img src="/files/mCMmbHwoxBoPG7dbBclx" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/woZX8rlXxyoAhZgqO4q8" alt=""><figcaption></figcaption></figure>

### 2. Path 2: AI Assistant Associated Conversation Platform

Access the left menu "<mark style="color:blue;">AI Features > AI Assistant</mark>", select an AI Assistant, click the "<mark style="color:blue;">Actions</mark>" icon, then click "<mark style="color:blue;">Associated Conversation Platform</mark>" for "<mark style="color:blue;">Web XX Assistant</mark>"

<figure><img src="/files/HJQ75saO1hpNzjjHJIgq" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/VqL6IIy3Q7INLbNPTXoo" alt=""><figcaption><p>Click the settings button</p></figcaption></figure>

### 3. Path 3: Conversation Platform Actions

In the left menu "<mark style="color:blue;">Customer Service Conversation > Conversation Platform</mark>", select the AI Assistant you want to configure, click the "<mark style="color:blue;">Actions</mark>" icon to enter the conversation platform configuration.

<figure><img src="/files/Siq9Rc8Rr8RKPETVjGw3" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">2. Basic Settings</mark>

### 1. Basic Settings

<figure><img src="/files/psjXnEvlHzObphuNXTnk" alt=""><figcaption></figcaption></figure>

**Set Platform Name**

* Enter the AI Assistant name you want to display on the website in the "<mark style="color:blue;">Platform Name</mark>" field
* For example: "Customer Service Helper", "Smart Assistant", etc.

<figure><img src="/files/hoHiVy8F7Uy0Yr817tkV" alt=""><figcaption><p>Platform name display</p></figcaption></figure>

**Select AI Assistant**

* Select the AI Assistant you want to use from the "<mark style="color:blue;">AI Assistant</mark>" dropdown menu
* This determines which AI Assistant the chatroom will use to answer questions

**Set Return URL**

* Enter your company website URL in the "<mark style="color:blue;">Return URL</mark>" field
* When users click the return button in the chatroom, they will be redirected to this URL

**Obtain and Use Public URL**

* The system will automatically generate a "<mark style="color:blue;">Public Access URL</mark>"
* You can:
  * Click the "<mark style="color:blue;">Copy</mark>" button to copy the URL
  * Click the "<mark style="color:blue;">Visit</mark>" button to open the chatroom in a new window
  * Click the "<mark style="color:blue;">Embed</mark>" button to get the embed code
  * Click the "<mark style="color:blue;">Embed Preview</mark>" button to preview the embed effect

<figure><img src="/files/uHkKlQ63FbbuYOcS0JW4" alt=""><figcaption><p>Embed method selection</p></figcaption></figure>

<figure><img src="/files/JQqxcyZB3V7GEPyTNjL7" alt=""><figcaption><p>Preview embed</p></figcaption></figure>

<figure><img src="/files/F4dHa5WkcHqHpnCuFLdM" alt=""><figcaption><p>After adding the return URL, it will display in the background when returning to the previous page</p></figcaption></figure>

### 2. Appearance Settings

<figure><img src="/files/3j94wl0nQdrzzQVeNjli" alt=""><figcaption></figcaption></figure>

**Upload Company Logo**

* Click the upload button in the "<mark style="color:blue;">Logo</mark>" area
* Select your company logo image file
* After uploading, a preview will be displayed, and you can click delete to re-upload

<figure><img src="/files/FPSVATLWfBFENcHUQWO8" alt=""><figcaption><p>Logo setting display</p></figcaption></figure>

**Upload AI Assistant Avatar**

* Click the upload button in the "<mark style="color:blue;">Avatar</mark>" area
* Select an appropriate avatar image
* After uploading, a preview will be displayed, and you can click delete to re-upload

**Set Color Theme**

* Click the "<mark style="color:blue;">Theme Color</mark>" picker to select the color of the chatroom window title
* Click the "<mark style="color:blue;">Title Font Color</mark>" picker to set the title text color
* Click the "<mark style="color:blue;">AI Assistant Response Background Color</mark>" picker to set the background color of AI reply messages

**Enable Theme Switching**

* Toggle the "<mark style="color:blue;">Theme Mode Switch</mark>" to the on position
* Users can switch between light and dark themes

<div align="left"><figure><img src="/files/2HiBge2gBKbFm4Z8iTRG" alt="" width="299"><figcaption><p>Avatar, color theme, dark theme example</p></figcaption></figure></div>

### 3. Function Settings

**Set Enable/Disable**

* Configure whether the conversation is enabled for service

<figure><img src="/files/7R8xZBK6QDUUAsujLw6H" alt=""><figcaption><p>Turn off enable switch</p></figcaption></figure>

**Set File Upload**

* Toggle the "<mark style="color:blue;">Allow File Upload</mark>" switch to the on position
* Users can then upload files for AI analysis, such as images, documents, etc.

<figure><img src="/files/n90WCgO0c3qWoRYrJCUd" alt=""><figcaption><p>Enable allow file upload</p></figcaption></figure>

**Set Citation Document Display**

* Toggle the "<mark style="color:blue;">Show Citation Documents</mark>" switch to the on position
* When the AI answers, it will display reference source documents

**Set Allow Citation Document Download**

* Toggle the "<mark style="color:blue;">Allow Citation Document Download</mark>" switch to the on position
* Users can download the document content cited by the AI Assistant in the conversation

<figure><img src="/files/WIUJTpQLN6fYvEpIGFWb" alt=""><figcaption><p>Enable Show Citation Documents and Allow Citation Document Download</p></figcaption></figure>

**Set Show Tools Used and Results**

* Toggle the "<mark style="color:blue;">Show Tools Used and Results</mark>" switch to the on position
* The system will indicate that processing is ongoing through MCP or API operations

<figure><img src="/files/syI0gRdak0Ub7y6Hpw6e" alt=""><figcaption><p>Show tools used and results</p></figcaption></figure>

### 4. Interaction Settings

<figure><img src="/files/o1JM88c0EvxCZd28Ics0" alt=""><figcaption></figcaption></figure>

**Set Opening Message**

* Enter a welcome message in the opening message input box
* For example: "Hello! I'm your intelligent customer service, how can I help you?"
* Click the "<mark style="color:blue;">Add</mark>" button to add the opening message to the list
* You can add multiple opening messages, and the system will randomly select one
* To delete, click the delete button on the right side of the corresponding item

**Set Conversation Starter Questions**

* Enter default questions in the "Conversation Starter Questions" input box
* For example: "How do I apply for a return?", "What are the business hours?"
* Click the "<mark style="color:blue;">Add</mark>" button to add the question to the list
* These questions will be displayed as quick options for users to click
* To delete, click the delete button on the right side of the corresponding item

<figure><img src="/files/ly3sD4yDoAozD0kr4rKD" alt=""><figcaption><p>Opening message and conversation starter questions</p></figcaption></figure>

### 5. Login Settings

**Set SSO Login Source**

* MaiAgent currently supports SSO (Single Sign-On) service through Keycloak integration
* Switch in the "<mark style="color:blue;">Login Source</mark>" dropdown menu
* Choose to use Maiagent or Keycloak as the authentication method

<figure><img src="/files/3J976WbXH5XjB7QCiuB4" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">3. Auto-Reply Settings</mark>

You can set the bot's reply time periods here.

* Click the switch button next to the date: Select which days of the week to reply.
* Set time period: Select the start time and end time.
* Add time period: If you have multiple time periods to set, press "<mark style="color:blue;">+ Add Time Period</mark>" to add and configure time periods.

<figure><img src="/files/cDuIMOdFkk8r6EZuL63N" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.maiagent.ai/maiagent-user-guide/maiagent-user-guide-en/release/web-chat-introduction/website.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.