ElementorウェブサイトにWhatsAppチャットボタンを追加する方法

Updated on October 24, 2025
|
Written by サージャン・シャルマ Sajjan Sharma
ElementorウェブサイトにWhatsAppチャットボタンを追加する方法

Elementorを使用すると、コードに触れることなく、美しいカスタムページレイアウトを構築するための驚くべき制御が可能になります。

しかし、優れたデザインは戦いの半分にすぎません。見込み客が質問をした場合、問い合わせフォームを探させることで、興味を失ってサイトを離れてしまう可能性があります。

慎重に構築したページから、訪問者と即座に接続する方法が必要です。

そこで、WhatsAppチャットボタンを追加することがすべてを変えます。

ユーザーを待たせる代わりに、毎日すでに使用および信頼しているアプリで訪問者と会うことができます。

このステップバイステップガイドでは、ElementorウェブサイトにWhatsAppチャットボタンを追加して、即時コミュニケーションを行う方法を説明します。

ElementorウェブサイトにWhatsAppチャットボタンを追加する方法(簡単な回答)

WPChatという無料のプラグインを使用して、ElementorウェブサイトにWhatsAppチャットボタンを追加できます。インストールすると、サイトにフローティングボタンが追加されます。

訪問者がそれをクリックすると、チャットするプラットフォームを選択できるウィジェットが表示されます。

WhatsAppを選択した場合、プラグインは自動的に電話またはデスクトップのWhatsAppにリダイレクトするため、すぐにチャットを開始できます。

ウェブサイト上のチャットウィジェットの例

必要なもの:

  1. Elementorを備えたセルフホスト型WordPressサイト:Elementorは、WordPress用のビジュアルドラッグアンドドロップページビルダーであり、コードを書かずにカスタムレイアウトをデザインできます。
  2. WPChatプラグイン:WPChatは、ウェブサイトにフローティングWhatsAppチャットボタンを追加するために特別に構築されたWordPressプラグインです。
  3. WhatsAppアカウントと電話番号:これは、訪問者がボタンをクリックしたときに接続する番号です。

ElementorにWhatsAppチャットボタンを追加する理由

ElementorウェブサイトにWhatsAppチャットボタンを追加すると、訪問者が使い慣れたプラットフォームで即座に接続できます。

結局のところ、WhatsAppは世界中で30億人以上のユーザーが利用しているため、訪問者にリーチするための完璧なプラットフォームです。

WhatsAppプロモーションページ

さらに、WhatsAppチャットボタンから得られるものは次のとおりです。

  • 即時コミュニケーション:問い合わせフォームを見つけてくれるのを待つのではなく、顧客がすでに時間を過ごしている場所で会います。
  • コンバージョン率の向上:製品に関する質問への迅速な回答は、訪問者をより早く購入者に変えるのに役立ちます。
  • 優れたカスタマーサポート:ファイル共有とリアルタイムメッセージングにより、問題を迅速に解決しやすくなります。
  • エンゲージメントの向上:定期的なアップデートとパーソナライズされたメッセージにより、オーディエンスはブランドとのつながりを維持できます。
  • プロフェッショナルな外観: デザイン性の高いチャットボタンは、Elementorサイトに馴染み、訪問者にあなたが対応可能で応答的であることを示します。

フローティングボタンは、家のドアベルのようなものだと考えてください。常にそこにあり、訪問者が見つけやすいです。

しかし、静的なリンクはどうでしょうか?それはメモに走り書きされた電話番号のようなものです。存在を知っていて、どこにあるかを知っている場合にのみ見つけることができます。

なぜフローティングWhatsAppチャットボタンがより効果的なのか、掘り下げてみましょう。

機能フローティングチャットボタン静的WhatsAppリンク
視認性サイトの好きな場所に表示可能配置したページでのみ表示
ユーザーエクスペリエンス訪問者がスクロールしても常にアクセス可能訪問者はページ内の特定の場所にスクロールする必要がある
セットアッププラグインで一度設定各ページに個別に手動で追加する必要がある

フローティングボタンは、特にElementorサイトで、訪問者が連絡する準備ができる前に多くのページをクリックする可能性がある場合、ここで優位に立ちます。

ElementorにWhatsAppチャットボタンを追加する方法

ElementorサイトにWhatsAppチャットボタンを追加したい場合、次の2つの方法があります: 

  • コードとAPI統合を使用した手動設定
  • WordPressプラグインの使用(簡単な方法)

手動アプローチでは、コードとWhatsAppのビジネスAPIを扱う必要があり、これは複雑で時間がかかる場合があります。 

WhatsApp APIの管理例

カスタムコードを記述し、API接続を処理し、アップデートを自分で管理する必要があります。

この方法を最初に試したが、メンテナンスに多くの時間と労力がかかったため、プラグインに切り替えたという事業主から話を聞きました。

WordPressの最大の利点は、その膨大なプラグインライブラリです。これにより、一行のコードを書かずに、さまざまな強力な機能を追加できます。

そのため、ElementorにWhatsAppボタンを追加する最も簡単な方法として、Smash BalloonのWPChatプラグインを使用できます。 

このセットアップが機能する理由(そしてWPChatがそれに適したツールである理由)

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

WPChatが他の代替案の中から最高の選択肢として際立っている理由は次のとおりです。

  • 簡単なセットアップ:技術的な知識は一切不要で、数回の簡単なクリックでWhatsAppチャットボタンを追加できます。
  • カスタムエージェント:個別の名前とプロフィール写真を持つエージェントを設定し、やり取りを人間味あふれるものにし、訪問者が誰と話しているのかを正確に把握できるようにします。
  • 表示制御:特定のページからセクション全体まで、Elementorサイトのどこにボタンが表示されるかを完全に制御できます。
  • デザインオプション:チャットポップアップの色、テーマ、スタイルをカスタマイズして、サイトの外観とブランディングに完全に一致させます。
Elementorチャットボタン用のライブエディタ
  • パフォーマンス分析:WhatsAppチャットボタンのパフォーマンスに関する詳細レポートを確認し、訪問者のエンゲージメントを追跡します。
  • FAQ連携:ユーザーがチャットを開始する前に、よくある質問を表示して即座に回答を提供し、繰り返し寄せられる問い合わせを減らします。
  • チャットファネル:構造化された会話を通じてユーザーを自動的に誘導し、リードを生成してコンバージョン率を向上させます。

何よりも、このプラグインは他の主要なチャットプラットフォームであるTelegram、Facebook Messenger、Instagramとも100%互換性があります。

ElementorウェブサイトにWhatsAppチャットを追加する準備はできましたか? 

今すぐWPChatを入手して、訪問者とすぐに繋がり始めましょう。

ElementorウェブサイトにWhatsAppチャットボタンを追加する方法(ステップバイステップ)

それでは、WPChatを使用してElementorウェブサイトにWhatsAppチャットボタンを追加する全プロセスを説明します。 

心配いりません。この方法は初心者向けなので、コードを一行も触る必要はありません。

始めましょう:

ステップ1:WPChatをウェブサイトにインストールして有効化する

まず、公式ウェブサイトからWPChatを入手する必要があります。 

プラグインファイルを入手したら、Elementorウェブサイトにインストールして有効化してください。

方法がわからない場合は、WordPressプラグインのインストールに関する初心者向けガイドをご覧ください。

ステップ2:WhatsAppボタンの設定

WordPressダッシュボードに移動し、新しいWPChatメニューをクリックします。

WhatsAppチャットボタンの設定を開始するには、セットアップボタンをクリックします。

wpchatの設定を開始する

これにより、基本設定を構成できる初期セットアップ画面に移動します。

まず最初に行う必要があるのは、WhatsAppの電話番号を入力することです。 

Elementorサイトを接続するためにWhatsAppの電話番号を入力

