Integrate with Platform: Website

I. Access the Settings Page

1. Path 1: Add a New Website Chat

Click "Customer Service > Chat Platforms" in the left menu, click "+ Connect Chat Platform" in the upper right corner, and select "Website"

2. Path 2: AI Assistant Associated Chat Platform

Go to "AI Features > AI Assistant" in the left menu, select an AI Assistant, click the "Operations" icon, then click "Associated Chat Platform" and select "Web XX Assistant"

3. Path 3: Chat Platform Operations

Go to "Customer Service > Chat Platforms" in the left menu, select the AI Assistant you want to configure, and click the "Operations" icon to enter the chat platform configuration.

II. Basic Settings

1. Basic Settings

Set Platform Name

• Enter the AI Assistant name you want to display on the website in the "Platform Name" field

• For example: "Customer Service Helper", "Smart Assistant", etc.

Select AI Assistant

• Choose the AI Assistant to use from the "AI Assistant" dropdown menu

• This determines which AI Assistant answers questions in the chat room

Set Return URL

• Enter your company website URL in the "Return URL" field

• When users click the back button in the chat room, they will be redirected to this URL

Obtain and Use the Public URL

• The system automatically generates a "Public Access URL"

• You can:

  • Click the "Copy" button to copy the URL

  • Click the "Visit" button to open the chat room in a new window

  • Click the "Embed" button to get the embed code

  • Click the "Embed Preview" button to preview the embed effect

Embed Script Optimization

When you choose the embed method, the system provides an optimized embed.js script with the following features:

• Duplicate execution prevention: Even if the script is loaded multiple times, it only initializes once to avoid conflicts

• Better error handling: Clear error messages are provided when loading fails, making debugging easier

• Optimized loading performance: The script is optimized to not affect website loading speed

• Improved compatibility: More compatible with various website environments and frameworks

Embed Best Practices:

1. Place the embed script before the </body> tag to ensure main page content loads first

2. Only include the embed script once on the page to avoid duplication

3. For SPA (Single Page Application) usage, refer to the technical documentation for advanced settings

2. Appearance Settings

Upload Company Logo

• Click the upload button in the "Logo" area

• Select your company logo image file

• After uploading, a preview is displayed; click delete to re-upload

Upload AI Assistant Avatar

• Click the upload button in the "Avatar" area

• Select an appropriate avatar image

• After uploading, a preview is displayed; click delete to re-upload

Set Color Theme

• Click the "Theme Color" picker to choose the chat window header color

• Click the "Title Text Color" picker to set the title text color

• Click the "AI Assistant Response Background Color" picker to set the background color for AI reply messages

Enable Theme Switching

• Toggle the "Theme Mode Switch" to the on position

• Users can switch between light and dark themes

3. Feature Settings

Set Enable/Disable

• Configure whether the chat service is active

Set File Upload

• Toggle "Allow File Upload" to the on position

• Users can then upload files for AI analysis, such as images, documents, etc.

Set Citation Display

• Toggle "Show Citations" to the on position

• AI responses will display source reference documents

Set Allow Citation Download

• Toggle "Allow Citation Download" to the on position

• Users can download the files cited by the AI Assistant in conversations

Set Show Tool Usage and Results

• Toggle "Show Tool Usage and Results" to the on position

• The system will indicate when processing is underway via MCP or API

4. Interaction Settings

Set Welcome Message

• Enter a welcome message in the welcome message input box

• For example: "Hello! I'm your smart assistant. How can I help you?"

• Click the "Add" button to add the welcome message to the list

• You can add multiple welcome messages; 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 preset questions in the "Conversation Starter Questions" input box

• For example: "How do I apply for a return?" or "What are your business hours?"

• Click the "Add" button to add the question to the list

• These questions appear as quick options for users to click

• To delete, click the delete button on the right side of the corresponding item

5. Login Settings

Set SSO Login Source

• MaiAgent currently supports SSO (Single Sign-On) integration through Keycloak

• Switch the authentication method in the "Login Source" dropdown menu

• Choose between MaiAgent or Keycloak as the identity provider

III. Auto-Reply Settings

Configure the bot reply time slots here.

• Click the toggle next to each day: Select which days of the week to enable replies.

• Set time slots: Select the start and end times.

• Add time slots: If you need to configure multiple time slots, click "+ Add Time Slot" and set the times.