Customizing a user flow

Edit online

Change a login registration user flow to tailor the form to your needs. Existing fields can be modified and moved to other locations within a form. New form elements can be added. Validation of user data can be defined. Customize an IBM® Verify user flow with the Form element editor.

Before you begin

  • You must have administrative permission to complete this task.
  • Log in to the IBM Verify administration console as an Administrator. For more information, see Accessing IBM Verify.
  • A user flow in a draft or published state. See Create a user flow.

Procedure

  1. Select User experience > User registration.
  2. Select a user flow from the User registration dashboard to open the form in the Flow tab.
  3. Customize the user flow for your Verify tenant.
    • If the user flow is Published, select Edit as a draft in the right pane of the user flow page.
    • If the flow is in Draft, the page opens available for edits.
    In the middle pane of the page, select any element to change it. Use the User flow dialog icon to drag the element to another location within the section. Delete the element by using the Delete icon.
    Customize the element with the Form element editor in the right pane of the page. Some of the elements have dropdown menus with choices and other elements can include text or Markdown markup language to display in the form. Depending on the type of element selected, the fields vary.
    Some elements can use Attribute replacement, which captures the user's attribute value and uses it the next and subsequent times that the attribute is called. For example, by using code block {{name}}, the file can retrieve the user's attribute input from a previous step. The user's attribute input replaces the code block with the name that the user provided every time that {{name}} is called.
    Note: Attribute replacement cannot work if Form elements for the replacements are not added in a previous step.

    The +Add form element button is available in the first two sections of the form to add an element to the form.

    Use the Form element editor to define the type of element. The following Verify elements are available in the Form element dropdown menu.
    Account Password
    A password field. The field is used in the default user flow to ask the user to create a password during registration. Custom error messages can be set to inform the user of the potential problems with the input password.
    Agreement
    The agreement element is used to add a EULA agreement to the user registration form. The element is included in the default user flow. For more information, see Managing end user license agreements.
    Checkbox
    A checkbox field. Select a user attribute to define the selection for the user.
    Dropdown
    A dropdown field. Select a user attribute then define the options and values to create the selections on the dropdown menu. Replace the text in the Option label fields for what is displayed on the dropdown menu.
    Email
    An email field. The field is used in the default user flow to send an email back to the user in the Post-registration actions.
    Obfuscation
    An obfuscated field. The field is used in the default user flow to ask the user for sensitive information during registration.
    Password
    A password field. The field is used in the default user flow to ask the user to create a password during registration.
    Phone
    A phone number field. The field can be customized with attributes for home, work, mobile, and other values.
    Radio button
    A radio button field. Select a user attribute then define the options and values to create the selections for the radio button field.
    Social login button
    A social login button for use with a social identity provider. The field can be customized with button text.
    Text block
    A text block field. The field can include text or Markdown markup language to display in the form.
    Text input field
    A text input field for user data entry.

    Based on the type of element and the user attribute selected, different fields are available for further customization. For example, Field label, Helper text, Placeholder text, Required field, Field validation and Class names options are available in some of the element attributes. For more information about attributes, see Managing attributes.

    If Email or Phone is selected, a custom toggle enables an additional One-time password (OTP) verification step. This verification step includes a back button that can be toggled and customized.

    If the Field validation option is selected in an element attribute, use a regular expression (regex) to pattern match and validate the user input in a Date, Email, Password, Phone, or Text input field element. The regex cannot include delimiters or flags. For example, for input with 8 - 12 digits, enter the regex as ^\d{8,12}$ instead of /^\d{8,12}$/gm (where the two forward slash / characters are delimiters and g and m are flags). For more information about regex, see regular expression.

    For the Class names option, you can define HTML classes for use with a custom theme CSS file. To view the custom styling, select Save changes and then click the Get preview link. For more information, see Managing branding.

  4. Select the Settings tab of the user flow page to change the Name, URL path, Theme, Human verification, or Dynamic redirect for the user flow. For more information about Theme, see Managing branding.
  5. Optional: In the settings tab, click the Check username availability checkbox to verify that the username is available before a user continues on with the registration flow.
    Note: Before using this option, ensure that it is compatible with your company's security guidelines.
    Note: A message will be at the top of existing flows with the username element missing to complete these fields to translate them. To view the missing element, click Show element.
    1. Click Save settings.
    2. Select the Email address element.
    3. In the Form element editor select a User attribute.
    4. Toggle Account username on.
    5. The Form account editor generates populated text boxes that indicate whether a username is available to use or not. There are corresponding text boxes to notate a username search, if a username is available, or if a username is already in use. For further customization, you can edit the text in the text boxes.
  6. Scroll to the end of the page and select Save changes.
  7. Select the Translations tab of the user flow page to change the primary language that the profile is built in.
    1. Optional: Download the primary translation template first, and then edit it with the language you want.
    2. Click Add Translations.
    3. Select the Language you want from the drop down field.
    4. In the Upload translation section, click primary translation template to download a .csv file of the primary translation template.
    5. After you edit the primary_tranlation.csv template with he language you selected from the drop down field, click Upload file and select the .csv file that you edited.
    6. Optional: Select the checkbox of the language you uploaded to delete it.
    7. Click Save.
      Note: Select the checkbox of the language you uploaded to delete it.
  8. In the right pane, select Publish changes to make the user registration flow available to your users.
    Note, you can click the Get preview link to view the form before publishing. If you are working with a draft of a published user flow, you can also click View current version to display the current published user flow and then go back to the draft, if needed. Use the Copy flow link to create a duplicate copy of the flow with an incremental number added to the flow name. The Delete flow link removes the registration flow.

Example

To add a phone number to a login registration user flow:
  1. Open the user flow in edit mode.
  2. In the first section of the user flow page, select the +Add form element button to create a new element.
  3. Use the Form element editor to customize the element.
    1. In the Form element field, select Phone from the pull-down menu.
    2. In the User attribute field, select work_number.
    3. In the Field label field, change the text to Work phone number.
    4. In the Helper text field, enter the text Please add your phone number.
  4. Select Save flow in the middle pane of the user flow page.
  5. Click the Get preview link to view the form with the new phone number field.

What to do next

  • Make the user flow URL available to your new users for easier login access to your IBM Verify tenant.
  • Go to the User registration dashboard to see your new flow.