> 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).
# 组件和微站元素说明
参加 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 输入电子邮件地址进行注册并发起推荐。输入电子邮件地址后，用户将进入第二个屏幕，在那里他们可以访问其推荐分享链接。用于即时访问的 Website Referral Widget。
|
| 退出当前用户 | 允许查看者退出个性化的即时访问界面。
|
| 好友注册 | 允许被推荐的好友输入电子邮件地址进行注册。输入电子邮件地址后，用户将进入第二个屏幕，在那里他们可以访问其优惠码奖励。用于即时访问的好友小部件。
|
布局
*布局* 组件可让你组织并将其他组件组合在一起。可用于创建区块、行、列或选项卡。
| 组件 | 说明 |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 双栏主视觉布局 | 添加一个包含两列内容的主视觉布局。
|
| 行布局容器 | 为内容添加一个新的行容器。可在该行内放置其他组件。
|
| 列布局容器 | 为内容添加一个新的列容器。可在该列内放置其他组件。
|
| 选项卡 | 向通用选项卡组添加一个新选项卡。
|
| 通用选项卡组 | 添加一组选项卡。每个选项卡可包含不同的组件和内容。默认包含三个选项卡，但可按需删除或添加。
|
| 标题区块 | 添加一个包含标题和段落文本的新区块。其他组件可添加到标题区块的标题下方。
|
发票
*发票* 组件可让你插入发票组件以查看收益数据。
| 组件 | 说明 |
| ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 发票表格 | 添加一个可展开的发票折叠面板，其中包含收益数据。
|
| 发票表格日期列 | 为你的发票表格组件添加一个新列。
|
该 *排行榜* 组件可让你对程序参与者进行排名，向表现最佳者提供奖励，并激励参与者为你的程序带来更好的结果。可将排行榜添加到你的 [已验证访问小部件](/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 程序中获得的积分总数进行排名。只要奖励单位为积分且不是待处理或已取消状态，都会计入。此排行榜类型仅适用于积分奖励类型。
|
| 匿名排行榜 | 完全匿名化的排行榜版本，不显示其他程序参与者的任何个人身份信息。可显示任何排行榜类型。
|
税务和现金
*税务和现金* 组件可让你在你的流程中整合税务表单收集和现金支付选项。 [已验证访问小部件](/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 个人主页上的一篇新帖子，并预先填充品牌的社交消息。
|
| 短信分享按钮 | 显示一个“发短信给好友”按钮，并可自定义文本。点击后，按钮会重定向到用户默认的短信/文字消息应用，并创建一条预先填充品牌社交消息的新短信/文字消息。
|
| 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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
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 what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.
