Zephr Beta User Guide

Feature Outcomes

2 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 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.

Social Sign In lets you choose which social providers you want your users to be able to sign in with. Currently, Zephr supports Facebook, LinkedIn, Google, and Microsoft.

Under Form Fields, give your Form a Title, and an optional Description.

Select what type of form you wish to create.

  • Registration: A hybrid login and registration form used to create users in Zephr, who can then create active sessions on your site.
  • Data Capture: Used to gather additional information on users. For anonymous users, this is stored until they create a registered account. For registered users, this is stored against their Zephr profile.

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

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

Shows Outcomes Section Below Rules Canvas

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