はじめに

BotUIを用いて企業HP向けチャットボットを簡易に実装できます。
BotUI公式: https://docs.botui.org/index.html

簡易チャットボットの作成 + ソースコード

作成するもの

ボタンを押下すると、次のメッセージを表示することができます。

以下ソースコード

index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>chatbot</title>
    <link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css"/>
  </head>
  <body>
      <div class="botui-app-container" id="chatbot">
        <bot-ui></bot-ui>
      </div>
    <script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script>
    <script src="https://unpkg.com/botui/build/botui.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

main.js

var botui = new BotUI('chatbot');
//初期メッセージ
botui.message.bot({
    content: 'はるぐらみんぐ株式会社です。'
});
//ボタンを表示
botui.action.button({
    action: [{
      icon: 'circle-thin',
      text: "会社について知りたい",
      value: "1"
    }, {
      icon: 'circle-thin',
      text: "資料請求をしたい",
      value: "2"
    }]
  }).then(function(res) {
    if(res.value == 1){ //"会社について知りたい"ボタンを押下したときの処理
        //チャットボットにメッセージを表示
        botui.message.add({
            loading: false,
            content: "はるぐらみんぐ株式会社は架空の会社です。"
        });
    }else if(res.value == 2){//"資料請求をしたい"ボタンを押下したときの処理
        //チャットボットにメッセージを表示
        botui.message.add({
            type: 'html',
            loading: false,
            content: "資料請求は<a href='https://www.google.com/'>こちら</a>から"
        });
    }
});;