無料ツール

ウェブサイト用WhatsAppチャットウィジェットを構築する

下で構成し、このページで試してください。隅の吹き出しが実際のウィジェット、ライブです。

ウィジェットを構成する

変更はライブプレビューとスニペットを即座に更新します。

国を選択してコードが正しいことを確認してください(WhatsAppはこれがないとチャットを見つけることはできません)。その後、数字のみを入力します。

サイト上の別の要素(クッキーバナーや別のチャットツールなど)の背後にウィジェットが隠れてしまった場合は、これを増やしてください。

埋め込みスニペット

ウェブサイトの閉じ</body>タグの前に貼り付けます。

ライブプレビュー

このページの下隅を見てください。それはあなたのウィジェット、上記の設定から実際の埋め込みスクリプトを使用してレンダリングされます。

WhatsApp Webでリードを管理する

無料のChat Quotient Chrome拡張機能をダウンロードして、WhatsApp Webで直接すべての会話を表示および管理します。完全なWhatsApp CRM体験をします。

Chromeに追加、それは無料です

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番号が機能します。個人用またはビジネス用です。国コード付きで入力するだけで、スペースやプラス記号はありません。