onboard

There is a demo workflow that should be deleted on this page. Please refer to this section of the Setup Guide for instructions.

Overview

Desktop

Mobile

Why does this page exist?

Immediately after a new User signs up for your application, they are navigated to this onboard page.

The onboard page contains four 'step' groups, that:

1. Welcomes the Current User

2. Asks the Current User to upload a profile picture

3. Asks the Current User for their website link, and to write a few sentences about themselves

After the Current User completes these steps (or skips them), the fourth onboard card group contains the Button Next (Group 4) element, which navigates them to the account page:

Who can access this page?

Logged-In Users can access this page.

What does this page allow my Users to do?

This page allows new Users to complete their profile information.

Where do my Users click in order to go to this page?

Users do not click anywhere to access this page.

When are my Users taken to this page?

New Users are navigated to this page automatically after clicking the Button Sign Up element within the login/signup popup reusable element:

If you require Users to confirm their email, the Button Get Started (Goes to Onboard) element on the confirm page navigates the Current User to this onboard page.

What should I keep in mind about this page’s workflows?

This page contains four groups (Group 1, Group 2, Group 3 and Group 4) which show different onboarding messages to the Current User.

The groups are shown and hidden based on the Group Onboarding Page Container's element's "CurrentSlide" custom state value (type: number, list: no).

The Button Next elements use the "Element Actions --> Set State" action to change the value of this custom state to a number between 1 and 4.

When that custom state's value is changed, the corresponding group is shown based on these conditionals:

Group 1

Group 2

Group 3

Group 4

If you would like to add more groups, you would need to copy+paste a group, and change that new group's conditional formatting. For example, if you added a Group 5 element, the conditional would be:

"When Group Onboarding Page Container's CurrentSlide is 5" This element is visible (checked)

Then, make sure Group 4's Button Next (Group 4) element's text is changed to "Continue", and that that button's workflow sets the "CurrentSlide" custom state (type: number, list: no) to 5 (instead of navigating the Current User to the messaging page).

For more information on how these custom state actions work, please refer to the B. Onboarding workflow folder.

What should I keep in mind about this page’s design?

This page uses some of the onboarding and empty state groups from the UI Components page. To add more 'slide' groups you can copy+paste group elements from there as well.

The group elements on the UI Components page are set to be visible on page load. When copy+pasting them to the onboard page, uncheck the "this element is visible on page load" setting, and set the group to only be visible based on the corresponding custom state value.

The header_logo_only reusable element is shown on this page, since we'd prefer that the Current User complete the onboarding steps before viewing other pages of the app.