Create a Custom Component

To create a custom component block, complete the following steps:

1. On Component Library, click Add Component > Custom Template
   The Custom Template screen displays, as illustrated below:
   

2. Enter a name for the custom template in the Title text box

3. Modify the Slug field as needed. Note that the slug cannot be changed once the template is saved.

4. Optionally, enter a description for the template. 

5. Add variables that can be used in the template. To add a variable, complete the following steps:

1. Enter a name for the variable in the Label text box

2. Optionally, enter a description of the variable in the Description (Optional) text box

3. Decide whether to make the variable a mandatory one or not using the Mandatory toggle

4. Select the type of content represented by the variable from the Type radio buttons. The options are as follows:

   1. Text
      Select this to replace the variable with text, which can be entered in a text box in your outcome

   2. Textarea
      Select this to replace the variable with a larger amount of text, which can be entered in a text box in your outcome

   3. HTML
      Select this to replace the variable with a UI component that is defined using HTML
      Note: Ensure that the supplied HTML is unescaped using triple braces.

   4. Color
      Select this to replace the variable with a colour, which can be selected in your outcome

   5. Boolean
      Select this to replace the variable with a true/false decision, for example to turn sections of the template on or off
      For example, if you have defined the show-more variable as a Boolean, the following component allows you define how to display more information:

Always shown
 {{#show-more}}  
 Show if true! 
 {{/show-more}}            

5. Select the Save button to save your updates and return to the Custom Template screen. Selecting the Cancel button displays the Add a Template screen without saving any changes.

Note: You can also preset variables directly in the template component, as described in the User Variables topic.

6. Use the HTML and CSS editors to define your custom template. The Preview window on the right will provide a live preview of your code. You can preview how content looks on different device types by selecting the device type icon below the preview window. You can also specify the screen size using the Width and Height fields.

The Prototype mode allows you to test the functionality from the preview window, such as whether the links work properly.

Note:

• You can add variables defined in Step 5 to your code.
• The CSS isn't scoped to the template. For example, the following code would be applied to all applicable paragraphs on the page:

p {
    font-size: 2em;
}  

You need to make sure to scope your code properly.

7. Click Save when the template is completed.