無料のチャットサポートがWebサイトのコードに1行追加するだけで使えるようになりました

Posted: / Tags: Plugin



サイトにチャットサポート機能を追加したいケースはよくあるかと思います。

チャットサポートを導入すると、コンバージョン率が上がることは色々なところで報告されています

今回は、フロントエンドコーディングで完結してたった1行で使えるチャットサポートプラグインを作ったので、今回はその利用方法をご紹介します。

※合計同時チャット人数20人(オペレータも含む)、保存データ数100,000データまでであれば、無料で利用できます。

以下、デモです(動作の確認の用途のみに利用下さい、こちらで質問頂いても基本的に返信は致しません)。

blg-20160222-chat-support-plugin-customer.png

Milkcocoaのセットアップ

Milkcocoaを利用されてない方でも、簡単に利用できます。

Milkcocoaに登録する(無料)

MilkcocoaのWebサイト無料登録ボタンから利用登録をします。メールアドレスとパスワードを送信したあと、送られてくるメールで認証をしたら登録完了です。

blg-20160215-contact-form-sitetop.png

Milkcocoaの管理画面にログインする

登録後、MilkcocoaのWebサイトログインボタンからログインをします。

blg-20160215-contact-form-login.png

Milkcocoaアプリを作成する

ログインをしたら以下のようなアプリリスト画面が出るので、新しいアプリを作る(アプリ名は16文字まで)を押してアプリ名を入力後、アプリを作成します。

blg-20160215-contact-form-admin.png

Milkcocoa Chat Support Admin 画面を開く

アプリを作成したら、作成したアプリをクリックして「アプリの管理画面」へ移動します。

blg-20160215-contact-form-app.png

「Webサイト用プラグイン」タブをクリックすると、以下のような画面が出てくるので「チャットサポート」の管理画面を開くをクリックします。

blg-20160222-chat-support-plugin.png

以下がMilkcocoa Chat Support Admin画面(Milkcocoa Chat Supportの管理画面)です(画像にはデータが既に入っていますが最初はデータはありません)。

blg-20160222-chat-support-plugin-admin.png

ここから先は、Milkcocoa Chat Support Admin画面にある「導入方法」の通りに進めれば導入できますが、一応こちらでも説明します。

Milkcocoa Chat Supportの導入

※こちらは、上記のMilkcocoa Chat Support Admin画面の「導入方法」にも同じ内容が書いてあります。

許可オリジンの設定

Milkcocoa Chat Support Admin画面を利用可能にするために、「アプリの管理画面 > 設定 > 許可Origin」にmlkcca.comを追加して下さい。チャットサポートを導入するWebサイトのURL(ホスト)も追加することも忘れないで下さい(example.comに導入する場合はexample.comを追加する)。

blg-20160215-contact-form-origin.png

セキュリティルールの設定

「アプリの管理画面 > セキュリティルール」に以下のセキュリティルールを貼付けて保存して下さい。こちらのセキュリティルールを記述しないとだれでもデータの保存場所がわかってしまうので必ず設定して下さい。なお、Milkcocoa Chat Supoort Admin画面内ではセキュリティルールは無視されすべてのAPIが使用可能になっています。

