Components are the individual building blocks, like hero images and task cards, that make up your widget or microsite. All of our current templates are powered by our Mint and Bedrock component libraries.
Widgets and microsites built with Mint components provide customer advocates with the latest Advocate experiences. Most of the current templates use Mint components. If you aren’t sure if you’re using the current component library, you can manually check to make sure and update your library if needed.
To upgrade to Mint components for your program widget:
From the left navigation menu, select
![[Engage]](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-d0da6a759d66830ceb05e654496a4338.svg)
[Engage] → Content.Select Edit widgets on the widgets card.
Select the name of the widget you want to edit.
In the left sidebar menu, select Packages.
Select
![[Add]](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-1eb87a593a1ac0d9c10f6162b1175f95.svg)
Add package.Select Add on the Mint components card.
To upgrade to Mint components for your microsite:
All templates powered by Mint components also have the Bedrock component package installed. Bedrock components can’t be seen by participants, but they offer the ability to add advanced logic to your design. They can conditionally show other components and define which program a component sources data from. You can find the Bedrock components package in the Advanced components section within the Add tab in the Widget or Microsite Editor.
There are two components in the Bedrock component package:
The conditional section component lets you include conditional content based on a participant’s email, country, segment, or custom field. Insert a JSONata expression in the Condition box to set the display conditions. Then, move any content you want displayed to a specific group of participants within the conditional section.
The program section component allows you to override the program ID of its child components. Use it to display content that isn’t linked to a specific program. The Program section component is included in most widget and microsite templates by default.
Limited: Importing custom component libraries is only available to specific Advocate editions. Contact us to upgrade your account and access this feature.
You can build and use your own component packages to further customize your Advocate experience. These components can be added to any template and used alongside Advocate-provided components.
Advocate widgets use standard HTML and web components ![[External link]](https://paligoapp-cdn-eu1.s3.eu-west-1.amazonaws.com/impact/attachments/f01cdffa431a4d75ff09c130b66974d4-b8ebe06c75d53cc8d24756ae9b7589e2.svg)
. To use your own components in our widget editor, they must be written as web components.
To begin building your widget with custom components, install your custom package: