> 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/edit-your-widget-or-microsite-html-and-css-for-advocate.md).

# 为 Advocate 编辑您的小组件或微站 HTML 和 CSS

你可以使用额外的 HTML 和 CSS 自定义你的 Advocate 小组件和 microsite，以更好地与你品牌的外观和风格保持一致。使用 Advocate 内置的 HTML 编辑器，你可以添加结构、样式，甚至覆盖某些默认组件，以实现更深层的自定义。

{% hint style="info" %}
**注意**: 自定义 HTML/CSS 编辑仅适用于特定的 Advocate 版本。联系 [支持](mailto:saasquatch-support@impact.com) 以升级你的账户并访问此功能。
{% endhint %}

#### 为什么要使用自定义 HTML 或 CSS？

自定义 HTML 和行内 CSS 可让你：

* 更贴近地符合你公司的品牌规范
* 重新调整布局和间距
* 应用默认编辑器中不提供的样式
* 覆盖所选小组件或 microsite 组件的样式

{% hint style="warning" %}
**重要**: 我们的支持团队仅对自定义代码引入的问题提供有限协助。如果你不确定，建议与你的 Advocate 实施团队或上线后团队合作。
{% endhint %}

#### 编辑 HTML 或 CSS

{% tabs %}
{% tab title="编辑你的 microsite" %}
你可以使用内置的 HTML 编辑器编辑 HTML 或 CSS，为你的 microsite 进行进一步自定义。虽然 HTML 编辑器可为 microsite 设计提供更多灵活性，但请注意，我们无法排查使用自定义 HTML 或 CSS 所做的任何调整。

1. 在左侧导航菜单中，选择 ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → 内容**.
2. 在 microsite 卡片上，选择 **编辑内容**.
3. 在 Microsite 选项卡中，选择你要编辑代码的布局或页面。
4. 选择 ![](/files/4fbd2724a3b45dfe631802a8ae8bdd7f6c44b0f8)![](/files/ceef90f02b549ddbe425e0324e57c4f1d264e1fd) **\[代码视图]** ，位于顶部菜单栏中。
5. 根据需要添加或修改 HTML 和 CSS。
6. CSS 可以通过三种方式添加：

   * 通过导入外部 CSS 样式表
   * 在页面顶部的一个 `<style>` 标签中：

   ```programlisting
   <style>
     p {
       color: blue;
     }

     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }

     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 
   ```

   * 行内方式，用于将样式应用到特定的 HTML 元素：

   ```programlisting
   <h3 style="font-size:30px;color:blue;">当你的朋友使用我们的产品时获得奖励</h3> 
   ```
7. 选择 ![](/files/99215be307d0f913cbd96d2355422f418bdb8932) **\[画笔]** 以预览你的更新。
8. 选择 **保存草稿** 以保存，或 **发布** 将更改推送上线。
   {% endtab %}

{% tab title="编辑你的小组件" %}
你可以使用内置的 HTML 编辑器编辑 HTML 或 CSS，为你的小组件进行进一步自定义。虽然 HTML 编辑器可为小组件设计提供更多灵活性，但请注意，我们无法排查使用自定义 HTML 或 CSS 所做的任何调整。

1. 在左侧导航菜单中，选择 ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → 内容**.
2. 在 *小组件* 卡片中，选择 **编辑小组件**.
3. 在 *程序小组件*下，选择你要编辑的小组件。

<div data-with-frame="true"><figure><img src="/files/d974c271a2b33e9b20017ad945aedc770354a94f" alt="" width="563"><figcaption></figcaption></figure></div>

1. 在顶部菜单栏中，选择 ![](/files/4fbd2724a3b45dfe631802a8ae8bdd7f6c44b0f8)![](/files/ceef90f02b549ddbe425e0324e57c4f1d264e1fd) **\[括号]**.
2. 在页面主体中添加或编辑你的 HTML。
3. CSS 可以通过三种方式添加：

   * 通过导入外部 CSS 样式表
   * 在页面顶部的一个 `<style>` 标签中：

   ```programlisting
   <style>
     p {
       color: blue;
     }

     .exampleClass {
       color: green;
       font-size: 25px;
       text-align: center;
     }

     #exampleId {
       color: red;
       font-size: 30px;
     }
   </style> 
   ```

   * 行内方式，用于将样式应用到特定的 HTML 元素：

   ```programlisting
   <h3 style="font-size:30px;color:blue;">当你的朋友使用我们的产品时获得奖励</h3> 
   ```
4. 选择 ![](/files/99215be307d0f913cbd96d2355422f418bdb8932) **\[画笔]** 以预览你的更新。
5. 选择 **保存草稿** 以保存，或 **发布** 将更改推送上线。
   {% endtab %}
   {% endtabs %}

#### **使用 CSS Parts 编辑组件**

你的小组件或 microsite 中某些内置组件无法通过可视化编辑器完全设置样式。在某些情况下，你可以使用 CSS Parts 覆盖其外观，这可提供更细粒度的控制。

如果你想进行高级样式更新，impact.com 团队可以就哪些内容可行提供建议，并分享任何相关的 CSS part 选择器。如果你有兴趣使用 CSS parts 编辑组件，请联系你的 Advocate 实施团队或上线后支持团队。


---

# 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/edit-your-widget-or-microsite-html-and-css-for-advocate.md?ask=<question>&goal=<endgoal>
```

`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.