# 自定义项目组件

#### 访问小组件编辑器

1. 在左侧导航菜单中，选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → 内容**.
2. 在 *小组件* 卡片中，选择 **编辑小组件。**
3. 在左侧滑出菜单中，选择你要编辑的小组件名称。

   <div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-54ffcf92fdcf6527acb6390b421de09f83d5a8f4%2F5d8a0b7afd11abc5f0db04be64b30635a1b0d697f529ce21338b6c8af1fa32df.jpg?alt=media" alt="" width="513"><figcaption></figcaption></figure></div>

#### 自定义你的小组件

{% stepper %}
{% step %}

#### **步骤 1：选择模板**

1. 在左侧滑出菜单中，位于 *当前小组件*下方，选择 **模板**.
2. 选择 **应用模板** ，位于你要从中开始的模板旁边。

   <div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-23c217eaab5f3d3a6ab40f1fe4282bd44c6ee667%2F225f0149361a6b987d2a69f1c8f8d6e006b237c6fc37f35bb439f5bac468c88a.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="success" %}
**注意：** 如果你想在不提交更改的情况下预览模板的外观，请在保存前选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[预览]** 。只有在你准备提交所做更改时，才选择 **保存** 按钮。
{% endhint %}
{% endstep %}

{% step %}

#### **步骤 2：调整小组件内容**

你可以添加、编辑、移动或移除组件，以修改你的客户倡导者在小组件中看到的内容。

{% hint style="success" %}
**注意：** 如需了解小组件编辑器各个元素的说明，请参阅 [小组件编辑器概览](https://help.impact.com/brand/zh/nin-xiang-liao-jie-shen-me/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-editor-overview).
{% endhint %}

{% tabs %}
{% tab title="添加" %}

1. 在页面右侧的 *组件* 菜单的 **添加** 选项卡中，选择一个组件组。
   * 了解更多关于 [可用组件](https://help.impact.com/brand/zh/nin-xiang-liao-jie-shen-me/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained) 以及它们如何分组。
2. 选择合适的组件。
3. 选择蓝色的 **添加到** 按钮，将组件放到你希望它在画布中出现的位置。

   <div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-faf3362b50a4598aeacff4ca831e5dcef8c7ef6e%2F346370cdced07562b504cd2b9bf6bf08b51539060e9551f784f029d4899ffa12.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="编辑" %}
你可以编辑的属性取决于你选择的组件类型。例如，如果你选择 *主视觉图片* 组件，你将可以选择新图片并更改背景颜色。如果你选择像标题这样的纯文本元素，则可以修改字体、文本颜色和文本内容。

1. 选择你想编辑的组件。
2. 使用 *组件* 菜单的 **编辑** 选项卡中的选项来更改其属性。

   * 如果你想在文本组件中插入链接，你可以 [通过编辑小组件的 HTML 来实现](https://help.impact.com/brand/zh/nin-xiang-liao-jie-shen-me/advocate-program/manage-advocate-participant-experiences/edit-your-widget-or-microsite-html-and-css-for-advocate).

   <div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3e26ab9dbdff4f8e5d3d3e078d965672ade44d45%2F026f0ef0af7421ecfab6535433ea587862ec12c5223e8b393ef1db1228676e1f.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="移动" %}

1. 在画布内，选择你想移动的组件。
2. 选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[移动]**.
   * 某些组件无法移动。只有在画布上存在另一个可供该组件移动到的有效位置时， ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9e2a26b918e7394cf67e8a26e3713e081b203ac9%2F15d049b0c04d1c54c39dbbb5a7cd2ba64d86f1f99220111674e768744ea7ceb9.svg?alt=media) **\[移动]** 选项才会显示。
3. 选择蓝色的 **移动到** 按钮，将组件移动到你希望它去的位置。

   * 你需要先选择按钮，然后再选择目标位置，而不是拖放。

   <div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-7bd9887e9f359c787f834a8344a181d7bb186dd3%2Faadaf737882c59604dcaa6bbed1857c867a32cad8c3dd8ea7975c047c04e6a3f.jpg?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="移除" %}

1. 在画布中选择你想移除的组件。
2. 选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c5ab8423372b2c345ded634b7aa4cab16c87fe3a%2Fd17a259fe817ff10ea9fd87140a89bd62ece6fa9940e05902574dcf95bed5960.svg?alt=media) **\[移除]**.

   <div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-030ab8fb2f678027aa57af859245968daee6f736%2F987319390fa75c5fb85f94d2d6e0a951fbf4511a72dbd91af4e55c8f39317301.jpg?alt=media" alt="" width="507"><figcaption></figcaption></figure></div>

{% endtab %}
{% endtabs %}
{% endstep %}

{% step %}

#### **步骤 3：自定义小组件外观和主题**

**添加图片或徽标**

1. 在右侧，从 *组件* 菜单的 **添加** 选项卡中，选择 **常用组件** 类别。
2. 请选择以下之一：
   * **叠加主视觉图片** （带有叠加的、可编辑文本的图片）
   * **图片** （普通图片，顶部没有文本）
