Custom fields

Custom fields are fields other than the default User profile fields. Typically, these fields contain user information specific to your business needs such as a loyalty card number. You can add these custom fields to ReachFive widgets in order to gather even more information regarding users.

Here, we show you how to create a custom field via the ReachFive Console, explain the different custom field data types, and show you how to implement the custom fields using the UI SDK and through Hosted pages.

Create custom fields

You can create custom fields from the ReachFive Console.

Prerequisites

  • You must have access to the ReachFive Console.

  • You must have a Developer, Manager, or Administrator role.

Instructions

  1. Go to Settings  Custom fields.

  2. Select + New field.

  3. Provide a name for the field.

  4. Give the field a key for the key:value pair.

  5. Specify the type for the key. The dropdown menu contains all possible types. See Custom field data types for examples.

  • Read-Write scopes allow you to both read and write the custom field value.

  • Read-only scopes only allow you to read the custom field value.

There is an implicit OR between Read-Write scopes. When multiple scopes are associated with a custom field, an access token having only one of the scopes is able to read and write the custom field value.

Add a translation

Use Add translation to localize custom fields.

Custom field data types

The table below shows examples of the data types used when creating custom fields.

Type Display

String

custom field string

Integer

custom field integer

Decimal

custom field decimal

Date

custom field date

Select

custom field select

Checkbox

custom field checkbox

Tags

Not supported in forms

Phone

custom field phone

Email

custom field email

Use custom fields

To implement the custom fields that you create from the ReachFive Console, you can use the UI SDK and add the custom fields as part of the showAuth method or you can configure Hosted pages to use custom fields.

UI SDK

The example below shows the implementation of the custom field loyalty_card_number.

See the showAuth page for more information.
client.showAuth({
    container: 'auth-widget',
    auth: {
      redirectUri: 'https://example.com/auth-callback'
    },
    allowForgotPassword: false,
    initialScreen: 'login',
    signupFields: [
      'email',
      'password',
      'passwordConfirmation',
      'custom_fields.loyalty_card_number' // Ask customer to supply number
    ],
    socialProviders: ['facebook', 'google'],
    showLabels: true,
    theme: {
      primaryColor: "#00bf48",
      borderRadius: "5",
      socialButton: {
        inline: true,
      }
    }
})

Hosted Pages

The example below implements custom_fields as a value under the signupFields parameter, calling the loyalty_card_number custom field. This is the JSON format you would use in the JSON config for widget at Settings  Hosted Pages page on the ReachFive Console.

To call a specific custom field, use the format custom_fields.customField.

For more information, see how to configure the display of hosted pages.

{
  "showSocialLogins": true,
  "socialProviders": ["facebook", "google"],
  "theme" : {
    "primaryColor" : "#229955",
    "borderRadius" : "3",
    "socialButton" : {
      "inline" : true
    }
  },
  "initialScreen": "signup",
  "allowLogin": true,
  "allowForgotPassword": true,
  "allowSignup": true,
  "signupFields" : ["birthdate", "email", "password", "custom_fields.loyalty_card_number"]
}