mcp-chatsupport/chat/* {
  permit : all;
  rule : true;
}
mcp-chatsupport/operator {
  permit : get, query;
  rule : true;
}
mcp-chatsupport/index {
  permit : push;
  rule : true;
}

blg-20160222-chat-support-plugin-security.png

なお、貼り付けの際、デフォルトで記載してある以下の設定は必ず削除して下さい。

* {
  permit : all;
  rule : true;
}
↑必ず削除する

Webページへのコード貼り付け

chatsupport.min.cssmilkcocoa.jschatsupport.min.jsをCDNから読み込んで、<div>タグにmilkchat属性とdata-appidを含ませれば利用できます。

<link rel="stylesheet" type="text/css" href="https://cdn.mlkcca.com/chatsupport.min.css">
...
<div data-appid="あなたのapp_id" milkchat></div>
<script src="https://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
<script src="https://cdn.mlkcca.com/chatsupport.min.js"></script>

また、オプションとしてdata-color属性にはテーマ色を設定できます(blue, orange, black, green)。data-mesonはオペレーターがオンラインのときに表示されるメッセージ、data-mesoffはオペレーターがオフラインのときに表示されるメッセージです。

<link rel="stylesheet" type="text/css" href="https://cdn.mlkcca.com/chatsupport.min.css">
...
<div data-appid="あなたのapp_id" data-color="blue" data-meson="疑問や質問があればお気軽にお声がけ下さい。" data-mesoff="ただいまオフライン中です。メールアドレスとメッセージを残して頂ければ、後日返信致します。" milkchat></div>
<script src="https://cdn.mlkcca.com/v0.6.0/milkcocoa.js"></script>
<script src="https://cdn.mlkcca.com/chatsupport.min.js"></script>

なお、IE9以下、Android2系以下、iPhone4以下にはチャットを非表示にして、Milkcocoaにも接続しないようになっています。

Milkcocoa Chat Support Admin画面の操作

言葉の定義として以下のように使います。

  • オペレーター:お客さんのチャットに対応する人のことで、Milkcocoa Chat Support Admin画面にアクセスしている管理者を指す。複数いる場合もある。
  • ユーザー:お客さんのことで、チャットを設置したWebサイトに訪れてチャットを開いた人を指す。ユーザーにはID(例:-D3-snow_F3grY...)が割り当てられていて、IDの_(アンダーバー)より以前を抜き出したもの(例:-D3-snow)を「ユーザー名」と呼ぶ。

オペレーターのアクティブ化

利用する前にオペレーターをアクティブ状態にします。「オペレーター名を入力」の入力欄にオペレーター名を入力して、右にあるスイッチをONにすると入力したオペレーターがアクティブ状態になります。

アクティブ状態になったオペレーターがひとりでもいると、ユーザー側のチャットに「チャット受付中!」とチャットを受け付けている表示になります。アクティブ状態のオペレーターが一人もいなければ、ユーザー側のチャットには「メッセージを残す」と表示されます。

blg-20160222-chat-support-plugin-operator.png

チャットウインドウ

基本的にFacebook等のチャットと同じ使い方です。

blg-20160222-chat-support-plugin-opechat.png

アクティブなユーザーは吹き出しの色が緑になります。茶色の吹き出しはアクティブかどうかを判別できない環境を利用しているユーザーです。

ユーザー名は「-(A〜Dの1文字)(1〜9の1文字)-(中一で習う英単語)」からなっています。複数のオペレーターで使う際の決まりごとなどにお使いください。

×ボタンで、チャットリストから削除します(チャットの内容のデータ自体は残ります)。

データを取得する日付の指定

画面の右上の日付が書いてある部分をクリックすると、データの取得範囲を指定できます。

blg-20160222-chat-support-plugin-date.png

検索

検索窓では、フィルター(「ユーザー名」と「チャット内容」から検索)をかけることができます。

blg-20160222-chat-support-plugin-search.png

通知

チャットが作成されたタイミングとチャットメッセージが送られたタイミングで通知が来ます。

通知は「ピンッ」と音が鳴るのと、デスクトップ通知(ブラウザの通知)を許可していたらデスクトップ通知が来ます。Facebook等とは違い、画面を開いていない状態では通知は来ません。

blg-20160222-chat-support-plugin-notify.png

自動再読み込み

オペレーター画面では、Milkcocoaの接続が切れたら自動的にページごと再読み込みされます。パソコンをスリープ状態にして持ち運ぶ等の場合には、開いた際に「ページが見つかりませんでした」表示になっていないか確認して下さい。

利点

使い始めやすく、無料で使うことができるのが利点です。

フロントエンドにたった一行追加するだけで良い

フロントエンドに、(JS, CSSの読み込みを除けば)たった一行追加するだけで実装が出来るので、技術者でなくても実装できます。

合計同時チャット人数20人、保存データ数100,000データまでは無料で使える

Milkcocoaの無料プランは以下のようになっています。

  • 保存可能データ数:100,000データ
  • 同時接続数:20

今回のチャットサポートは、以前とは違い、チャットを開いた時点でコネクションを確立するようにしているので、チャットを始めていない人のコネクションを節約することが出来ます。

純粋にチャットをしているユーザーのコネクション数のみがカウントされるということになります。

※なお、一度チャットを開いたユーザー(チャットを始めたユーザー)は、ページ遷移の度に自動的にチャットをしている状態になる点に注意して下さい。

セキュリティについての注意点

チャットデータは、ユーザーごとに振り分けられたIDを使ったデータストア(mcp-chatsupport/chat/ユーザーID)に保存されます。

  • mcp-chatsupport/chat/-D2-home_Faf34k...
  • mcp-chatsupport/chat/-C3-cat_23gwEf...

先ほど貼付けるよう言ったセキュリティルールを見てみると、チャットを保存するデータストア(mcp-chatsupport/chat/*)のAPIがすべて許可されているかと思います。

mcp-chatsupport/chat/* {
  permit : all;
  rule : true;
}

「これでは誰でもすべてのチャットが見れてしまうのでは?」と思うかもしれませんが、データストア名に使用しているユーザーIDが難解な文字列になっていることで、チャットデータを取得することが難しくなっています。

現在、Webから特定のアプリのデータストアのリストをとってくることはできない上、オペレーター側でユーザーのIDを把握するためのmcp-chatsupport/indexにはpushしか許可されていないため、管理者ではない人がチャットデータを取得することは困難な状況となっています。

万が一ですが、IDさえ知られてしまったら誰でもデータの取得が可能である点は理解しておく必要があります(よくあるWebサービスの限定公開URLと同じレベルのセキュリティと考えて頂ければと思います)。

まとめ

Milkcocoaを使って、たった1行で簡単にフロントエンド完結のチャットサポートの設置方法を説明しました。

新しいビジネスを始める際は、少ないコストで高速な価値検証(主に顧客とのコミュニケーション)が必要になります。

今回のチャットサポートは「フロントエンド完結で導入が簡単」「小規模では無料」という点で、まさにその用途にマッチしていると考えています。

新しいビジネスを始めている・始めようとしている方は、是非使ってみてはいかがでしょうか。