WordPress

WebサイトにFacebookのメッセンジャー埋め込んでみた

制作中のWebサイトで、Facebookを利用した問い合わせができるようにできないかと思って、チャットプラグインメッセンジャーの両方を試してみました。

機能の概要や設置方法を紹介するとともに、どう使い分けたらいいのかも考えてみます。

 

Webサイトで来訪者とコミュニケーションしよう

Webサイトでビジターとコンタクトする方法としては、メールフォームを設置するのがオーソドックスな方法ですが、最近ではチャットボットを利用したものもたくさん見かけます。

 

なにか手軽に導入できるものはないかと考えていたら、Facebookがメッセンジャーを利用できるツールを提供していたので試してみました。

導入が簡単なのと、サイトのオーナーさんがFacebookだったら慣れているというのが大きな理由です。

 

カスタマーチャットとメッセンジャー

カスタマーチャット

カスタマーチャットは、ページにアクセスしたとき自動で現われるポップアップからメッセージのやりとりができる仕組みですね。

名前の通り、顧客とのコミュニケーションツールとして、カスタマーサポートによく使われています。

Facebookページにもこの機能があるので使ってみることにしました。

Facebook メッセンジャーチャット

メッセンジャーチャットの表示例

 

メッセンジャー

Facebookにはメッセンジャー機能もありますが、そもそもサイト側がFacebookを利用していることがわかっていないとダイレクトにコンタクトすることができませんね。

そこでサイトにFacebookページのフィードを埋め込むことも考えたんですが、調べてみたらメッセンジャーのアイコンを表示させる方法があったので、来訪者にとってはそちらの方がひと手間減らせるかなと思って、これも試してみました。

Facebookメッセンジャーの表示例

プラグインによるアイコン表示

 

カスタマーチャットを設置してみる

最初にお断り。

ここで紹介している方法は、WordPressテーマ"Astra”の機能に依存しています。

他のテーマだと設置方法が違ったり、そもそもメッセンジャーチャット設置専用にウィジェットが用意されている場合がありますから、あくまでひとつの例と捉えてください。

カスタマーチャットを設置するには、1)Facebookページでコードを取得、2)ページのHTMLソースにコードを貼り付ける、という2ステップになります。

今回、WordPressでサイトを作成していますから、コードの貼り付けにはテンプレートそのものをカスタマイズする方法とウィジェットを使う方法がありますが、今回はお手軽にウィジェットを使ってみました。

 

カスタマーチャットのコードを取得する

まず、サイトと連携させるFacebookページにアクセスして、メッセンジャーチャットのコードを取得します。

「ページを管理」メニューのいちばん下にある[設定]をクリック

Facebookページ画面

Facebookページの設定にアクセス

 

続いてメニューから[メッセージ]をクリック。

Facebookページ メッセージ設定

メッセージ設定を開く

 

すると設定項目のセクション内に「ウェブサイトにMessengerを追加」というのがあるので、[利用を開始]をクリック。

Facebookページ メッセンジャーの設定

Messengerを追加する

 

「チャットプラグインの設定」画面に進んだら対話形式で設定を行っていきます。

Facebook Messengerのコード取得1

メッセンジャーのコード作成を開始

 

ステップ1では、チャットプラグイン画面に表示するメッセージを指定します。

右側にあるプレビューで、PC用の表示とスマートフォン用を切り替えられるので、確認しながらメッセージを設定しましょう。

Facebook Messengerのコード取得2

メッセージを設定。プレビュー表示もできる

 

また、「ゲストチャット」オプションをオンにしておくと、Facebookにログインしていないユーザーでもチャットができます。

 

次のステップでは、チャット画面の配色、表示位置などを指定します。

Facebook Messengerのコード取得3

表示位置や配色を指定する

 

最後のステップでは、ソースコードが表示されるのでコピーしましょう。

Facebook Messengerのコード取得4

表示されたコードをコピーする

これでコードの取得は終わり。

 

ウィジェットを使ってWordPressに表示する

次はコピーしたソースコードをWordPressに設置します。

