# Edit Your Widget or Microsite HTML and CSS for Advocate
You can customize your Advocate widgets and microsite with additional HTML and CSS to better align with your brand’s look and feel. Using Advocate’s built-in HTML editor, you can add structure, styling, and even override certain default components for deeper customization.
{% hint style="info" %}
**Note**: Custom HTML/CSS editing is only available to specific Advocate editions. Contact [support](mailto:saasquatch-support@impact.com) to upgrade your account and access this feature.
{% endhint %}
#### Why use custom HTML or CSS?
Custom HTML and inline CSS allow you to:
* Match your company’s brand guidelines more closely
* Reformat layout and spacing
* Apply styles beyond what’s available in the default editor
* Override select widget or microsite component styling
{% hint style="warning" %}
**Important**: Our support team provides limited assistance for issues introduced by custom code. If you’re unsure, we recommend working with your Advocate Implementation or post-launch team.
{% endhint %}
#### Edit the HTML or CSS
{% tabs %}
{% tab title="Edit your microsite" %}
You can edit the HTML or CSS to make further customizations to your microsite using the built-in HTML editor. While the HTML editor allows for additional flexibility in microsite design, keep in mind that we are unable to troubleshoot any adjustments made with custom HTML or CSS.
1. In the left navigation menu, select ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Content**.
2. On the microsite card, select **Edit content**.
3. In the Microsite tab, select the layout or page whose code you want to edit.
4. Select  **\[Code view]** in the top menu bar.
5. Add or modify HTML and CSS as needed.
6. CSS can be added in three ways:
* By importing an external CSS stylesheet
* At the top of the page in a `
```
* Inline, to apply a style to a specific HTML element:
```programlisting
Get rewarded when your friend uses our product
```
7. Select  **\[Paintbrush]** to preview your updates.
8. Select **Save Draft** to save, or **Publish** to push changes live.
{% endtab %}
{% tab title="Edit your widget" %}
You can edit the HTML or CSS to make further customizations to your widget using the built-in HTML editor. While the HTML editor allows for additional flexibility in widget design, keep in mind that we are unable to troubleshoot any adjustments made with custom HTML or CSS.
1. In the left navigation menu, select ![\[Engage\] v2](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-aa671735ec2b65af79961eaf59ab60af.svg) **\[Engage] → Content**.
2. On the *Widgets* card, select **Edit Widget**.
3. Under *Program Widgets*, select the widget you want to edit.
1. In the top menu bar, select  **\[Brackets]**.
2. Add or edit your HTML in the body of the page.
3. CSS can be added in three ways:
* By importing an external CSS stylesheet
* At the top of the page in a `
```
* Inline, to apply a style to a specific HTML element:
```programlisting
Get rewarded when your friend uses our product
```
4. Select  **\[Paintbrush]** to preview your updates.
5. Select **Save Draft** to save, or **Publish** to push changes live.
{% endtab %}
{% endtabs %}
#### **Edit Components Using CSS Parts**
Some built-in components in your widget or microsite can’t be fully styled through the visual editor. In certain cases, you can override their appearance using CSS parts, which allow for more granular control.
If you’re looking to make advanced style updates, the impact.com team can advise on what’s possible and share any relevant CSS part selectors. If you’re interested in editing components with CSS parts, reach out to your Advocate Implementation or post-launch support team.
