# WhatsAppウィジェット
## WhatsAppウィジェットの統合
このシンプルなガイドに従って、Webサイトにフローティング形式のWhatsAppチャットボタンを追加しましょう。
> **知っておくべきこと:** WhatsAppウィジェットはシンプルな「クリックしてチャット」ボタンです。クリックすると訪問者のWhatsAppが開き、そこからメッセージを送ることができます。このウィジェット自体は、メッセージをチャットの受信トレイに取り込んだり、AIを起動したりするものではありません。Webサイトに埋め込むページ内AIチャット体験が必要な場合は、代わりに別の[チャットウィジェット](chat-widget.md)を使用してください。
>
> **シンプルなリンクや独自のボタンをご希望ですか？** フローティングウィジェットを使用せず、独自のボタン（またはテキスト）から直接WhatsAppチャットにリンクさせたい場合は、以下の[シンプルなリンクやボタンをご希望ですか？ (wa.me)](#prefer-a-plain-link-or-button-wa-me)に進んでください。SMS版については、[クリックしてテキスト送信（SMS）リンクの追加](../messaging-channels/sms.md#adding-a-click-to-text-sms-link-to-your-website)を参照してください。
### インストール
1. テキストエディタでWebサイトのHTMLファイルを開きます。
2. ` `タグを探します（通常はHTMLファイルの末尾にあります）。
3. ``タグの直前に、以下のスクリプトを貼り付けます：
{% code overflow="wrap" %}
```html
```
{% endcode %}
1. 上記のコード内で、以下を置き換えてください：
* `NUMBER` をあなたのWhatsApp番号に置き換えます
* 例：番号が +1 555 123 4567 の場合、単に 15551234567 と入力します
### カスタムメッセージの追加
ボタンをクリックした際に、あらかじめ入力されたメッセージを表示させたい場合：
1. 代わりにこのコードを使用してください：
{% code overflow="wrap" %}
```html
```
{% endcode %}
1. 実際の番号とメッセージを使用した例：
{% code overflow="wrap" %}
```html
```
{% endcode %}
### 得られるもの
インストール後、自動的に以下が表示されます：
* Webサイトの右下に緑色のWhatsAppボタンが表示されます
* スクロール中もボタンは表示されたままになります
* モバイルデバイスでもシームレスに動作します
* ボタンにカーソルを合わせると、さりげないアニメーションが表示されます
### 追加情報
* 電話番号は、以下の記号の有無にかかわらず入力できます。
* プラス記号 (+)
* スペース
* ハイフン (-)
* これらは自動的に正しく処理されます
* メッセージには自然にスペースを含めることができます
* 追加のファイルやインストールは不要です
* ボタンはモバイル画面に自動的に適応します
### 完全なWebページの例
{% code overflow="wrap" %}
```html