2021年12月16日

[WordPress][プラグイン]
WordPressで専用プラグインを使わずCTI+CRMっぽいものを実現してみる

前に利用したお店やサービスに電話をかけたらいきなり名前を呼ばれてビビった。けど話がスムースで楽ちん。といった経験はないでしょうか。
CRMに連動したCTIならではの接客ですが、もちろんコストが高く、なかなか中小企業で導入するのは難しいものがあります。
今回はそんなCTI+CRMの機能をWordPressでできないか検討してみました。

要件

  1. なるべく安価な構築を目指す
  2. 電話での応対をWordpressに蓄積する(飲食店や美容室など、小規模な店舗型の店を想定)
  3. カスタム投稿に用意した商品などと問い合わせがあった利用者との紐付けを行い、履歴を管理する
  4. 素早く過去の履歴を閲覧できるようにする

1. なるべく安価な構築を目指す

安価な構築を目指すと言っておきながらなんですが、カスタムフィードをカスタマイズできるAdvancedCustomFieldsのPro版(以下、ACFと略)は使用します。
ACFは制作会社ならば購入必須なプラグインです。
このCRM+CTI化させるという企画も、もともとACFありきで考えていました。
ACFがなぜ必要なのかはおいおい説明していきたいとおもいます。

ちょっとVer5からサイト制限がないのが$249と高額になってしまいましたが、まだまだ有効性は変わらず。
ちなみに自サイトだけでいいということであれば、$49です。
他のカスタムフィード編集系のプラグインでも構わないのですが、繰り返し入力ができるプラグインがないのですよね。

2. 電話での応対をWordpressに蓄積する(飲食店や美容室など、小規模な店舗型の店を想定)

本来のCTIですと、電話がかかってきたときに電話番号に応じて素早く管理画面が開く、Webの問い合わせフォームに入ってきたメアドから、過去の閲覧履歴などをピックアップして興味のあるコンテンツを抽出する、なんて動きになると思いますが、もちろんそんなことはできません。
今回CRM+CTIを作ろうと思い立ったのは、FRAMINGOというContactForm7から来た問い合わせ内容を分類できるCRMはあったのですが、結局そこまでで、リアルな問い合わせは蓄積できないというところからでした。

なので、電話応対は必須、Webからの問い合わせも紐付けができるものを目指します。

3. カスタム投稿に用意した商品などと問い合わせがあった利用者との紐付けを行い、履歴を管理する

WordPressで管理する理由の一つでもありますが、利用者が過去に何を利用したのかを簡単に蓄積できるような仕組みを付けたいと思います。

4. 素早く過去の履歴を閲覧できるようにする

現状ですと、ただのPCで電話がかかってきたときに自動で利用者を表示するのは難しそうですので、手動で素早く検索できる方法を模索したいと思います。

ユーザー情報を蓄積する

まずユーザー情報をどこに蓄積するか検討しました。
手っ取り早く思いついたのは、WordPressのユーザーとして登録してしまって、ユーザー情報を拡張するという方法でした。
会員制サイトなどの場合は、ユーザーに登録させないと専用ページを見せられないので必須になりますが、単にお客さんの情報を保存するだけなのであれば、WordPressのユーザーにする必要はありません。
また、WordPressのユーザーとして登録する場合は、メールアドレスとIDが必須になります。
メールフォームなどからお問い合わせが来たのであればメールアドレスを取得することができますが、ダミーのメールアドレスを毎度入力するのもイマイチです。
プラグインも探してみましたが、ID、メアドは必須のようです。

ユーザーではなく、「アドレス帳」プラグインを入れる方法もあります。
アドレス帳は、検索していただければ豊富に見つかると思いますが、必須項目なしのものも多いので単に利用者を管理したいだけだったらそれだけで解決かもしれません。

私のイメージとしては、常にブラウザを開いておき電話が来たらすかさず通知番号を検索、受話器を受けると同時に「お電話ありがとうございます。○○さん!」ということをやりたいので、検索機能は必須になります。
ところがWordPressのユーザーも、アドレス帳のプラグインも、いまいち検索機能が脆弱で、電話番号などで検索がヒットしないものが多いので、別な方法を検討する必要がありました。
WordPressの管理画面で出てくる検索窓はカスタムフィールドの内容などはヒットしないので、管理画面をACFで作成しようと考えていた私には障壁となりました。

最終的にはカスタム投稿をJSONで出力

まず概要になります。

図のように、お客様から来た電話番号から素早く検索して過去の履歴を探し、今回の応対に活かすという流れになります。
そのため、お客様の詳細ページにはお客様の名前、電話番号、メールアドレス、過去の利用履歴などを入力でき、さらにそれらを検索できる必要がありました。
WordPressのユーザー管理ではメアドなど必須機能があり、アドレスブックプラグインは自由度が効かない、さらに両方とも検索機能が脆弱ということで、最終的に「カスタム投稿でお客様枠を作成し、それを自由に検索できるフォームを作る」という結論に至りました。

カスタム投稿「お客様情報」を作成

自作も可能ですが、カスタム投稿を簡単に作りたいのであればCustom Post Type UIプラグインがおすすめです。

Custom Post Type UIは、カスタム投稿とカスタムタクソノミーの設定を簡単な入力で行うことができます。
ちなみに今回設定したのは以下のとおり。

いくつかポイントがあります。

まず、公開がfalse(偽)ですが、これは情報を保存するだけでページして出力する必要はないということで、無駄な出力はしないようにfalseにしてあります。
それから、アーカイブも不要なのでflase。
記事入力はすべてACFで賄う予定ですので、サポートはタイトルだけにチェックを入れました。
(タイトルがないと記事一覧ページで判別がつかなくなるため)

さらに詳細は端折りますがACFで入力項目を設定し、この「client」カスタム投稿のページ入力だけその入力が行えるように設定しました。
それがこちら。

公開しないようにしているので、プレビューボタンやパーマリンクなどは表示されません。
ここにお客様の個人情報を蓄積していきます。
さて、このようにお客様の個人情報を貯めていくのはいいとして、カスタム投稿の一覧画面にある検索機能では電話番号で検索させることができません。

お客様情報を検索する

お客様情報は、管理画面にフォームがあって検索後すぐにそのお客様の詳細画面に飛べるのが望ましいでしょう。
ちょっと表示位置が変わってしまうのですが、ダッシュボードに

こんな感じで入力フォームを用意し、検索できるようにしました。
どのように検索させるかというと、jQuery pluginである「flexibleSearch.js」を利用しました。

flexibleSearch.jsは、検索元のjsonさえあれば簡単に高機能な検索フォームを作成できるjQueryのプラグインです。
一回読み込めば毎度jsonを読み込む必要もないので超軽量で検索できる優れものです。
欠点としてはjsonファイルが大きくなると読み込みに時間がかかるというところですが、検索時ではなく別のページで先にロードさせるなど工夫することで回避できる場合があります。

マニュアルを読み込むのが面倒くさい人向けの簡単な説明ですが、検索元、検索結果のページ両方にjQuery本体やflexibleSearch本体、設定ファイル、jsonファイルなどを読み込ませ、検索フォーム用のdivタグ、結果出力用のdivタグを設置するだけで簡単に導入が可能です。
どこを検索させるか、どのような体裁で出力させるかは、すべて設定ファイルに指定します。

jsonファイルの出力

flexibleSearchの検索ソースであるjsonファイルはどうやって作成するのかですが、先程作った「client」カスタム投稿の内容だけ出力するjsonファイルを作成します。
jsonファイルはプラグインなどでも作成可能ですが、固定ページにテンプレートを設定することでも出力可能です。

<?php
/*
Template Name: JSON
*/

$args = array(
'numberposts' => -1, //全件
'orderby' => 'post_date',
'order' => 'DESC',
'post_type' => 'client' //カスタム投稿名
);
$posts = get_posts($args);

if($posts): foreach($posts as $post):

$category_list = [];
$cat_list = get_the_category();
foreach ($cat_list as $cat) {
array_push($category_list, $cat->name);
}

$tag_list = [];
$term_list = get_the_tags();
foreach ((array)$term_list as $term) {
array_push($tag_list, $term->name);
}

$json[] = array(
'id' => get_the_ID(),
'date' => get_the_date(),
'name' => get_the_title(),
'tel' => get_field('telnum'),
);

endforeach; endif;
header("Content-Type: application/json; charset=utf-8");
echo '{"items": ';
echo json_encode($json);
echo '}';

こちらのページを参考させていただきました:

簡単にポイントの解説ですが、$args = array()の中にある
'post_type' => 'client'
の部分は、カスタム投稿名を指定します。この場合だと、clientと設定してあるカスタム投稿から記事を持ってくる設定になっています。

それから、
$json[] = array()
の部分でjson出力する内容を指定していますが、
'id' => get_the_ID()で記事IDを、
'date' => get_the_date()で投稿日を
'name' => get_the_title()でタイトルを
'tel' => get_field('telnum')で電話番号をそれぞれ出力しています。

