【WP】Firebaseを採用したチャットプラグイン Live Chat V2導入メモ

業務で使っているワードプレス用のチャットプラグインのバージョンが上がってFirebaseを使うようになって、導入しづらくなったのでメモしておきます。

WS000002

こちらのチャットプラグインは元々独自にチャットプログラムを動かしていたようですが、V2になってバックエンドにFirebaseを採用したようです。

ワードプレスの管理画面 LiveChatでユーザーとチャットする

ワードプレスの管理画面 LiveChatでユーザーとチャットする

WordPress Live Chat Plugin ダウンロード

Chat with your customers on your site for sales and support easily, and beautifully. Now LiveChat uses real-time technology and you are able to install on unlim...

ここからダウンロードする。

有料たしか30ドルくらい?かと思った。今は18ドルに値下げされているようす。

Head Cleaner プラグインが邪魔する

Head Cleanerをオンにしておくと以下のようなエラーになる。

Fatal error: Uncaught exception 'JSMin_UnterminatedStringException' with message 'Unterminated String: '"]+(\\.[^<>()[\\]\\\\.,;:\\s@\\"]+)*)|(\\".+\\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/.test(a)},'' in /home/ユーザ名/ドメイン名/public_html/wp-content/plugins/head-cleaner/includes/JSMin.php:148 Stack trace: #0 /home/ユーザ名/ドメイン名/public_html/wp-content/plugins/head-cleaner/includes/JSMin.php(120): JSMin->action(1) #1 /home/ユーザ名/ドメイン名/public_html/wp-content/plugins/head-cleaner/includes/JSMin.php(77): JSMin->min() #2 /home/ユーザ名/ドメイン名/public_html/wp-content/plugins/head-cleaner/head-cleaner.php(1980): JSMin::minify('/*!? * Screets ...') #3 /home/ユーザ名/ドメイン名/public_html/wp-content/plugins/head-cleaner/head-cleaner.php(1991): HeadCleaner->js_minify('/*!? * Screets ...') #4 /home/ユーザ名/ドメイン名/public_html/wp-content/plugins/head-cleaner/head-cleaner.php(1617): HeadCleaner->_js_minify('/*!? * Screets ...') #5 /home/ユーザ名/ドメイン名/public_html/w in /home/ユーザ名/ドメイン名/public_html/wp-content/plugins/head-cleaner/includes/JSMin.php on line 148

このエラーが出てサイトが表示されなくなる。WS000000

「JavaScript を小さくする」のチェックを外すと正常に動作するようになった。

Options > General のScreets API Keyを取得

WS000003

Get your API keyを押してenvato.comから取得する。

WS000002

シークレットAPIを作るとユーザーネーム、メルアドなどが見られますよと言っている。

「Approve」を押す。

WS000001

ドメインごとにAPIが必要かもしれませんが、他のサイトにも同じAPI Keyを入れたらエラーにならなかった。このまましばらく様子見。

Options > Advanced のFirebaseのアプリケーションID取得

Firebaseは現在はGoogleに買収されています。

元々はゲームなどのリアルタイムチャットサービスを提供していた会社のようです。

FireBaseを導入することでLive Chatのスピードと負荷軽減になりそう。

Live Chat > Options > Advanced

Screen Shot 2016-04-01 at 16.14.18

Create free Firebase accountを押して、App URLとApp Tokenを取得する。ログインはGoogle アカウントで入れる。

https://●●●-1234.firebaseIO.com

これをコピーして、「●●●-1234」の部分をApp URLの部分に貼り付ける。

Secretsを選んでShowを押すとApp Tokenが表示されるのでこれをコピー

Secretsを選んでShowを押すとApp Tokenが表示されるのでこれをコピー

ワードプレスに戻ってApp Tokenの項目に貼り付ける。最後に下にあるSave Changesで保存。

Advancedのその他の部分はデフォルトで大丈夫そう。

Options > Appearance

こちらは表示が英語になっているので全て日本語に変更します。

以下、ライトなサイトでの応答文なので、ちゃんとした通販だともう少し硬い日本語のほうがよろしいかと。

上のほうはチャット画面の色とか幅を変更できます。

下のほうに行くとメッセージを変更できる項目がでてきます。

  • Button title:チャットです♪
  • Offline form title:現在オフライン
  • Reply field label:ここに記入してくださいね。
  • Offline body:ゴメンナサイ現在オフラインです。メールでお願いします。
  • Name field label:お名前
  • Email field label:メールアドレス
  • Phone field label:電話番号
  • Message field label:内容
  • Send button:送信

WS000003

サイト上のチャットに表示される文言。

Options > Forms

以下のセレクトの部分は3つ選択できるようになっています。

  • Optional:任意
  • Required:必須
  • Hidden:表示しない

WS000000

Login form

  • Prechat message:質問・お話など、話しかけてください。
  • Welcome message:こんにちは、なにか質問ありますか?
  • Name field:Optional チャット開始するとき名前を必須とするかどうか
  • Email field:Optional チャット開始するときメールアドレス必須とするかどうか

Contact form

こちらはオフライン時にメールを出す場合の必須項目

  • Name field:Required 名前も必須にする。
  • Email field:Required メールで連絡するので必須にする。
  • Phone field:Hidden 通常は非表示

Options > Offilne

  • Where should offline messages go?:メッセージを受け取るメルアド
  • Redirect offline button to an URL:送信後に表示するページ
  • Site Name:サイトの名前
  • Site URL:サイトのURL
  • E-mail header:ヘッダー定型文
  • E-mail footer:フッター定型文

WS000001

Chat Logs

WS000002

チャットした相手のログも保存しておいてくれます。

以前のLive Chatバージョン

以前のバージョンは、Item Purchase KeyにLicenseコードが必要だったけど今は必要ないみたい。

以前のライセンスを貼り付ける場所

Chat Console > General Settings > Item Purchase Key

Live Chat 設定完了

サイト(ユーザー)からみたチャット画面

管理者のチャット画面

Live Chat > Live Chat

WS000007

うまくいきました。

WordPress Live Chatのメモでした。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする