Feat/page content #317
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| --- | ||
| page_id: b3a309c6-af3c-4155-b39e-7e1f6e83721f | ||
| title: How content is managed in Kinde | ||
| sidebar: | ||
| order: 1 | ||
| relatedArticles: | ||
| - f0bc688b-a817-42ab-9a20-8e09cec06f37 | ||
|
|
||
| --- | ||
|
|
||
| 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. | ||
|
|
||
| Currently, you can edit content for the following pages: | ||
|
|
||
| - Sign up | ||
| - Sign-up confirmation | ||
| - Sign in | ||
| - Sign-in confirmation | ||
| - Request access form | ||
|
|
||
| Additional screens will be added, including error screens, in the coming months. | ||
|
|
||
| ## What can be edited? | ||
|
|
||
| All the content elements on pages, including headings, descriptions, field labels, etc. can be edited. | ||
|
|
||
| Go to Design > Page content. | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| --- | ||
| page_id: d5ddfbe2-6608-45d4-8c46-44be93690c9d | ||
| title: Page content translation | ||
| sidebar: | ||
| order: 3 | ||
| relatedArticles: | ||
| - b3a309c6-af3c-4155-b39e-7e1f6e83721f | ||
| - 2aa551b8-06c0-4947-bd4b-d643c77ed224 | ||
|
|
||
| --- | ||
|
|
||
| Here’s how translation is handled when you change page content. | ||
|
|
||
| ### Language detection | ||
|
|
||
| Language detection is automatically handled for you and Kinde gives display priority to languages as follows: | ||
|
|
||
| 1. The language supplied in the auth url ^ | ||
| 2. The preferred language selected in the user’s browser ^ | ||
| 3. The default language you have selected in Kinde | ||
|
|
||
| ^ If you have chosen not to support a language, we will try the next available option. | ||
|
|
||
| Through language matching, Kinde automatically works out the closest | ||
| base language to the requested language and will use this if supported | ||
| by your app. | ||
|
|
||
| After the priority list outlined above Kinde will fall back to US English as a last resort, if a translation is not available. | ||
|
|
||
| ### Widget translations | ||
|
|
||
| Translations inside of the Kinde widget are taken care of by Kinde. We will grab the copy from the relevant route and language from your `Page content` settings inside of Kinde and apply them to the widget. | ||
|
|
||
| ### Page translations | ||
|
||
|
|
||
| Kinde provides relevant localized content within the `context` object that is passed into the Page default function as mentioned above. Localizations and placeholder replacements are handled for you at run time. | ||
|
|
||
| **Example usage** | ||
|
|
||
| ```jsx | ||
| const {content} = event.context.widget; | ||
|
|
||
| <img src={<img_url>} alt={content.logoAlt} /> | ||
|
|
||
| <title>{content.pageTitle}</title> | ||
|
|
||
| <h1>{content.heading}</h1> | ||
|
|
||
| <p>{content.description}</p> | ||
| ``` | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| --- | ||
| page_id: a643d22e-c26c-4c14-9b95-76aea37352ef | ||
| title: Update page content in the auth flow | ||
| sidebar: | ||
| order: 2 | ||
| relatedArticles: | ||
| - b3a309c6-af3c-4155-b39e-7e1f6e83721f | ||
| - 2aa551b8-06c0-4947-bd4b-d643c77ed224 | ||
| - d5ddfbe2-6608-45d4-8c46-44be93690c9d | ||
|
|
||
| --- | ||
|
|
||
| For maximum extensibility, page content has been decoupled from the page itself. | ||
|
|
||
| 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). | ||
|
|
||
| ### Update page content | ||
|
|
||
| If your application is build for [multiple languages](https://docs.kinde.com/design/pages/internationalization), select these first in Kinde. | ||
|
||
|
|
||
| 1. In Kinde, go to **Design > Page content**. | ||
| 2. Select the language you want (only applicable if multiple languages are configured). | ||
| 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. | ||
| 4. Make the changes to the content. If you want, you can use text variables, explained below. | ||
| 5. When you’ve finished, select **Save**. | ||
| 6. Check changes by selecting **Preview**. | ||
|
|
||
| ### Text variables for page content | ||
|
|
||
| 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. | ||
|
|
||
| Variables can be used on pages as follows. | ||
|
|
||
| **Sign in page** | ||
|
|
||
| `${social_provider_name}` // for use on the social buttons | ||
|
|
||
| `${enterprise_provider_name}` // for use on the enterprise SSO buttons | ||
|
|
||
| **Sign up page** | ||
|
|
||
| `${social_provider_name}` // for use on the social buttons | ||
|
|
||
| `${enterprise_provider_name}` // for use on the enterprise SSO buttons | ||
|
|
||
| **Verify password** | ||
|
||
|
|
||
| `${email_address}` | ||
|
|
||
| **SMS verify code page** | ||
|
|
||
| `${phone_number}` // an obfuscated version of phone number | ||
|
|
||
| **Sign in confirm code page** | ||
|
|
||
| `${email_address}` | ||
|
|
||
| `${email_address_obfuscated}` | ||
|
|
||
| **Sign up confirm code page** | ||
|
|
||
| `${email_address}` | ||
|
|
||
| ### Include ‘escape route’ URL in auth errors | ||
|
|
||
| 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: | ||
|
|
||
| 1. In Kinde, go to **Settings > Applications** and select **View details** on your application. | ||
| 2. Enter your website URL into the **Application homepage URI** and **Application login URI** fields. | ||
| 3. Select **Save**. | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| --- | ||
| page_id: 8748fd8e-6f71-4386-bad6-ad3bbf3f12e3 | ||
| title: Manage page layouts | ||
| sidebar: | ||
| order: 2 | ||
| relatedArticles: | ||
| - a1887098-e139-4f98-adf7-ff5785aec76d | ||
| --- | ||
|
|
||
| You can manage the layout of authentication and other pages in Kinde, including the background, and position of page elements. | ||
|
|
||
| After you’ve set the global brand, view how it looks on individual pages, and make additional changes. You can further customize: | ||
|
|
||
| - sign in page - what a user sees each time they sign in to their account | ||
| - sign up page - what a user sees when they first sign up to your business | ||
| - 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. | ||
| - 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. | ||
| - Emails - for when you send email from the company. | ||
| - Subscription page - the sign up page for new subscribers (if you use this) | ||
| - Request access page - when you're collecting a waiting list | ||
|
|
||
| ### To customize pages | ||
|
|
||
| 1. Select the page you want to view or edit from the left menu. | ||
| 3. Depending on the kind of page you are viewing, you can edit, the background image, page layout, content, and more. | ||
| 4. Select **Preview** in the top right to view changes. | ||
| 5. Select **Save** to apply changes. | ||
|
|
||
| <Aside> | ||
|
|
||
| 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. | ||
|
|
||
| </Aside> | ||
|
|
||
| <img | ||
| src="https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/cc9ef0ab-51fc-4302-3a96-0273eaae6900/public" | ||
| alt="" | ||
| width="672px" | ||
| height="auto" | ||
| fetchpriority="low" | ||
| loading="lazy" | ||
| decoding="async" | ||
| /> | ||
|
|
||
| ## Other cusomizations you might want to apply | ||
|
|
||
| - [Use your own domain instead of Kinde’s](/build/domains/pointing-your-domain/) | ||
| - [Manage the authentication experience for users](/authenticate/custom-configurations/authentication-experience/) | ||
| - [Add a marketing consent checkbox to the sign up page](/design/pages/marketing-consent/) | ||
|
|
||
| ### Enable/disable additional auth elements | ||
|
|
||
| 1. In Kinde, go to **Settings > Applications** and select **View details** on your application. | ||
| 2. Scroll down to the **Authentication experience** section and make any changes you want. | ||
| 3. Select **Save**. |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@clairekinde11 as of now, it's still just the handful of fields we allowed previously we haven't opened the floodgates yet.
We added edit functionality for these few fields that had high customer asks:
Sign up screen
Sign in screen