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

はじめに

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

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

1.Facebook準備

Facebookでコードの取得する

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

Messengerプラットフォーム

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

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

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

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

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

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

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

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

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

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

2.WordPress準備

ウィジェットを設定

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

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

【共通】CTA設定

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

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

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

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

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

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

z-indexを追加

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

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

positionを追加

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

メッセンジャー表示完了

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

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

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

後日談

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

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