home

Zephr

Zuora BillingZuora PaymentsZuora PlatformZuora CPQZephrZuora RevenueAccounts ReceivableRelease NotesBasicsEntitlementsSupport and policies
Zuora BillingZuora PaymentsZuora PlatformZuora CPQZephrZuora RevenueAccounts ReceivableRelease NotesBasicsEntitlementsSupport and policies

Welcome to Zuora Product Documentation

Explore our rich library of product information

Show Contents

thumbnailZephr

Feature Outcomes

Component library templates

Create and configure UI component templates with variables in HTML to generate multiple feature outcomes.

You can create UI component templates that include configurable variables in HTML.

For further information on creating templates to your Component Library, see the Component Library topic. You can then use these components in your feature outcomes. Each time you use a component, you can specify the values for each variable. This means that a single template can be used to create multiple outcomes.

To use a component library template in an outcome, complete the following steps:

  1. Navigate to the outcome in which you want to use a component library template, in either of the following ways:

    • Select the outcome in your feature for which you want to display the component library template, as described in the Edit an Outcome topic

    • Add a new outcome as described in the Add an Outcome topic

  2. Select the Add button under the Hosted UI Component heading. The Select a Template dialog box is displayed.
    • If you have not defined any component library templates, a message, No component templates have been added, is displayed.
    • If you have defined component library templates, the available ones are displayed in the screen.
  3. Select the template you want to use. The Select Template button displays when you hover over the template. .
    The fields in the Set Your Content dialog box dialog box are populated from the variables you set in the template. For further information on defining the variables, see the Add a Component topic.
  4. Enter the values you want to display for each variable.
  5. If you specified a button, you can change the background color as follows:
    1. Select the button color swatch. The color selector is displayed.
    2. Select the color to apply to the button background. You can select a color in any combination of the following:
      • Select an area in the color box.
      • Select the eyedropper icon to choose a color used anywhere in your screen.
      • Select the color from the color bar.
      • Enter the red, blue and green color values in the R , G and B text boxes.
      • Select the arrows beside the RGB text boxes to use hue, saturation and lightness color values. Enter the values in the H , S and L text boxes.
      • Select the arrows beside the HSL text boxes to use a hex color value. Enter the hex value in the text box
  6. Select the Save button to confirm the selection and return to the Add an Outcome screen. Selecting the Cancel button displays the Add an Outcome screen without saving the component.

Last updated: October 10, 2025