The following guide demonstrates how to create custom variables that can be presented within Custom Component Blocks, such as modals, footers, or in-page content blocks.
The example we will use involves adding a ‘Meter Remaining’ count to a website footer, like the below.
Adding Custom Variables to Feature Rules
For this particular example, we will build a meter variable that will be triggered on page views. This will be managed through the use of a sub rule, and the ‘Number of Views Remaining’ segment of a Trial builder.
Creating the Component
In order to display a Footer on your site, you will need to host a footer component, and add it to your Zephr Component Library.
Within the component code, you should reference the variable that you wish to display, using a moustache template. For example, you may call your variable meter, in which case your code should have a {{meter}} reference. For example:
<b><mark>You have read {{meter}} articles</mark></b>
Be sure to note the variable you use, as this will be required in the ‘Creating the Sub Rule’ section.
A working example can be found here.
Once this component has been created and hosted, add it to your Zephr Component Library. Details on how to do this can be found in our Component Library guide.
Creating the Sub Rule
With your Component in the Component Library, navigate to the relevant Feature Rule – likely an Article Rule – where you want the footer to display.
On the rule canvas, select Sub Rules and drag a new Sub Rule onto your canvas. Give your Sub Rule a name. In this case, we’ve used the name ‘Meter with Variables’.
You will now find yourself on a Sub Rule canvas. On this canvas, select Access > Trials and add a new Trial to the rule. Configure the rule in line with the number and frequency of views your users should receive, then scroll to the ‘Number of Views Remaining’ segment.
Click ‘Add a Remaining View’ and add counts for each of the views available to the user. In this case, we have using a Trial of 4 views, so have added 4 outputs.
Click Save.
Next, select Advanced > Run Custom Script and drag a custom script node onto your canvas. You will want one of these for each of the ‘Remaining Count’ nodes.
In the first script node, add the following: uiComponentScope["meter"] = "4";. Note: this is relevant for our example, however, the number should correlate with the number of views remaining, and the variable “meter” should be set to the variable used in your component above. This script allows you to save the counter to the variable meter, which you will later use as a moustached variable on your site.
Save the script and connect it to the ‘4 Remaining’ decision node, then repeat the process until each ‘Remaining Count’ node is connected to a Custom Script detailing the relevant number of views remaining.
Next, head to Sub Rules > Output Option and add two new outputs – one for In Trial, and one for Trial Expired.
Connect the In Trial node, and each of the Custom Scripts, to the In Trial Output Option.
Connect your Trial Expired node to the Trial Expired Output Option. Your sub rule will look something like this:
Click Done to return to the main canvas. Create an Outcome for your users who have expired trials – this may be a paywall, or a registration wall depending on your customer journey.
Next, create a new Outcome where your footer will be displayed. Under components, select ‘Show All Content’, so your Article will display, with the footer overlaid.
Next, select Add A New Form or Custom Component Block. Select Add From Component Library and add the component as required. A guide for how to do this can be found here.
When the Outcome is created, connect if to the ‘In Trial’ node of your Sub Rule. Your rule will look something like this:
Save the Feature and Publish – or test it in Staging – as required. The user should now be presented with a footer describing the number of article page views they have left in their trial.