> 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/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md).
# Widget 与 Microsite 组件详解
参加 PXA 课程
{% hint style="success" %}
**有限**：除给定模板中提供的组件外，其他组件仅适用于特定产品版本或附加组件。如果您希望更精细地控制微型网站使用哪些组件，请联系我们升级您的计划。
{% endhint %}
组件是构成您的 Advocate 计划小部件或微型网站的独立构件，例如主视觉图片和任务卡。这些元素塑造了 [参与者体验](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/introduction-to-participant-experiences.md) ，并且可以自定义以与您的品牌保持一致。
本文按类别列出了小部件和微型网站编辑器中可用的组件。大多数组件支持样式设置和自定义，但有些存在设计限制。您还可以在编辑器界面中预览组件状态。
统计数据
使用 *统计数据* 组件让参与者了解他们在计划中的表现。有关这些组件支持的统计数据列表，请访问 [小部件和微型网站统计数据](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-statistics-explained.md).
| 组件 | 说明 |
| ----------- | --------------------------------------------- |
| 积分余额 | 显示参与者的积分余额。用于以积分奖励参与者的 Advocate 计划。 |
| 已获得礼品卡 | 显示 Advocate 已获得的礼品卡奖励数量。 |
| 推荐 | 显示参与者已发起的推荐数量。包括已开始和已转化的推荐。 |
| 包含三项统计数据的容器 | 一个包含三项统计数据空间的模板。可更改显示的统计数据。可根据需要添加和删除统计数据。 |
| 其他统计数据 | 显示您选择的一项统计数据。您可以选择推荐统计数据、各种奖励统计数据，或构建自定义统计数据。 |
常用组件
*常用组件* 广泛用于增强小部件或微型网站的功能和设计一致性。它们涵盖主视觉图片、布局格式和描述性计划步骤等通用视觉与结构元素。
| 组件 | 说明 |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 双列主视觉图片 | 横跨两列的横幅图片和标题文本。可更新图片、文本和背景颜色。
|
| 叠加主视觉图片 | 带有叠加文本的横幅图片。可更新图片、文本和背景颜色。
|
| 图片 | 一张图片。可更改背景颜色、对齐方式、高度和宽度。
|
| 链接按钮 | 一个可点击的按钮，可将参与者重定向到您选择的链接。按钮颜色由品牌容器级别设置的品牌颜色控制。
|
| 计划说明 | 一个说明 Advocate 计划如何运作的模板，例如如何获得奖励。默认包含两个计划说明步骤，可添加更多步骤。颜色由品牌容器级别设置的品牌颜色控制。
|
| 计划说明步骤 | 添加说明性文本以解释计划的一部分内容。适用于计划说明组件内。颜色由品牌容器级别设置的品牌颜色控制。
|
| 计划时间线 | 展示参与者的推荐旅程和奖励概览。可根据需要添加或删除时间线条目。圆形图标及条目之间连线的颜色由品牌容器级别设置的品牌颜色控制。
|
| 时间线条目 | 适用于计划时间线组件内，用于显示推荐旅程中的一个步骤。圆形图标及条目之间连线的颜色由品牌容器级别设置的品牌颜色控制。
|
| 用户名显示 | 动态提取参与者的全名。如果参与者尚未输入姓名，默认显示为“匿名用户”。
|
奖励
{% hint style="info" %}
**注意：** *奖励* 组件只能用于已验证访问权限的小部件和微型网站。
{% endhint %}
| 组件 | 说明 |
| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 任务卡信息流 | 任务卡让用户可直接通过小部件或微型网站执行操作，或查看朝着 Advocate 计划目标的进度。此组件可向小部件或微型网站添加多个任务卡。按钮颜色由品牌容器级别设置的品牌颜色控制。
|
| 奖励兑换 | 允许参与者将已获得的奖励兑换为另一种奖励。
您必须已设置 奖励兑换 才能使用此功能。
|
| 奖励表格 | 显示参与者已获得的奖励列表。可包括手动奖励和/或在多个 Advocate 计划中获得的奖励。
|
| 客户备注列 | 向奖励表格添加另一备注列。必须置于奖励表格组件内。
|
| 日期列 | 向奖励表格添加另一日期列。必须置于奖励表格组件内。
|
| 奖励列 | 向奖励表格添加另一奖励列。必须置于奖励表格组件内。
|
| 来源列 | 向奖励表格添加另一来源列。必须置于奖励表格组件内。
|
| 状态列 | 向奖励表格添加另一状态列。必须置于奖励表格组件内。
|
微型网站组件
*微型网站* 组件主要用于您的微型网站注册表单和导航侧边栏。这些组件无法添加到计划小部件中。
| 组件 | 说明 |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 表单复选框字段 | 向注册表单添加复选框。您可以将是否勾选该框映射到 Advocate 参与者的自定义字段。请阅读“查看您的微型网站注册表单提交内容”以了解更多信息。
|
| 表单下拉字段 | 向注册表单添加包含可自定义列表项的下拉列表。您可以将用户选择的列表项映射到 Advocate 参与者的自定义字段。请联系支持团队获取协助。
|
| 表单输入字段 | 向注册表单添加自由格式的文本输入字段。您可以将用户输入的文本映射到 Advocate 参与者的自定义字段。 联系支持团队 以获取相关协助。
|
| 表单姓名字段 | 向注册表单添加可填写的名字和姓氏字段。
|
| 侧边栏项目 | 向微型网站的侧边栏导航添加新页面或链接。只能置于微型网站的已登录布局中。
|
| 表单密码字段 | 向注册表单添加可填写的密码字段。
|
即时访问
*即时访问* 组件让被推荐好友无需经过标准注册流程，即可快速轻松地注册或兑换奖励。它们非常适合使用即时访问推荐小部件或好友注册流程的计划。
| 组件 | 说明 |
| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 优惠券代码 | 显示可兑换的 Fuel Tank 奖励代码。
该 奖励 Fuel Tank 必须具有可用的优惠券代码，此组件才能按预期运行。
|
| Advocate 注册 | 允许新 Advocate 输入其电子邮件地址进行注册并发起推荐。输入电子邮件地址后，用户将进入第二个页面，可在其中访问其推荐分享链接。用于即时访问网站推荐小部件。
|
| 退出当前用户 | 允许查看者退出个性化的即时访问显示。
|
| 好友注册 | 允许被推荐好友输入其电子邮件地址进行注册。输入电子邮件地址后，用户将进入第二个页面，可在其中访问其优惠券代码奖励。用于即时访问好友小部件。
|
布局
*布局* 组件允许您整理并组合其他组件。使用它们可创建区块、行、列或选项卡。
| 组件 | 说明 |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 双列主视觉布局 | 添加具有两列内容的主视觉布局。
|
| 行布局容器 | 添加新的内容行容器。可在该行内放置其他组件。
|
| 列布局容器 | 添加新的内容列容器。可在该列内放置其他组件。
|
| 选项卡 | 向通用选项卡组添加新选项卡。
|
| 通用选项卡组 | 添加一组选项卡。每个选项卡可以包含不同的组件和内容。默认有三个选项卡，但可根据需要删除或添加选项卡。
|
| 倾斜区块 | 添加一个包含标题和段落文本的新区块。可在标题下方的标题区块中添加其他组件。
|
发票
*发票* 组件允许您插入发票组件以查看收益数据。
| 组件 | 说明 |
| ------- | ----------------------------------------------------------------------------------------------------------------------------- |
| 发票表格 | 添加一个可展开的发票折叠面板，其中包含收益数据。
|
| 发票表格日期列 | 向发票表格组件添加新列。
|
该 *排行榜* 组件允许您对计划参与者进行排名、向表现最佳者提供奖励，并激励参与者在计划中取得更大成果。将排行榜添加到您的 [已验证访问权限小部件](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained.md) 或 [微型网站](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview.md)，并配置计分系统、排名系统和参与者筛选选项。有关更多信息，请参阅以下文章：
* [排行榜说明](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/leaderboards-explained.md)
* [设置排行榜](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/set-up-a-leaderboard.md)
| 组件 | 说明 |
| ----- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 已开始推荐 | 此类排行榜根据参与者发起的推荐数量进行排名。您的客户 Advocate 得分将与已发起推荐的数量相对应。
|
| 已转化推荐 | 此类排行榜根据参与者已转化的推荐数量进行排名。一旦被推荐好友达成计划目标，例如完成您定义金额的购买，推荐即被视为已转化。您的客户 Advocate 得分将与已转化推荐的数量相对应。
|
| 已获得积分 | 此类排行榜根据参与者在奖励积分的 Advocate 计划中获得的积分总数进行排名。只要奖励单位积分未处于待处理或已取消状态，便会计入。此排行榜类型仅适用于积分奖励类型。
|
| 匿名排行榜 | 完全匿名化的排行榜版本，不显示其他计划参与者的任何个人身份信息。可显示任何排行榜类型。
|
税务和现金
*税务和现金* 组件让您可以在您的 [已验证访问权限小部件](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained.md) 或 [微型网站](/brand/zh/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview.md).
此组件组仅在您的账户已启用 [*现金付款*](/brand/zh/what-would-you-like-to-learn-about/advocate-program/advocate-rewards/pay-with-cash/cash-payouts-for-advocate-explained.md) 功能时可用。
| 组件 | 说明 |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 合作伙伴信息模态框 | 插入一个收集参与者国家和货币信息的模态框。此信息可确保参与者无需延迟或额外设置步骤即可获得奖励。
它具有两种可配置状态，具体取决于参与者的电子邮件是否已关联到现有账户：
新合作伙伴说明 ：向首次参与者显示。默认文案（“立即确认您的国家和货币，以便更快获得未来奖励”）会提示他们在获得分享链接前提供详细信息。现有合作伙伴说明 ：当参与者的电子邮件已与 impact.com 上的账户关联时显示。该模态框会预填其信息，并要求他们确认，而非从头重新输入。提醒参与者在获得现金付款前需要采取的操作。该组件包含一个行动号召按钮，可带领参与者查看其付款设置。
您可以选择自定义参与者查看该组件时将看到的任何文本说明。
|
| 微型网站和小部件现金付款表单 | 插入一个收集参与者银行信息及任何适用税务表单（如 W-8 或 W-9）的表单。
您可以选择自定义参与者查看表单时将看到的任何文本说明。
您还可以在此组件中设置验证提醒和要求。
|
分享
*分享* 组件为参与者提供便捷方式，可通过多个渠道推广其推荐链接和代码。当参与者点击分享按钮时，会打开所选渠道，例如 *Facebook*, *LinkedIn*, *WhatsApp*，或 *电子邮件*，其中预填了可直接发送的消息或链接。
某些组件（如推荐代码）会显示参与者的个人推荐代码或促销代码，并提供复制到剪贴板选项以便快速分享。其他组件（如促销代码）会以滑块视图展示多个可用代码（如已分配），并包含分享按钮，使参与者能够立即发布或发送所选代码。这些工具让参与者能够轻松传播信息并推动新的推荐。
| 组件 | 说明 |
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 推荐代码 | 显示带有复制到剪贴板选项的推荐代码字段。作为促销代码功能的一部分使用。
|
| 促销代码 | 预格式化组件块，包含推荐促销代码字段；如果分配了多个代码，可使用滑块在不同代码之间切换。它还包含分享链接以及 Facebook、LinkedIn 和 Twitter / X 分享按钮组件。
|
| Facebook 分享按钮 | 显示带有可自定义文本的“分享到 Facebook”按钮。点击后，按钮将重定向至用户 Facebook 个人资料上的新帖文，其中预加载了品牌的社交消息。
|
| X 分享按钮 | 显示带有可自定义文本的“通过 X 分享”按钮。点击后，按钮将重定向至用户 X 账户上的新帖文，其中预加载了品牌的社交消息。
|
| 电子邮件分享按钮 | 显示带有可自定义文本的“通过电子邮件分享”按钮。点击后，按钮将打开用户的默认电子邮件应用程序，并新建一封预加载品牌社交消息的电子邮件。
|
| 移动端分享面板按钮 | 显示一个可在参与者网页浏览器内分享的按钮。点击后，按钮将打开一个菜单，列出用户可以打开以分享链接的所有可用应用。选择应用后，将创建一条预加载品牌社交消息的新帖文或消息。
|
| LinkedIn 分享按钮 | 显示带有可自定义文本的“分享到 LinkedIn”按钮。点击后，按钮将重定向至用户 LinkedIn 个人资料上的新帖文，其中预加载了品牌的社交消息。
|
| 短信分享按钮 | 显示带有可自定义文本的“给好友发短信”按钮。点击后，按钮将重定向至用户默认的 SMS/短信应用，并创建一条预加载品牌社交消息的新 SMS/短信。
|
| Messenger 分享按钮 | 显示带有可自定义文本的“通过 Messenger 分享”按钮。点击后，按钮将重定向至用户 Facebook Messenger 应用中的新消息，其中预加载了品牌的社交消息。
|
| WhatsApp 分享按钮 | 显示带有可自定义文本的“通过 WhatsApp 分享”按钮。点击后，按钮将重定向至用户 WhatsApp 账户中的新消息，其中预加载了品牌的社交消息。
|
| LINE 分享按钮 | 显示带有可自定义文本的“通过 Line Messenger 分享”按钮。点击后，按钮将重定向至用户 Line Messenger 应用中的新消息，其中预加载了品牌的社交消息。
|
| Pinterest 分享按钮 | 显示带有可自定义文本的“分享到 Pinterest”按钮。点击后，按钮将重定向至用户 Pinterest 个人资料上的新帖文，其中预加载了品牌的社交消息。
|
| 分享链接 | 显示参与者在此计划中的分享链接。
|
| 二维码 | 以二维码形式显示参与者在此计划中的分享链接。
|
推荐
*推荐* 组件显示参与者被推荐好友及其转化状态的信息。它们使参与者能够轻松追踪其推荐对象、转化发生时间以及从这些推荐中获得的任何奖励。
| 组件 | 说明 |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 推荐卡 | 预格式化组件块，包含 计划时间线 , 分享链接 ，以及 Facebook , LinkedIn、 和 Twitter / X 分享按钮组件。可根据需要添加或删除其他组件。
|
| 推荐表格 | 显示一个表格，展示参与者被推荐好友、转化日期和转化状态。
|
| 推荐表格日期列 | 向推荐表格添加另一日期列。必须置于推荐表格组件内。
|
| 推荐表格奖励列 | 向推荐表格添加另一奖励列。必须置于推荐表格组件内。
|
| 推荐表格状态列 | 向推荐表格添加另一状态列。必须置于推荐表格组件内。
|
| 推荐表格用户列 | 向推荐表格添加另一客户（被推荐好友）列。必须置于推荐表格组件内。
|
高级
高级组件让您能够更好地控制参与者看到什么内容以及何时看到。它们支持内容条件显示、计划覆盖和其他专用配置，可帮助针对特定受众定制体验。
| 组件 | 说明 |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 条件区域 / 细分 | 仅当参与者属于某个 用户细分 .
时，才在此区块中显示内容。要设置用户细分，请打开组件属性，并编辑 条件 字段中的 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/zh/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.