> 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" %}
**注意**：仅特定 Advocate 版本支持自定义 HTML/CSS 编辑。请联系 [支持](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] → Content**.
2. 在微型站点卡片上，选择 **编辑内容**.
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] → Content**.
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 编辑组件**

小组件或微型站点中的某些内置组件无法通过可视化编辑器完全设置样式。在某些情况下，您可以使用 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:

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

The question should be specific, self-contained, and written in natural language.
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.