UI Components
A UI component is a block of code which can be used to replace content within a Transformation in a Feature Rule.
Unlike Zephr Forms, UI Components are written and managed by your team, with the code stored in Zephr and called upon when required within a Rule.
To create a UI Component, navigate to UI > UI Components within the Zephr Admin Console.
From here, click Add UI Component. This will open a page allowing you to create a Slug for your UI Component, and a code block for your to write or paste the code you wish to use.
When adding the Slug, make the name memorable, as you will use this name when adding the UI Component to a Feature Rule.
By default, new instances of Zephr include standard options for Login and Logout UI components, to be used as Transformations within the Nav Bar of your site, offering Login and Logout options to your Users.
To test your UI Component, click Save and navigate to the Zephr Feature Rule you wish the UI Component to be used within. Under the Transforms option in the Rule Builder Palette, drag the UI Component option onto your Canvas, select the UI Component created above. Attach it into your Rule, then click Save. You can then tag this new version of your rule and test it in Preview Mode before publishing the Rule. For details on how to do this, read our Tagging and Testing Rules guide.
Hosted UI Components
In addition to UI Components, which are blocks of custom code stored within Zephr, we also allow Hosted UI Components to be used as Transformations within Feature Rules.
Hosted UI Components allow you to add a UI component which is hosted outside of Zephr, to display in place of transformed content.
To use a Hosted UI Component, navigate to the relevant Feature Rule, and select Hosted UI Component from the Transformations Segment.
Enter the URL of the Hosted UI Component, and click Save.
Once added, connect the Hosted UI Component to your Rule flow as normal.
It’s important to note that Zephr may cache Hosted UI Components for up to 24 hours. With this in mind, we recommend you use a cache-busting parameter when setting the link to your Hosted UI Component, and updating this if a change is made.
For example, in the URL https://cms.example.com/ui-component.html?v=2, the parameter is ?v=2. Using a similar system where the UI Component is hosted, and updating the link within Zephr, will ensure the correct UI Component is always shown. In the case of the URL above, this could become https://cms.example.com/ui-component.html?v=3.