Component Libraries Explained

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.

Mint components

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:

1. From the left navigation menu, select [Engage] → Content.
2. Select Edit widgets on the widgets card.
3. Select the name of the widget you want to edit.
4. In the left sidebar menu, select Packages.
5. Select Add package.
6. Select Add on the Mint components card.

To upgrade to Mint components for your microsite:

1. From the left navigation menu, select [Engage] → Content.
2. Select the Edit settings button on the microsite card.
3. Under the Site Hosting heading, navigate to the Packages section.
4. Select Add package.
5. Select Add on the Mint components card.
6. Select Save.

Bedrock components

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:

Conditional section

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.

Program 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.

Custom component libraries

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 . 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:

1. From the left navigation menu, select [Engage] → Content.
2. Select Edit widgets on the widgets card.
3. Select the name of the widget you want to edit.
4. In the left sidebar menu, select Packages.
5. Select Add package.
6. Select Add from NPM.
7. Enter the package name, version and file path.
8. Select Add.