無料のWhatsAppチャットウィジェットをウェブサイトに追加する方法(コード不要)

数分でWhatsAppチャットウィジェットをウェブサイトに追加する方法。素のwa.meリンクアプローチと、カスタマイズ可能なコード不要スニペットを出力するジェネレーターについて解説します。

ウェブサイトの隅に浮かぶWhatsAppチャットボタンとその横のコードスニペット

WhatsAppチャットウィジェットを無料でウェブサイトに追加する2つの正直な方法があります。素のwa.meリンクを貼り付けて自分でスタイルを設定するか、完成したカスタマイズ可能なスニペットを出力するジェネレーターを使用するか。どちらも本当に無料で、どちらも数分で完了します。ただし、6か月後にはまったく異なる状況に置かれることになります。

ここでは両方の方法を説明します。素のリンクから始まるため、スキップするときに正確に何を除外しているのかがわかります。

方法1: 素のwa.meリンク

最も最小限のバージョンは、HTMLの1行です。

<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question">Chat with us</a>

15551234567をあなたの番号に置き換えてください。国際形式で、プラス記号なし、スペースなし、先頭ゼロなしです。textパラメーターはあらかじめ入力されたメッセージで、URLエンコードされているため、%20はスペース、%2Cはコンマです。クリックするとWhatsAppが開き、そのメッセージはすでにボックスに入力された状態で、訪問者が送信をクリックするのを待っています。

wa.meはこのためのMeta独自の短縮リンクなので、相手側の動作は一貫しています。スマートフォンでは、アプリがインストールされている場合はWhatsAppアプリが直接開き、インストールされていない場合はアプリストアに訪問者が送られます。アプリがインストールされていないデスクトップブラウザでは、代わりにweb.whatsapp.comが新しいタブで開きます。そのような検出ロジックを自分で構築する必要はありません。これはこのアプローチの中で本当に解決されている唯一の部分です。

その他のすべてはそうではありません。その単一のリンクは、どこに置いても、下線が引かれた青いテキストにすぎません。人々が「WhatsAppチャットウィジェット」と言うとき、実際に意味する画面下隅に浮かぶボタンに変えるには、自分でCSSを書く必要があります。

<a href="https://wa.me/15551234567?text=Hi%2C%20I%20have%20a%20question"
   target="_blank" rel="noopener"
   style="position:fixed; bottom:20px; right:20px; z-index:5000;
          width:56px; height:56px; border-radius:50%;
          background:#25D366; display:flex; align-items:center;
          justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.25);">
  <img src="/whatsapp-icon.svg" alt="Chat on WhatsApp" width="28" height="28">
</a>

これは機能しますが、アイコンファイルも必要です。z-indexはクッキーバナーとモーダルの上に位置するほど高く、モバイルでは自分のナビゲーションをカバーしないほどの値が必要です。そして、来月、誰かがメッセージテキストの変更を望む場合に何が起こるかを計画する必要があります。これは、貼り付けられているすべてのページまたはテンプレートで、同じマークアップブロックを再度開くことを意味します。

方法2: 無料WhatsAppチャットウィジェットジェネレーター

WhatsAppチャットウィジェットジェネレーターは上記のリンクと同じ役割を果たし、さらにスタイル、位置、アイコンも追加され、メンテナンスの責任があるカスタムCSSのブロックの代わりに、1つのスクリプトタグを返します。それは無料で、アカウントを必要とせず、WhatsApp Business APIに触れません。したがって、使用前に検証ステップはありません。

実際のウォークスルーです。

