<!doctype html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MaiAgent SDK 整合範例</title>
</head>
<body>
<h1>我的網站</h1>
<p>這裡是網站內容...</p>
<!-- 一些互動按鈕 -->
<button onclick="openChatBot()">開啟客服</button>
<button onclick="sendWelcomeMessage()">發送歡迎消息</button>
<button onclick="clearChatHistory()">清除對話</button>
<button onclick="startNewChat()">新對話</button>
<!-- MaiAgent SDK 配置 -->
<script>
window.maiagentChatbotConfig = {
webChatId: 'your-web-chat-id',
baseUrl: '<https://your-domain.com/web-chats>',
primaryColor: '#007bff',
allowDrag: true,
buttonSize: '56',
buttonRadius: '50%',
windowWidth: '28rem',
windowHeight: '45rem',
contactId: 'website-visitor',
queryMetadata: {
source: 'website',
page: window.location.pathname,
},
}
</script>
<!-- 引入 MaiAgent SDK -->
<script src="<https://your-domain.com/js/embed.min.js>"></script>
<!-- 應用程式邏輯 -->
<script>
// 等待 DOM 和 SDK 載入完成
document.addEventListener('DOMContentLoaded', function () {
// 設定事件監聽器
setupEventListeners()
// 設定語言
MaiAgent.locale.set('zh-TW')
MaiAgent.speech.set('zh-TW', 'azure')
console.log('MaiAgent SDK 已就緒')
})
function setupEventListeners() {
// 監聽消息回覆
MaiAgent.events.on('messageReply', function (data) {
console.log('收到機器人回覆:', data)
// 可以在這裡處理回覆，例如：
// - 收到的 data 為JSON 需要 JSON.parse(data) 一下
// - 記錄分析數據
// - 更新 UI 狀態
// - 觸發其他業務邏輯
})
}
// 互動函數
function openChatBot() {
MaiAgent.control.open()
}
function closeChatBot() {
MaiAgent.control.close()
}
function sendWelcomeMessage() {
MaiAgent.chat.send('你好！我想了解你們的服務')
// 確保聊天視窗是開啟的
MaiAgent.control.open()
}
function clearChatHistory() {
if (confirm('確定要清除所有對話歷史嗎？')) {
MaiAgent.chat.clearHistory()
console.log('對話歷史已清除')
}
}
function startNewChat() {
MaiAgent.chat.newConversation()
MaiAgent.control.open()
console.log('已開始新對話')
}
// 監聽頁面可見性變化，在用戶回到頁面時可以發送消息
document.addEventListener('visibilitychange', function () {
if (!document.hidden && MaiAgent.control.isOpen()) {
console.log('用戶回到頁面，聊天視窗仍開啟')
// 可以在這裡執行一些操作
}
})
</script>
</body>
</html>
