Zephr User Guide

Component Library

143 views 0

Zephr’s Component Library lets you create UI templates with customisable mustache variables, based on HTML templates you’ve created specifically for your company.

Within these templates, set which elements can be edited during set up, and insert the variables into your HTML template.

The more variables you add, the more customised your template and the final result will be.

Once added, use these components within your Feature Outcomes.

Adding a Component

First, navigate to Delivery > Component Library within your Zephr Admin Console. Here you’ll see a list of current templates. To create a new template, click the Add a Component Template button.

Give your component a Title, and perhaps an optional description.

Below you’ll see the option to upload a Thumbnail. This will make it easier when selecting which Component you wish to add to your Feature Outcome later.

Add your Component URL to set where Zephr will look for the core template Рfor example, you may have this hosted on an S3 bucket. The code will be run through a mustache compiler, meaning values for any added variables will be able to be set within a Zephr Feature. If you wish to use variables, make sure you use the correct syntax in the component by reviewing the standard mustache specification here.

Next, set your variables within Zephr by clicking the Add a Variable button. The slug of your variable must match the variable within the hosted HTML template word-for-word. If you aren’t sure what is available, check the Component URL. For example if you see a field on this link called {{title}}, then you will want to add a variable called Title.

Component Library - Setting Variables

Your type options include:

  • Text: Allows for a line of text
  • Textarea: Allows for a body of test
  • Colour: Allows you to set a color

Once you have set your variables, click Save. Your component will now be available within your Component Library and can be added to a Feature Outcome. To edit or delete the component, hover over it in your component list, and click the relevant button.

Component Library - Viewing Component

For information on using Components within a Feature, read our Component Library Templates guide.