WhatsApp番号を入力します。 ジェネレーターには国コード選択ツールが組み込まれており、ブラウザが報告する国にデフォルト設定されているため、国際ダイヤルプレフィックスを手動で推測する必要はありません。
色を選択します。 カラースウォッチはボタンの背景を設定します。WhatsApp独自の緑色(#25D366)がデフォルトですが、代わりにサイトのブランドカラーと合わせたい場合は、このフィールドは任意の16進値を受け付けます。
位置を設定します。 2つのドロップダウンで、ボタンが画面の上部または下部、左側または右側のどこに配置されるかを制御し、各フィールドには独自のピクセルオフセット値があるため、フローティングナビゲーションバーまたはそのコーナーに既に住んでいる別のウィジェットから少し離すことができます。
z-indexを設定します。 デフォルトは5000の数値フィールドで、ボタンが何の上に積み重なるかを制御します。チャットツール、クッキーバナー、またはサイトのモーダルが現在それをカバーしている場合は、これを上げてください。
グリーティングメッセージを追加します。 ここに入力したテキストは、訪問者のWhatsAppメッセージボックスの事前入力されたテキストになります。素のリンクのtextパラメーターと同じ考え方ですが、URLエンコード文字列の代わりにフォームから編集できます。
ポップアップをオンにします(オプション)。 チェックボックスは、ボタンの隣に表示される小さな吹き出しプロンプト(独自のカスタム質問テキストと表示前の遅延時間秒数付き)を追加します。これは、誰かがコーナーにある単純なアイコンに気付くのを待つのではなく、ウィジェットに注目を促すためのものです。

フォームに入力すると、ボタンのライブプレビューがページに直接表示され、その隣のコードパネルは完成したスニペットでリアルタイムに更新されます。

<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
  data-widget-id="wgt_xxxxxxxx"
  data-whatsapp-number="15551234567"
  data-color="#25D366"
  data-position-vertical="bottom"
  data-position-horizontal="right"
  data-offset-vertical="20"
  data-offset-horizontal="20"
  data-z-index="5000"
  data-greeting="Hi! How can we help?"
  async
  defer
></script>

コピーをクリックし、サイトの閉じる</body>タグの前の任意の場所にその単一のタグを貼り付けると、ウィジェットはライブになります。アップロードする必要があるものは何もなく、アイコンファイルも別のスタイルシートもありません。フォームのすべての設定(色、位置、オフセット、グリーティング、ポップアップ)は、その1つのタグにdata-属性としてエンコードされるため、全体が1つの貼り付けとしてトラベルします。

生成されたスニペットがより耐久的である理由

2つの出力は表面的には似ています。コーナーのボタンがWhatsAppを開きます。しかし、時間とともに異なる方法で老化します。

手作りバージョンでは、すべての設定は、インラインスタイルまたは別のCSSファイル内に隠された値です。グリーティングを変更するには、URLエンコードされた文字列のtextパラメーターを見つけて編集する必要があります。新しいクッキーバナーが重なるためにボタンを移動するには、貼り付けたすべてのページまたはテンプレートでCSSを再度編集する必要があり、1つ忘れた場合、そのページは誰かが気付くまで静かに壊れたウィジェットを持ち続けます。これは大きく失敗することはなく、ページごとに同期が外れていくだけです。

生成されたスニペットは、数秒でフォームから再度コピーでき、その後、共有ヘッダーまたはフッターインクルードを使用していない場合はサイト全体で検索と置換を行うことができるラベル付き属性として1行にすべての設定を保持します。そして、実際のボタンロジックは貼り付けたコードではなく、タグが指すホストされたスクリプトファイルにあるため、バグ修正とウィジェット自体の動作改善は、サイトに再度触れることなく配信されます。

スニペットを貼り付ける場所

メカニクスはどこでも同じです。スニペットをすべてのページで表示される場所に配置します。理想的には</body>の直前です。

プレーンHTMLサイト: 共有フッターテンプレートに直接貼り付けるか、テンプレートがない場合はすべてのページに貼り付けます。
WordPress: カスタムHTMLブロック、または外観 → テーマファイルエディター経由でテーマのフッターを使用すると、別のプラグインをインストールせずに機能します。
Shopify: オンラインストア → テーマ → コード編集経由で、theme.liquidの終了</body>タグのすぐ上に貼り付けます。
Wix: 設定 → カスタムコード下の組み込みカスタムコードパネルを使用し、すべてのページに読み込むように設定します。
Webflow: プロジェクト設定 → カスタムコード下のフッターコードフィールドは、1つの場所でサイト全体に適用します。

これらはそれぞれ独自の特性があり、より長く見る価値があります。WordPressについては別途詳しく説明しますが、貼り付けステップ自体はどこでも同じです。1つのスクリプトタグ、1つの場所、すべてのページに一度に適用されます。

完了と呼ぶ前にテストする

シークレットウィンドウでサイトを読み込み、キャッシュされたスタイルが実際の問題を隠さないようにします。ブラウザウィンドウをサイズ変更するだけでなく、デスクトップと実際のスマートフォンの両方のボタンをチェックします。各から1回クリックして、WhatsApp(モバイルではアプリ、デスクトップではweb.whatsapp.com)が番号とグリーティングメッセージがすでに入力された状態で開くことを確認します。その後、クッキーバナーまたは固定要素が表示されている状態でページをスクロールします。この時点での最も一般的な失敗はz-index競合で、ウィジェットが別の固定位置要素の上ではなく背後でレンダリングされます。

よくある質問

これは本当に無料ですか、それとも何かある? ジェネレーター自体は無料で、アカウントは不要です。それが指すウィジェットスクリプトはホストされており、無料でサービスされます。後でThe Chat QuotientのChrome拡張機能をインストールしてウィジェットを通じて入ってくるコンバーセーションを管理する場合、それも独自の無料プランを持っていますが、ウィジェットの使用要件ではなく、別のオプションのステップです。

WhatsAppウィジェットはWhatsApp Webと同じですか? いいえ。これは一般的な混同です。WhatsApp Web(web.whatsapp.com)は、ブラウザからWhatsAppメッセージを読み書きするインターフェースです。WhatsAppウィジェットのウェブ要素は、クリックするとチャットが開く(モバイルではWhatsAppアプリまたはデスクトップアプリがインストールされていないデスクトップではWhatsApp Web)小さなボタンです。ウィジェットはあなたが埋め込むもの。WhatsApp Webは、結果のコンバーセーションが開く場所です。

訪問者がWhatsAppをインストールしていない場合、ウィジェットは機能しますか? モバイルでは、アプリをインストールせずにクリックすると、訪問者がアプリをインストールするために最初にアプリストアに送られます。リンクはWhatsApp自体にのみ渡す方法を知っており、別のメッセージングチャネルに代わるものではないため、このステップを回避する方法はありません。

営業とサポートのようにウィジェットに複数のWhatsApp番号を持つことができますか? 1つのボタンではできません。ウィジェットはインスタンスごとに1つのWhatsApp番号の周りに構築されています。2つのエントリポイントが必要な場合は、異なる位置とグリーティングを持つ2つのウィジェットを追加します。その時点では、両方が個別に記載されている専用コンタクトページが、通常、同じコーナーに積み重ねられた2つのフローティングボタンよりも訪問者にとってより明確です。

ジェネレーターを使用するにはコーディング方法を知る必要がありますか? いいえ。すべての設定はフォームフィールドで、貼り付ける唯一のものは、サイトが実行されているプラットフォームに関係なく、生成される1つのスクリプトタグと同じコピー/ペーストステップです。

結論

wa.meリンクは、独自のCSSを書いてメンテナンスでき、何か変更が必要になるたびにそのコードを再度見直すことをいとわない場合、本当に必要なすべてです。WhatsAppチャットウィジェットジェネレーターは、CSS、アイコンファイル、または手作りに伴うメンテナンスなしに、同じ結果、事前入力されたWhatsAppチャットを開くフローティングボタンを生成し、それでも無料です。