> 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 小部件和微站点，使其更好地契合您的品牌外观与风格。借助 Advocate 内置的 HTML 编辑器，您可以添加结构、样式，甚至覆盖某些默认组件，以进行更深入的自定义。
{% hint style="info" %}
**注意**：自定义 HTML/CSS 编辑仅适用于特定的 Advocate 版本。请联系 [支持](mailto:saasquatch-support@impact.com) 以升级您的账户并访问此功能。
{% endhint %}
#### 为什么要使用自定义 HTML 或 CSS？
自定义 HTML 和内联 CSS 可让您：
* 更贴近您的公司品牌规范
* 重新调整布局和间距
* 应用默认编辑器中没有的样式
* 覆盖选定的小部件或微站点组件样式
{% hint style="warning" %}
**重要**：我们的支持团队仅会对自定义代码引入的问题提供有限帮助。如果您不确定，建议与您的 Advocate 实施团队或上线后团队合作。
{% endhint %}
#### 编辑 HTML 或 CSS
{% tabs %}
{% 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. 在微站点选项卡中，选择您要编辑代码的布局或页面。
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 部分编辑组件**
您小部件或微站点中的某些内置组件无法通过可视化编辑器完全设置样式。在某些情况下，您可以使用 CSS 部分覆盖它们的外观，从而实现更细粒度的控制。
如果您希望进行高级样式更新，impact.com 团队可以就可实现的内容提供建议，并分享任何相关的 CSS 部分选择器。如果您有兴趣使用 CSS 部分编辑组件，请联系您的 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=&goal=
```
`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.
