Zephr Beta User Guide

Component Library

0 views 0

Zephr’s Component Library lets you create UI templates with customisable 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.

Next, set your variables 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.