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 components 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, you can manually check to make sure you’re using the current component library, and update your library if needed.
To upgrade to mint components for your program widget:
From the left navigation menu, select 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 package.Select
Add on the mint components card.Select Save in the upper right corner of the page.
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.
There are two components in the bedrock component package:
The conditional section component lets you include conditional content based on a participant’s email, segment, or custom field. Insert a JSONata expression in the Condition box to set the display conditions.
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.
You can bring in your own components 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. 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: