【miibo実践ガイド】3ステップで完了！Webサイトにチャット画面を埋め込む方法
HTMLの基礎知識だけで簡単実装。ステート連携からカスタマイズまで徹底解説
miiboDesigner の岡大徳です。
Webサイトに会話型AIを導入することで、ユーザー体験を大きく向上させることができます。今回は、miiboのチャット画面をWebサイトに埋め込む方法を、基本から応用まで詳しくご紹介します。
基本的な埋め込み手順
チャット画面の埋め込みは、以下の3ステップで簡単に実現できます：
1. 公開設定の確認
エージェントを一般公開に設定
公開設定画面から埋め込みタグを取得
2. タグの設置
取得したタグを、チャットを表示したいWebページのHTML内に配置します。通常のHTMLサイトであれば、タグのコピー&ペーストだけで動作します。
3. 動作確認
実際にWebサイトを表示し、チャットが正しく機能するか確認します。
効果的なカスタマイズオプション
チャット起動ボタンの設置
<button class="chatButton">チャット画面を開く</button>または
<a class="chatButton" href="#">チャット画面を開く</a>初期発話の設定
<a class="chatButton" data-utterance="プロンプトエンジニアリングを解説して" href="#">
プロンプトエンジニアリングって何？
</a>ステート情報の活用
<a class="chatButton"
data-utterance="RAGって何？"
data-states='{"param1": "value1", "param2": "value2"}'
href="#">
RAGって何？
</a>Q&A
Q: 埋め込みタグの設置に特別な技術知識は必要ですか？
A: 基本的なHTMLの知識があれば十分です。タグのコピー&ペーストが主な作業となります。
miiboの詳細なFAQについては、以下のURLをご覧ください： https://daitoku0110.net/faq/
miiboコミュニティ最新情報
コミュニティでは、Web埋め込みの成功事例や、効果的なカスタマイズ方法について活発な情報交換が行われています。
miiboコミュニティはこちら：https://www.facebook.com/groups/miibo
まとめ
Webサイトへのチャット画面の埋め込みは、HTMLの基礎知識があれば簡単に実現できます。カスタマイズオプションを活用することで、より魅力的なユーザー体験を提供できます。
まずは無料トライアルで、チャット画面の埋め込み機能を体験してみませんか？
それでは、また次回のニュースレターでお会いしましょう！ miiboを楽しんでください！
miiboDesigner岡大徳：https://daitoku0110.net/
miiboガイドページ：https://daitoku0110.net/miibo-guide/
miiboDesigner岡大徳が徹底解説、「miibo」の全貌と描く未来：https://miibo.site/