> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md). # ウィジェットとマイクロサイトのコンポーネントの説明 PXAコースを受講する {% hint style="success" %} **限定**：コンポーネントは、提供されたテンプレートに含まれるものを除き、特定の製品エディションまたはアドオンでのみ利用できます。マイクロサイトで使用するコンポーネントをより細かく制御したい場合は、プログラムのアップグレードについてお問い合わせください。 {% endhint %} コンポーネントは、ヒーロー画像やタスクカードのような個々の構成要素で、Advocateプログラムのウィジェットやマイクロサイトを構成します。これらの要素が [参加者の体験](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/introduction-to-participant-experiences.md) を形づくり、ブランドに合わせてカスタマイズできます。 この記事では、ウィジェットおよびマイクロサイトのエディタで利用できるコンポーネントをカテゴリ別に一覧で紹介します。ほとんどのコンポーネントはスタイル設定とカスタマイズに対応していますが、一部にはデザイン上の制限があります。エディタ画面内でコンポーネントの状態をプレビューすることもできます。
統計 利用 *統計* コンポーネントを使って、参加者にプログラムでの進捗を知らせましょう。これらのコンポーネントがサポートする統計の一覧は、 [ウィジェットとマイクロサイトの統計](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-statistics-explained.md). | コンポーネント | 説明 | | -------------- | --------------------------------------------------------------- | | ポイント残高 | 参加者のポイント残高を表示します。ポイントで参加者に報酬を与えるAdvocateプログラムで使用されます。 | | 獲得したギフトカード | Advocateが獲得したギフトカード報酬の件数を表示します。 | | 紹介 | 参加者が行った紹介数を表示します。開始済みの紹介とコンバージョン済みの紹介が含まれます。 | | 3つの統計を表示するコンテナ | 3つの統計を表示するためのスペースを備えたテンプレートです。表示する統計は変更できます。必要に応じて統計を追加・削除できます。 | | その他の統計 | 任意の統計を表示します。紹介統計、各種報酬統計、またはカスタム統計から選択できます。 |
共通コンポーネント *共通コンポーネント* は、ウィジェットやマイクロサイト全体の機能性とデザインの一貫性を高めるために広く使用されます。ヒーロー画像、レイアウトの整形、説明用のプログラム手順など、汎用的な視覚要素や構造要素を含みます。 | コンポーネント | 説明 | | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | 2列ヒーロー画像 |

2列にまたがるバナー画像と見出しテキストです。画像、テキスト、背景色を更新できます。

| | オーバーレイヒーロー画像 |

テキストが重ねられたバナー画像です。画像、テキスト、背景色を更新できます。

| | 画像 |

画像です。背景色、配置、高さ、幅を変更できます。

| | リンクボタン |

参加者を選択したリンクへリダイレクトするクリック可能なボタンです。ボタンの色は、Brand Containerレベルで設定されたブランドカラーによって制御されます。

| | プログラムの説明 |

報酬の獲得方法など、Advocateプログラムの仕組みを説明するテンプレートです。既定で2つのプログラム説明ステップが含まれます。ステップは追加できます。色はBrand Containerレベルで設定されたブランドカラーによって制御されます。

| | プログラム説明ステップ |

プログラムの一部を説明するための説明テキストを追加します。プログラム説明コンポーネント内に収まります。色はBrand Containerレベルで設定されたブランドカラーによって制御されます。

| | プログラムのタイムライン |

紹介の流れと参加者向け報酬の概要を表示します。必要に応じてタイムライン項目を追加または削除できます。項目間の円アイコンと線の色は、Brand Containerレベルで設定されたブランドカラーによって制御されます。

| | タイムライン項目 |

プログラムのタイムラインコンポーネント内に配置され、紹介の流れの1ステップを表示します。項目間の円アイコンと線の色は、Brand Containerレベルで設定されたブランドカラーによって制御されます。

| | ユーザー名の表示 |

参加者のフルネームを動的に取得します。参加者が名前を入力していない場合は、既定で「Anonymous User」が表示されます。

|
報酬 {% hint style="info" %} **注：** *報酬* コンポーネントは、認証済みアクセスのウィジェットとマイクロサイトでのみ使用できます。 {% endhint %} | コンポーネント | 説明 | | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | タスクカードフィード |

タスクカードを使うと、ユーザーはウィジェットやマイクロサイト上で直接アクションを実行したり、Advocateプログラムの目標に対する進捗を確認したりできます。このコンポーネントは、複数のタスクカードをウィジェットまたはマイクロサイトに追加します。ボタンの色は、Brand Containerレベルで設定されたブランドカラーによって制御されます。

| | 報酬交換 |

参加者が獲得した報酬を別の種類の報酬に交換できるようにします。

必要です 報酬交換 この機能を使用できるように設定されている必要があります。

| | 報酬テーブル |

参加者が獲得した報酬の一覧を表示します。手動報酬や、複数のAdvocateプログラムで獲得した報酬を含めることができます。

