> 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. 选择  **\[代码视图]** 位于顶部菜单栏中。
5. 根据需要添加或修改 HTML 和 CSS。
6. CSS 可通过三种方式添加：
* 通过导入外部 CSS 样式表
* 在页面顶部的 `
```
* 以内联方式，将样式应用于特定的 HTML 元素：
```programlisting
当您的朋友使用我们的产品时，您将获得奖励
```
7. 选择  **\[画笔]** 以预览您的更新。
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. 在……下 *项目小组件*，选择您要编辑的组件。
1. 在顶部菜单栏中，选择  **\[括号]**.
2. 在页面主体中添加或编辑您的 HTML。
3. CSS 可通过三种方式添加：
* 通过导入外部 CSS 样式表
* 在页面顶部的 `
```
* 以内联方式，将样式应用于特定的 HTML 元素：
```programlisting
当您的朋友使用我们的产品时，您将获得奖励
```
4. 选择  **\[画笔]** 以预览您的更新。
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 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/edit-your-widget-or-microsite-html-and-css-for-advocate.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.
