メッセンジャーをWordPressのサイトに表示させよう!

メッセンジャーをWordPressのサイトに表示させよう!
メッセンジャーをWordPressのサイトに表示させよう!
ビジネス

はじめに

今回のビジボットは、WordPressのサイトにFacebookでお馴染みのメッセンジャーを表示させて、問い合わせフォームとして活用してみます。正直、サイトの問い合わせフォームだとメールを見るのはタイミングが悪いとしばらくみない時があるけど、カラーも指定できるし、ビジボットではこのまま表示させておこうと思います。

それでは始めていきます!

1.Facebook準備

POINT

実施する前提条件として、Facebookのビジネスアカウントが必要です。ビジネスアカウントのトップページから取得する流れを説明していきます。

Facebookでコードの取得する

まずはじめにFacebookのビジネスアカウントを開きます。
開いた右上に表示される『設定』をクリックします。

Facebookの設定を開く
Facebookの設定を開く

Messengerプラットフォーム

設定画面を開くと、左画面に表示されているメニューに『Messengerプラットフォーム』というリンクが用意されているので、こちらをクリックします。

Messengerプラットフォームを選択
Messengerプラットフォームを選択

Messengerでのページやボットの表示方法を管理するページです。

カスタマーチャットプラグイン

Messengerプラットフォームをクリックすると、右側に表示されている情報が切り替わります。画面をスクロールすると下のほうに『カスタマーチャットプラグイン』があるので、『設定』をクリックします。

カスタマーチャットプラグインの設定を開く
カスタマーチャットプラグインの設定を開く

カスタマーチャットプラグインは書いてあるまんまですが、ウェブサイトでチャットを開始して、Messengerでチャットを継続することができる機能みたいです。

カスタマーチャットを設定

はじめにサイトを記事を開いた時に表示される『あいさつ』の設定を行います。
今回は『ビジボットへようこそ!お問い合わせはこちらからも受け付けてます!』というフレーズを登録してみました。

カスタマーチャットを設定1
カスタマーチャットを設定1

プレビューに表示される内容が問題ない場合、右下に表示されている『次へ』をクリックすると、次は『カスタムカラー』を決める事できるので、好きな色を指定します。

カスタマーチャットを設定2
カスタマーチャットを設定2

プレビューに表示される内容が問題ない場合、右下に表示されている『次へ』をクリックすると、次は『ウェブドメイン名の追加』でビジボットのサイトを指定します。

カスタマーチャットを設定3
カスタマーチャットを設定3

右側に表示されているコードをクリックすると、コードをクリップボードにコピーしてくれるので、WordPress側の設定でこのコードを埋め込みます。

2.WordPress準備

POINT

WordPressで表示する場合はWordPressの管理画面にアクセスし、外観からウィジェットにて設定を行なっていきます。

ウィジェットを設定

『外観』 > 『カスタマイズ』から行かず外観の直下にある『ウィジェット』を開きます。

外観→ウィジェットを追加
外観→ウィジェットを追加

ウィジェットページが表示されたら画面下に表示されている『カスタムHTML』を選択します。

カスタムHTMLを選択
カスタムHTMLを選択

【共通】CTA設定

『カスタムHTML』をクリックすると、任意のコードを登録どの箇所に行うかを選択出来る項目が表示されます。
この時に、一番下にスクロールしていくと『CTA設定』という項目が表示されるため、選択して『ウィジェットを追加』をクリックします。

CTAとは…Call To Action(コール トゥ アクション)の略

カスタムHTMLで【共通】CTA設定を選択
カスタムHTMLで【共通】CTA設定を選択

新たに【共通】CTA設定が追加されるので、カスタムHTMLの中に先ほどFacebookの『カスタマーチャットを設定』で取得したコードを貼り付けます。

CTA設定にコードを設定する
CTA設定にコードを設定する

3.メッセンジャーの表示を確認

POINT

記事を開くと、右下からメッセンジャーのポップアップが表示され、先ほど設定した『あいさつ』が表示されています。

メッセンジャーがWordPressに表示
メッセンジャーがWordPressに表示

サイドメニューと被ってしまう

無事表示はできたのですが、画面を上下にずらすとサイドメニューの方が上に表示されており、メッセンジャーの表示が全く見えない状態になりました。。

メッセンジャーがサイドメニューと被る
メッセンジャーがサイドメニューと被る

サイドメニューの方が表示が上にきてしまっているため、メッセンジャーの表示の方が上に表示されるように追加CSSを書いていきます。

z-indexを追加

色々試してみると、classの『main-wrap』全体がメッセンジャーよりも上に表示されている事がわかったので、z-indexを使って表示順番を変えてられるか試みた。

class="main-wrap"
class=”main-wrap”
CSSコード

しかし、上記コードで指定したが全く反応がなかったため、z-indexが反映されないときに良くある対処パターンとして、positionをclassに追加してみた。positionが設定されてないclassに対して、z-indexをかけようとするとうまく動かないらしい。

positionを追加

CSSコード

上記CSSを追加するだけで表示順番の問題を解決する事ができました。

メッセンジャー表示完了

メッセンジャーがサイドメニューより上に表示
メッセンジャーがサイドメニューより上に表示

メッセンジャーでやり取り

最後に、実際にメッセージを送ってみるとビジネスアカウントの通知がFacebook上で増え、メッセージも返す事ができました。

今回はここまでです!
できた反面、CSSあたりで絶望を味わいましたが無事完了してよかったです。今回メッセンジャーを無事設置できたので、この機能を使って色々な人から連絡がくる事を楽しみにしてます。。笑
ほかにもサイドメニューが上に表示されてしまう同じテンプレを使っている方がいたら参考になればと思います。最後までありがとうございました!

後日談

実は翌日、ビジボットで記事を探そうと検索ウィンドウをクリックしたんですがずっと入力できない事案が確認できました。

「.main-wrap{」でやっていたものは、実は「main{」でした。。