はじめに
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>から"
});
}
});;