# クリニックホームページにウィジェットを追加する :::danger **KOS Connectはまだ開発段階です。** - ウィジェットのインストール方法、制御方法などが追加されたり、使用中のAPIが削除・変更される可能性があります。 - クリニックを担当しているKOSチームの営業担当者または開発担当者にお問い合わせください。 ::: クリニックホームページにKOS Connectウィジェットを埋め込むと、来院者がホームページから直接予約できます。このドキュメントでは、ウィジェットのインストール、制御、設定方法をご案内します。 [デモサイト](https://clinic-demo.dev.kos-solution.com/)でウィジェットが適用された様子を確認できます。 ## インストール npmパッケージをインストールして、型安全なSDKを使用できます。 ```sh title="npm" icon="npm" npm install @kos-solution/connect-sdk ``` ```sh title="yarn" icon="yarn" yarn add @kos-solution/connect-sdk ``` ```sh title="pnpm" icon="pnpm" pnpm add @kos-solution/connect-sdk ``` ```sh title="bun" bun add @kos-solution/connect-sdk ``` ```typescript import KOSConnect from '@kos-solution/connect-sdk'; // appIdで初期化 KOSConnect.init('YOUR_APP_ID'); ``` :::tip{title="appIdの発行"} `appId`がない場合は、営業担当者にお問い合わせの上、発行してください。 ::: :::warning{title="クライアント環境でのみ使用してください"} `KOSConnect.init()`は内部的に` ``` `YOUR_APP_ID`を発行された`appId`に置き換えてください。 :::tip{title="appIdの発行"} `appId`がない場合は、営業担当者にお問い合わせの上、発行してください。 ::: 開発環境では以下のアドレスを使用してください。 ```html ``` ## ウィジェットの制御クリニックホームページでボタンクリックやユーザーの行動に応じてウィジェットを制御できます。詳細は[KOS Connect APIドキュメント](../api)をご参照ください。 ### 例：ボタンクリックでウィジェットを開く ```tsx import KOSConnect from '@kos-solution/connect-sdk'; ``` ```html ``` ```jsx // React (JSX) ``` ### 例：カートにオプションを追加する ```tsx import KOSConnect from '@kos-solution/connect-sdk'; ``` ```html ``` ```jsx // React (JSX) ``` ## ウィジェットの設定以下の項目を設定できます。 | 項目 | デフォルト値 | 説明 | |------|-------------|------| | カラー | - | クリニックのブランドカラーを適用します。ウィジェット開くボタンと主要ボタンに使用されます。 | | ボタンラベル | 予約する | ウィジェット開くボタンに表示するテキストです。ラベルを非表示にすることもできます。 | | 位置 | 右下 | 左下または右下から選択します。 | | 余白 | - | ウィジェット開くボタンの横/縦の余白を設定します。 | 設定を変更するにはKOSチームにお問い合わせください。 ## UTMパラメータで流入経路を追跡するウィジェットはクリニックホームページURLに含まれるUTMパラメータを自動的に認識します。来院者がUTMパラメータ付きのリンクでホームページにアクセスした後、ウィジェットを通じて予約すると、その流入経路がKOSに自動的に記録されます。例えば、来院者が以下のURLでホームページにアクセスした後、ウィジェットで予約すると流入経路が記録されます。 ```text https://kos-demo.clinic?utm_source=インスタグラム&utm_medium=プロフィールリンク&utm_campaign=3月春キャンペーン ``` KOS Connectは以下の3つのUTMパラメータをサポートしています。 | UTMパラメータ | KOSに記録されるフィールド | 説明 | 例 | |--------------|------------------------|------|-----| | `utm_source` | 流入チャネルカテゴリ | トラフィックソース | `インスタグラム`、`カカオ`、`LINE` | | `utm_medium` | 流入チャネル | メディアタイプ | `プロフィールリンク`、`メッセージ`、`QRコード` | | `utm_campaign` | 詳細流入チャネル | キャンペーン名 | `3月春キャンペーン`、`友達紹介`、`待合室案内` | :::tip{title="UTMパラメータ生成ツール"} [Google Campaign URL Builder](https://ga-dev-tools.google/campaign-url-builder/)を使用すると、UTMパラメータ付きのURLを簡単に生成できます。 ::: ## 次のステップ [KOS Connect APIドキュメント](../api)でウィジェットを制御する様々な方法をご確認ください。