> 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プログラムで獲得した報酬を含めることができます。
|
| 顧客メモ列 | 報酬テーブルにメモ列を追加します。Reward table コンポーネント内に配置する必要があります。
|
| 日付列 | 報酬テーブルに日付列を追加します。Reward table コンポーネント内に配置する必要があります。
|
| 報酬列 | 報酬テーブルに報酬列を追加します。Reward table コンポーネント内に配置する必要があります。
|
| ソース列 | 報酬テーブルにソース列を追加します。Reward table コンポーネント内に配置する必要があります。
|
| ステータス列 | 報酬テーブルにステータス列を追加します。Reward table コンポーネント内に配置する必要があります。
|
マイクロサイトのコンポーネント
*マイクロサイト* コンポーネントは主に、マイクロサイトの登録フォームとナビゲーションサイドバーで使用されます。これらのコンポーネントはプログラムウィジェットには追加できません。
| コンポーネント | 説明 |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| フォームのチェックボックス項目 | 登録フォームにチェックボックスを追加します。チェックが入っているかどうかを、Advocate参加者のカスタムフィールドにマッピングできます。詳細は「マイクロサイト登録フォームの送信内容を表示する」を参照してください。
|
| フォームのドロップダウン項目 | カスタマイズ可能なリスト項目を持つドロップダウンリストを登録フォームに追加します。ユーザーが選択したリスト項目を、Advocate参加者のカスタムフィールドにマッピングできます。これについてはサポートまでお問い合わせください。
|
| フォームの入力項目 | 自由形式のテキスト入力項目を登録フォームに追加します。ユーザーが入力したテキストを、Advocate参加者のカスタムフィールドにマッピングできます。 サポートにお問い合わせください これについてはサポートまでお問い合わせください。
|
| フォームの名前項目 | 登録フォームに入力可能な名と姓の項目を追加します。
|
| サイドバー項目 | マイクロサイトのサイドバーナビゲーションに新しいページまたはリンクを追加します。マイクロサイトのログイン済みレイアウト内にのみ配置できます。
|
| フォームのパスワード項目 | 登録フォームに入力可能なパスワード項目を追加します。
|
即時アクセス
*即時アクセス* コンポーネントを使うと、紹介された友人が標準の登録手続きを経ずに、サインアップしたり報酬を受け取ったりするのが簡単になります。即時アクセスの紹介ウィジェットや友人登録フローを使うプログラムに最適です。
| コンポーネント | 説明 |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| クーポンコード | Fuel Tank 報酬用の引き換え可能なコードを表示します。
この 報酬燃料タンク このコンポーネントを意図どおりに機能させるには、利用可能なクーポンコードが必要です。
|
| Advocate登録 | 新しいAdvocateがメールアドレスを入力して登録し、紹介を行えるようにします。メールアドレスを入力すると、ユーザーは2つ目の画面に移動し、紹介用共有リンクにアクセスできます。即時アクセスのウェブサイト紹介ウィジェットで使用されます。
|
| 現在のユーザーをサインアウト | 表示中のユーザーが個別の即時アクセス表示を終了できるようにします。
|
| 友だち登録 | 紹介された友人がメールアドレスを入力して登録できるようにします。メールアドレスを入力すると、ユーザーは2つ目の画面に移動し、クーポンコード報酬にアクセスできます。即時アクセスの友だちウィジェットで使用されます。
|
レイアウト
*レイアウト* コンポーネントを使うと、他のコンポーネントを整理してまとめることができます。セクション、行、列、タブの作成に使用します。
| コンポーネント | 説明 |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 2列ヒーローレイアウト | 2列のコンテンツを備えたヒーローレイアウトを追加します。
|
| 行レイアウトコンテナ | コンテンツ用の新しい行コンテナを追加します。行内には他のコンポーネントを配置できます。
|
| 列レイアウトコンテナ | コンテンツ用の新しい列コンテナを追加します。列内には他のコンポーネントを配置できます。
|
| タブ | 汎用タブグループに新しいタブを追加します。
|
| 汎用タブグループ | タブのグループを追加します。各タブには別々のコンポーネントやコンテンツを含められます。既定では3つのタブがありますが、必要に応じて削除または追加できます。
|
| 見出し付きセクション | 見出しと段落テキストを含む新しいセクションを追加します。見出しの下に、Titled section に他のコンポーネントを追加できます。
|
請求書
*請求書* コンポーネントを使うと、収益データを表示するための請求書コンポーネントを挿入できます。
| コンポーネント | 説明 |
| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 請求書テーブル | 収益データを含む展開可能な請求書アコーディオンを追加します。
|
| 請求書テーブルの日付列 | 請求書テーブルコンポーネントに新しい列を追加します。
|
この *リーダーボード* コンポーネントを使うと、プログラム参加者を順位付けし、上位者に報酬を提供し、参加者の意欲を高めてプログラムでより良い成果を促進できます。リーダーボードを次に追加できます [認証済みアクセスウィジェット](/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つの設定可能な状態があります。
新規パートナーの説明 : 初回参加者に表示されます。既定の文面（「今後の報酬をより早く受け取るため、今すぐ国と通貨を確認してください」）は、共有リンクを受け取る前に詳細情報の入力を促します。既存パートナーの説明 : 参加者のメールアドレスがすでに impact.com のアカウントに関連付けられている場合に表示されます。モーダルは情報をあらかじめ入力し、最初から入力し直すのではなく確認を求めます。現金支払いを受け取る前に必要な対応を参加者に知らせます。このコンポーネントには、参加者を支払い設定の確認ページへ移動させるCTAボタンが含まれています。
必要に応じて、参加者がコンポーネントを表示したときに見えるテキスト説明を任意でカスタマイズできます。
|
| マイクロサイトとウィジェットの現金支払いフォーム | 参加者の銀行情報と、W-8やW-9など該当する税務フォームを収集するフォームを挿入します。
必要に応じて、参加者がフォームを表示したときに見えるテキスト説明を任意でカスタマイズできます。
このコンポーネント内で検証アラートや要件を設定することもできます。
|
共有
*共有* コンポーネントを使うと、参加者は複数のチャネルを通じて紹介リンクやコードを簡単に宣伝できます。参加者が共有ボタンをクリックすると、 *Facebook*, *LinkedIn*, *WhatsApp*、または *メールアドレス*など、選択したチャネルがあらかじめ入力されたメッセージまたはリンクとともに開き、そのまま送信できます。
紹介コードのように、参加者固有の紹介コードやプロモコードをコピーして共有できるオプション付きで表示するコンポーネントもあります。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 の共有ボタンコンポーネント。必要に応じて他のコンポーネントを追加または削除できます。
|
| 紹介テーブル | 参加者が紹介した友人、成約日、成約状況を示すテーブルを表示します。
|
| 紹介テーブルの日付列 | 紹介テーブルに別の日付列を追加します。Referral table コンポーネント内に配置する必要があります。
|
| 紹介テーブルの報酬列 | 紹介テーブルに別の報酬列を追加します。Referral table コンポーネント内に配置する必要があります。
|
| 紹介テーブルのステータス列 | 紹介テーブルに別のステータス列を追加します。Referral table コンポーネント内に配置する必要があります。
|
| 紹介テーブルのユーザー列 | 紹介テーブルに別の顧客（紹介された友人）列を追加します。Referral table コンポーネント内に配置する必要があります。
|
詳細設定
高度なコンポーネントを使うと、参加者に何をいつ見せるかをより細かく制御できます。条件付き表示、プログラムの上書き、その他の特殊な設定により、特定の対象に合わせて体験を調整できます。
| コンポーネント | 説明 |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 条件付きエリア / セグメント | 参加者が特定の ユーザーセグメント .
ユーザーセグメントを設定するには、コンポーネントのプロパティを開き、次の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.
