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
In the left sidebar, go to AI Features → AI Assistants, select the assistant you want to configure, and switch to the Chat Platforms tab. Find the website chat platform you want to adjust, then click Platform Settings.
After completing the settings, click Back to AI Assistant Settings at the top of the page to return to the original assistant's Chat Platforms tab. This return option remains available when you switch between Basic, Quota, and Auto-Reply Settings.
Use Case: Return to the Assistant After Updating Website Customer Service
A customer service manager needs to update the website customer service settings for the "Product Consultation Assistant." She clicks Platform Settings on this AI Assistant's Chat Platforms tab. After making the changes, she clicks Back to AI Assistant Settings to return to the same assistant's list of chat platforms and continue checking other customer service channels, without having to find the assistant again in the AI Assistant list.
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:
Place the embed script before the
</body>tag to ensure main page content loads firstOnly include the embed script once on the page to avoid duplication
For SPA (Single Page Application) usage, refer to the technical documentation for advanced settings
Select Embed Method
After clicking "Embed", you can switch between three embed methods at the top of the window:
JavaScript: Loaded via
<script>, the most common method that automatically handles loading and compatibilityIframe: Embedded directly via
<iframe>, suitable for environments where scripts cannot be insertedMaiGPT: A full ChatGPT-style conversation interface (conversation history on the left + main conversation area on the right) that can be permanently embedded in a page, or opened full-screen by clicking a floating button in the bottom-right corner
After selecting MaiGPT, you can adjust "Embed Container (targetElement)", "Locale (locale)", and "Title (maigptTitle)" on the left side. The code preview on the right side updates in real time. Click "Copy" to paste it into your website.
Allowed Embed Domains
What is this?
The "Allowed Embed Domains" setting under Basic Settings is an embed allowlist. Once you add domains, only websites on the list can embed this Web Chat; embed code placed on other websites will stop working.
Consider enabling it in these situations:
Prevent unauthorized embedding: Prevent third-party websites from copying your embed code, placing your customer service bot on their pages, and consuming your conversation quota
Security compliance: Meet company or customer security policies that require control over which websites may load this customer service component
How it works
Empty (default)
Unrestricted; any website can embed this Web Chat
Not empty
Allowlist mode: The browser blocks embeds from other domains, and the SDK rejects their setup calls
When a blocked domain embeds Web Chat: The chat component on that page does not finish initializing, so visitors cannot start a conversation
Visitors who open the public access URL directly: This setting only restricts embedding. Visitors who open the chat page directly through its public URL are unaffected
The security mechanism rejects requests that cannot be verified: When the list is not empty, any embed that fails origin verification is rejected—including domains with typos and pages using older embed scripts that do not support origin verification
Setup steps
Add a domain
Each entry can be an exact origin (https://example.com) or a wildcard domain (*.example.com, which matches example.com and all its subdomains).
✅ https://www.example.com
Exact origin: Allows pages at this URL, including the specified protocol, to embed Web Chat
✅ *.example.com
Wildcard domain: Allows example.com and all its subdomains (www, shop, blog, and so on) to embed Web Chat
❌ example.com
An exact origin must include the protocol; without https://, it will not work
❌ *.com
This scope is too broad and effectively allows every .com website, defeating the purpose of an allowlist
Checklist before enabling
Once the list is not empty, it blocks every embed that is not on the list. To avoid blocking all embeds immediately after enabling it, check the following in order:
List every domain that embeds this Web Chat—include production, test, and preview environments without omitting any
Get the latest embed code again—older embed scripts might not support origin verification and will always be rejected after you enable the list. First open "Embed", copy a fresh version, and update your website
Add first; do not remove yet: When enabling the setting for the first time, add every domain before cleaning up the list
Verify each one: After saving, open an actual conversation on every embed page to confirm that each works correctly
Keep a fallback: If the embedded client cannot create a conversation after you enable the list, clear the list and save. After about one minute, embedding will become unrestricted again
FAQ
Q: How long does the setting take to apply?
It usually takes effect within about one minute after saving. Refresh any open embed pages afterward to apply the new setting.
Q: Do I need to list every subdomain individually?
No. A single *.example.com entry matches example.com and all its subdomains.
Q: What does this setting protect against, and what does it not protect against?
This is protection at the embedding layer: it prevents other websites from embedding this Web Chat on their pages. It is not authentication—anyone who knows the public access URL can still open the chat page directly. To control who can start conversations, use Login Settings as well.
Q: What should I do if an incorrect setting prevents all embedded clients from starting conversations?
Clear the "Allowed Embed Domains" list and save. After about one minute, embedding will become unrestricted again. Then check the domain formats again.
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
Include Welcome Message Options in Agent Context
Below "Conversation Starter Questions" is an "Include Welcome Message Options in Agent Context" toggle, which is off by default. When enabled, the system provides the welcome message and a numbered list of options to the AI, allowing it to recognize users' numeric or short-text replies to those options.
Before and after enabling
Consider an airline customer service example. The welcome message is "How can we help you?", and the conversation starters are "Flight Status," "Baggage Policy," and "Membership Miles," in that order. Once enabled, the system automatically numbers them in order. If a visitor enters only "2":
What visitors see
The welcome message plus a randomly selected subset of starter questions
The welcome message plus all starter questions displayed in their configured order
Information available to the AI
Only the welcome message, without the list of options
The welcome message plus the numbered list of options
When a visitor replies "2"
The AI does not know which option "2" refers to and might ask, "What would you like to know?"
The AI understands that "2" means Baggage Policy and responds with the relevant information directly
Starter question display behavior
Random order, limited by the "Number to Display Randomly" setting
All questions appear in order; the "Number to Display Randomly" setting does not apply
Example use cases
Enable this feature whenever you combine a welcome message with multiple conversation starter questions to create a menu that lets visitors choose from fixed service options:
Finance/Banking: Use "Welcome to online customer service. Select a service" as the welcome message and set "Account Balance," "Credit Card Application Status," "Insurance Policy," and "Transfer to a Human Agent" as the conversation starters. When a customer replies "3," the AI begins the insurance policy inquiry flow directly
Healthcare/Clinics: Use "Hello, which service do you need?" as the welcome message and set "Clinic Hours," "Book an Appointment," "Appointment Status," and "Health Education" as the conversation starters. The AI can map a short reply such as "appointment" to option 2
Government/Public Sector: Use "Select the service you want to apply for" as the welcome message and set "Subsidy Application," "Event Registration," and "Service Location Search" as the conversation starters. When a resident replies "1," the AI continues by asking which subsidy category they want to apply for
When to enable it
Menu-based guidance: You have configured multiple conversation starter questions and want visitors to follow a fixed flow by replying with displayed numbers or short phrases
✅ Recommended
Free-form conversation: You only have a general greeting such as "Hello! How can I help you?" and have not configured conversation starter options
❌ Not necessary; leave it off to save token costs
Notes after enabling
The "Number to Display Randomly" setting no longer applies: To keep the numbers visitors see consistent with the numbers understood by the AI, conversation starter questions are no longer shuffled or limited in quantity after this feature is enabled. They are always displayed in their configured order. If you currently rely on the "Number to Display Randomly" setting to control the layout, make sure the number of starter questions is manageable before enabling this feature
Higher token costs: After you enable the feature, a yellow warning indicates that it increases the context length (token cost) of each request. The more options you have, the greater the increase, so enable it only when needed
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
Passwordless conversations from an embedded client
If you embed Web Chat in your own website and users have already signed in there, enable “Allow embedded clients to start conversations without signing in by using a Source ID” so they can chat immediately. For configuration and signature integration instructions, see Passwordless Conversations with Contact Source ID.
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.
Last updated
Was this helpful?