【3CX Live Chat】ホームページにチャット機能を導入する方法

WordPressのプラグイン「3CX Live Chat」を利用して、無料でホームページにチャット機能を導入する方法について解説します。

オンラインのサービスを充実させるためには、チャットですぐに顧客応答ができたらサービス向上になり、機会損失を最小限にできます。

WordPressにはChatプラグインは多数ありますが、その中でもアップロードが頻繁にあり最新対応している「3CX Live Chat」をしてみましょう。

【3CX Live Chat】ホームページにチャット機能を導入する方法

インストールと設定

公式サイトからダウンロードするか、Wordpressのプラグインインストールからインストールして有効化します。

インストールが済んで設定に進むと以下のようにステップごとに設定していく画面が現れます。

最初のSelect Channelでは「No.」で進めてOKです。

Invite agentsという画面で、New Angetを登録します。

• Username
• 名前
• メールアドレス

この3つを入力してAdminにチェックを入れて次へをクリックします。

Style Settingsで、色を選択します。チャット画面の色合いを選ぶことができます。ここはそこまで気にする必要がないと思いますので、3CXのままでも良いでしょう。

Start Nowをクリックして設定を完了します。

3CX Chatの使い方

3CXを有効化して設定が完了すると、ホームページの右下に吹き出しマークのようなアイコンが表示されます。

これをホームページに訪れたお客さんや読者がクリックすることでチャットを開始することができます。

チャットを利用するにはユーザー名とメールアドレスの入力が必要でChatボタンを押して開始します。

チャットが開始されると、サイトオーナーからの規定の言葉が表示されて、サイト訪問者はメッセージを打ち込むことできます。添付ファイルも可能です。

スマホからの画面はこのような感じになります。

サイトオーナー側でチャットを受信すると以下のような画面になります。

ユーザー名が左側に、右側にはチャットのやり取りの内容が表示されます。ユーザー側が画面を閉じるとアクティブなチャットに表示されなくなります。

チャットが来るとポキ、コキ、チャーンのような効果音が鳴ります。すぐに対応することがお客さんにとって重要になります。

3CX Live Chatを設定しよう

WordPressのダッシュボードのメニューには「ライブチャット」という項目が追加されますので、「設定」から進みます。

一般設定

一般設定をしていきます。

一般設定

一般設定では以下の項目を設定します。

• チャットを有効にする　→　はいでOK
• Required Chat Box Fields　→　名前だけ、メールアドレスだけ、名前とメールアドレス、必要なしの4つから選びます。
• ログインユーザーは登録情報を使用　→　チェックでOK
• Enable On Mobile Devices　→　スマホで使えるようにします。チェックでOK
• Play a sound when there is a new visitor　→　新しいユーザーが来たら音を鳴らします。チェックでOK
• Delete database entries on uninstall　→　アンインストールしたらデータベースを削除します。チェックでOK
• Chat email notifications → メールで通知します。気が付くためにチェックでもOK
• Number of chat rings → チャット応答までの時間になります。そのままでOK
• Agents can set their online status → ダッシュボードからオン・オフラインをすぐに切り替えられます。チェックでOK

• Exclude chat from ‘Home’ page　→ チャット機能をホームには除外するか
• Exclude chat from ‘Archive’ pages　→ チャット機能をアーカイブページには除外するか
• Include chat window on the following pages →　チャット機能を表示するページを選びます
• Exclude chat window on the following pages →　チャット機能を除外するページを選びます
• Exclude chat window on selected post types → チャット機能を除外するポストタイプを選びます

Geolocalization

• Detect Visitors Country → コンタクトユーザーの地域を検出するかですがGeo IPのプラグインが必要になります。

Advanced settings

• Show ‘Powered by’ in chat box　→ Powered by を表示させるかですが、無しで良いと思います。

Chat Transcript Settings

チャット終了後にチャット内容をメールで送信することができます。

このような形でメールが届きます。

username (xxxxxxx@xxxxx.com)Laptopreneur (Twenty Twenty One demo)

Starting Time: 2021-02-22 17:02:51 Ending Time: 2021-02-22 17:03:06tomatoco ,(xxxxxxx@xxxxx.com) username ( 17:02:55 ): こんちわ username ( 17:03:01 ): いえ

Thank you for chatting with us.

• Send transcripts when chat ends　→　メール送信するか選択します
• Send transcripts to　→　ユーザー(web visitor)に送るか自分(agent)に送るか選択します
• Email body　→　メール内容を編集します。html形式なのでagent宛ならそのままでも良いでしょう。
• Email header →　メールヘッダーを編集します。
• Email footer→　メールフッターを編集します。

チャットボックス

Chat Box Settings

• Alignment → チャットアイコンの位置を指定(右下でいいかと)
• Chat box height (percent of the page)　→　チャット表示の高さ。まずはデフォルトでOK
• Automatic Chatbox Pop-Up　→　チャットを表示させるかさせないか　Pop-up only when agents are online(サイト側がオンラインだったら表示させる)
• System Language　→　日本語がないのでBrowser’s LanguageでOK
• Display for chat message　→　チャットに表示させるもの。名前とアバターでOK
• Chat box for logged in users only　→　チェックなしでOK
• Show agent’s name　→　サイト側の名前の表示。チェックありでOK。
• Default agent’s name　→　サイト側の名前。Supportをサポートに変更したりしましょう。
• Display a timestamp in the chat windoｗ　→　時刻をチャットに表示させるか。チェックでいいでしょう。