今回は、WordPressテーマ”Astra”のウィジェットとフッタービルダー機能を使ってみました。

 

 

まず、WordPressの外観設定でウィジェットを設定します。

 

”Astra”ではウィジェットを表示できるエリアが8ヶ所ありますが、その中で"Footer Builder Widget 1"を使うことにします。

ウィジェット一覧から「カスタムHTML」を選択し、”Footer Builder Widget 1”へドラッグ

カスタムHTMLの設定を開いて、先ほどコピーしておいたソースコードをペーストします。

WordPress ウィジェットの設定

ウィジェットにカスタムHTMLを設置する

 

次に外観設定からフッタービルダーを開いて、Widget1を登録します。

下の図は3段あるフッターエリアのうち、いちばん上の”Above Footer”にWidget1を設置しているところです。

WordPress Astraテーマのフッタービルダー

フッタービルダーにウィジェットを設置する

 

これでページにアクセスしたとき、自動でチャットウィンドウが表示されます。

 

チャットプラグインの注意点

実際に表示してみると、この設置方法には問題点がありました。

 

不要なフッターまで表示されてしまう

テーマのフッター機能を利用しているため、当然ながらフッターが表示されてしまい、レイアウト的にいまいち美しくないのです。

メッセンジャーチャット表示例

カスタムHTMLのラベルが表示されている

 

特に識別用に入力したウィジェットの名前が表示されるのがいけません。

そこであえてウィジェット名を入力しないというのも試してみましたが、文字は表示されなくなるものの、フッターエリア自体は残ってしまいました。

これではサイトのデザイン性を損なってしまいます。

 

フッタービルダーを使わず固定ページのコンテンツとして埋め込む方法も試してみましたが、やはり不自然な余白ができてしまいます。

またこの方法だと、カスタマーチャットを表示させたい場所すべてにコードを配置する必要があるので、ページ数の多いサイトでは作業性が悪くなります

 

 

テーマそのものをカスタマイズすればOK

これらを回避するにはテーマそのものをカスタマイズする、つまりWordPressテーマのPHPコードにカスタマーチャットのコードを埋め込んでしまうのがいちばんでしょう。

ただし、テーマをカスタマイズするいはある程度知識が必要なのと、アップデート時に上書きされてしまわないように子テーマを作成する必要があり、多少敷居が高くなります。

私自身はできないことはありませんが、今回は別の方法がないか探してみました。

 

カスタマーチャット対応テーマを使う

もうひとつの方法としては、カスタマーチャットに対応しているテーマを選ぶという手もあります。

これなら、上で説明したのとほぼ同じ手順で簡単に設置できます。

実は、カスタマーチャットの設置方法を検索すると、このような対応済みテーマを使った方法が簡単に見つかります。

カスタマーチャットの設置を優先するなら、まずそういった対応済みテーマを探してみるのがいいでしょう。

 

プラグインでメッセンジャーを埋め込む

今回使う”Astra”ではお手軽な対処方法がなさそうだったので、WordPressのプラグインで解決できないか探してみました。

 

いろんなメッセンジャーが使えるプラグイン

すると、そのものずばり”The Official Facebook Chat Plugin”というのがみつかったのでさっそく試してみましたが、これは役にたちません。

なんと、単にカスタマーチャットのコードを取得するだけの機能しかなく、WordPressへの設置はやってくれないのがわかったので、さっさと削除しました。

 

代わりに見つけたのが”Floating Chat Widget: Contact Icons, Messages, Telegram, Email, SMS, Call Button -Chaty”という長ったらしい名前のプラグインです。

めんどくさいのでChatyと表記します。

Facebook Messenger用プラグイン

Facebook Messenger用のWordPressプラグイン

 

 

設置は簡単で、設定画面の中から使いたいサービスのアイコンを選んでリンク先などを入力し、さらに表示オプションをいくつか指定すればOK。

 

Facebook以外にも、WhatsApp、Instagram、Skype、Line、Linkedinなど、いろんなメッセンジャーサービスが使えます。

 

 

無料版だと、この中からふたつまで指定できるので、電話とFacebookメッセンジャーを選んでみました。