これを固定ページに適用させ、出力させると、

こんな感じでプレビュー表示されればOKです。
ちなみにですが、この固定ページは

必ず非公開設定にしてください!

非公開にしないと、お客様情報ダダ漏れになって大変なことになります。
非公開にしておけば、自分がログインのときには閲覧可能ですので、検索する際にもjsonファイルとして使用できます。

そして、このjsonファイルを、先程のflexibleSearchの設定ファイルの読み込み元のURLに指定します。

検索元と検索結果のページを作る

先程概要でもお知らせしましたが、flexibleSearchは、検索元、検索結果のページ両方にjQuery本体やflexibleSearch本体、設定ファイル、jsonファイルなどを読み込ませ、検索フォーム用のdivタグ、結果出力用のdivタグを設置する必要があります。
検索結果のページは固定ページなどで作れば良いので特に問題はないと思いますが、問題は検索元のページです。
もちろん、検索元のページも固定ページで作れば簡単ですが、毎度そのページを指定して開くのも面倒だと思いますので、上記のようにダッシュボードに検索窓を付けるのが運用上楽ではないかと思います。

ダッシュボードに検索フォームを作成する場合、

// ウィジェットを追加
function add_custom_widget() {
echo 'ユーザー検索';
echo '<div id="search"></div>';

}
function add_my_widget() {
wp_add_dashboard_widget( 'custom_widget', 'お客様検索', 'add_custom_widget' );
}

add_action( 'wp_dashboard_setup', 'add_my_widget' );

これでダッシュボードに窓が作られます。
正常にflexibleSearchが動作すれば<div id="search"></div>の部分が検索窓に置き換わります。

ダッシュボードページ上で検索窓を表示してflexibleSearchを動作するには、ダッシュボードページにスクリプトに必要なJSファイルを読み込ませます。

function my_admin_footer_script(){
echo '<script src="'.get_template_directory_uri().'/js/mustache.js"></script>
<script src="'.get_template_directory_uri().'/js/flexibleSearch.js"></script>
<script src="'.get_template_directory_uri().'/js/flexibleSearch-config.js"></script>'.PHP_EOL;
}
add_action("admin_print_footer_scripts-index.php", 'my_admin_footer_script');

パスなどは適宜変更してください。

これでダッシュボードに検索窓が表示されるはずですが・・・
表示されない場合は、各種JSが読み込まれているか、タグが正常に埋め込まれているかなどを確認してくださいね。

ちなみに検索結果のページもそこから再検索できますので、「非公開」設定にするのをお忘れなく!
忘れるとお客様情報がダダ漏れになります。

ここまでの動作確認

まずはWordPressにログインし、ダッシュボードを開き待機します。

・・・
と、そのとき1本の電話が!
電話番号は「09012345678」です。

すかさず検索します!
ヒットしました!
どうやら過去に利用されたことがあるお客様のようです。

「お電話ありがとうございます!『おおつき』様!
いつもご利用いただきありがとうございます。」
話しながら詳細ページをクリックして過去の履歴を参照します。

「前回こちらのプランをご利用でしたので、今回はこちらでいかがでしょうか?」
・・・といった接客が可能になる(かも!?)という流れになります。

最後の画像にあるように、スタッフ情報や商品・サービス情報などもカスタム投稿で用意しておき、この画面で選ぶだけで簡単に紐付けすることも可能になります。
・・・そこまで記事を書きたかったのですが、ちょっと記事が長すぎるので今回は割愛させていただきます。

まとめ

いかがでしょうか。
ちょっと変わったWordPressの使い方のご提案になります。
CTIについては、個人情報を取ってあるのかと気味悪がられるお客様もいますが、事前にきちんと承諾を取ることで逆に細かなサービス提供が可能になります。
もちろん業種や内容にもよると思いますので、自社の内容に合わせた使い方が望ましいのではないかと思います。

最後になりますが、上記の真似をする場合は、くれぐれも個人情報が漏れないようにご注意ください。
・Jsonファイル
・検索元ページ
・検索結果表示ページ
は、必ず非表示設定にし、外部から見えなくなっていることを十分チェックしてください。

また、不明点などございましたらお問い合わせください。

この記事を書いた人

おおつき@TTI

Webディレクター、Webコンサルタント、Webコーダー、日曜プログラマー、他色々やってます。

気になったら
まずはご相談を

あなたの悩みのために専門家がチームを組み、課題解決に取り組みます。
まずはお気軽にお問い合わせください。

日本全国どこでも対応します。