それに加えて、他の人気メッセージングアプリを接続することもできます:

  • テレグラム
  • インスタグラム
  • Facebookメッセンジャー

使用したいプラットフォームの詳細を入力します。これは、Telegramの場合は電話番号、FacebookとInstagramの場合はユーザー名です。

最後に、下にスクロールして次へボタンをクリックします。

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

次に、チャットボタンのテーマを選択します:

  • 基本:ほとんどのウェブサイトデザインに合う、デフォルトのクリーンな外観
  • ナイト:ダークカラースキームを持つモダンなウェブサイトに最適なダークテーマ
  • パステル:優しい色合いのソフトなデザインで、フレンドリーな外観を作成します

テーマを選択したら、次へボタンをクリックします。

WhatsAppチャットアシスタントのテーマを選択する

ステップ3:WhatsAppチャットボタンの表示設定

次に、ElementorウェブサイトのどこにWhatsAppチャットボタンを表示するかを決定します。 

WPChatは、ボタンの表示を制御するための2つの主なオプションを提供します:

  • すべてのページに表示:訪問者がウェブサイトのどこからでもあなたに連絡できるようにします。
  • 特定のページにのみ表示:ボタンを表示するサイトの特定のセクションを選択します。
WordPressでWhatsAppチャットを表示したい場所を選択する

下にスクロールして、特定のページ、カテゴリ、タグ、およびカスタム投稿タイプにボタンを含めるか除外するかを選択できます。

選択を確認して続行するには、次へをクリックするだけです。

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

最後に、WPChatプラグインに付属していたWPChatライセンスキーを入力します。

セットアップ完了をクリックすると、新しいWhatsAppチャットボタンがオンラインで使用できるようになります。

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

ステップ4:WhatsAppチャットボタンのカスタマイズ

カスタマイズボタンをクリックすると、WPChatのライブエディターを開き、チャットボタンを詳細にデザインできます。

WhatsAppチャットボタンのカスタマイズを開始する

左側のパネルのオプションを使用すると、チャットボタンの外観をカスタマイズできます。

右側のライブプレビューでは、変更が訪問者にどのように表示されるかが正確にわかります。これにより、カスタマイズは迅速、簡単、かつ正確になります。

WhatsAppチャットボタンのライブエディター

WhatsAppチャットボタンの主要なカスタマイズオプションをいくつか見てみましょう。

チャットボタンの色を変更するには、左側のパネルにあるカラーパレットをクリックします。

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

WPChatは、色をすばやく変更できるように、5つの事前デザインされたカラーテーマを提供しています。

  • デフォルト
  • ミスティックブルーム
  • WhatsApp
  • WhatsAppダーク
  • ミニマル
Elementorチャットボタンのカラースキームオプション

色をより細かく制御するには、カスタムをクリックしてアクセントを手動で選択できます。

色の変更が完了したら、保存ボタンをクリックして変更を保持します。

最後に、左上にある戻るボタンをクリックして、メインのカスタマイズオプションに戻ります。

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

次に、挨拶メッセージをカスタマイズするためにヘッダーセクションを選択します。

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

訪問者を歓迎し、会話を開始するように促すWhatsAppチャットボタンの完璧な見出しを入力します。

WhatsAppチャットボタンの見出しを入力する

前回と同様に、保存ボタンをクリックして新しいヘッダーを確認します。

ご覧のとおり、数回クリックするだけでWhatsAppチャットボタンのさまざまな要素をカスタマイズできます。

これにより、ボタンがElementorウェブサイトのデザインと完全に一致していることを確認できます。

ステップ5:WhatsAppチャットボタンのエージェントの追加

一般的なチャットボットを表示する代わりに、サポートチームの各メンバーに個別のエージェントを設定できます。

これにより、ユーザーは誰と話しているのかを正確に把握でき、信頼を築き、顧客とのより良い関係を築くことができます。

開始するには、WordPressメニューのWPChat » エージェントに移動してチャットエージェントを管理します。