Chatyプラグインの設定例

表示したいアイコンを選んで設定を登録する

 

オプションでは、アイコンの色や表示位置、アイコンの隣に現われるメッセージのテキストなどを指定できます。

また複数のサービスを設定しているときに、アイコンをグループ化してひとまとめにしておくか、最初からすべてのアイコンを表示させるかを選べるようになっています。

設定画面の右側にはプレビューがあるので、それを見ながらカスタマイズしましょう。

 

そのほかウィジェットのアイコンを表示するタイミングとして、ページを読み込んでから何秒後にアイコンが現われるかや何パーセントスクロールしたら現われるかなども指定できます。

 

さらに、有料版になるとアイコンを表示させる期間(日付)や時間帯を指定したり、特定のページだけに表示させたり、国を限定することもできます。

”Traffic source"という設定を使うと、SNS経由や検索エンジン経由、Google広告経由などアクセス経路によって表示を限定することまで可能です。

 

また、Chatyでは複数のウィジェットを設置したり、ウィジェットごとに表示/非表示を選択できるようになっています。

Chaty ウィジェットの管理

ウィジェットは非表示にもできる

これで、Webページを開くとメッセンジャーのアイコンが表示されるようになりました。

Facebookメッセンジャーの表示例

Chatyプラグインによるアイコン表示

 

Chatyではメッセンジャー画面を使う

表示してみてわかったのは、Chatyを使ってFacebookメッセンジャーを表示したばあい、アイコンをクリックすると新たにブラウザーのタブを開いてメッセンジャーの画面を表示するということです。

Facebookメッセンジャータブ

メッセンジャー用タブが現われる

 

つまり、チャットプラグインのようにサイトはそのままチャットがポップアップするのに比べるとややダイレクト感に欠け、ひと手間増える感じがあります。

また、当然のことながらFacebookにログインしているユーザーしか利用できません。

 

ふたつを比べての結論は・・・

メッセンジャーチャットとChatyプラグインを使う方法のふたつを体験してみましたが、どちらも一長一短アリです。

メッセンジャーチャットはダイレクトにやりとりできるチャットを設置できますが、使用できるテーマを選んだり、場合によってはテーマをカスタマイズする必要があります。

 

一方、Chatyを使う方法はプラグインで簡単に設置できますが、メッセンジャーのタブを開いての操作になるのでひと手間増えるのと、利用できるのがFacebookユーザーに限られるという制限があります。

 

数秒熟考して、今回はChatyを使ってみることにしました。

 

理由は簡単で、サイト運用側の問題です。

メッセンジャーチャットは、手軽にメッセージを送れるダイレクト感が魅力ですが、それが今回はネックと判断しました。

 

チャット画面でのやりとりとなると、どうしてもすばやいレスポンスを期待してしまいます(無意識にも)

しかし、今回作っているサイトはオーナーの都合上、メッセージに即応できません

なので、チャットよりももっと時間をかけたメッセンジャーによるやりとりの方が適していると判断しました。もしかしたら内部システム的には同じなのかもしれませんが、ユーザーインターフェイスが与える印象の方を重視したという次第です。

サイト運用に担当者を配置して常に対応できる企業だったら、テーマをカスタマイズする手間をかけてでもメッセンジャーチャットにしたほうがいいかもしれませんね。

 

サイトにメッセンジャー機能を組み込みたいと考えている方の参考になれば幸いです。

 

メッセンジャーチャットのポイント

  • チャット感覚でダイレクト感のあるコミュニケーション
  • コードを取得し、コピー&ペーストで設置
  • 対応テーマを使えば簡単に設置できる
  • そうでない場合、テーマ(PHPソース)の編集が必要

 

Chatyを使ったメッセンジャー設置のポイント

  • メッセンジャー経由になるのでダイレクト感は薄い
  • プラグインで簡単に設置
  • 来訪者はFacebookにログインしている必要がある
  • 電話や他のメッセンジャーと併用できる
  • 有料版では、表示対象者や期間をカスタマイズできる

 

 

-WordPress
-,

© 2021 Windowsパソコン 使えるツール&テクニック