Custom variables in custom components
This guide explains how to create and use custom variables in Custom Component Blocks, such as modals and footers, with a focus on implementing a Meter Remaining count in a website footer.
In this example, we create custom variables that can be used in Custom Component Blocks, such as modals, footers, or in-page content blocks.
We add a Meter Remaining count to a website footer, which displays on the site as illustrated below:
We trigger the
meter
variable on page views. To do this, we use a sub rule, and the a Trial with remaining counts defined.
In this example, we do the following:
-
Create and host the component, then add it to the Component Library
-
Create a sub rule containing a trial using remaining views to allow us to run a custom script
-
Build the main rule
Create Your Component
To display a footer on your site, you must host a footer component and add it to your Zephr Component Library.
In your component code, you must reference the variable that you want to display using a mustache template. For example, if your variable is called
meter
, your code must contain a
{{meter}}
reference, as shown in the following extract:
<b><mark>You have read {{meter}} articles</mark><b>
For further information on using mustache variables in your component templates, see the User Variables in Component Templates topic.
You must remember to make a note of the name of the variable that you use in your component, as we use this when we create our sub rule.
When you have created and hosted your component, add it to your Zephr Component Library.
For further information on using the Component Library, see the Component Library section.