Peekobot

Peekobotはシンプルで扱いやすい選択式チャットボットフレームワークです。上サンプルのようなチャットボットライクなコンテンツを手軽に実装する事ができます
※サンプルはCodepenで作ったのでURLに遷移しません

非依存型のバニラなスクリプトで、サイズも非圧縮で2kbほど、行数にして100行ほどと非常に軽量です

Webアプリ等なら簡単なチュートリアル代わりにもなるかもしれませんね。あるいは階層の深いWebサイト等でユーザーの求めるゴールの場所を伝えるのに役立ちそうです

使用例

使用例です。まず先にチャットの内容を設定しておきます

const chat = {
	1: {
		text: "こんにちは！お困りですか？",
		options: [
			{
				text: "なにこれ？",
				next: 2
			}
		]
	},
	2: {
		text: "Peekobotというスクリプトを紹介する記事です。Peekobotはシンプルな選択式チャットボットフレームワークです",
		next: 3
	},
	3: {
		text:
			"ユーザーに選択してもらう形で成り立つ対話コンテンツで、目的の場所への誘導を促します",
		options: [
			{
				text: "よくわかった！",
				next: 4
			},
			{
				text: "ちょっと何言ってるか分からない",
				next: 5
			}
		]
	},
	4: {
		text:
			"簡単なものなので質問も簡単なものくらいしか出来ません。詳しくはGithubをご覧ください",
		next: 7
	},
	5: {
		text: "サンドイッチマン好きですか？",
		next: 6
	},
	6: {
		text: "サンドイッチマンの動画を紹介しますね",
		options: [
			{
				text: "サンドの公式Youtubeへどうぞ！",
				url:
					"https://www.youtube.com/playlist?list=PLe8FGQbLGisnnab5M-2o88p4SAKPVb1RV"
			}
		]
	},
	7: {
		text: "ライセンスはMIT。非依存で単体で動作しますよ",
		options: [
			{
				text: "GitHubへ",
				url: "https://github.com/peekobot/peekobot"
			}
		]
	}
};

なんとなくわかると思いますが、数字でチャットを管理、optionsで選択肢を作って行きます

<script src="peekobot.js"></script>

そのあとでpeekobotを読み込めば準備完了です

<div id="peekobot-container">
        <div id="peekobot"></div>
    </div>

後は空要素を用意すれば完成します

    <style>
        :root {
            --peekobot-height: 80vh;
            --peekobot-avatar: url();
        }
    </style>
    <link rel="stylesheet" href="peekobot.css">

チャットの高さやアバターはCSS変数で定義されていますので必要に応じて画像のパスなどを設定してください

ライセンスはMITとの事です

Peekobot