ElementorウェブサイトにFacebook Messengerを追加する方法

Updated on November 14, 2025
|
Written by サージャン・シャルマ Sajjan Sharma
ElementorウェブサイトにFacebook Messengerを追加する方法

Elementorの最も優れた点の1つは、ウェブサイトのデザインを完全にコントロールできることです。

しかし、美しいウェブサイトを作成した後でも、訪問者がサインアップや購入をせずに離れてしまうことがあります。その一般的な理由の1つは、質問に答えられないことです。

混乱したり不確かだったりする訪問者は、連絡フォームに記入してメールの返信を待つ時間をほとんどかけません。

ここで、ElementorにFacebookメッセンジャーを追加することが、シンプルで強力なソリューションになります。

Facebookメッセンジャーを追加することで、訪問者は毎日使用しているチャットインターフェースを使用してコミュニケーションをとることができます。使い慣れていて信頼できるため、問い合わせにつながりやすくなります。

サイトにこれを実装するための正確な手順を説明します。これは、Elementorページを訪問者をコンバージョンさせる上でさらに効果的にする小さな追加機能です。

ElementorサイトにFacebookメッセンジャーを追加する理由

  • 専門知識を披露する:サービスに関する質問にリアルタイムで回答し、訪問者がサイトを離れる前に信頼を築きます。
  • カート放棄を減らす:フォームに記入せずに簡単に質問できるようにすることで、離脱する前に訪問者をキャッチします。
  • 簡単なカスタマーサポート:機能の説明、懸念事項への対応、顧客の問題解決を行い、より多くの人々をブランドアンバサダーに変えます。
  • 訪問者にとって使い慣れたプラットフォーム:人々は毎日Messengerを使用しているため、Messengerを信頼しており、あなたのビジネスとの会話をより気軽に開始できます。
  • フォローアップメッセージが可能:限定オファー、新製品、または重要なニュースを共有することで、訪問者がサイトを離れた後もつながりを保ちます。

最も良い点は、この機能をお使いのElementorウェブサイトに追加するためにコーディングスキルが不要なことです。

ウェブサイトでのチャットアシスタントの例

簡単なWordPressプラグインを使用して、わずか数分でセットアップする方法を正確に説明します。

ElementorとFacebookメッセンジャーを統合する簡単な方法

ウェブサイトにFacebookメッセンジャーを追加する場合、手動またはWordPressプラグインを使用するという2つの選択肢があります。

残念ながら、手動の方法にはコードの編集とFacebookのAPI設定の構成が含まれます。

特にコードの操作に慣れていない場合、これはすぐに複雑になる可能性があります。それに加えて、セットアップとメンテナンスに多くの時間を費やす必要があります。

そのため、代わりにWPChatを使用することをお勧めします。これは、すべての技術的なセットアップを処理するWordPressチャットプラグインであり、プロセスをはるかに簡単にします。

WPCHATプラグインのホームページ

WPChatは、WordPressサイトにチャット機能を追加するために特別に構築されており、Elementorとスムーズに統合されます。

WPChatがこのガイドの確実な選択肢となる理由は次のとおりです。

  • マルチプラットフォーム対応: 1つのプラグインでFacebook Messenger、Telegram、Instagram、WhatsAppのチャットオプションを追加できます。
  • Elementor互換: Elementorを含む、WordPressで人気のサイトビルダープラグインと完全に連携します。
  • チーム管理機能: サポートチームメンバーを代表する複数のエージェントを作成し、チャットに個人的で人間的なタッチを与えます。
複数のアカウントを持つWPChatエージェント
  • コーディング不要: ポイント&クリック操作でビジュアルインターフェースを使用して、Facebookチャットアシスタントを作成およびカスタマイズします。
  • スマートワークロード配分: 受信チャットを異なるエージェントに自動的に割り当て、ワークロードのバランスを取り、応答時間を短縮します。
  • 組み込みFAQ: よくある質問に対する自動応答を設定し、睡眠中にリードを獲得する会話フローを作成します。
ElementorサイトのFAQを作成する

Facebook Messengerアカウントを接続し、チャットウィジェットの外観をカスタマイズして、サイトのどこに表示するかを選択するだけです。

今すぐWPChatを入手して、Facebook Messengerを通じて訪問者とのつながりを始めましょう。

ElementorにFacebook Messengerを追加する方法(5つのステップで)

Facebook Messengerのチャットアシスタントを設定するための正確な手順を説明します。

プロセス全体で数分しかかからず、1行のコードにも触れる必要はありません。

ステップ1:ElementorウェブサイトにWPChatプラグインを追加する

まず、WPChatを入手して、このプラグインをウェブサイトにインストールして有効化してください。

この手順でヘルプが必要な場合は、WordPressプラグインのインストール方法に関する初心者向けガイドを確認してください。

プラグインが有効化されたら、チャットアシスタントを作成してFacebook Messengerに接続する準備が整います。

ステップ2:新しいチャットアシスタントを作成する

WPChatを有効化すると、WordPressダッシュボードに新しい[WPChat]メニュー項目が表示されます。それをクリックしてプラグイン設定を開きます。

WPChat画面で、[設定]ボタンをクリックしてチャットアシスタントの作成を開始します。

wpchatの設定を開始する

ここから、Facebook Messengerの[ユーザー名]を入力できます。

ここには、他のメッセージングアプリの連絡先情報も入力できます。

Facebook Messengerチャットウィジェットを接続する

