Skip to main content

Add an External Component


Add an External Component

When creating a component template, you can define the variables within the HTML templates and incorporate them within your template. Subsequently, you can specify values for each variable in your rule. Therefore, a single template can cater to multiple outcomes.

To enhance customization, you have the flexibility to define multiple variables within your template as needed.

To add an external component:

  1. Click Add Component > Components > External Components from the Component Library screen.
  2. Enter a name for the component in the Title text box.
  3. Enter a description for the component, in the Description field (optional).
  4. Browse to choose a thumbnail for the component, or simply drag and drop the necessary image into the window. This can help you visually identify the component to use in your feature outcome.
  5. Enter the address where the component is hosted in the URL text box. This could point to a specific component or any module within your website.
  6. To add a variable, complete the following steps:
    • Enter a name for the variable in the Label text box.
    • Optionally, enter a description of the variable in the Description (Optional) text box.
    • Select the type of content represented by the variable from the Type radio buttons. The options are as follows:
      • Text
        Select this to replace the variable with text, which you can enter in a text box in your outcome.
      • Text area
        Select this to replace the variable with a larger amount of text, which you can enter in a text box in your outcome.
      • HTML
        Select this to replace the variable with a UI component defined using HTML. Ensure that the HTML content is displayed in its raw form using triple braces.
        For example:
        {{{html content}}}
      • Color
        Select this to replace the variable with a colour, which can be selected in your outcome.
      • Boolean
        Select this to replace the variable with a true/false decision. For example, to toggle sections of the template on or off.
        For example, if the variable, show-more, is defined as a Boolean, the following components allow you to define how to display more information:
        Always shown
        Show if true!
    • Select the Save button to save your updates and return to the Add a Template screen. Selecting the Cancel button displays the Add a Template screen without saving any changes.
  7. Click Save to add the template and return to the Component Library screen.

To preview the base form of the component in your browser, visit the URL where the component is hosted. This base form includes the mustache variables utilized within the component, defining its content. These variables were specified in step 6.The mustache compiler ensures these variables can be customized within your feature. Thus, a single component template can be applied to various outcomes in your feature rules, with variable values set when adding outcomes from your component library. For further information on adding an outcome from your component library, see the Component Library Templates topic. For information on the syntax used, refer to the mustache specification.

User Variables in Component Templates

To implement this, your template must incorporate the necessary variables to represent the displayed data.

For instance, consider the following template where the top variable is preset to{{blaize.user.first-name}}:


Add your template to the Component Library.

You do not need to add the {{blaize.user.first-name}} variable when adding this template, as it is preset.  However, you can still include other pertinent variables. In the example template, we added Title, Body, Button Text, and Button Link variables in the Admin Console.

When you create an Outcome using the Component Library, as described in the Add an Outcome topic, you must set the values for these other variables. However, as we preset the {{blaize.user.first-name}} variable, it is already available, and you do not need to define a value.

Upon publication, your component template undergoes mustache compilation to replace variables with defined content. For instance, using the template component mentioned earlier, the end user's first name (e.g., Gwen) is displayed instead of the{{blaize.user.first-name}} variable as illustrated below:


By default, mustache variables are HTML escaped. You can use triple mustache syntax to inject rich text without escaping the HTML ASCII characters using the following format:


For further information on what you can achieve using mustache variables, refer to the Mustache Manual.