You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You can change the content for the main pages that your users see as part of authentication. You’re also able to manage the content in [all the languages you have selected](/design/pages/internationalization/) in Kinde.
12
+
13
+
Currently, you can edit content for the following pages:
14
+
15
+
- Sign up
16
+
- Sign-up confirmation
17
+
- Sign in
18
+
- Sign-in confirmation
19
+
- Request access form
20
+
21
+
Additional screens will be added, including error screens, in the coming months.
22
+
23
+
## What can be edited?
24
+
25
+
Some of the key page content, including headings, descriptions, button labels, email labels, some error messages.
For maximum extensibility, page content has been decoupled from the page itself.
14
+
15
+
This lets you update the copy on most screens, which you can do via the **Page content** section of the admin area (see below) or via API (coming soon).
16
+
17
+
### Update page content
18
+
19
+
If your application is built for [multiple languages](https://docs.kinde.com/design/pages/internationalization), select these first in Kinde.
20
+
21
+
1. In Kinde, go to **Design > Page content**.
22
+
2. Select the language you want (only applicable if multiple languages are configured).
23
+
3. Select the page you want to edit. The list of content shown corresponds with sections as they appear on the page to the user. For example, Main heading, Email field, etc.
24
+
4. Make the changes to the content. If you want, you can use text variables, explained below.
25
+
5. When you’ve finished, select **Save**.
26
+
6. Check changes by selecting **Preview**.
27
+
28
+
### Text variables for page content
29
+
30
+
Variables are used to stand in for actual values that you want to appear on pages. They are a way of automating content. For example, if you use the `${email_address}` variable, the user’s email address will be shown.
31
+
32
+
Variables can be used on pages as follows.
33
+
34
+
**Sign in confirm code page**
35
+
36
+
`${email_address}`
37
+
38
+
`${email_address_obfuscated}`
39
+
40
+
**Sign up confirm code page**
41
+
42
+
`${email_address}`
43
+
44
+
### Include ‘escape route’ URL in auth errors
45
+
46
+
When auth errors appear, you want to give users a way to navigate out of them. To provide an ‘escape route’ URL in these situations:
47
+
48
+
1. In Kinde, go to **Settings > Applications** and select **View details** on your application.
49
+
2. Enter your website URL into the **Application homepage URI** and **Application login URI** fields.
Copy file name to clipboardExpand all lines: src/content/docs/design/forms/set-up-subscription-form.mdx
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -17,9 +17,9 @@ app_context:
17
17
18
18
If you want to collect details from site visitors and subscribe to them to receive communications from your business, you can set up a form using Kinde.
19
19
20
-
## Customize the form
20
+
## Customize the subscription form
21
21
22
-
1. Go to **Design > Widgets > Subscribe**.
22
+
1. Go to **Design > Lead generation > Subscribe**.
23
23
2. In the panel on the right, make any content changes you want.
24
24
3. Enter the URL for the site where the form will appear. Note that you only need to include the root part of the URL, not the specific pages (e.g. `https://kinde.com`).
@@ -20,18 +20,10 @@ You also have the option to bring your own page design to the authentication exp
20
20
21
21
## Setting global brand elements
22
22
23
-
To ensure consistency across pages, Kinde gives you global brand options so that when you change the look on one page, the changes are automatically applied to all other pages.
23
+
You can choose to set a global theme for all pages, or else use global settings as a fallback for custom page designs.
24
24
25
25
Use the following procedures to make design changes to suit your brand.
26
26
27
-
## Set a light or dark theme
28
-
29
-
1. In Kinde, go to **Design > Global > Brand**.
30
-
2. Set the **Theme**: **Light**, **Dark**, or **User preference**. If you select user preference, make sure you choose a brand color scheme for both experiences. See below.
31
-
3. Select **Save**.
32
-
33
-
You can [change the light and dark theme settings for your organizations](/design/brand/apply-branding-for-an-organization/) as well.
34
-
35
27
## Add your company logo
36
28
37
29
1. In Kinde, go to **Design > Global > Brand**.
@@ -45,16 +37,6 @@ You can [change the light and dark theme settings for your organizations](/desig
45
37
46
38
3. Select **Save**.
47
39
48
-
## Change the language and name order on sign up pages
49
-
50
-
You first need to enable the language you want in the [global language settings](/design/pages/internationalization/).
51
-
52
-
1. In Kinde, go to **Design.**
53
-
2. Choose a sign up page. **Sign up** or **Request access**.
54
-
3. Select the language from the selector in the top right and then select **Save**.
55
-
56
-
For some languages, such as Hungarian and Japanese, this also switches the fields to be last name, then first name - which is the Eastern naming order.
57
-
58
40
## Add favicons for web browsers
59
41
60
42
Favicons are small icons that appear on browser tabs. To add them to Kinde, they must measure 48x48px (or multiples of, such as 96x96).
@@ -77,54 +59,21 @@ Favicons are small icons that appear on browser tabs. To add them to Kinde, they
77
59
78
60
To change the favicon of an organization, see [Apply unique branding for an organization](/design/brand/apply-branding-for-an-organization/).
79
61
80
-
## Set brand color scheme
81
-
82
-
Your selections will be inherited across all pages and for all organizations, unless you set overrides in an organization.
62
+
## Set a light or dark theme
83
63
84
64
1. In Kinde, go to **Design > Global > Brand**.
85
-
2.Select settings and colors for **Pages**,**Cards**, **Buttons,****Input fields**, and **Links**. Be sure to set a light and dark version of each if you want your brand colours to appear in both modes.
65
+
2.Set the **Theme**:**Light**, **Dark**, or **User preference**. If you select user preference, make sure you choose a brand color scheme for both experiences. See below.
86
66
3. Select **Save**.
87
-
4. To preview pages, select a page type from the left menu.
88
-
89
-
To set the brand color scheme of an organization, see [Apply unique branding for an organization](/design/brand/apply-branding-for-an-organization/).
90
-
91
-
## Customize user-facing pages
92
-
93
-
After you’ve set the global brand, view how it looks on individual pages, and make additional changes. You can further customize:
94
67
95
-
- sign in page - what a user sees each time they sign in to their account
96
-
- sign up page - what a user sees when they first sign up to your business
97
-
- confirm sign in page (if using [passwordless](/authenticate/authentication-methods/passwordless-authentication/) authentication) - where a user enters the passwordless email code each time they sign in.
98
-
- Confirm sign up page (if using [passwordless](/authenticate/authentication-methods/passwordless-authentication/) authentication) - where a user enters the passwordless email code the first time they sign up.
99
-
- Emails - for when you send email from the company.
100
-
- Subscription page - the sign up page for new subscribers (if you use this).
101
-
102
-
### To customize pages
103
-
104
-
1. Select the page you want to view or edit from the left menu.
105
-
2. On the preview screen, select **Edit**.
106
-
3. Depending on the kind of page you are viewing, you can edit, the background image, page layout, content, and more.
107
-
4. Select **Save** to preview and apply changes.
108
-
109
-
<Aside>
110
-
111
-
If the background image you choose appears cut off or too short in the preview even after you hit **Save**, it could be a CSS bug. Check how it looks in your live or test environment, where it should be fine. Let us know if you’re having issues.
68
+
You can [change the light and dark theme settings for your organizations](/design/brand/apply-branding-for-an-organization/) as well.
Your selections will be inherited across all pages and for all organizations, unless you set overrides.
124
73
125
-
## Other cusomizations you might want to apply
74
+
1. In Kinde, go to **Design > Global > Brand**.
75
+
2. Select settings and colors for **Pages (backgrounds)**, **Cards**, **Buttons,****Input fields**, and **Links**. Be sure to set a light and dark version of each if you want your brand colours to appear in both modes.
76
+
3. Select **Save**.
77
+
4. To preview pages, open the page using the side menu and select **Preview** in the top right.
126
78
127
-
-[Change the language that appears](/design/pages/internationalization/)
128
-
-[Use your own domain instead of Kinde’s](/build/domains/pointing-your-domain/)
129
-
-[Manage the authentication experience for users](/authenticate/custom-configurations/authentication-experience/)
130
-
-[Add a marketing consent checkbox to the sign up page](/design/pages/marketing-consent/)
79
+
To set the brand color scheme of an organization, see [Apply unique branding for an organization](/design/brand/apply-branding-for-an-organization/).
Copy file name to clipboardExpand all lines: src/content/docs/design/pages/internationalization.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -58,7 +58,7 @@ Through language matching, Kinde automatically works out the closest base langua
58
58
59
59
## Customize text on authentication pages
60
60
61
-
You can customize the text on the **Sign up, Sign in, Request access** and **Confirmation code**screens. See [Design your welcome pages](/design/pages/design-your-welcome-pages/) for more information.
61
+
You can customize the text on the **Sign up, Sign in, Request access** and **Confirmation code**pages. See [Design your welcome pages](/design/content-customization/update-auth-page-content/) for more information.
You can manage the layout of authentication and other pages in Kinde, including the background, and position of page elements.
11
+
12
+
After you’ve set the global brand, view how it looks on individual pages, and make additional changes. You can further customize:
13
+
14
+
- sign in page - what a user sees each time they sign in to their account
15
+
- sign up page - what a user sees when they first sign up to your business
16
+
- confirm sign in page (if using [passwordless](/authenticate/authentication-methods/passwordless-authentication/) authentication) - where a user enters the passwordless email code each time they sign in.
17
+
- Confirm sign up page (if using [passwordless](/authenticate/authentication-methods/passwordless-authentication/) authentication) - where a user enters the passwordless email code the first time they sign up.
18
+
- Emails - for when you send email from the company.
19
+
- Subscription page - the sign up page for new subscribers (if you use this)
20
+
- Request access page - when you're collecting a waiting list
21
+
22
+
### To customize pages
23
+
24
+
1. Select the page you want to view or edit from the left menu.
25
+
3. Depending on the kind of page you are viewing, you can edit, the background image, page layout, content, and more.
26
+
4. Select **Preview** in the top right to view changes.
27
+
5. Select **Save** to apply changes.
28
+
29
+
<Aside>
30
+
31
+
If the background image you choose appears cut off or too short in the preview even after you hit **Save**, it could be a CSS bug. Check how it looks in your live or test environment, where it should be fine. Let us know if you’re having issues.
Copy file name to clipboardExpand all lines: src/content/docs/design/pages/set-up-the-request-access-page.mdx
+8-5Lines changed: 8 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
page_id: d18e249b-6d74-47c6-a013-2dddb6906011
3
3
title: Set up the request access page
4
4
sidebar:
5
-
order: 2
5
+
order: 5
6
6
relatedArticles:
7
7
- aa132a66-b7eb-4d81-a039-dd1c3027f93e
8
8
- e800f9fe-597e-4d48-9e80-2e07067cc17d
@@ -19,11 +19,14 @@ People who customize pages also like to [use their own domain instead of Kinde
19
19
20
20
## **Design and activate the request access page**
21
21
22
-
1. Go to **Design > Pages > Request access**.
23
-
2.In the panel on the right, make your design selections and enter the content you want to appear. For tips on how to change things, see [Design your welcome pages](/design/pages/design-your-welcome-pages/).
22
+
1. Go to **Design > Lead generation > Request access**.
23
+
2.Make your design and layout selections. For tips on how to change things, see [Design your welcome pages](/design/pages/design-your-welcome-pages/).
24
24
3. Enter the **Success link URL**.
25
-
4. Switch the **Page details** button to **Live** and select **Save**.
26
-
5. You need to separately set up the **Request Access URL** on your website.
25
+
4. Select **Preview** to view how the page will look.
26
+
5. Once you like it, switch the **Page details** button to **Live** and then select **Save**.
27
+
6. To change the content on the page, go to **Page content** in the menu, and select the *Request access** page.
28
+
7. Make the changes you want in all the relevant languages and **Save**.
29
+
8. You'll need to separately set up the **Request Access URL** on your website.
0 commit comments