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