Progress

View desktop instructions

View mobile app instructions
Edit Your Widget or Microsite HTML and CSS for Advocate

Published on: Fri, 16 Feb, 2024 at 6:35 AM | Updated on: Wed, 30 Jul, 2025 at 9:13 AM

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.

Note: Custom HTML/CSS editing is only available to specific Advocate editions. Contact support to upgrade your account and access this feature.

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

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.

Edit the HTML or CSS

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.

In the left navigation menu, select Content.
On the microsite card, select Edit content.
In the Microsite tab, select the layout or page whose code you want to edit.
Select [Code view] in the top menu bar.
Add or modify HTML and CSS as needed.

CSS can be added in three ways:

By importing an external CSS stylesheet

At the top of the page in a <style> tag:

<style>
  p {
    color: blue;
  }

  .exampleClass {
    color: green;
    font-size: 25px;
    text-align: center;
  }

  #exampleId {
    color: red;
    font-size: 30px;
  }
</style>

Inline, to apply a style to a specific HTML element:

<h3 style="font-size:30px;color:blue;">Get rewarded when your friend uses our product</h3>

Select [Paintbrush] to preview your updates.
Select Save to save your code edits.

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.

In the left navigation menu, select Content.
On the Widgets card, select Edit Widget.
Under Program Widgets, select the widget you want to edit.
In the top menu bar, select [Brackets].
Add or edit your HTML in the body of the page.
To view the effects of your edits, select [Paintbrush] to return to the widget editing interface.

CSS can be added in three ways:

By importing an external CSS stylesheet

At the top of the page in a <style> tag:

<style>
  p {
    color: blue;
  }

  .exampleClass {
    color: green;
    font-size: 25px;
    text-align: center;
  }

  #exampleId {
    color: red;
    font-size: 30px;
  }
</style>

Inline, to apply a style to a specific HTML element:

<h3 style="font-size:30px;color:blue;">Get rewarded when your friend uses our product</h3>

Select Save Draft to save, or Publish to push changes live..

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.

Why use custom HTML or CSS?

Edit the HTML or CSS

Edit Components Using CSS Parts

Related Articles