1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

BotUIで企業HP向けチャットボットを簡易実装!

Posted at

はじめに

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

スクリーンショット 2021-10-29 133301.png

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

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

以下ソースコード

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>から"
        });
    }
});;
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?