WhatsAppウィジェットのHTMLコード：無料でコピペできるスニペット（2026年版）

素のwa.meリンクから完全なフローティングボタンまで、コピペで使えるWhatsAppウィジェットのHTMLと、生のコードだけでは自分で構築しなければならない部分を解説します。

WhatsAppウィジェットのスニペットとフローティングチャットボタンのプレビューが並んで表示されたHTMLコードエディター

実際のHTMLを探してここに来たなら、これがそれです。登録は不要です。

<a href="https://wa.me/15551234567">Chat with us on WhatsApp</a>

15551234567をあなたの番号に置き換えてください。完全な国際形式で、国コードを先頭に、プラス記号なし、スペースなし、先頭ゼロなしです。このリンク1つだけで、あなたのビジネスとのWhatsAppチャットを開くには十分です。そしてこれが「HTMLウィジェットコードをくれ」という要望に対する完全に正直な答えでもあります。なぜなら、ここから先はすべて、あなた(またはジェネレーター)がこの1行ではカバーされない部分を自分で構築する作業になるからです。

事前入力メッセージを追加する

訪問者がこのリンクにアクセスした時点では、何も入力されていません。チャットが開いたときにボックスにメッセージを待機させておくには、textパラメーターを追加します。

<a href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing">
  Chat with us on WhatsApp
</a>

メッセージはURLエンコードされている必要があります。%20はスペース、%2Cはコンマ、%27はアポストロフィです。まず入力したい文章をそのまま書き、それを何らかのURLエンコーダーに通してからtextの値に貼り付けてください。クエリ文字列の途中に生のスペースや句読点があると、一部のブラウザではリンクが壊れてしまうためです。

フローティングボタンに変える

テキストリンクは、多くの人が「WhatsAppウィジェット」と言うときに思い浮かべるものではありません。コーナーに表示されるボタンは、同じリンクの上にCSSを重ねたものです。

<a
  href="https://wa.me/15551234567?text=Hi%2C%20I%27d%20like%20to%20ask%20about%20pricing"
  target="_blank"
  rel="noopener"
  aria-label="Chat on WhatsApp"
  style="
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
  "
>
  <svg width="30" height="30" viewBox="0 0 24 24" fill="white" aria-hidden="true">
    <path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.87 9.87 0 0 0 4.74 1.21h.01c5.46 0 9.9-4.45 9.9-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2Z"/>
  </svg>
</a>

このバージョンは、電話/チャットのアイコンをSVGとしてインライン化することで別のアイコンファイルを不要にしているため、文字通り自己完結した1つのブロックです。</body>の前に貼り付ければ、他にアップロードするものは何もありません。それでも、自分の手で対応しなければならないことが4つ残っており、そここそが実際のジェネレーターが真価を発揮する部分です。

このHTMLが自動でやってくれないこと

モバイルとデスクトップでは動作が異なりますが、このスニペットにはそれをコントロールする仕組みは一切ありません。 WhatsAppがインストールされたスマートフォンでwa.meリンクをクリックすると、アプリが直接開きます。アプリがインストールされていない場合は、代わりに訪問者がアプリストアに送られ、リンク自体からフォールバックメッセージや代替の連絡手段を設定することはできません。デスクトップブラウザでは新しいタブでweb.whatsapp.comが開きますが、これは訪問者がそのブラウザで既にWhatsApp Webにログインしている場合にのみ機能し、そうでなければ、なぜそうなっているのかの説明もないままQRコードを見つめることになります。この3つの結果はすべて同じhrefから生じるものです。プレーンなHTMLだけでは、どの結果になるかを検出したり、それを横取りしたりすることはできません。

事前入力メッセージはフォームフィールドではなく、URLの中に存在します。 それを変更するには、新しい文字列を手作業でエンコードし直し、共有テンプレートを使っていない場合は、そのリンクが貼り付けられているすべてのページを見つけ出して、そこでも置き換える必要があります。

SVGのパスを手作業で編集せずに差し替えられるアイコンファイルは存在せず、インラインのスタイルブロックに1行ずつ直接触れることなく、ボタンの位置やサイズ、色を変更する方法もありません。

チャットが開く前にリード情報を取得する仕組みはここには何もありません。 リンク(またはボタン)は、クリックされた瞬間にそのままWhatsAppへ向かいます。会話が始まる前に名前や問い合わせ理由を取得したい場合は、それを自分で構築し、動作するように配線し、何らかの方法でtextパラメーターに渡す、別のフォームが必要になります。

生成されたバージョン

WhatsAppチャットウィジェットジェネレーターは、同じわずかな設定項目を、自分でメンテナンスするCSSのブロックの代わりに、1つのスクリプトタグへと変換してくれる無料ツールです。番号を設定し、色を選び、位置とオフセットを設定し、グリーティングメッセージを書き、さらにオプションで、WhatsAppウィンドウが開く前にコンテキストを収集するプリチャットフォーム(短い質問と、必須にするかどうかを選べるメールまたは電話番号)を有効にできます。このツールは次のものを出力します。

