# ウィジェットとマイクロサイトのコンポーネントの解説
PXAコースを受講する
{% hint style="success" %}
**限定**：指定されたテンプレートで提供されているものを除き、コンポーネントは特定の製品エディションまたはアドオンでのみ利用できます。マイクロサイトで使用するコンポーネントをより細かく制御したい場合は、プログラムのアップグレードについてお問い合わせください。
{% endhint %}
コンポーネントは、ヒーロー画像やタスクカードなど、Advocateプログラムのウィジェットやマイクロサイトを構成する個々の構成要素です。これらの要素が [参加者体験](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/introduction-to-participant-experiences.md) を形作り、ブランドに合わせてカスタマイズできます。
この記事では、ウィジェットエディターおよびマイクロサイトエディターで利用可能なコンポーネントをカテゴリ別に一覧化しています。ほとんどのコンポーネントはスタイル設定やカスタマイズに対応していますが、一部にはデザイン上の制限があります。また、エディター画面内でコンポーネントの状態をプレビューすることもできます。
統計
使用 *統計* コンポーネントを使用して、参加者にプログラム内での進捗を知らせることができます。これらのコンポーネントが対応できる統計の一覧については、 [ウィジェットとマイクロサイトの統計](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-statistics-explained.md).
| コンポーネント | 説明 |
| ----------- | -------------------------------------------------------------- |
| ポイント残高 | 参加者のポイント残高を表示します。参加者にポイントを付与するAdvocateプログラムで使用されます。 |
| 獲得済みギフトカード | Advocateが獲得したギフトカード報酬の数を表示します。 |
| 紹介数 | 参加者が行った紹介数を表示します。開始済みおよびコンバージョン済みの紹介が含まれます。 |
| 3つの統計付きコンテナ | 3つの統計を表示するスペースを備えたテンプレートです。表示する統計は変更できます。必要に応じて統計を追加および削除できます。 |
| その他の統計 | 任意の統計を表示します。紹介統計、さまざまな報酬統計、またはカスタム統計から選択できます。 |
共通コンポーネント
*共通コンポーネント* は、ウィジェットまたはマイクロサイト全体の機能性とデザインの一貫性の両方を高めるために広く使用されます。ヒーロー画像、レイアウト書式、説明用プログラムステップなど、汎用的な視覚要素および構造要素を含みます。
| コンポーネント | 説明 |
| ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 2カラムヒーロー画像 | 2カラムにまたがるバナー画像とヘッダーテキストです。画像、テキスト、背景色を更新できます。
|
| オーバーレイヒーロー画像 | テキストを重ねて表示するバナー画像です。画像、テキスト、背景色を更新できます。
|
| 画像 | 画像です。背景色、配置、高さ、幅を変更できます。
|
| リンクボタン | クリック可能なボタンで、参加者を選択したリンク先にリダイレクトします。ボタンの色は、ブランドコンテナレベルで設定されたブランドカラーによって制御されます。
|
| プログラム説明 | Advocateプログラムの仕組み（報酬の獲得方法など）を説明するテンプレートです。デフォルトで2つのプログラム説明ステップが含まれています。さらにステップを追加できます。色は、ブランドコンテナレベルで設定されたブランドカラーによって制御されます。
|
| プログラム説明ステップ | プログラムの一部を説明する記述テキストを追加します。プログラム説明コンポーネント内に収まります。色は、ブランドコンテナレベルで設定されたブランドカラーによって制御されます。
|
| プログラムタイムライン | 参加者向けに、紹介の流れと報酬の概要を表示します。必要に応じてタイムライン項目を追加または削除できます。丸いアイコンと項目間の線の色は、ブランドコンテナレベルで設定されたブランドカラーによって制御されます。
|
| タイムライン項目 | プログラムタイムラインコンポーネント内で、紹介の流れの1ステップを表示するために使用します。丸いアイコンと項目間の線の色は、ブランドコンテナレベルで設定されたブランドカラーによって制御されます。
|
| ユーザー名表示 | 参加者のフルネームを動的に取得して表示します。参加者が名前を入力していない場合は、デフォルトで「匿名ユーザー」が表示されます。
|
報酬
{% hint style="info" %}
**注：** *報酬* コンポーネントは、確認済みアクセスのウィジェットおよびマイクロサイトでのみ使用できます。
{% endhint %}
| コンポーネント | 説明 |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| タスクカードフィード | タスクカードを使用すると、ユーザーはウィジェットやマイクロサイト上で直接アクションを実行したり、Advocateプログラムの目標に向けた進捗を確認したりできます。このコンポーネントは、複数のタスクカードをウィジェットまたはマイクロサイトに追加します。ボタンの色は、ブランドコンテナレベルで設定されたブランドカラーによって制御されます。
|
| 報酬交換 | 参加者が獲得した報酬を別の種類の報酬に交換できるようにします。
この機能を使用するには、 報酬交換 を設定しておく必要があります。
|
| 報酬テーブル | 参加者が獲得した報酬の一覧を表示します。手動報酬や、複数のAdvocateプログラムで獲得した報酬を含めることができます。
|
| 顧客メモ列 | 報酬テーブルに別のメモ列を追加します。報酬テーブルコンポーネント内に配置する必要があります。
|
| 日付列 | 報酬テーブルに別の日付列を追加します。報酬テーブルコンポーネント内に配置する必要があります。
|
| 報酬列 | 報酬テーブルに別の報酬列を追加します。報酬テーブルコンポーネント内に配置する必要があります。
|
| ソース列 | 報酬テーブルに別のソース列を追加します。報酬テーブルコンポーネント内に配置する必要があります。
|
| ステータス列 | 報酬テーブルに別のステータス列を追加します。報酬テーブルコンポーネント内に配置する必要があります。
|
マイクロサイトコンポーネント
*マイクロサイト* コンポーネントは主に、マイクロサイトの登録フォームおよびナビゲーションサイドバーに使用されます。これらのコンポーネントはプログラムウィジェットには追加できません。
| コンポーネント | 説明 |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| フォームチェックボックスフィールド | 登録フォームにチェックボックスを追加します。ボックスがチェックされたかどうかをAdvocate参加者のカスタムフィールドにマッピングできます。詳細については「マイクロサイト登録フォームの送信内容を表示する」を参照してください。
|
| フォームドロップダウンフィールド | カスタマイズ可能なリスト項目を持つドロップダウンリストを登録フォームに追加します。ユーザーが選択したリスト項目をAdvocate参加者のカスタムフィールドにマッピングできます。これについてはサポートにお問い合わせください。
|
| フォーム入力フィールド | 登録フォームに自由入力のテキスト入力フィールドを追加します。ユーザーが入力したテキストをAdvocate参加者のカスタムフィールドにマッピングできます。 サポートにお問い合わせください これについてのサポートをご希望の場合は。
|
| フォーム名前フィールド | 登録フォームに入力可能な名と姓のフィールドを追加します。
|
| サイドバー項目 | マイクロサイトのサイドバーナビゲーションに新しいページまたはリンクを追加します。マイクロサイトのログイン済みレイアウト内でのみ配置できます。
|
| フォームパスワードフィールド | 登録フォームに入力可能なパスワードフィールドを追加します。
|
インスタントアクセス
*インスタントアクセス* コンポーネントを使用すると、紹介された友人が標準の登録プロセスを経ずに素早く簡単に登録したり、報酬を受け取ったりできます。インスタントアクセスの紹介ウィジェットや友人登録フローを使用するプログラムに最適です。
| コンポーネント | 説明 |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| クーポンコード | Fuel Tank報酬用の引き換え可能なコードを表示します。
この 報酬Fuel Tank には、このコンポーネントが意図どおりに機能するために利用可能なクーポンコードが必要です。
|
| Advocate登録 | 新しいAdvocateがメールアドレスを入力して登録し、紹介を行えるようにします。メールアドレスを入力すると、ユーザーは2つ目の画面に移動し、そこで紹介シェアリンクにアクセスできます。インスタントアクセスWebsite Referral Widgetで使用されます。
|
| 現在のユーザーをサインアウト | 閲覧者がパーソナライズされたインスタントアクセス表示を終了できるようにします。
|
| 友人登録 | 紹介された友人がメールアドレスを入力して登録できるようにします。メールアドレスを入力すると、ユーザーは2つ目の画面に移動し、そこでクーポンコード報酬にアクセスできます。インスタントアクセスFriend Widgetで使用されます。
|
レイアウト
*レイアウト* コンポーネントを使用すると、他のコンポーネントを整理してグループ化できます。セクション、行、列、またはタブを作成するために使用してください。
| コンポーネント | 説明 |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 2カラムヒーローレイアウト | 2列のコンテンツを特徴とするヒーローレイアウトを追加します。
|
| 行レイアウトコンテナ | コンテンツ用の新しい行コンテナを追加します。行の中に他のコンポーネントを配置できます。
|
| 列レイアウトコンテナ | コンテンツ用の新しい列コンテナを追加します。列の中に他のコンポーネントを配置できます。
|
| タブ | 汎用タブグループに新しいタブを追加します。
|
| 汎用タブグループ | タブのグループを追加します。各タブには異なるコンポーネントやコンテンツを含めることができます。デフォルトでは3つのタブがありますが、必要に応じて削除または追加できます。
|
| 傾斜セクション | 見出しと段落テキストを含む新しいセクションを追加します。見出しの下に、Titled sectionに他のコンポーネントを追加できます。
|
請求書
*請求書* コンポーネントを使用すると、収益データを表示するための請求書コンポーネントを挿入できます。
| コンポーネント | 説明 |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| 請求書テーブル | 収益データを格納する展開可能な請求書アコーディオンを追加します。
|
| 請求書テーブル日付列 | 請求書テーブルコンポーネントに新しい列を追加します。
|
この *リーダーボード* コンポーネントを使用すると、プログラム参加者をランク付けし、上位成績者に報酬を提供し、参加者がプログラムでより大きな成果を上げるよう促進できます。リーダーボードを [確認済みアクセスウィジェット](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained.md) または [マイクロサイト](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview.md)に追加し、スコアリングシステム、ランキングシステム、参加者フィルタリングオプションを設定します。詳細については、以下の記事を参照してください：
* [リーダーボードの説明](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/leaderboards-explained.md)
* [リーダーボードを設定する](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/set-up-a-leaderboard.md)
| コンポーネント | 説明 |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 紹介開始 | このタイプのリーダーボードは、参加者を開始した紹介件数でランク付けします。顧客Advocateのスコアは、開始された紹介数に対応します。
|
| 紹介コンバージョン | このタイプのリーダーボードは、参加者をコンバージョンした紹介件数でランク付けします。紹介された友人が、定義した金額での購入などプログラム目標を達成すると、その紹介はコンバージョン済みと見なされます。顧客Advocateのスコアは、コンバージョンした紹介数に対応します。
|
| 獲得ポイント | このタイプのリーダーボードは、ポイントを報酬とするAdvocateプログラムで参加者が獲得したポイント総数に基づいてランク付けします。保留中またはキャンセル済みでない限り、すべての報酬単位ポイントがカウントされます。このリーダーボードタイプは、ポイント報酬タイプでのみ有効です。
|
| 匿名リーダーボード | 他のプログラム参加者に関する個人を特定できる情報を一切表示しない、完全に匿名化されたリーダーボードです。あらゆるリーダーボードタイプを表示できます。
|
税務と現金
*税務と現金* コンポーネントを使用すると、税務フォームの収集と現金払い出しオプションを [確認済みアクセスウィジェット](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained.md) または [マイクロサイト](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview.md).
このコンポーネントグループは、 [*現金払い出し*](/brand/ja/nitsuitebitaidesuka/advocate-program/advocate-rewards/pay-with-cash/cash-payouts-for-advocate-explained.md) 機能がアカウントで有効になっている場合にのみ利用できます。
| コンポーネント | 説明 |
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 払い出しステータスアラート | 参加者が現金払い出しを受ける前に必要な対応を知らせます。このコンポーネントには、参加者が払い出し設定を確認するためのCTAボタンが含まれています。
必要に応じて、参加者がこのコンポーネントを表示したときに目にするテキスト説明をカスタマイズできます。
|
| マイクロサイト＆ウィジェット現金払い出しフォーム | 参加者の銀行情報と、W-8やW-9など該当する税務フォームを収集するフォームを挿入します。
必要に応じて、参加者がフォームを表示したときに目にするテキスト説明をカスタマイズできます。
このコンポーネント内で、確認アラートと要件を設定することもできます。
|
共有
*共有* コンポーネントは、参加者が複数のチャネルで紹介リンクやコードを簡単に宣伝できる便利な方法を提供します。参加者が共有ボタンをクリックすると、選択したチャネル（たとえば *Facebook*, *LinkedIn*, *WhatsApp*、または *メール*）が開き、事前入力されたメッセージまたはリンクをすぐに送信できます。
Referral Code のような一部のコンポーネントは、参加者個別の紹介コードまたはプロモコードを、すばやく共有するためのクリップボードへのコピー機能とともに表示します。Promo Codes のような他のコンポーネントは、利用可能な複数のコード（割り当てられている場合）をスライダービューで提示し、共有ボタンも含まれているため、参加者は選択したコードを即座に投稿または送信できます。これらのツールにより、参加者は簡単に情報を広め、新たな紹介を促進できます。
| コンポーネント | 説明 |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 紹介コード | クリップボードにコピーするオプション付きの紹介コードフィールドを表示します。Promo Codes機能の一部として使用されます。
|
| プロモコード | 事前フォーマット済みのコンポーネントブロックで、複数のコードが割り当てられている場合にそれらを切り替えるスライダー付きの紹介プロモコードフィールドが含まれます。また、シェアリンク、Facebook、LinkedIn、Twitter / X の共有ボタンコンポーネントも含まれます。
|
| Facebook共有ボタン | カスタマイズ可能なテキスト付きのFacebookで共有ボタンを表示します。クリックすると、ブランドのソーシャルメッセージが事前に読み込まれた状態で、ユーザーのFacebookプロフィール上の新規投稿にリダイレクトします。
|
| X共有ボタン | カスタマイズ可能なテキスト付きのXで共有ボタンを表示します。クリックすると、ブランドのソーシャルメッセージが事前に読み込まれた状態で、ユーザーのXアカウント上の新規投稿にリダイレクトします。
|
| メール共有ボタン | カスタマイズ可能なテキスト付きのメールで共有ボタンを表示します。クリックすると、ユーザーのデフォルトのメールアプリケーションが開き、ブランドのソーシャルメッセージが事前に読み込まれた新規メールが作成されます。
|
| モバイル共有シートボタン | 参加者のWebブラウザー内で共有するためのボタンを表示します。クリックすると、ユーザーがリンクを共有するために開ける利用可能なすべてのアプリを一覧表示するメニューが開きます。アプリが選択されると、ブランドのソーシャルメッセージが事前に読み込まれた状態で新規投稿またはメッセージが作成されます。
|
| LinkedIn共有ボタン | カスタマイズ可能なテキスト付きのLinkedInで共有ボタンを表示します。クリックすると、ブランドのソーシャルメッセージが事前に読み込まれた状態で、ユーザーのLinkedInプロフィール上の新規投稿にリダイレクトします。
|
| SMS共有ボタン | カスタマイズ可能なテキスト付きの友人にテキスト送信ボタンを表示します。クリックすると、ユーザーのデフォルトのSMS/テキストメッセージアプリにリダイレクトし、ブランドのソーシャルメッセージが事前に読み込まれた新規SMS/テキストメッセージが作成されます。
|
| Messenger共有ボタン | カスタマイズ可能なテキスト付きのMessengerで共有ボタンを表示します。クリックすると、ブランドのソーシャルメッセージが事前に読み込まれた状態で、ユーザーのFacebook Messengerアプリ上の新規メッセージにリダイレクトします。
|
| WhatsApp共有ボタン | カスタマイズ可能なテキスト付きのWhatsAppで共有ボタンを表示します。クリックすると、ブランドのソーシャルメッセージが事前に読み込まれた状態で、ユーザーのWhatsAppアカウント上の新規メッセージにリダイレクトします。
|
| LINE共有ボタン | カスタマイズ可能なテキスト付きのLine Messengerで共有ボタンを表示します。クリックすると、ブランドのソーシャルメッセージが事前に読み込まれた状態で、ユーザーのLine Messengerアプリ上の新規メッセージにリダイレクトします。
|
| Pinterest共有ボタン | カスタマイズ可能なテキスト付きのPinterestで共有ボタンを表示します。クリックすると、ブランドのソーシャルメッセージが事前に読み込まれた状態で、ユーザーのPinterestプロフィール上の新規投稿にリダイレクトします。
|
| シェアリンク | このプログラム用の参加者のシェアリンクを表示します。
|
| QRコード | このプログラム用の参加者のシェアリンクをQRコード形式で表示します。
|
紹介数
*紹介* コンポーネントは、参加者が紹介した友人とそのコンバージョン状況に関する情報を表示します。誰を紹介したか、いつコンバージョンが発生したか、それらの紹介から獲得した報酬を参加者が簡単に追跡できるようにします。
| コンポーネント | 説明 |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 紹介カード | 次を含む事前フォーマット済みのコンポーネントブロックです： プログラムタイムライン , シェアリンク 、および Facebook , LinkedIn、 および Twitter / X 共有ボタンコンポーネント。必要に応じて他のコンポーネントを追加または削除できます。
|
| 紹介テーブル | 参加者が紹介した友人、コンバージョン日、コンバージョン状況を表示するテーブルを表示します。
|
| 紹介テーブル日付列 | 紹介テーブルに別の日付列を追加します。紹介テーブルコンポーネント内に配置する必要があります。
|
| 紹介テーブル報酬列 | 紹介テーブルに別の報酬列を追加します。紹介テーブルコンポーネント内に配置する必要があります。
|
| 紹介テーブルステータス列 | 紹介テーブルに別のステータス列を追加します。紹介テーブルコンポーネント内に配置する必要があります。
|
| 紹介テーブルユーザー列 | 紹介テーブルに別の顧客（紹介された友人）列を追加します。紹介テーブルコンポーネント内に配置する必要があります。
|
高度
高度なコンポーネントを使用すると、参加者に何をいつ表示するかをより細かく制御できます。コンテンツの条件付き表示、プログラムの上書き、その他の特殊な設定が可能になり、特定の対象向けに体験を調整できます。
| コンポーネント | 説明 |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 条件付きエリア / セグメント | 参加者が特定の ユーザーセグメント .
に属している場合にのみ、このセクションのコンテンツを表示します。ユーザーセグメントを設定するには、コンポーネントのプロパティを開き、 条件 フィールド内のJSONata式を編集します。
設定されたセグメント内のユーザーには、条件付きセクションに表示されているすべてのコンテンツが表示され、セグメント外のユーザーにはコンテンツは表示されません。
|
| 条件付きエリア / フィールド | 参加者プロフィール上の カスタムフィールド に特定の値が含まれている場合にのみ、このセクションのコンテンツを表示します。
カスタムフィールド名と値を設定するには、コンポーネントのプロパティを開き、 条件 フィールド内のJSONata式を編集します。
正しいカスタムフィールド値を持つユーザーには、条件付きセクションに表示されているすべてのコンテンツが表示され、正しいカスタムフィールド値を持たないユーザーにはコンテンツは表示されません。
|
| プログラムセクション | プログラムセクションコンポーネントを使用すると、子コンポーネントのプログラムIDを上書きできます。特定のプログラムに紐づかないコンテンツを表示したい場合に使用します。ほとんどのウィジェットおよびマイクロサイトテンプレートにデフォルトで含まれています。
|
タイポグラフィ
タイポグラフィコンポーネントを使用すると、書式設定されたテキストブロックをウィジェットまたはマイクロサイトに追加できます。次から選択してください：
* 段落
* 見出し1
* 見出し2
* 見出し3
* 見出し4
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.