WhatsAppウィジェット

WhatsAppウィジェットの統合

このシンプルなガイドに従って、Webサイトにフローティング形式のWhatsAppチャットボタンを追加しましょう。

知っておくべきこと: WhatsAppウィジェットはシンプルな「クリックしてチャット」ボタンです。クリックすると訪問者のWhatsAppが開き、そこからメッセージを送ることができます。このウィジェット自体は、メッセージをチャットの受信トレイに取り込んだり、AIを起動したりするものではありません。Webサイトに埋め込むページ内AIチャット体験が必要な場合は、代わりに別のチャットウィジェットを使用してください。

シンプルなリンクや独自のボタンをご希望ですか？ フローティングウィジェットを使用せず、独自のボタン（またはテキスト）から直接WhatsAppチャットにリンクさせたい場合は、以下のシンプルなリンクやボタンをご希望ですか？ (wa.me)に進んでください。SMS版については、クリックしてテキスト送信（SMS）リンクの追加を参照してください。

インストール

テキストエディタでWebサイトのHTMLファイルを開きます。
</body>タグを探します（通常はHTMLファイルの末尾にあります）。
</body>タグの直前に、以下のスクリプトを貼り付けます：

<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER"></script>

上記のコード内で、以下を置き換えてください：
- NUMBER をあなたのWhatsApp番号に置き換えます
- 例：番号が +1 555 123 4567 の場合、単に 15551234567 と入力します

カスタムメッセージの追加

ボタンをクリックした際に、あらかじめ入力されたメッセージを表示させたい場合：

代わりにこのコードを使用してください：

<script src="https://api.youraiconnector.com/v1/whatsapp-widget/NUMBER/Your message here"></script>

実際の番号とメッセージを使用した例：

<script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I'm interested in your services"></script>

得られるもの

インストール後、自動的に以下が表示されます：

Webサイトの右下に緑色のWhatsAppボタンが表示されます
スクロール中もボタンは表示されたままになります
モバイルデバイスでもシームレスに動作します
ボタンにカーソルを合わせると、さりげないアニメーションが表示されます

追加情報

電話番号は、以下の記号の有無にかかわらず入力できます。
- プラス記号 (+)
- スペース
- ハイフン (-)
- これらは自動的に正しく処理されます
メッセージには自然にスペースを含めることができます
追加のファイルやインストールは不要です
ボタンはモバイル画面に自動的に適応します

完全なWebページの例

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
</head>
<body>
    <!-- Your website content here -->

    <!-- WhatsApp Widget (place this just before </body>) -->
    <script src="https://api.youraiconnector.com/v1/whatsapp-widget/15551234567/Hello! I have a question"></script>
</body>
</html>

シンプルなリンクやボタンをご希望ですか？ (wa.me)

上記のウィジェットを使用すると、すぐに使えるフローティングボタンが作成されます。しかし、すでに独自のボタン（またはメニューリンク、画像、テキスト）をお持ちで、それを自分の番号のWhatsAppチャットにリンクさせたいだけであれば、ウィジェットは必要ありません。単に wa.me URLにリンクするだけです。

形式は以下の通りです。

https://wa.me/NUMBER

NUMBER を国際形式の完全な番号に置き換えてください。数字のみを使用し、プラス記号、スペース、ハイフンは含めないでください。例えば、+31 6 5801 5937 の場合は以下のようになります。

https://wa.me/31658015937

メッセージの事前入力

チャットが開いたときにメッセージがすでに入力されている状態にするには、?text= に続けてメッセージを追加します。

https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question

メッセージ内のスペースは %20 と記述する必要があります（これはリンクにおけるスペースの扱い方です）。

ボタンへの設置

他のWebアドレスにボタンをリンクさせるのと全く同じ方法で、任意のボタンをそのURLにリンクさせてください。生のHTMLでは以下のようになります。

<a href="https://wa.me/31658015937?text=Hi!%20I%20have%20a%20question">Chat on WhatsApp</a>

Webサイトビルダー（Wix、Squarespace、WordPress、Webflowなど）では、通常通りボタンを追加し、その「リンク」または「URL」フィールドに wa.me URLを貼り付けてください。

複数の番号をローテーションし、リピーターを記憶し、クリックを追跡できる短いリンクが必要ですか？ 生の wa.me URLの代わりに、ショートリンク（設定 → チャネルの下）を使用してください。

WhatsAppウィジェット #