<script src="https://cdn.thechatquotient.com/widget/v1/widget.js"
  data-widget-id="wgt_xxxxxxxx"
  data-whatsapp-number="15551234567"
  data-color="#128C7E"
  data-position-vertical="bottom"
  data-position-horizontal="left"
  data-offset-vertical="24"
  data-offset-horizontal="24"
  data-z-index="999"
  data-greeting="Hi! Ask us anything."
  data-prechat="true"
  data-prechat-title="Before we chat"
  data-prechat-description="Tell us what you need help with."
  async
  defer
></script>

すべての設定は、ラベル付けされたdata-属性として1行の中に収まっているため、グリーティングメッセージを変更したり、ボタンを反対側のコーナーに移動したりする場合も、CSSファイルを探し回るのではなく、フォームからタグを再度コピーするだけで済みます。アイコン、配置ロジック、モバイルとデスクトップそれぞれのディープリンク処理、そしてプリチャットフォームは、すべてタグが指し示すホスト済みのスクリプトの中にあり、これは上記の生のHTMLだけでは、自分で書かない限り実現できないことです。

属性の完全リファレンス

生成されたスニペットを貼り付けていて、手動で変更する前に各行が何をコントロールしているのか知りたい場合、このタグが受け付ける属性は以下の通りです。

属性	内容
`data-widget-id`	ジェネレーターが発行する一意のID。編集しないでください
`data-whatsapp-number`	送信先の番号。国際形式で、`+`なし
`data-color`	ボタンの背景色。任意の16進値
`data-position-vertical`	`top`または`bottom`
`data-position-horizontal`	`left`または`right`
`data-offset-vertical` / `data-offset-horizontal`	その辺からのピクセル距離
`data-z-index`	重なり順。別の固定要素がボタンを覆っている場合は値を上げる
`data-greeting`	事前入力されるメッセージテキスト。手動でのURLエンコードは不要
`data-prechat`	チャットが開く前に短いフォームを表示する場合は`true`
`data-prechat-title` / `data-prechat-description` / `data-prechat-question`	プリチャットフォームに表示されるコピー

どちらのバージョンもどこに貼り付けるか

生のHTMLも、生成されたスクリプトタグも、貼り付ける場所は同じです。すべてのページでレンダリングされる場所、理想的には</body>の直前です。

プレーンHTMLサイト: 共有フッターのインクルードファイル、それがなければ各ページに個別に。
WordPress: カスタムHTMLブロック、または外観 → テーマファイルエディター経由のテーマフッター。
Shopify: オンラインストア → テーマ → コード編集経由で、theme.liquidの</body>の直前。
Wix: 設定 → カスタムコードで、すべてのページに読み込むように設定。
Webflow: プロジェクト設定 → カスタムコード → フッターコード。

よくある質問

生のHTMLリンクにWhatsApp Businessアカウントは必要ですか? いいえ。個人のWhatsApp番号でも、Business番号と同じようにwa.meリンクは機能します。カタログや自動返信といったBusiness固有の機能は、リンク自体には含まれていません。

アイコンの代わりに壊れた画像が表示されるのはなぜですか? これは、HTMLがそのパスにアップロードされていない外部アイコンファイル(<img src="/whatsapp-icon.svg">)を参照している場合に発生します。上記のインラインSVG版では、アイコンがHTMLに直接書き込まれているため、この問題は完全に回避されます。

ウィジェットのHTMLを<head>タグの中に入れることはできますか? 厳密には、アンカータグ自体は<body>内でレンダリングされる必要があります。<head>の内容は表示されないためです。スクリプトは<head>から読み込むこともできますが、スニペットを</body>の直前に配置することで、レンダリングのブロックを避けられ、ほとんどのサイトビルダーが想定しているパターンにもなります。

1つのページに追加できるWhatsAppウィジェットの数に上限はありますか? 2つ貼り付けることを妨げるものは何もありませんが、同じコーナーに2つのフローティングボタンが重なっていると、通常は機能ではなくバグのように見えてしまいます。2つの番号(営業とサポートなど)が必要な場合は、重ねるのではなく、それぞれに異なる位置を割り当ててください。

Squarespaceでも同じように機能しますか? Squarespaceのコードインジェクションパネル(設定 → 詳細設定内)は、WordPressのカスタムHTMLブロックと同じようにどちらのバージョンも受け付け、フッターへのインジェクションは1か所でサイト全体に適用されます。

結論

WhatsAppウィジェットの文字通りのHTMLは、<a href="https://wa.me/...">タグ1つであり、今それを手に入れました。それを、多くの人が思い浮かべるようなフローティングでブランド化された、リードを取得できるボタンに変えるには、自分でCSSとディープリンクのエッジケースを書いてメンテナンスし続けるか、WhatsAppチャットウィジェットジェネレーターに完成したスクリプトタグを1回の貼り付けで出力させるか、どちらかです。無料で、アカウントも不要です。