業務で使っているワードプレス用のチャットプラグインのバージョンが上がってFirebaseを使うようになって、導入しづらくなったのでメモしておきます。
こちらのチャットプラグインは元々独自にチャットプログラムを動かしていたようですが、V2になってバックエンドにFirebaseを採用したようです。
ワードプレスの管理画面 LiveChatでユーザーとチャットする
WordPress Live Chat Plugin ダウンロード
ここからダウンロードする。
有料たしか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
このエラーが出てサイトが表示されなくなる。
「JavaScript を小さくする」のチェックを外すと正常に動作するようになった。
Options > General のScreets API Keyを取得
Get your API keyを押してenvato.comから取得する。
シークレットAPIを作るとユーザーネーム、メルアドなどが見られますよと言っている。
「Approve」を押す。
ドメインごとにAPIが必要かもしれませんが、他のサイトにも同じAPI Keyを入れたらエラーにならなかった。このまましばらく様子見。
Options > Advanced のFirebaseのアプリケーションID取得
Firebaseは現在はGoogleに買収されています。
元々はゲームなどのリアルタイムチャットサービスを提供していた会社のようです。
FireBaseを導入することでLive Chatのスピードと負荷軽減になりそう。
Live Chat > Options ＞ Advanced
Create free Firebase accountを押して、App URLとApp Tokenを取得する。ログインはGoogle アカウントで入れる。
-
- Google アカウントでログインしてFirebaseにアクセスする
-
- ログイン後自動でDB生成完了している、Manage Appを押す
https://●●●-1234.firebaseIO.com
これをコピーして、「●●●-1234」の部分をApp URLの部分に貼り付ける。
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：送信
サイト上のチャットに表示される文言。
Options > Forms
以下のセレクトの部分は3つ選択できるようになっています。
- Optional：任意
- Required：必須
- Hidden：表示しない
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：フッター定型文
Chat Logs
チャットした相手のログも保存しておいてくれます。
以前のLive Chatバージョン
以前のバージョンは、Item Purchase KeyにLicenseコードが必要だったけど今は必要ないみたい。
以前のライセンスを貼り付ける場所
Chat Console ＞ General Settings ＞ Item Purchase Key
Live Chat 設定完了
サイト(ユーザー)からみたチャット画面
管理者のチャット画面
Live Chat ＞ Live Chat
うまくいきました。
WordPress Live Chatのメモでした。
コメント