チャット画面をWebページに埋め込む
このチャプターのゴール
- miiboのチャット画面をWebページに埋め込む方法が理解できている
Webページにチャットボットを埋め込む
HTML製のWebサイトにチャットボットを簡単に埋め込むことができます。
Webサイト訪問者にAIのサポートを提供可能です。
https://www.youtube.com/watch?v=98iaHK4DsxY
公開設定画面で埋め込みタグを取得
エージェントを一般公開している場合、公開設定で埋め込みタグの取得が可能です。
このタグを取得することで、Webページにチャットボットを埋め込むことができます。アイコンもカスタムが可能です。基本的に、通常のHTMLサイトであれば、埋め込みタグをコピー&ペーストするだけで、動作します。
ボタンを設置する
以下のタグで、チャット画面を呼び出すボタンを設置する事ができます。
<button class="chatButton">チャット画面を開く</button>
アンカータグでもOKです。
<a class="chatButton" href="#">チャット画面を開く</a>
classにchatButtonを指定することでご利用いただけます。
特定の発話で開始するチャットボット導線を設置する。
ただ右下にチャットボットを設置しただけでは、
・「ユーザーが何を話しかけたらいいかわからない」
・「ユーザーがAIへの質問を考えるのに苦労する」
といった課題もあります。そういった場合は下記の「data-utterance」を利用して、会話開始時の発話を指定することが可能です。
<a class="chatButton" data-utterance="プロンプトエンジニアリングを解説して" href="#">プロンプトエンジニアリングって何？</a>
上記のように、data-utteranceを指定すると、特定の発話で発火する導線を設置可能です。
タグ内でステートを登録する
タグでステートのkey,valueを渡すことも可能です。
<a class="chatButton" data-utterance="RAGって何？" data-states='{"param1": "value1", "param2": "value2"}' href="#">
RAGって何？
</a>
data-states='{"param1": "value1", "param2": "value2"}'
この記法で任意のステートを登録できます。
サードパーティトークンをチャット画面に渡す
(コーディングを伴うエンジニア向けの項目です)
Webhook機能を利用したAPI連携などで利用が可能な「サードパーティトークン」をチャット画面に渡し、利用することができます。
const iframe = document.querySelector(".iframe");
iframe.contentWindow.postMessage(
{
event: "setThirdPartyToken",
thirdPartyToken: "<サードパーティトークン>"
},
"<チャット画面のOrigin>"
);
上記のコードをmiiboのチャット画面を埋め込んでいるサイトで実行してください。
サードーパーティトークンをチャット画面に渡すことで、認証が必要なAPI連携が可能なチャットボット活用が実現できます。
サードパーティトークンをWebチャットに対して送信する場合は、別途申請が必要です。
申請時に共有が必要な項目
- 送信元のドメイン
- 利用用途
ご利用を希望される方は、公式のお問い合わせ窓口までご連絡ください。
Updated 4 months ago