• Incoming chat ring tone → チャットが来たら鳴らす音　
• Incoming message tone　→　メッセージが来たら鳴らす音
• Icon　→　チャットアイコンを設定します
• ロゴ　→　チャット上部に表示するロゴになります
• Agent default picture　→　やり取りするメッセージのアイコンになります
• Chat button delayed startup(second)　→　チャットボタンの表示を遅らせます(数字が秒)

User Experience

• Share files → ファイルをシェアできるようにするか
• Visitor experience ratings → ユーザーにチャット対応の評価をしてもらうか
• Rating request message → 「チャットの対応をぜひ評価お願いします」などに変更しましょう
• Feedback option message → 「より詳細にフィードバックをしますか」などに変更しましょう
• Feedback request message → 「フィードバック内容について教えてください」などに変更しましょう。

Greeting

• Visibility → Disabledで良いです(変更してもどこが変わるかよくわかりませんでした)

Social

• Facebook URL → Facebookへのリンクをアイコン表示します
• Twitter URL → Twitterへのリンクをアイコン表示します

オフラインメッセージ

管理人が離席・オフラインの時に表示させるメッセージです。

オフラインメッセージ

• Disable offline messages → オフラインメッセージのオン・オフ
• Intro message → 「只今離席していますのでコメントを残してください」などに変更
• Submitted message　→ 「メッセージを預かりました、後ほどご連絡します」などに変更
• Name request message　→　「お名前をお願いします」などに変更
• Email request message　→　「メールアドレスをお願いします」などに変更
• Name length error　→　「最大の文字数を超えています」などに変更
• Invalid name message　→　「名前が有効ではありません」などに変更
• Invalid email message →　「メールアドレス形式ではないようです、再度やり直してください」などに変更

Greeting

• Visibility → Disabledで良いです(変更してもどこが変わるかよくわかりませんでした)

Email Settings

Send to agent(s) → サポートに送ってもらう時のメールアドレスを入力
Subject → 件名があれば入力しておきます
Auto-respond to visitor → オフライン時にメッセージが来たらメールで返信します。
Auto-responder ‘From’ name　→　誰から来たのか入力します(あなたのサイト名など)
Auto-responder ‘From’ email → どこから送信するかのメールアドレスを入力します
Auto-responder subject　→　件名を入力します。「チャットからのお問い合わせについて」などに変更
Auto-responder body　→　メール本文を記入します。

スタイル

チャットの色やメッセージを変更します。

スタイル

• Theme → 色合いを選択します。
• Use localization plugin → 言語のプラグインを持っていたら有効化します。
• Minimized button → Bubbleしか選択できません
• Chat box title → 「ライブチャットサポート」などの変更
• Chat box intro → 「お名前とメールアドレスを入力してください」などに変更
• Start chat button label → 「チャットを開始する」などに変更
• Welcome message → 「初めまして、今日はどんな御用でしょうか？」などに変更
• Auto-response to first message → 自動で初めのメッセージを応答する場合に入力 (%NAME%で名前の利用が可能)
• On chat end message → チャットが終わったら表示 「通信が終了しました。気軽にコンタクトお願いします」などに変更
• Agent no answer message → うまくサイト側が返信できなかったら表示するメッセージ「応答なし。後ほどやり直してください」などに変更
• Chat box animation →　チャットボックスのアニメーションを選択します

スタッフ

チャット対応するスタッフを追加します。

Chat Agents

デフォルトではWordpressのユーザーが表示されています。

追加するには＋の選択から行います。ここで表示されるユーザーはサイトのユーザーになりますので、左側のワードプレスのデフォルトメニューから「ユーザー」→「新規追加」から追加します。

ブロックしたビジター

Blocked Visitors / IP Addresses

チャットに冷やかしやスパムで来る場合、ブロックしたいIPアドレスを入力します。

暗号化

メッセージの暗号化もできますが、とりあえずはそのままで問題ありません。

Chat Operating Hours

チャット対応可能な曜日と時間を設定します。From 営業開始 to 営業終了 を入力します。

Departments

Departments

デパートメントは日本語だと部署という感じです。営業部だったり総務部だったりですね。

Advanced feature

Chat Server

無料利用の場合は、Standalone – No 3CXでChat Serverの設定は触らなくてもOKです。

Privacy

プライバシーポリシーは別途サイトのプライバシーポリシーにチャット内容についての取り扱いについて記入してあげましょう。

Gutenberg Blocks

こちらはあまり使わないのでそのままでOKです。

時刻の注意点

チャットボックスの時刻はブラウザの時刻で表示されますので、ユーザーには正しい時刻が表示されますが、サイトオーナー側の管理画面でのチャット履歴の時刻は日本時間と9時間の差がありますので注意してください。

まとめ：

今後オンラインでのニーズはどんどん高まっていきますので、ショップサイトにしても、コンサルや、士業などのサイトでもオンラインサポートは充実していきたいところです。