앱 로그인 페이지 - aeb logeu-in peiji

The custom app login page lets you enhance your brand and your user experience by making it more in line with your company, organization, or use case.

This is just one of the many ways that you can make the app your own!

With it, you can:

• Add a custom logo

• Adjust the colors to match your brand

• Add a custom background

• Adjust the verbiage to say what you want it to

• Adjust the login button’s height, width, and corner radius

• Turn on and off social login (on Professional plans and above)

How to access the Custom App Login Page:

Simply go to Security >> User Login

What are the different sections of the Login Screen, and how do you use them?

We’ll go through the Login Screen section by section so that you know how to make an awesome looking login screen!

First, we’ll go through the options found in the Graphics section:

Logo

The Logo section allows you to upload your custom logo which will appear above the “Email” and “Password” fields.

Here’s how you can add your logo to the login screen:

Step 1: Click on the image upload button
Click on the gray image upload button:

This will open up the Media Library where you can add an image already uploaded to the Media Library, or you can upload a file from your computer.

Step 2: (optional) Adjust the image’s scale in the login screen

We provide a slider that allows you to adjust the scale of your logo as it’s displayed on the login screen.

Custom Background

The Custom Background section allows you to upload your own custom background or apply a custom colored gradient to the login screen. Let’s go through both options:

Custom Background Image

If you want to use your own image as the background for your login screen, read on to find out how to do this!

Step 1: Click on the image upload button
Click on the gray image upload button:

This will open up the Media Library where you can add an image already uploaded to the Media Library, or you can upload a file from your computer.

Note: We recommend that you upload two images that either a jpg or a png. One that’s 750px x 1043px for phones, and one that’s 1536px x 2048px for tablets.

Step 2: (optional) Adjust the background image’s opacity
We provide a slider that allows you to adjust the opacity of your background image on the login screen.

Background Color

If you want to use a single background color or a two-color gradient as the background for your login screen, read on to find out how to do this!

Step 1: Select “On” under “Background Color”
First, you will need to enable the background color option

Step 2: Select the color(s) that you want to use
Click on the box next to “Background Color” to begin selecting the color(s) that you’d like to use in the background of the login screen.

This will bring up the color selection box where you have a number of options!

You can use a single color by selecting “Solid” for “Color Type”:

Or you can create a gradient between two colors by selecting “Gadient” for “Color Type”:

Note: You have the ability to change how much of the screen each color takes up, the opacity of each color, as well as the option to choose from a number of different gradient types.

You can either use our color picker or if you know the hex code of the color you want to use, you can type it into this field:

Pro Tip: You can combine the background image and color to produce some amazing results!

Did you know that you can combine the background image and background color that you created to make some really stunning results? All you need to do is enable the background color and adjust the opacity of the background image.

How to Adjust the Input Fields

The “Input Fields” section allows you to adjust the look of the “Email” and “Password” input fields.

How you can change the look of the input fields

You can change the color of the text in the “Email” and “Password” input fields by clicking on the color picker next to “Text”

Click on this box to change the color of the “Email” and “Password” text in the input fields:

You can change the color of the line that displays under the “Email” and “Password” fields by clicking on the color picker next to “Border Color”

Click on this box to change the color of the line that shows under the “Email” and “Password” input fields:

You can change the color of the icons that display inside the “Email” and “Password” fields by clicking on the color picker next to “Icons”

Click on this box to change the color of the icons that display inside to the “Email” and “Password” input fields:

We also give you the option to hide these icons. Simply select “Off” to hide these icons here:

Note: For all three options, you can either use our color picker or if you know the hex code of the color you want to use, you can type it into this field:

How to Adjust the Button & Text

The “Button & Text” section allows you to adjust the look of the “Login” button as well as the links and text on the login screen. Here’s how you can change the look of those elements in the login screen:

You can change the color of the “Login” button’s text by clicking on the color picker next to “Button Text”

Click on this box to change the color of the text in the “Login” button:

You can change the color of the text that displays under the “Login” button by clicking on the color picker next to “Text”

Click on this box to change the color of the text that displays under the “Login” button:

You can change the color of the “Login” button by clicking on the color picker next to “Buttons”

Click on this box to change the color of the “Login” button:

You can change the color of the “Forgot Password” and “Register” links by clicking on the color picker next to “Links”

Click on this box to change the color of the links found within the Login screen:

You can also change the size and shape of the “Login” button in this section

We give you the freedom to change the Button Corner Radius of the log in button:

