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

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

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

 

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

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

 

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

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

 

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

カスタマーチャット

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

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

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

 

メッセンジャー

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

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

 

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

最初にお断り。

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

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

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

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

 

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

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

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

 

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

 

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

 

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

 

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

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

 

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

 

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

 

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

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

 

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

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

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

 

 

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

 

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

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

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

 

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

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

 

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

 

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

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

 

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

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

 

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

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

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

 

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

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

 

 

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

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

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

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

 

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

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

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

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

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

 

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

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

 

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

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

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

 

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

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

 

 

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

 

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

 

 

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

 

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

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

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

 

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

 

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

 

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

 

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

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

 

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

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

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

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

 

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

 

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

 

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