<!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>私の Web サイト</h1>
<p>ここは Web サイトのコンテンツです...</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>
