会話型AIツール「miibo」で作ったAIチャットボットをサイトに設置する

2024年10月22日 13:09

みなさん、こんにちは！オトーワンですっ。
今回は、先日公開した『会話型AIツール「miibo」で架空の不動産会社のお問い合わせAIボットを作る』の記事で制作した架空の不動産会社のAIチャットボットを実際にwebサイトに設置する方法をご紹介しますね！
それでは、いってみましょ～

設置の手順

まず、以下の画面がmiiboで作成した、AIチャットボットをwebサイトに設置したイメージになります。
※以下の画面は架空の不動産会社「オトーワンリアルエステート」のダミーサイトです。

手順については、以下の3つを順を追って説明しますね。

htmlファイルに埋め込むタグを用意する
htmlファイルに埋め込みタグを貼り付ける
設置したAIチャットボットをカスタマイズする

1.htmlファイルに埋め込むタグを用意する

miiboにログインしたら、左メニューの「公開設定」から、「チャット画面の公開情報」の項目にある「埋め込みタグ」のコピーボタンを押します。

2.htmlファイルにタグを貼り付ける

コピーした埋め込みタグを表示させたいページにテキストエディタ、htmlエディタなどを使って貼り付けます。
htmlソースの中にある</body>のすぐ上に貼り付ける方法をご紹介します。

直接タグを貼り付ける

htmlソースの</body>のすぐ上にコピーしたタグを直接貼り付けます。
（</body>の上に<script></script>で囲われたタグを埋め込みます）

<!DOCTYPE html>
<html>
<head>
    <title>ページタイトル</title>
</head>
<body>
    <!-- ページのコンテンツ -->
webページのコンテンツが記載されている部分
    
    <!-- miiboの埋め込みタグ -->
<script>
        // CSSとアイコンのリンクを追加する関数
        function addStylesheet(href) {
            let link = document.createElement('link');
            link.href = href;
            link.rel = 'stylesheet';
            document.head.appendChild(link);
        }
※※※※ 以下省略　※※※※
           
 </script>
 <!-- miiboの埋め込みタグ ここまで-->
</body>
</html>

外部ファイル化する

表示したいページのすべてに、長いタグを貼ったり、タグの中身の変更があったときは、都度ページを修正するのは大変なので、"〇〇〇.js"を作って外部ファイル化することをオススメします。
htmlデータの「js」フォルダ内に「chatbot.js」などを作成して参照先のjsファイルを作ります。

<!DOCTYPE html>
<html>
<head>
    <title>ページタイトル</title>
</head>
<body>
    <!-- ページのコンテンツ -->
webページのコンテンツが記載されている部分
    
    <!-- miiboのタグを外部ファイルにして埋め込む-->
<script src="js/chatbot.js"></script>
    <!-- miiboのタグを外部ファイルにして埋め込む ここまで-->
</body>
</html>

3.AIチャットボットをカスタマイズする

タグを貼りつけたあと、webページを見みると、以下の画面のようにデフォルトで、青色の「相談する」ボタンと、ボタンを押すとチャット画面が表示されます。
但し、メインカラーやアクセントカラーなどが、この色であれば問題ありませんが、その他の場合は色を変える必要があります。
また、ボタンに関しても「相談する」のラベルも変えたい場合もありますから、ここでは埋め込みタグのコードの構造を変更せずに値のみ変更するお手軽なものをご紹介します。

ボタンの画像と表示サイズ

AIチャットボットを表示させるボタンとサイズの変更が可能です。
ボタンの画像はデフォルトで"img.src "の参照先を例えば、任意の場所に画像をアップロードし、”images/ai_btn.png”などに変更します。
画像のサイズはデフォルトで100×100に設定されているので、任意のサイズに変更します。ちなみに、オトーワンはこのサイズをそのまま使用しています。

img.src = 'https://firebasestorage.googleapis.com/v0/b/mabo-f1cc7.appspot.com/o/chaticon.png?alt=media&token=1777070f-a83c-403d-8c83-f387f68ecd52';
img.width = '100';
img.height = '100';

ヘッダー背景色

表示されているAIチャットボットのヘッダー部分が、デフォルトだと青色になっているので、以下の箇所のカラーコードを変更します。

header.style.background = '#4169e1';

ロゴテキスト

ヘッダー部分のテキストも修正することが可能です。
例えば、上記画面の「AIオトーワンリアルエステート」の部分です。

logo.innerText = 'AIオトーワンリアルエステート';

チャットボットのURL

AIチャットボットの中身そのものを変更することが可能です。
"var src"の参照先のURLを変更します。
ここの参照先は、miibo左メニューの「公開設定」から、「チャット画面の公開情報」の項目にある「チャットページURL」になります。

var src = 'https://miibo.jp/chat/2092f098-6ddd-43c3-b05e-ebf294e4b6f4192800b2658d1?name=AI%E3%82%AA%E3%83%88%E3%83%BC%E3%83%AF%E3%83%B3%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%A8%E3%82%B9%E3%83%86%E3%83%BC%E3%83%88';

まとめ

いかがでしたか？
miiboで作ったチャットボットをWebサイトに設置する方法についてご紹介させていただきました。今回は、オトーワンがダミーのwebサイトに実装する際に調べた内容を、記事にまとめました。
それでは、今日はこんなところで！またお会いしましょ～さいなら～