Skip to main content

Component Templates

Zuora

Component Templates

  1. Last updated
  2. Save as PDF

In addition to creating custom components from scratch, Zephr also provides a series of component templates that can be used directly in your feature outcomes.

The templates contain predefined variables, making them flexible enough to be modified without further development effort. However, you can also use the templates as a starting point to develop your own components.

To work with the templates, you need to first be familiar with the custom template editor. See Custom Components for how to use the custom template editor.

To create a component from a template, go to Component Library > Add Component > Components > Component Templates, and select the template that you want to use. 

On the Select a Component Template window, you can view the available template options. You can get more information about each template by hovering over it.

The way to edit a template is the same as how you create a custom template from scratch. Note that the preview window is also available for the component templates.

After a component created from the template is saved, you can access it from the component library homepage. Later you can use it in your feature outcomes.

Product Selection Screen Templates

You can define, customise, and optimise the product selection screens within your payment forms using the Paywall component templates. These templates give you complete control over the form appearance, including, for example, interactive elements and toggling between different tab groups, utilising HTML, CSS, and JavaScript.

Note: JavaScript is only available for Paywall Layout 1, Paywall Layout 2, and Paywall Layout 3 pre-defined component templates.

These templates allow grouping various product types and diverse items, such as physical and digital products, together in a single bundle, providing more flexibility than the single grouping option.

If you’re not happy with the default product selection screen:

image9.png
You can choose from the following templates to customise your product selection screens:

clipboard_e4594ad68b12fab1eab7c2f9e53496fcd.png

We’ve hooked you up with 3 of the most widely-used designs above, so you can focus on what matters - copy that sparks interest, and increases conversion rates!

Still need to customise further? Not to worry. Select any one of these templates that most closely matches your intended design, then feel free to play around with the HTML/CSS/JS editors to get the exact design you need. You have complete control!

In interactive mode, toast notifications will be shown when interacting with specific elements (like buttons) in the form, to confirm the template's functionality:

image4.png

Unlike traditional Custom Components, these 3 templates also have a JS tab in the Ace Editor, to help you implement interactivity:

image2.png

You can also organise page-level vs payment-option specific variables. Group page-level variables that remain consistent across the component, and payment-option variables that are specific to each plan.

image8.png

Customise all your displayed text on your payment form to meet specific requirements.

Once you’re happy with the look and feel of the Component, Click Save.

Limitations

  • Within the grouping templates, tabs and toggles do not transition automatically; users are required to manually select the desired tab for a preview. It's important to highlight that when users switch to a different tab group in the preview window and make changes to a variable, the preview will be re-rendered. This behaviour is currently a known issue and will be addressed in future cycles.

  • Variables in the table are sorted based on the latest variable created.