Learn how to add an external component by defining variables within templates and customizing them for various outcomes.

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 color, 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-more}}
       Show if true!
       {{/show-more}}

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