今回は、WordPressとIBM Watson Assistantsを使って、チャットボットを実装していきます。
目次
はじめに
画像AIは自分で作った方が安い!っと別の記事で説明しましたが

チャットボットは確実にIBM Watson Assistantや他のチャットボットサービスを活用した方が良いです。
理由は
- 安い。 1回の受け答えで0.265円 × 2回= 0.5円
- 会話フローを作るツールがある。
- WordPress、Slackなどに簡単に対応させることができる。
などです。2,3は自分でしようなんて考えたくもありません。
完成イメージ
こんな感じでウェブサイトにチャット機能をつけてみましょう。

現在は、問い合わせページに設置(開発中)
リンク
IBM Cloud
IBM Watson Assistantリファレンス
Watson Assistantプラグインを有効化
プラグインの追加で、キーワードに「IBM」と入れると、IBM Watson Assistantが出るので
インストール > 有効化 してください

IBM Watson Assistantサービスの追加
サービスの追加
IBM Cloudアカウント作成、ログインは下記の最初の方を参照ください。

Assistantは カタログ > AI > Watson Assistant の順で選んでください。

下記画面が出るので、サービス名などの設定、価格プランを選びましょう
私は、何も変更せず、作成していますが、有料プランもあるので自分に合っているものを選びましょう。

下記の画面に変わるので、サービスの追加は完了。

Create assistantでチャットボットの会話のベースを作成
Create assistantは必要な会話を分けて作ります。例えば、「銀行のコールセンター」「ブログの問い合わせ」「小売店の商品説明」など必要な会話を小分けします。
まず、Watson Assistantのサービスページから「Watson Assistant」のツールを起動します。
起動したら、Assistantsタブで、「Create assistant」を押します。

Name、Description(任意)を入力して、Create assistantを押す。

下記のように追加されればOK

Assistantプラグインの設定
Watson Assistantからパスワードなどを取得
Watson AssistantのAssistantタブにある、追加した「Assistant」からユーザー名などを取得します。
*2019年06月01日時点。IBM Cloudは頻繁にユーザーインタフェースが変わります。数ヶ月後には下記とは違う場所にボタン配置されていると思います。
私の場合は、MyChatBotから取得します。
下記のように、●3つを押して、Settingsを押します。

下記画面が出るので、「API Details」タブを押して、下記三つをメモします。
- Assistant URL
- Username
- Password

WordPressのWatson Assistantの設定
次に、WordPress側のWatsonAssistantを設定します。
ユーザー名などの設定
WordPressのWatson Assistant > Set Up ChatBot > Plugin Setup から
先ほどメモした、ユーザー名などを入力して、保存してください。

チャットボットの設定
ここは好きに設定してください。私の設定例を貼っておきます。
Watson Assistant > Customize Pluginから設定します。
私はChatBoxタブの部分を設定しています。

常にチャットボックスでるのが嫌なので、Chat Box Minimized by DefaultをAlwaysに変更
あとは、タイトルや、入力する箇所のメッセージ、色を変更しています。
変更したら、保存で完了です。

確認
お疲れ様です。最後にチャットボットが実装されたのか、確認です。
自分のサイトを開いて、右下にチャットボットが実装されていればOKです。
Watson Assistantは応答が返ってくるのに約2,3秒かかります。
最後に
会話フローは作っていないので、会話ができないですが、簡単にチャットボットが実装できました。会話の作り方は別の記事で説明します。