ご覧のとおり、WPChatは訪問者がElementorサイトからあなたに連絡するための多くの方法を提供します。

番号を入力して[次へ]をクリックして続行してください。

接続を確認するには次へをクリックします

その後、チャットアシスタントのテーマを選択できます。WPChatは、[基本]、[ナイト]、[パステル]の3つの事前デザインオプションを提供しています。

テーマを選択したら、[次へ]をクリックして表示設定に進みます。

Facebookチャットアシスタントのテーマを選択してください

ステップ3:Facebookチャットアシスタントの表示を選択する

次に、チャットオプションをElementorサイトのどこに表示するかを決定します。これには2つの主なオプションがあります。[すべてのページに表示]または[特定のページにのみ表示]です。

WordPressでFacebook Messengerチャットを表示する場所を選択する

[すべてのページに表示]オプションを選択した場合は、下にスクロールしてウェブサイトの特定のセクションを除外できます。

チャットアシスタントを表示したくないページ、カテゴリ、タグ、またはカスタム投稿タイプを選択するだけです。

フィルターを設定したら、[次へ]をクリックして続行します。

ウェブサイトの一部をチャットアシスタントから除外する

特定のページのみに表示することを選択した場合は、フィルターを使用してアシスタントが表示される場所を制御できます。

以前と同様に、フィルターを設定し、次へボタンをクリックします。

ページ、カテゴリ、タグ、またはカスタム投稿タイプを選択してください

最後に、WPChatプラグインと一緒に受け取ったライセンスキーを入力できます。

キーを入力し、セットアップ完了をクリックすると、初期セットアップが完了します。

セットアップを完了するには、wpchatライセンスキーを入力してください

これで、Messengerチャットアシスタントが作成され、カスタマイズの準備が整いました。

ステップ4:Facebookチャットアシスタントをカスタマイズする

WPChatダッシュボードで、カスタマイズボタンをクリックします。

Messengerチャットアシスタントのカスタマイズを開始する

これによりライブエディターが開かれ、左側のサイドバーにカスタマイズオプションが表示されます。

変更を追跡するために、右側にMessengerチャットアシスタントのライブプレビューが表示されます。

Messengerチャットアシスタントのライブカスタマイザー

まず、カスタマイザーの仕組みを示すために色を調整することから始めましょう。

オプションを表示するには、左側のメニューでカラーパレットを選択してください。 

カラーパレットの編集を開始する

WPChatは、ワンクリックで適用できるいくつかの既製のカラーパレットを提供しています:

  • デフォルト
  • ミスティックブルーム
  • WhatsApp
  • WhatsAppダーク
  • ミニマル

さらに多くの制御が必要な場合は、カスタムをクリックして自分で色を選択してください。

チャットアシスタントの配色オプション

色の選択に満足したら、保存をクリックして変更を確認します。

次に、戻るボタンをクリックしてメインのカスタマイズメニューに戻ります。

メインのカスタマイズオプションに戻る

次のカスタマイズのために、ヘッダーを選択します。

ここで、訪問者がチャットアシスタントをクリックした後に表示される挨拶メッセージを追加できます。

チャットの上にあるヘッダーの編集を開始する

見出しフィールドにフレンドリーな挨拶を入力します。

訪問者が簡単に確認できるように、短く簡潔に保つことを忘れないでください。

Facebookチャットアシスタントの見出しを入力する

以前と同様に、保存をクリックして変更を保持します。

このように、Messengerチャットアシスタントは、コードに触れることなく簡単にカスタマイズできます。

アシスタントのアバター、チャットアイコン、表示セクションなど、他のカスタマイズオプションも試すことができます。

ステップ5:チャットエージェントを設定する

WordPressダッシュボードで、WPChat » エージェントメニューに移動します。 

これらのエージェントは、写真と名前を一致させてサポートチームを代表できます。

続行するには、編集ボタンをクリックします。

メッセンジャーチャットエージェントの編集を開始する

まず、このエージェントをパーソナライズしましょう。

アップロードをクリックして、あなたまたはあなたのチームを代表する画像を選択します。

Facebook Messengerチャットエージェントのプロフィール写真の設定を開始する

これは、あなた自身のプロの写真や会社のロゴにすることができます。

次に、名前フィールドにエージェントに適した名前を入力します。

ここから、Facebookやその他のメッセージングプラットフォームの連絡先情報を更新することもできます。

エージェント名と電話番号を編集する

それが完了したら、ページの上部にある変更を保存ボタンをクリックします。

これで、Facebook MessengerチャットアシスタントがElementorサイトで公開されました。 

訪問者はアシスタントをクリックして、Facebook Messengerを使用してあなたとチャットを開始できるようになりました。まさにその通りです。

Facebook Messengerウィジェットの例

結論と最終的な考え

これで、ElementorウェブサイトにFacebook Messengerを追加する方法が簡単にわかりました。訪問者と簡単に接続し、信頼を築き、売上を伸ばすことができます。

Elementorウェブサイトを次のレベルに引き上げたい場合は、WPChatを使用してFAQを追加することもできます。そうすれば、ウェブサイト訪問者はいつでもすぐに回答を得ることができます。

訪問者とリアルタイムでつながる準備はできましたか?今すぐWPChatを使い始めましょう!

チャットアシスタントをさらに魅力的に見せたいですか?WordPressチャットアシスタントのカスタマイズ方法に関するガイドもご覧ください。