Zephr User Guide

Adding User Variables to Custom Components

1 views 0

In some instances, you may wish to use custom components to expose first-party user data stored in Zephr. Our customers use this to personalise content and provide a more customised user journey for their end-users.

At present, all information stored as a Zephr User Attribute is available for use within a Custom Component Block, or a through the use of templated components within the Component Library. In this guide, we’ll show you how to use this data.

Adding User Variables to Custom Component Blocks

First, navigate to, or create the custom component block you wish to display user data within. For details on how to do this, read our Custom Component Block guide.

Within the custom component block, use the variable {{blaize.user.your-attribute-slug}} at the point you wish to display the user data. 

For example, here we have a user variable called First Name. By default, the Slug for this user attribute becomes first-name.

User Attribute Example - First Name

In our custom component block, we are able to call this information using the template variable {{blaize.user.first-name}}.

Example set up for adding template user variables into a custom component block

When you’re happy with your user variable, save your Custom Component and the Outcome it is placed in, then link it to the relevant point in your rule. Once published, navigate to a page your Outcome should display on.

In our example, you can see the Custom Component Block displaying “Hello, Gwen”, as our registered user’s first name has been stored as Gwen.

Shows article with personalised message at top, using Zephr template user variables

Adding User Variables to Templated Components

User variables can also be added within template components that you store within the Zephr Component Library.

To do this, you’ll need to ensure the template you create includes the variables relevant to the data you wish to display.

For example, in this component, the top variable is preset to {{blaize.user.first-name}}.

An example template used for the Zephr Component Library

Add your template to your Component Library like usual. If you are unsure how to do this, read our Component Library Guide.

Note: when setting the variables for this template, you do not need to add {{blaize.user.first-name}} as this is already preset. Instead, add the other variables relevant to your template. For the example above, we’ve added variables for Title, Body, Button Text, and Button Link.

Component Library - Example Template Variables

Navigate to your Feature Rule and create an Outcome using the Component Library as usual. Set the information you wish to have displayed for your other variables, then click Save.

As the user variable is already available, there are no extra steps for adding this information.

Save your Outcome, then link it to your Feature Rule as usual. Once published, navigate to a page your Templated Component should display on.

In our example, you can see the templated component from above displaying Gwen as the top line. This is because the template itself has {{blaize.user.first-name}} set, as seen above, and our registered user has Gwen stored as their first name.

Example of a Component Library template using a user variable to personalise a banner