The Button Corner Radius slider makes the edges of the button more or less rounded. If you would like to make the button look like an oval, then move the slider all the way to the right. If you would like it to be a rectangle, move it all the way to the left.

How to Change your Custom Login Page's Settings

Login Settings

Here you can enable or disable the ability to login or register an account with a Twitter and Facebook profile.

Note: This option is only available on our Professional level and above plans.

Session Expiration allows you the app owner to configure your user's session expiration time to increase security. This would be recommended for use with high-risk data apps.

Domain Settings

Here you can set up your own domain for your users. This comes in handy and makes it easier for your users for internal apps when they all have the same email domain. For example, if all of your users have emails ending in “@yourdomain.com” you can type that domain into this box. This will allow your users such as “[email protected]” to login with just “cool.guy” since your domain will be automatically attached to the end of their username in-app.

If your user types in their full email address, or an email address with a different email domain, that will overwrite the default domain that was set up. So, if you have “@yourdomain.com” set up as your default domain and someone registers as "[email protected]", they will be registered as [email protected].

Also, if they type in their email address with the default domain included, out system won’t attach the default domain to the end of their email address. So if the user “[email protected]” registers with the full email address, they will be registered as that, not “[email protected]@yourdomain.com”.

Language Settings

The Language Settings allows you to edit phrases and messages found in the login screen.

The Customize Tab

The Customize tab gives you additional control over customizing the text of what your users see when they register for an in-app profile. For most of our apps the registration page only asks the user for their email and password, but with the Customize Tab you not only can change the phrasing in your register page, but it also allows you to add additional fields to the registration screen as well as append your own terms and conditions and privacy policy to the end of our own.

Note: This feature is only available on our Business level plan. If you’re interested in learning more about that plan and all of its additional features, we encourage you to reach out to us at [email protected] and we’d be more than happy to discuss the plan and all its features with you!

If you would like to start customizing your registration screen all you need to do is click this toggle to enable the customization options for your registration page.

Once you have enabled the customization options for your registration page, you’ll see that there’s a number of different sections. Let’s go over each section now.

Name Section

The first deals with the user’s First Name, Last Name, and Display Name. Simply click on the toggle next to each field to add that field to the registration page and enable the customization options for each. This allows you to give your users the option of typing in their first and last name, as well as a display name when registering for an account. You can think of the display name as a username of sorts.

If you would like to make these fields required, simply click on the toggle next to “Required”. You can also change the error message that users see when they don’t fill out the required fields if you would like to.

If at any time you’d like to hide these fields, all you need to do is click the toggle next to “Active”. Then when you want to display them again click the toggle next to “Active” again.

Bio Section

The bio section allows users to enter information about themselves such as who they are, what they like to do, their role in the company, etc.

Just like the Name Section all you need to do to show/hide this section is to click the toggle next to “Active” and if you’d like to make it a required field click on the toggle next to “Required”.

Email Section

The Email Section is slightly different than the Name and Bio Sections in the sense that an email address is required for profile registration. So while you can’t show/hide this section, you can change the phrasing of the email field’s label and error messages.

Address Section

In the Address Section you can allow users to enter in their address when registering.

Note: In order for this to work you will need to upload your Google API key. For more information please reach out to your account manager.

You can also just require the user to enter in their zip code as opposed to their full address. Doing this doesn’t require the Google API key.

Password Section

Just like the Email Section, passwords are required. In this section you can alter the text of the label that appears in the password field as well as the error messages that appear when a user doesn’t meet the password requirements.

Users are still required to choose a password that’s at least 8 characters long and contains at least one Upper Case letter, Lower Case letter, Number, and a Symbol. You can also require users to re-type their password in by clicking the re-type password toggle.

This can help users verify that they’ve typed in their password correctly when registering for an in-app profile.

Terms And Conditions & Privacy Policy Section

This section allows you to append your own custom terms and conditions and privacy policy to the end of the terms already laid out by us in the app.

Two things to note: If you decide to add your own terms and conditions and/or privacy policy to the app, they won’t replace the terms already laid out within the app but will be added at the end of the terms. You will also need to accept liability for any legal issues brought upon by adding in your own terms to the app by checking this box:

Once you have accepted liability, you can begin altering the Terms and Conditions and Privacy Policy labels as well as add your own custom terms. Just make sure you click “Save” once you are done.

Congratulations! You now know how to customize your registration page!

Related Articles

In addition to this article, we recommend checking out the following related articles so that you have a better insight into how to use the system to its fullest advantage: