Zephr User Guide

Feature Outcomes

197 views 0

When it comes to building unique user journeys within Zephr, the Feature Outcomes you build are vital.

Feature Outcomes are custom UI components that you can present to visitors instead of the original article. These may be registration and login forms, payment forms, house ads, or other custom component blocks and can replace some or all of the Feature content they are targeting.

Adding an Outcome

Zephr Feature Outcomes are created within the Feature Rule Canvas. To create one, either add a new Feature or enter Edit mode for an existing Feature. In this example, we will create a registration form which displayed after 20 words of an article.

For other examples, take a look at the following user guides:

Within the decision bar, navigate to Outcomes, then click Add Outcome.

Add Outcome Button in Zephr decision bar

Give your new outcome a Title and, if relevant, a Description.

Next, scroll down to the Components section. This is where you determine what your visitors will see as a result of the outcome.

The first component you see will be your Feature Content. In our case, this is article content, as our example Feature is for site articles.

Next to this component are two buttons. One for Hide Some Content, and one for Hide All Content.

Component Details Bar

Clicking Hide Some Content allows you to set how much of a Feature is visible to your users before they see your set outcome – for example, 20 words of an article. You can also choose a Style for this, which determines how Zephr will lead into your outcome, after the 20 words.

Options include:

  • Fade Out: Copy after your selected number of words will fade to the background, with the outcome below.
  • Line Break: A black line will display between your Feature content and the relevant Outcome.
  • No Style: Your Feature content will display the selected number of words, and your Outcome will display directly following this.

Hide Some Content Modal

Click Hide All Content will mean none of the content from your Feature will be displayed to the end users targeted by your rule.

Once you’ve set your transition for the Feature Content, click Add a Component below.

Here you will see the following options:

  • From Component Library: For custom components added to your Zephr Component Library
  • Custom Component Block: Lets you add a code block, to be rendered by Zephr as an outcome
  • Form: Leads you to a section to create a Registration or Data Capture Form
  • Payment Form: Leads you to a section to create a Payment Form

Outcome Component Options

For this example, we’ll create a Registration Form, so click the Add button in the Form section.

The next page is where you create your registration form. Along the top, you’ll see tabs for Form Fields, Custom CSS, and Social Sign In.

Building a Form - Form Fields & CSS

Form Fields lets you add the fields you wish to have on your form. These come from your User Attributes. If you haven’t set these up before, read our User Attributes guide.

Custom CSS allows you to style your form to suit your brand.

If you are creating a Registration or Complete Registration form, you will have the option to use Passwordless Authenticaiton, where users will click a link in an email, rather than needing to create a password. In order to use this feature, you’ll need to enable Email Verification under Identity > Settings.

You will have the option to enable Login Providers for social sign on. Read our Login Providers guide for more information on enabling this feature.

The Your Form section lets you choose which fields are available on your Registration Form.

By default, email address will always be present. To add additional fields, click Add A User Attribute. A modal will display, detailing your options. Click Add next to the relevant user attribute or multi-select fields and click Add Selected.

Adding User Attributes to a Form

These fields will now display within your form. Drag and drop each field until you are happy with the order, add dividers to section form fields by category, and set a field as mandatory by using the Required slider.

When you’re happy with your form, click Save.

Example Registration Form Creation

You will return to the Outcome page and will see your newly created Registration Form under the Components section.

Components Section Showing Feature and Registration Form

Click Save, and you will be returned to your Rule Canvas. Your Registration Form will now display as an outcome in your decision bar. Drag this onto your canvas and connect it to your rule. In this example, we’ve connected the Registration Form to the Page View node, so that all anonymous users see a registration form when viewing article content.

Sample Rule Showing Registration Form Outcome


Cloning, Editing and Deleting an Outcome

Once your Outcome has been created, you can clone, edit and delete it in the Outcomes section, below your rule canvas.

Feature Outcomes - Cloning, Deleting, Editing

Cloning your Outcome is the simplest way to create a series of Outcome variations for testing within your user journeys.

Previewing Outcomes

When creating a Feature Rule, Zephr offers the opportunity for you to preview an outcome, in order to see what it will look like in situ on your site (or sites).

In order to preview Outcomes, Zephr needs to crawl your site to find the Feature Tags or CSS Selector you have used to define the Feature. To do this, navigate to the Developer Interface of your Feature Rule – either by creating a new rule, or by unlocking it from the bottom of an existing Feature.

Under Site Integration, click the ‘Check Sites for Feature’ button.

Previewing Outcomes - Check Sites for Feature

If the Feature has been integrated, a green notification will display, along with an example URL for where the Feature has been found.

Click Update & Lock.

Now, in your Rules Canvas, locate or add an Outcome to your Feature Rule. Once added, right click on the Outcome, then select Preview.

Previewing Outcomes - Preview Button

A new screen will display, showing your Rules Canvas on the left, with selected Outcome highlighted in green, and your Site on the right.

Previewing Outcomes - View Preview

The site will display your selected outcome in situ.

Editing Your Outcome In A Preview

You can also edit your Outcome whilst previewing it.

To do this, double click on the Outcome you wish to edit. This will open the Outcome to the left, with the site preview on the right.

Previewing Outcomes - Edit in Preview

Adjust your Outcome as required, and view the changes on the site preview before saving them.

Further Reading

Outcomes can be built in many different shapes and sizes. To find out more about our other options, read our user guides below: