共通のしくみ
4つのプロダクトで共有する土台と、プロダクトごとに異なる部分の全体像
Reselfit は「AIフィッティングルーム」「スタッフスタイリング」「表示ブロック・バナー」「タイムライン」の4つのプロダクトを提供します。これらは共通の Plugin Loader Scriptを土台に動作し、プロダクトごとに変わるのは「表示エリア」と「渡すデータ」だけです。
このページでは、どこが共通で、どこがプロダクト固有なのかの全体像を整理します。個別の設置手順は各プロダクトのページを参照してください。
全プロダクト共通の土台
1 サイトにつき Plugin Loader Script を 1 本だけ設置すれば、同じ Site ID に紐づくすべてのプロダクトで共有できます。プロダクトを追加するたびに別のスクリプトを読み込む必要はありません。
<script
id="reselfit-plugin-script-loader"
data-site-id="YOUR_SITE_ID_FROM_RESELFIT_CONSOLE"
src="https://plugin.reselfit.com/loader/loader.js"
defer
></script>Loader Script が読み込まれると、ページ内に設置された各プロダクトの表示エリアを見つけて描画します。
| 共通の要素 | 説明 |
|---|---|
| Plugin Loader Script | すべてのプロダクトの入り口。1 サイト 1 本。data-site-id に自身の Site ID を指定します。 |
| Site ID | サイトを識別する ID。Reselfitコンソール で発行します。全プロダクトで共通です。 |
| bootモード | Plugin を初期化するタイミング（auto / manual）。詳しくは bootモード を参照してください。 |
| userToken 認証 | userId の改ざんを防ぐための署名付きトークン。任意ですが本番環境では推奨します。詳しくは userTokenの利用 を参照してください。 |
| JavaScript API | window.Reselfit(...) から boot やコンバージョン計測（track）を呼び出せます。詳しくは JavaScript API を参照してください。 |
プロダクトごとに異なる部分
プロダクト固有なのは、どの Custom Element を表示エリアとして置くかと、表示に必要なデータをどう渡すかの 2 点です。
| プロダクト | 表示エリア（Custom Element） | 渡すデータ | コンテンツの管理場所 |
|---|---|---|---|
| AIフィッティングルーム | <reselfit-plugin-fitting-room> | 商品（item）情報を Config Script Data で渡す | ホストサイト側（商品ページごと） |
| スタッフスタイリング | <reselfit-plugin-staff-styling-embed> | 不要（サイト単位で表示） | Reselfitコンソール |
| 表示ブロック・バナー | <reselfit-plugin-block data-block-id="…">（埋め込み配置のときのみ） | 不要 | Reselfitコンソール |
| タイムライン | <reselfit-plugin-timeline>（埋め込み配置のときのみ） | 不要（投稿はお客さま・スタッフから） | お客さまの投稿 + Reselfitコンソールでの承認 |
- AIフィッティングルームは、試着する商品の画像やバリエーションを商品ページごとに渡す必要があるため、ホストサイト側でデータを設定します。
- スタッフスタイリングと表示ブロック・バナーは、表示するコンテンツを Reselfitコンソールで登録・管理します。ホストサイト側は表示エリアを置くだけで、内容の更新にコード改修は不要です。
- タイムラインは、コンテンツがお客さまの投稿から生まれます。ホストサイト側は表示エリアを置くだけで、コンソールでは投稿の承認とスタッフ投稿の登録を行います。お客さまの投稿には本人確認が必要なため、userToken の設定を推奨します。
導入の流れ
どのプロダクトでも、大きな流れは同じです。
- Reselfitコンソール でサイトを登録し、Site ID を取得する（共通）。
- Plugin Loader Script をサイトに設置する（共通）。
- 利用するプロダクトの表示エリアを、表示したい場所に置く（プロダクト固有）。
- 必要に応じて bootモード・userToken・JavaScript API を組み合わせる（共通）。
各プロダクトの設置
Shopify をご利用の場合は、Shopifyショップへの設置 で専用アプリを使った導入手順を案内しています。