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.

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

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] → 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 <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> 

7. Select [Paintbrush] to preview your updates.

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

Edit your widget

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.