> 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 编辑你的 Widget 或 Microsite 的 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. 选择 ![](/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 部件编辑组件**

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