The Chat Quotient Logo The Chat Quotient
Free Tool

Build a WhatsApp chat widget for your website

Configure it below and try it out right on this page. The bubble in the corner is the real widget, live.

Configure your widget

Changes update the live preview and the snippet instantly.

Pick your country so the code is right (WhatsApp can't find the chat without it), then enter the rest of the number, digits only.

Raise this if the widget ends up hidden behind another element on your site, like a cookie banner or a different chat tool.

Your embed snippet

Paste this before the closing </body> tag on your website.

Live preview

Look at the bottom corner of this page. That's your widget, rendered from the settings above using the real embed script.

Manage your leads on WhatsApp Web

Download the free Chat Quotient Chrome extension to see and manage every conversation directly inside WhatsApp Web, a full WhatsApp CRM experience.

Add to Chrome, It's Free

WhatsAppチャットウィジェットとは?

WhatsAppチャットウィジェットは、ウェブサイトのコーナーに座る小さなボタンで、クリックすると企業とのWhatsApp会話が開きます。企業のWhatsApp番号に直接または最初に短いフォーム経由で行きます。連絡先フォームやメールフォームに代わって、ほとんどの訪問者がすでに携帯電話で開いているチャネルとなります。

シンプルなクリックしてチャット(wa.meを開く単なるテキストまたはアイコン)とは異なります。ウィジェットは構成可能です:位置、色、事前入力されたあいさつ。

ウェブサイトにWhatsAppチャットウィジェットを追加する方法

  1. 1

    ウィジェットを構成する

    WhatsApp番号を入力してから、ウィジェットの色とコーナーを選択します。

  2. 2

    スニペットをコピー

    上記の「スニペットをコピー」ボタンを使用します。単一の<script>タグで、他のファイルや依存関係はありません。

  3. 3

    サイトに貼り付ける

    サイトのHTMLの終了</body>タグの直前に追加してください。

  4. 4

    発行する

    それは全部です。ウィジェットはスニペットからそれ自身をレンダリングします。ビルドステップ、バックエンド、またはアカウントは不要です。

プラットフォーム別の貼り付け場所

WordPress
「Insert Headers and Footers」または「WPCode」などのプラグインを使用するか、Appearance → Theme File Editorを介して、テーマのfooter.phpに</body>の前に直接貼り付けます。
Shopify
Online Store → Themes → Edit code → theme.liquid、スニペットを</body>のちょうど上に貼り付けます。
Wix
Settings → Custom Code → Add Code、「Body - end」セクションのすべてのページにロードするように設定します。
Webflow
Project Settings → Custom Code → Footer Code、その後、サイトを公開します。
他のサイト
サイトのHTMLを編集できる場合は、</body>の前に貼り付けます。どこでも同じように機能します。

ウェブサイトにWhatsAppボタンを追加する理由

フォームなし、メールなし、ページ再読み込みなし

訪問者は、連絡フォームに入力して返信を待つ代わりに、すでに携帯電話で開いているアプリであなたに連絡します。

それはすでに訪問者がいる場所に会う

WhatsAppは世界中の数十億人のデフォルトのメッセージングアプリです。ほとんどの訪問者にとって、ダウンロードまたはサインアップする新しいものはありません。

すべてのチャットはコンテキストで始まります

事前入力されたあいさつは、会話が冷たいスタートしていないことを意味します。訪問者はWhatsAppに到着し、メッセージがすでにフレーミングされています。

あなたはそれがどこに座るかを正確に制御します

色、コーナー、オフセットを設定して、ウィジェットが一般的なデフォルトバブルの代わりにサイトと一致するようにします。

無料、承認プロセスなし

WhatsApp Business API申請なし、個別の番号なし、単一のスクリプトタグを超えるコードなし。

チャットボタン対チャットウィジェット。違いは何ですか?

チャットボタン

クリックするとWhatsAppチャットが開く静的なリンクまたはアイコン。宛先番号以上の構成なし。

チャットウィジェット

  • 構成可能な色、位置、事前入力されたあいさつ
  • どこでも機能します: WordPress、Shopify、Wix、Webflow、またはプレーンHTML。依存関係なし
  • これはあなたが上で構築しているものです

よくある質問

このWhatsAppチャットウィジェットジェネレータは無料ですか? +

はい。上で構築するリダイレクトウィジェット(お客様の番号、色、位置、あいさつ)は無料です。小さな「Powered by Chat Quotient」バッジ付きです。AI-エージェント駆動のProバージョンが将来計画されています。

それを使用するためにWhatsApp Business APIが必要ですか? +

いいえ。ウィジェットは既存のWhatsApp番号を使用して通常のWhatsAppチャットを開きます。Business API承認または個別の番号は必要ありません。

WordPress、Shopify、Wix、または他のウェブサイトで機能しますか? +

はい。依存関係のない単一の<script>タグなので、HTMLを貼り付けることができる場所ならどこでも機能します: WordPress、Shopify、Wix、Webflow、Squarespace、または手動で構築されたサイト。

ウィジェットはサイトを遅くしますか? +

目立たないはずです。スクリプトは小さく、asyncおよびdeferでロードされるため、ページをブロックせず、隔離されたShadow DOM内でレンダリングされるため、サイトのスタイルと衝突しません。

訪問者がWhatsAppに行く前に彼の名前をキャプチャできますか? +

まだです。WhatsApp引き渡し前のリード取得はロードマップ上にあり、準備ができたらここのトグルを再度有効にします。

私の構成はどこに保存されていますか? +

どこのサーバーにもありません。設定はサイトに貼り付けるスクリプトタグ内にあります。後で何かを変更するには、このページに戻り、再構成して新しいスニペットをコピーしてください(現在のコピーを保持してください。ご注意ください)。

チャットボタンとチャットウィジェットの違いは何ですか? +

「チャットボタン」は通常、WhatsAppを開く静的リンクにすぎません。「チャットウィジェット」(このツールが構築するもの)は、構成可能なあいさつ、位置、色を備えた浮遊ランチャーです。

個人的なWhatsApp番号を使用するか、ビジネス番号が必要ですか? +

任意のWhatsApp番号が機能します。個人用またはビジネス用です。国コード付きで入力するだけで、スペースやプラス記号はありません。