PopupMakerプラグインとJavaScriptで簡易的なチャットボットを作る（Part1）
on 2023/09/01
PopupMakerプラグインとJavaScriptで簡易的なチャットボットを作る
PopupMakerはWordPressのプラグインで、ウェブサイトにモーダルウィンドウやポップアップを追加することができます。
https://ja.wordpress.org/plugins/popup-maker/
一方、JavaScriptはウェブページにインタラクティブな要素を追加するプログラミング言語です。
これら二つを組み合わせて、簡易的なチャットボットを作ることができます。以下にステップバイステップのプロセスを示します。
PopupMakerのインストールと設定
最初に、WordPressの管理画面からPopupMakerプラグインをインストールし、有効化します。
プラグインの設定にはいくつかのオプションがありますが、基本的な設定を行いましょう。
例えば、ポップアップがどのように表示されるべきか（ページのロード時、ボタンのクリック時など）、どのようなスタイルで表示されるべきか（背景色、テキストカラー、ボーダースタイルなど）などを設定できます。
具体的な使い方は別記事にも書いていますのでご参考ください。
ポップアップにチャットウィンドウを作成
次に、新しいポップアップを作成し、その中にチャットウィンドウを設定します。
このチャットウィンドウはHTMLとCSSを使って作成できます。以下は簡単な例です。
この例では、chat-historyというIDを持つdiv要素がチャットの履歴を表示するための場所、chat-inputというIDを持つinput要素がユーザーが質問を入力するための場所となります。
<div id="chatbot">
<div id="chat-history"></div>
<input type="text" id="chat-input" placeholder="質問を入力..." />
</div><div id="chatbot">
<div id="chat-history"></div>
<input type="text" id="chat-input" placeholder="質問を入力..." />
</div>こちらをPopupMakerのPopupに組み込みます。
JavaScriptでチャットボットを作成する
JavaScriptを使ってチャットボットの機能を実装します。以下は簡単な例です。
// Enterキーを押した時の処理
document.getElementById('chat-input').addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
processInput(this.value);
this.value = '';
}
});
// ユーザーの入力を処理する関数
function processInput(input) {
document.getElementById('chat-history').innerHTML += '<p>You: ' + input + '</p>';
// チャットボットの応答
document.getElementById('chat-history').innerHTML += '<p>Chatbot: こんにちは、何か質問はありますか？</p>';
}// Enterキーを押した時の処理
document.getElementById('chat-input').addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
processInput(this.value);
this.value = '';
}
});
// ユーザーの入力を処理する関数
function processInput(input) {
document.getElementById('chat-history').innerHTML += '<p>You: ' + input + '</p>';
// チャットボットの応答
document.getElementById('chat-history').innerHTML += '<p>Chatbot: こんにちは、何か質問はありますか？</p>';
}
PopupMakerプラグインとJavaScriptで簡易的なチャットボットを作る（Part1）