編集をクリックして、既存のチャットエージェントをカスタマイズし、実際のチームメンバーを反映させます。

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

アップロードをクリックして、メディアライブラリから画像を選択することで、プロフィール写真を追加できます。

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

プロフィール写真の下のフィールドにエージェントの名前を入力します。ここに人の実際の名前を使用して、人間味を加えることができます。

異なるチームメンバーが異なる種類の問い合わせに対応する場合は、この特定のエージェントのWhatsApp番号を変更することもできます。

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

最後に、変更を保存をクリックすると、エージェントはすぐに使用できるようになります。

エージェントを追加するには、上部にある新規エージェントボタンをクリックしてプロセスを繰り返すことができます。

WhatsAppチャットボタンに新しいエージェントを追加する

WPChatは自動的に異なるエージェントにチャットを割り当て、チーム全体のワークロードをバランスさせます。

エージェントの設定が完了したら、Elementorウェブサイトで新しいWhatsAppチャットボタンを確認して、訪問者にとってどのように見え、機能するかを確認してください。

ElementorでのWhatsAppチャットボタンの例

結論

これにより、ElementorサイトにWhatsAppチャットボタンを設置し、訪問者とのつながり方を変えることができます。

信頼を築き、コンバージョンを増やし、訪問者がすでに使い慣れているアプリで即座にコミュニケーションをとることができます。

今後、FAQセクションやチャットフローなどのWPChatの高度な機能を利用して、顧客とのやり取りをさらに自動化できます。

Elementorウェブサイトの訪問者とすぐに繋がり始めましょうか?

今すぐWPChatをあなたのサイトに導入しましょう そして、直接コミュニケーションがあなたのビジネスにもたらす違いを実感してください。

サイト訪問者により良いサポートを提供したいですか?ウェブサイトにFAQウィジェットを追加する方法についてのガイドをご覧ください。

ElementorにWhatsAppボタンを追加することに関するよくある質問

ElementorでWhatsAppボタンを追加するためにコーディングの知識は必要ですか?

ElementorサイトにWhatsAppボタンを追加するために、一行のコードも必要ありません。WPChatはWordPressダッシュボードの設定パネルを通じてすべてを処理し、Elementorページに一切触れる必要はありません。

プラグインをインストールし、設定を構成するだけで、ボタンがサイトに自動的に表示されます。

WhatsAppチャットボタンはモバイルデバイスでも機能しますか?

はい、WhatsAppチャットボタンはモバイルデバイスで完璧に機能します。訪問者が携帯電話でボタンをクリックすると、WhatsAppアプリが直接開き、すぐにチャットを開始できます。

デスクトップブラウザでは、代わりにWhatsApp Webが開きます。これにより、すべてのデバイスでシームレスな体験が得られます。

複数のWhatsApp番号または担当者を追加できますか?

はい、複数の担当者を追加でき、担当者ごとに異なる電話番号を選択することもできます。担当者ルーティング機能により、担当者の稼働時間を設定できるため、オンラインの担当者にメッセージが送信されます。

フローティングボタンはElementorウェブサイトの速度を低下させますか?

フローティングボタンは、Elementorウェブサイトの速度を意味のある形で低下させることはありません。WPChatは軽量なプラグインで、フットプリントは最小限です。当社のテストでは、プラグインインストール後のページ読み込み時間への顕著な影響は見られませんでした。

ご自身のサイトでこれを検証したい場合は、GTmetrixのような無料ツールを使用して、プラグインをインストールする前と後のスピードテストを実行することをお勧めします。

WhatsAppボタンを特定のページにのみ表示する方法はありますか?

はい、WPChatの表示ルールを使用して、ボタンが表示される場所を正確に制御できます。ボタンをサイト全体に表示するように設定したり、連絡先ページや商品ページなどの特定のページに限定したりできます。

また、特定のタグ、カテゴリ、またはカスタム投稿タイプでボタンを表示または非表示にすることもできます。