スタッフスタイリングの設置
スタッフの着用例ギャラリーをページに埋め込む手順
スタッフスタイリングは、スタッフのコーディネート例（画像・動画）をギャラリーとして表示し、商品の雰囲気や着こなしの幅を伝えるプロダクトです。表示するコンテンツは Reselfitコンソールで登録・管理するため、ホストサイト側は表示エリアを置くだけで導入できます。
Loader Script や bootモードなど、全プロダクトで共通する部分は 共通のしくみ を参照してください。
AIフィッティングルームとの違い
| 項目 | スタッフスタイリング | AIフィッティングルーム |
|---|---|---|
| 表示エリア | <reselfit-plugin-staff-styling-embed> | <reselfit-plugin-fitting-room> |
| 渡すデータ | 不要（サイト単位で表示） | 商品（item）情報が必要 |
| コンテンツ管理 | Reselfitコンソール | ホストサイト側 |
商品ごとの item を渡す必要はありません。表示するコーディネートはコンソール側で管理します。
1. Plugin Loader Script の設置
data-site-id を自身の Site ID に書き換えて、サイト内に設置します。すでに他のプロダクトで設置済みであれば、この手順は不要です（Loader Script は 1 サイト 1 本で共有します）。
<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>2. 表示エリアの設置
スタッフスタイリングを表示したい位置に、<reselfit-plugin-staff-styling-embed> を配置します。Loader Script がこの要素を埋め込み先として認識し、ギャラリー UI を描画します。
<reselfit-plugin-staff-styling-embed></reselfit-plugin-staff-styling-embed>div の id を管理する必要がなく、どんな web 環境でも直接組み込めます。Web Component が利用できない環境では、同じ id を付けた <div> でも設置できます。
<div id="reselfit-plugin-staff-styling-embed"></div>3. コンテンツの登録
表示するコーディネートは Reselfitコンソール から登録します。画像に加えて動画のコーディネートも掲載でき、コーデ解説とあわせて詳細ビューで届けられます。
コンテンツの追加・差し替えはコンソール上で完結し、ホストサイト側のコード改修は不要です。
bootモードと JavaScript API
表示のタイミングを制御したい場合は、data-plugin-boot-mode="manual" と window.Reselfit('boot') を組み合わせます。SPA で画面が差し替わる構成や、スクロールで画面内に入ってから描画したい場合に有効です。詳しくは bootモード と JavaScript API を参照してください。