3. 将图片添加到画布。
4. 从 *组件菜单的* **编辑** 选项卡中，选择 **选择文件** 按钮下方的 *图片* 标题。

   <div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-564558169dbd2a3efe25c902610d7278c257626b%2F47c2ef7ef4780763f8648b19a1a580e43f68104b6205f5de72c51bf8ae9d8a1c.jpg?alt=media" alt="" width="353"><figcaption></figcaption></figure></div>

**替换图片或徽标**

1. 在画布中，选择你想更改的照片。
2. 在 **编辑** 菜单中，选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-d05e21635c52fff94d35ca4c6b05c1deecc699ef%2F768d04f4d7e1b5b745577812f7d67db99d988bfc34749b6e575a04438d6cee36.svg?alt=media) **\[移除]** 然后选择 **选择文件** 以上传新图片。

   <div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-30ee95734c8150b1983dea767f0e729e157df91e%2F65602249ec03ef7f267348ae795f32755c8ca109ed253d98bab523b584b27f3e.jpg?alt=media" alt="" width="351"><figcaption></figcaption></figure></div>
3. 使用以下任一方法上传图片：
   * 拖放图片
   * 在你的电脑上浏览文件
   * 在 *网页地址* 选项卡，粘贴文件的公共 URL
4. 选择 **完成**.

**调整显示哪些分享按钮**

你可以使用 **编辑** 菜单编辑现有分享按钮。

1. 在画布中选择你想编辑的分享按钮。
2. 在 **编辑** 选项卡中，选择 *分享媒介* 标题。

   <div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-329fb56148698f747349956ce5d6d95859a7bc3a%2Fcb6384644531cbcceed4a4f72bac70c0883e383f8619f6e03f304e4e281919b2.jpg?alt=media" alt="" width="356"><figcaption></figcaption></figure></div>

使用 **添加** 菜单编辑现有分享按钮。

1. 从 **添加** 选项卡，选择 **分享**.

   <div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-e8ffcffaec4bcabee098c5811ceca22f74c38e9e%2F349cee3ff230764af0891ae493ab5b8af34a592711ec5a7b027a3fc5b77a02ef.jpg?alt=media" alt="" width="339"><figcaption></figcaption></figure></div>
2. 选择合适的卡片。
3. 选择蓝色的 **添加到** 按钮，将组件放到画布上。
   {% endstep %}

{% step %}

#### **步骤 4：预览并保存**

1. 通过选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[预览]** 从顶部菜单栏预览小组件将如何显示给参与者。
   * 你可以在以下体验预览之间切换： ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-ae8027a26340e35a4d47f2a067cfadc9fc78113f%2F286f2a6c1251052ae82b73cd1c52b622b18f5203ba9cc10fde4d74292ac28d34.png?alt=media) **\[桌面]**, ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-deeb14b0e398d5dbb2dfb280d3fd7d8e9411b26e%2F74c7be4be7f1d77a3793767c29c5bd878acceacf1d2533055231d5110b12dd61.png?alt=media) **\[平板]**，或 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6156958cf5fc18498276161791a0514d9005d7cf%2F906c40a4da5b9c02a51450974f61a71761acc07baff3052b53f708d5b768a9be.png?alt=media) **\[移动端]** 用户，只需选择相应的设备图标。
2. 要返回编辑界面，请选择 ![](https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-60e9ace573178da411cb3be9c6f3b0f4b7e5b524%2F4094fadf599e544cfc618c18eb22087defdb9be38a580cd0041a242a88294e1e.svg?alt=media) **\[编辑]** 从顶部菜单栏预览小组件将如何显示给参与者。

   <div data-with-frame="true"><figure><img src="https://1186853034-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-cebcc495d7dcfd7f7e3a77ab7061913c92b9dcf2%2F0138d6f68eff457694e6f8a5120f0165ae55112510f8928f35fc9771e5a97646.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>
3. **保存** 你的更改。

   <div data-gb-custom-block data-tag="hint" data-style="warning" class="hint hint-warning"><p><strong>警告：</strong> 小组件编辑器不会自动保存你的更改。请经常点击 <strong>保存</strong> ，以确保不会丢失你的工作。</p></div>

当你选择 **保存**时，更改将被添加到你的 [程序草稿](https://help.impact.com/brand/zh/nin-xiang-liao-jie-shen-me/advocate-program/getting-started-with-advocate/create-and-publish-a-program-draft-for-advocate).
{% endstep %}
{% endstepper %}

#### 高级自定义选项

高级组件可让你包含基于参与者的条件内容，例如其 *电子邮件*, *分组*，或 *自定义字段*。例如，如果你想只向金牌级订阅者显示排行榜， **基于分组的条件区块** 组件就可以让你实现这一点。

你可以从 **添加** 选项卡添加高级组件。设置它们需要多做一些工作，因为你需要在 [JSONata 表达式](http://docs.jsonata.org/overview.html) 中输入 *条件* 框，以定义满足条件时的逻辑。如果你需要帮助，请联系我们的 [支持团队](mailto:saasquatch-support@impact.com) 。

#### 了解更多

* [为 Advocate 编辑你的小组件或微型网站 HTML](#access-the-widget-editor-0-0)
* [为 Advocate 安装自定义 NPM 包](https://help.impact.com/brand/zh/nin-xiang-liao-jie-shen-me/advocate-program/manage-advocate-participant-experiences/install-custom-npm-packages-for-advocate)