| | 顧客メモ列 |

報酬テーブルにメモ列を追加します。報酬テーブルコンポーネント内に配置する必要があります。

| | 日付列 |

報酬テーブルに日付列を追加します。報酬テーブルコンポーネント内に配置する必要があります。

| | 報酬列 |

報酬テーブルに報酬列を追加します。報酬テーブルコンポーネント内に配置する必要があります。

| | ソース列 |

報酬テーブルにソース列を追加します。報酬テーブルコンポーネント内に配置する必要があります。

| | ステータス列 |

報酬テーブルにステータス列を追加します。報酬テーブルコンポーネント内に配置する必要があります。

|
マイクロサイトコンポーネント *マイクロサイト* コンポーネントは主に、マイクロサイトの登録フォームとナビゲーションサイドバーで使用されます。これらのコンポーネントはプログラムウィジェットに追加できません。 | コンポーネント | 説明 | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | フォームのチェックボックスフィールド |

登録フォームにチェックボックスを追加します。チェック済みかどうかを、Advocate参加者のカスタムフィールドにマッピングできます。詳細は「マイクロサイト登録フォームの送信内容を表示する」をご覧ください。

| | フォームのドロップダウンフィールド |

登録フォームに、リスト項目をカスタマイズできるドロップダウンリストを追加します。ユーザーが選択したリスト項目を、Advocate参加者のカスタムフィールドにマッピングできます。これについてはサポートまでお問い合わせください。

| | フォームの入力フィールド |

登録フォームに自由記述のテキスト入力フィールドを追加します。ユーザーが入力したテキストを、Advocate参加者のカスタムフィールドにマッピングできます。 サポートにお問い合わせください 。

| | フォームの名前フィールド |

登録フォームに、入力可能な名と姓のフィールドを追加します。

| | サイドバー項目 |

マイクロサイトのサイドバーナビゲーションに新しいページまたはリンクを追加します。マイクロサイトのログイン済みレイアウト内でのみ配置できます。

| | フォームのパスワードフィールド |

登録フォームに入力可能なパスワードフィールドを追加します。

|
即時アクセス *即時アクセス* コンポーネントを使うと、紹介された友人が通常の登録手順を踏まずに、すばやく簡単にサインアップしたり報酬を引き換えたりできます。即時アクセスの紹介ウィジェットや友人登録フローを使用するプログラムに最適です。 | コンポーネント | 説明 | | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | クーポンコード |

Fuel Tank報酬の引き換え可能なコードを表示します。

この リワードFuel Tank に、このコンポーネントを意図どおりに動作させるための利用可能なクーポンコードが必要です。

| | Advocate登録 |

新しいAdvocateがメールアドレスを入力して登録し、紹介を行えるようにします。メールアドレスを入力すると、ユーザーは2つ目の画面に移動し、紹介用の共有リンクにアクセスできます。即時アクセスのWebsite Referral Widgetで使用されます。

| | 現在のユーザーをサインアウト |

閲覧者が個別化された即時アクセス表示を終了できるようにします。

| | 友だち登録 |

紹介された友だちがメールアドレスを入力して登録できるようにします。メールアドレスを入力すると、ユーザーは2つ目の画面に移動し、クーポンコード報酬にアクセスできます。即時アクセスのFriend Widgetで使用されます。

|
レイアウト *レイアウト* コンポーネントを使うと、他のコンポーネントを整理してまとめることができます。セクション、行、列、タブの作成に使用します。 | コンポーネント | 説明 | | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 2列ヒーローレイアウト |

2列のコンテンツを備えたヒーローレイアウトを追加します。

| | 行レイアウトコンテナ |

コンテンツ用の新しい行コンテナを追加します。行の中に他のコンポーネントを配置できます。

| | 列レイアウトコンテナ |

コンテンツ用の新しい列コンテナを追加します。列の中に他のコンポーネントを配置できます。

| | タブ |

一般的なタブグループに新しいタブを追加します。

| | 一般タブグループ |

タブのグループを追加します。各タブには異なるコンポーネントやコンテンツを含めることができます。既定では3つのタブがありますが、必要に応じて削除または追加できます。

| | タイトル付きセクション |

見出しと段落テキストを含む新しいセクションを追加します。見出しの下に、タイトル付きセクションへ他のコンポーネントを追加できます。

|
請求書 *請求書* コンポーネントを使うと、請求書コンポーネントを挿入して収益データを表示できます。 | コンポーネント | 説明 | | ----------- | ------------------------------------------------------------------------------------------------------------------------------------- | | 請求書テーブル |

収益データを格納する展開可能な請求書アコーディオンを追加します。

| | 請求書テーブルの日付列 |

請求書テーブルコンポーネントに新しい列を追加します。

|
この *リーダーボード* コンポーネントを使うと、プログラム参加者をランク付けし、上位者に報酬を与え、参加者の意欲を高めてプログラムの成果向上を促すことができます。リーダーボードを [認証済みアクセスのウィジェット](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained.md) または [マイクロサイト](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview.md)に追加し、スコアリングシステム、ランキングシステム、参加者フィルタリングのオプションを設定します。詳細は以下の記事をご覧ください： * [リーダーボードの説明](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/leaderboards-explained.md) * [リーダーボードの設定](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/set-up-a-leaderboard.md) | コンポーネント | 説明 | | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 紹介開始 |

この種類のリーダーボードは、開始した紹介の数に基づいて参加者をランク付けします。顧客アドボケイトのスコアは、開始した紹介数に対応します。

| | 紹介コンバージョン |

この種類のリーダーボードは、コンバージョンした紹介の数に基づいて参加者をランク付けします。紹介は、紹介された友だちが、あなたが定義した金額の購入などのプログラム目標を達成すると、コンバージョン済みと見なされます。顧客アドボケイトのスコアは、コンバージョンした紹介数に対応します。

| | 獲得ポイント |

この種類のリーダーボードは、ポイント報酬を与えるAdvocateプログラムで参加者が獲得したポイントの総数に基づいてランク付けします。保留中またはキャンセル済みでない限り、すべての報酬単位のポイントがカウントされます。このリーダーボードの種類は、ポイント報酬タイプにのみ有効です。

| | 匿名リーダーボード |

他のプログラム参加者の個人を特定できる情報を一切表示しない、完全に匿名化されたリーダーボード版です。あらゆる種類のリーダーボードを表示できます。

|
税金と現金 *税金と現金* コンポーネントを使うと、税務フォームの収集と現金支払いのオプションを [認証済みアクセスのウィジェット](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained.md) または [マイクロサイト](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview.md). このコンポーネントグループは、 [*現金支払い*](/brand/ja/what-would-you-like-to-learn-about/advocate-program/advocate-rewards/pay-with-cash/cash-payouts-for-advocate-explained.md) 機能がアカウントで有効になっている場合にのみ利用できます。 | コンポーネント | 説明 | | ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | パートナー情報モーダル |

参加者の国と通貨情報を収集するモーダルを挿入します。この情報により、参加者は遅延や追加の設定手順なしで報酬を受け取れます。

参加者のメールアドレスが既存のアカウントにすでに関連付けられているかどうかに応じて、2つの設定可能な状態があります：

| | 支払いステータスアラート |

参加者が現金支払いを受け取る前に行う必要がある操作を通知します。このコンポーネントには、参加者を支払い設定の確認画面へ移動させるCTAボタンが含まれます。

必要に応じて、参加者がコンポーネントを表示したときに目にするテキスト説明を任意でカスタマイズできます。

| | マイクロサイト＆ウィジェットの現金支払いフォーム |

参加者の銀行情報と、W-8やW-9のような該当する税務フォームを収集するフォームを挿入します。

必要に応じて、参加者がフォームを表示したときに目にするテキスト説明を任意でカスタマイズできます。

このコンポーネント内で検証アラートや要件を設定することもできます。

|
共有 *共有* コンポーネントを使うと、参加者は紹介リンクやコードを複数のチャネルで手軽に宣伝できます。参加者が共有ボタンをクリックすると、 *Facebook*, *LinkedIn*, *WhatsApp*または *メール*など、選択したチャネルが開き、事前入力されたメッセージやリンクをそのまま送信できます。 紹介コードのように、参加者固有の紹介コードやプロモコードをクリップボードへコピーするオプション付きで表示するコンポーネントもあります。Promo Codes のように、複数の利用可能なコードが割り当てられている場合はスライダー表示で提示し、参加者が選択したコードをすぐに投稿または送信できる共有ボタンを含むものもあります。これらのツールにより、参加者は簡単に情報を広め、新しい紹介を促進できます。 | コンポーネント | 説明 | | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | 紹介コード |

紹介コード欄を、クリップボードへコピーするオプション付きで表示します。Promo Codes機能の一部として使用されます。

| | プロモコード |

あらかじめ整形されたコンポーネントブロックで、紹介プロモコード欄が含まれます。1つ以上割り当てられている場合は、スライダーでさまざまなコードを切り替えられます。共有リンクと、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式を編集します。

フィールド内のJSONata式を編集します。正しいカスタムフィールド値を持つユーザーには条件付きセクションのすべてのコンテンツが表示されますが、正しいカスタムフィールド値を持たないユーザーには表示されません。

| | プログラムセクション |

プログラムセクションコンポーネントを使用すると、子コンポーネントのプログラムIDを上書きできます。特定のプログラムに関連付けられていないコンテンツを表示したい場合に使用します。ほとんどのウィジェットおよびマイクロサイトのテンプレートに既定で含まれています。

|
タイポグラフィ タイポグラフィコンポーネントを使うと、ウィジェットやマイクロサイトに整形済みのテキストブロックを追加できます。以下から選択できます： * 段落 * 見出し1 * 見出し2 * 見出し3 * 見出し4
--- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://help.impact.com/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.