Zephr User Guide

Pages

9 views 0

Zephr’s Pages feature allows you to create multi-step registration, login, preference centre and company account management pages for use on your Sites. These pages allow you to brand Zephr generated pages for a clear and consistent user experience.

Preference Centre Pages allow your users to view the profile information they have stored in Zephr, edit their details, change and update their email address and password, and view and manage their subscriptions.

Company Account Management pages allow end-users who are set as Account Owners to search for, add and delete other individual users who are part of a company account (formerly known as corporate accounts).

Setting Your Style Guide

Before creating a Page, you will need to set your style guide. To do this, navigate to Delivery > Sites then click into the Site you wish to create a Page for.

Scroll down and select the Style Guide section. Here you will have the opportunity to upload a logo for use on your pages and, if relevant, set the background colour to be used on your page.

We recommend using a square logo, with a transparent background where possible.

Once added, click Done, then click Save on the Site Configuration page.

Creating a Page

To create a new page, navigate to Delivery > Pages. Here you will see a list of your existing pages. To create a new one, click Add A New Page.

Here you can give your new page a title, select the page type and set a URL.

Page Types

There are three page types to select from – Login/Registration, Preference Centre or Company Account Management.

Login/Registration allows you to create a multi-step login and registration flow within a standalone page.

Preference Centre allows you to build a page where users can view and edit their preferences and profile information, update their email address and password, and view their subscriptions.

Company Account Management pages allow end-users who are set as Account Owners to search for, add and delete other individual users who are part of a company account (formerly known as corporate accounts). Note: in order to use these pages, you must have email verification enabled, and have set a user to be an account owner for one of your company accounts. More details below.

URL

The URL specified here stipulates the site URL you want your page to be displayed on. For example, you may enter /register for the page to sit at www.your-site.com/register.

If you have selected a Login/Registration page, you will need to see URLs for both registration and login, so both forms can be accessed.

Pages - Add a New Page

Once set, click Continue.

Login/Registration Pages

Once your Page has been saved, three new sections will appear – Page Configuration, Login Form Configuration, and Registration Form Configuration.

Page Configuration

Page Configuration allows you to set the title and copy that will be displayed on the left-hand side of your page.

In this section, enter the Page Title Text and Page Introduction, then click Save And Go Back.

Login Form Configuration

Under Login Form Configuration, you have the ability to set whether you wish to use passwordless authentication, as well as setting any social sign in you wish to have available.

Selecting Use Passwordless Authentication will mean your login form does not have a password field. Instead, users will need to click a link emailed to them to login. Email Verification must be turned on to use this, which can be found under Identity > Settings.

Social Sign In will display relevant social media icons at the top of your login page, allowing users to login by verifying their social credentials.

In order to use social sign-in, you must first get client credentials for the site. The process for getting these values varies between providers but is well documented, and can be found with the following links:

Once configured, click Save and Go Back.

Registration Form Configuration

This section allows you to configure the details you ask for on your registration form.

This is broken into Sections, which allow you to create a multi-step process for your user. For example, entering your email address and password on one page, then clicking continue and entering your First and Last Name on a separate page.

By default, Email Address and Create a Password will be displayed on Section 1. Click Edit on either of these to update the Label, Slug, Placeholder and Default Value.

To add a new field, click Add A User Attribute and select from your list of User Attributes.

To add custom text to your form, click Add Custom Text and add your text to the modal. Once saved you can drag this to the required point on your page.

If you wish to spread your registration form over multiple pages, click Add a Section and add your form fields as above.

Once your Page configuration is complete, click Save. Navigate to your Site URL that is being served through Zephr, adding the login or registration URL set above to view your page. For example, www.your-site.com/register.

Example Login and Registration Pages

Pages - Login Form Example

A Login Form set up using Pages.

Pages - Registration Step 1 Example

Step 1 of a Registration Form set up using Pages.

Pages - Registration Step 2 Example

Step 2 of a Registration Form set up using Pages.

Preference Centre Pages

Once your Page has been saved, three new sections will appear – Page Configuration, Displayed User Attributes Options, and Edit User Attributes Options.

Page Configuration

Page Configuration allows you to set the title and copy that will be displayed on the left-hand side of your page.

In this section, enter the Page Title Text and Page Introduction, then click Save And Go Back.

Displayed User Attributes Options

This section allows you to set which User Attributes a user will be able to view on their profile page/preference centre. Note that this is not the same as which fields they will be able to edit.

For example, you may wish to display a user’s date of birth but not allow them to edit it.

To add a field, click Add A User Attribute and select from your existing list of User Attributes.

Once done, click Save And Go Back.

Edit User Attributes Options

This section allows you to set which User Attributes a user will be able to edit on their profile page/preference centre.

To add a field, click Add A User Attribute and select from your existing list of User Attributes.

Once done, click Save And Go Back, then click Save to save your preference centre page.

Navigate to your Site URL that is being served through Zephr, and make sure you are logged in. Then, navigate to the URL set for the preference centre – for example, www.your-site.com/preference-centre.

On this page, users can see their profile information, update their email address or password, click Edit to alter their details, and click into the Subscription tab to see details of their subscriptions.

Example Preference Centre Page

Pages - Preference Centre Example

A Preference Centre Page set up using Pages.

Pages - Example Subscriptions Page

A Subscription Information Page set up using Pages – note: here users can view billing information and cancel their subscription.

Company Account Management Pages

In order to see this option, first navigate to Identity > Settings and check the Require Email Verification check box. This will ensure users have proven they should have access to the page, as we can verify they are account owners. Be sure to save this setting.

Next, navigate to B2B > Companies & Accounts. For each account, you will need to nominate an Account Owner – the end-user with the ability to view, add and delete other users from the company account.

To do this, enter a Company Account and scroll to the Users section. Locate the relevant user, then set their Role to Account Owner using the drop down field. Click Save.

Once this has been set, you will see the Company Account Management page type when creating new Pages.

Once your Page has been saved, you will see a section for Page Configuration.

Page Configuration

Page Configuration allows you to set the title and copy that will be displayed on the left-hand side of your page.

In this section, enter the Page Title Text and Page Introduction, then click Save And Go Back.

Your page will now be live, and available at the URL specified when it was created. Only users who are considered Account Owners of a Company Account will be able to access it.

Example Company Account Management Page

Pages - Example Company Account Management Page

Example Company Account Management page where the Account Owner can view, add and delete users to a company account.