メインコンテンツまでスキップ

クリニックホームページにウィジェットを追加する

危険

KOS Connectはまだ開発段階です。

  • ウィジェットのインストール方法、制御方法などが追加されたり、使用中のAPIが削除・変更される可能性があります。
  • クリニックを担当しているKOSチームの営業担当者または開発担当者にお問い合わせください。

クリニックホームページにKOS Connectウィジェットを埋め込むと、来院者がホームページから直接予約できます。このドキュメントでは、ウィジェットのインストール、制御、設定方法をご案内します。

デモサイトでウィジェットが適用された様子を確認できます。

インストール​

npmパッケージをインストールして、型安全なSDKを使用できます。

npm install @kos-solution/connect-sdk
import KOSConnect from '@kos-solution/connect-sdk';

// appIdで初期化
KOSConnect.init('YOUR_APP_ID');
appIdの発行

appIdがない場合は、営業担当者にお問い合わせの上、発行してください。

クライアント環境でのみ使用してください

KOSConnect.init()は内部的に<script>タグを注入してウィジェットをロードします。Server ComponentやSSR環境では動作しないため、必ずクライアント環境で呼び出してください。

'use client';

import { useEffect } from 'react';
import KOSConnect from '@kos-solution/connect-sdk';

export default function KOSConnectInit() {
  useEffect(() => {
    KOSConnect.init('YOUR_APP_ID');
  }, []);

  return null;
}

開発環境ではbaseUrlオプションを使用してください。

KOSConnect.init('YOUR_DEV_APP_ID', {
  baseUrl: 'https://connect.dev.kos-solution.com'
});

ウィジェットの制御​

クリニックホームページでボタンクリックやユーザーの行動に応じてウィジェットを制御できます。詳細はKOS Connect APIドキュメントをご参照ください。

例：ボタンクリックでウィジェットを開く​

import KOSConnect from '@kos-solution/connect-sdk';

<button onClick={() => KOSConnect.open()}>ウィジェットを開く</button>

例：カートにオプションを追加する​

import KOSConnect from '@kos-solution/connect-sdk';

<button onClick={() => KOSConnect.addToCart({
  options: [{ id: '694b7805e2e5b0c20f4aaa0a' }]
})}>
  ボトックスを予約する
</button>

ウィジェットの設定​

以下の項目を設定できます。

項目デフォルト値説明
カラー-クリニックのブランドカラーを適用します。ウィジェット開くボタンと主要ボタンに使用されます。
ボタンラベル予約するウィジェット開くボタンに表示するテキストです。ラベルを非表示にすることもできます。
位置右下左下または右下から選択します。
余白-ウィジェット開くボタンの横/縦の余白を設定します。

設定を変更するにはKOSチームにお問い合わせください。

UTMパラメータで流入経路を追跡する​

ウィジェットはクリニックホームページURLに含まれるUTMパラメータを自動的に認識します。来院者がUTMパラメータ付きのリンクでホームページにアクセスした後、ウィジェットを通じて予約すると、その流入経路がKOSに自動的に記録されます。

例えば、来院者が以下のURLでホームページにアクセスした後、ウィジェットで予約すると流入経路が記録されます。

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月春キャンペーン、友達紹介、待合室案内
UTMパラメータ生成ツール

Google Campaign URL Builderを使用すると、UTMパラメータ付きのURLを簡単に生成できます。

次のステップ​

KOS Connect APIドキュメントでウィジェットを制御する様々な方法をご確認ください。