From d012154b3a0245f487e9f61d5714cb678258211a Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 11:09:39 +1100 Subject: [PATCH 01/20] Fix/Change page order --- src/content/docs/design/brand/remove-kinde-branding.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/design/brand/remove-kinde-branding.mdx b/src/content/docs/design/brand/remove-kinde-branding.mdx index b830b80c..9123bfc4 100644 --- a/src/content/docs/design/brand/remove-kinde-branding.mdx +++ b/src/content/docs/design/brand/remove-kinde-branding.mdx @@ -2,7 +2,7 @@ page_id: 33f63be0-3621-4b9a-983e-d68524affa80 title: Remove Kinde branding from sign in pages sidebar: - order: 3 + order: 1 relatedArticles: - f0bc688b-a817-42ab-9a20-8e09cec06f37 - 7b32cd0e-7af3-4d57-9c3c-4a37df3d14d1 From b03277c3c72176b043b7bb595ffd2a0328d1d270 Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 11:54:18 +1100 Subject: [PATCH 02/20] Create how-content-is-managed.mdx New overview topic --- .../how-content-is-managed.mdx | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 src/content/docs/design/content-customization/how-content-is-managed.mdx diff --git a/src/content/docs/design/content-customization/how-content-is-managed.mdx b/src/content/docs/design/content-customization/how-content-is-managed.mdx new file mode 100644 index 00000000..6b232ed2 --- /dev/null +++ b/src/content/docs/design/content-customization/how-content-is-managed.mdx @@ -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. + From 29ef478b25232eb411bc6e3f0cd0d4cc313204d0 Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 11:57:48 +1100 Subject: [PATCH 03/20] Feat/Added content section to sidebar --- src/data/sidebarData.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/data/sidebarData.ts b/src/data/sidebarData.ts index 9a1fea22..1204ce0d 100644 --- a/src/data/sidebarData.ts +++ b/src/data/sidebarData.ts @@ -194,7 +194,7 @@ const sidebarData = [ }, { label: "Design", - description: "Integrate your own brand elements for pages and screens", + description: "Integrate your brand, and update content for pages and screens", icon: "brand", collapsed: true, cardLink: "/design/brand/apply-branding-for-an-organization/", @@ -209,6 +209,11 @@ const sidebarData = [ autogenerate: {directory: "design/pages"}, collapsed: false }, + { + label: "Content customization", + autogenerate: {directory: "design/content-customization"}, + collapsed: false + }, { label: "Forms", autogenerate: {directory: "design/forms"}, From a48ee92ef83defb98001ee9c6862dd1f60fc8717 Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 12:07:22 +1100 Subject: [PATCH 04/20] Feat/Update xrefs --- .../update-auth-page-content.mdx | 69 +++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 src/content/docs/design/content-customization/update-auth-page-content.mdx diff --git a/src/content/docs/design/content-customization/update-auth-page-content.mdx b/src/content/docs/design/content-customization/update-auth-page-content.mdx new file mode 100644 index 00000000..05b305e7 --- /dev/null +++ b/src/content/docs/design/content-customization/update-auth-page-content.mdx @@ -0,0 +1,69 @@ +--- +page_id: +title: Update page content in the auth flow +sidebar: + order: 2 +relatedArticles: + - b3a309c6-af3c-4155-b39e-7e1f6e83721f + - 2aa551b8-06c0-4947-bd4b-d643c77ed224 + +--- + +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**. From cb4e7224a69f3642521b543c129b5dea469107ef Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 12:12:23 +1100 Subject: [PATCH 05/20] Feat/Create how-translation-works.mdx --- .../how-translation-works.mdx | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) create mode 100644 src/content/docs/design/content-customization/how-translation-works.mdx diff --git a/src/content/docs/design/content-customization/how-translation-works.mdx b/src/content/docs/design/content-customization/how-translation-works.mdx new file mode 100644 index 00000000..08bc4bdb --- /dev/null +++ b/src/content/docs/design/content-customization/how-translation-works.mdx @@ -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; + +} alt={content.logoAlt} /> + +
{content.description}
+``` From dea3453a6ef3dc7396d4e2a8f6377c16e1f04598 Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 12:13:31 +1100 Subject: [PATCH 06/20] Page ID updated --- .../design/content-customization/update-auth-page-content.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/content/docs/design/content-customization/update-auth-page-content.mdx b/src/content/docs/design/content-customization/update-auth-page-content.mdx index 05b305e7..e1d521e7 100644 --- a/src/content/docs/design/content-customization/update-auth-page-content.mdx +++ b/src/content/docs/design/content-customization/update-auth-page-content.mdx @@ -1,11 +1,12 @@ --- -page_id: +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 --- From 8ba1fdfd5370caf134f5128c379fd719171c9c89 Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 12:24:12 +1100 Subject: [PATCH 07/20] Feat/Update sidebar for custom ui (v1) --- src/data/sidebarData.ts | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/data/sidebarData.ts b/src/data/sidebarData.ts index 1204ce0d..f1a95719 100644 --- a/src/data/sidebarData.ts +++ b/src/data/sidebarData.ts @@ -200,28 +200,28 @@ const sidebarData = [ cardLink: "/design/brand/apply-branding-for-an-organization/", items: [ { - label: "Your brand", + label: "Brand", autogenerate: {directory: "design/brand"}, collapsed: false }, { - label: "Pages", + label: "Page layout", autogenerate: {directory: "design/pages"}, collapsed: false }, { - label: "Content customization", + label: "Content", autogenerate: {directory: "design/content-customization"}, collapsed: false }, { - label: "Forms", - autogenerate: {directory: "design/forms"}, + label: "Emails", + autogenerate: {directory: "design/emails"}, collapsed: false }, { - label: "Emails", - autogenerate: {directory: "design/emails"}, + label: "Forms", + autogenerate: {directory: "design/forms"}, collapsed: false } ] From 634fe83adf31ab1ae599c9358b2ad84434ca3616 Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 12:26:22 +1100 Subject: [PATCH 08/20] Update to note about Pro --- src/content/docs/design/brand/remove-kinde-branding.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/design/brand/remove-kinde-branding.mdx b/src/content/docs/design/brand/remove-kinde-branding.mdx index 9123bfc4..e3abe21f 100644 --- a/src/content/docs/design/brand/remove-kinde-branding.mdx +++ b/src/content/docs/design/brand/remove-kinde-branding.mdx @@ -14,7 +14,7 @@ app_context: From 094838044e6cae2c75b398c594092c16037b9ad0 Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 12:38:14 +1100 Subject: [PATCH 09/20] Feat/Update for custom UI --- .../pages/design-your-welcome-pages.mdx | 75 +++---------------- 1 file changed, 12 insertions(+), 63 deletions(-) diff --git a/src/content/docs/design/pages/design-your-welcome-pages.mdx b/src/content/docs/design/pages/design-your-welcome-pages.mdx index cc6c4e98..c3ab4150 100644 --- a/src/content/docs/design/pages/design-your-welcome-pages.mdx +++ b/src/content/docs/design/pages/design-your-welcome-pages.mdx @@ -1,6 +1,6 @@ --- page_id: 7b32cd0e-7af3-4d57-9c3c-4a37df3d14d1 -title: Design sign in pages and brand experience +title: Design brand experience defaults sidebar: order: 1 relatedArticles: @@ -20,18 +20,10 @@ You also have the option to bring your own page design to the authentication exp ## Setting global brand elements -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. +You can choose to set a global theme for all pages, or else use global settings as a fallback for custom page designs. Use the following procedures to make design changes to suit your brand. -## Set a light or dark theme - -1. In Kinde, go to **Design > Global > Brand**. -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. -3. Select **Save**. - -You can [change the light and dark theme settings for your organizations](/design/brand/apply-branding-for-an-organization/) as well. - ## Add your company logo 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 3. Select **Save**. -## Change the language and name order on sign up pages - -You first need to enable the language you want in the [global language settings](/design/pages/internationalization/). - -1. In Kinde, go to **Design.** -2. Choose a sign up page. **Sign up** or **Request access**. -3. Select the language from the selector in the top right and then select **Save**. - -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. - ## Add favicons for web browsers 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 To change the favicon of an organization, see [Apply unique branding for an organization](/design/brand/apply-branding-for-an-organization/). -## Set brand color scheme - -Your selections will be inherited across all pages and for all organizations, unless you set overrides in an organization. +## Set a light or dark theme 1. In Kinde, go to **Design > Global > Brand**. -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. +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. 3. Select **Save**. -4. To preview pages, select a page type from the left menu. - -To set the brand color scheme of an organization, see [Apply unique branding for an organization](/design/brand/apply-branding-for-an-organization/). - -## Customize user-facing pages - -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). - -### To customize pages - -1. Select the page you want to view or edit from the left menu. -2. On the preview screen, select **Edit**. -3. Depending on the kind of page you are viewing, you can edit, the background image, page layout, content, and more. -4. Select **Save** to preview and apply changes. - - +## Set brand colors for page elements - +Your selections will be inherited across all pages and for all organizations, unless you set overrides. -## Other cusomizations you might want to apply +1. In Kinde, go to **Design > Global > Brand**. +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. +3. Select **Save**. +4. To preview pages, open the page using the side menu and select **Preview** in the top right. -- [Change the language that appears](/design/pages/internationalization/) -- [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/) +To set the brand color scheme of an organization, see [Apply unique branding for an organization](/design/brand/apply-branding-for-an-organization/). From ee23ae1e912991b85c541fac4302267550649dd1 Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 12:46:38 +1100 Subject: [PATCH 10/20] Feat/Custom pages --- src/content/docs/design/pages/page-layout.mdx | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 src/content/docs/design/pages/page-layout.mdx diff --git a/src/content/docs/design/pages/page-layout.mdx b/src/content/docs/design/pages/page-layout.mdx new file mode 100644 index 00000000..4800b4b0 --- /dev/null +++ b/src/content/docs/design/pages/page-layout.mdx @@ -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. + + + + + +## 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**. From b9154f7c53e8f0e8af584159cc2550b0a191c752 Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 12:49:39 +1100 Subject: [PATCH 11/20] Fix/Change order --- src/content/docs/design/pages/link-to-homepage.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/design/pages/link-to-homepage.mdx b/src/content/docs/design/pages/link-to-homepage.mdx index 98bdef8a..c3f717bf 100644 --- a/src/content/docs/design/pages/link-to-homepage.mdx +++ b/src/content/docs/design/pages/link-to-homepage.mdx @@ -2,7 +2,7 @@ page_id: 9e46ddfc-a3db-4a77-9a5e-fe606339a433 title: Add homepage URL to the sign-in page sidebar: - order: 2 + order: 4 relatedArticles: - b3081ca1-2aa1-45e3-a42f-5295aac49bc3 - 6c70b7ae-1b1b-43bb-bea1-9b3ec88dd082 From 8bfcca84a0901b7aa2aea8483d1887944a34bd86 Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 12:54:50 +1100 Subject: [PATCH 12/20] Update for custom page changes --- .../design/pages/set-up-the-request-access-page.mdx | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/content/docs/design/pages/set-up-the-request-access-page.mdx b/src/content/docs/design/pages/set-up-the-request-access-page.mdx index 68c19eb8..07e32dd5 100644 --- a/src/content/docs/design/pages/set-up-the-request-access-page.mdx +++ b/src/content/docs/design/pages/set-up-the-request-access-page.mdx @@ -2,7 +2,7 @@ page_id: d18e249b-6d74-47c6-a013-2dddb6906011 title: Set up the request access page sidebar: - order: 2 + order: 5 relatedArticles: - aa132a66-b7eb-4d81-a039-dd1c3027f93e - e800f9fe-597e-4d48-9e80-2e07067cc17d @@ -19,11 +19,13 @@ People who customize pages also like to [use their own domain instead of Kinde ## **Design and activate the request access page** -1. Go to **Design > Pages > Request access**. -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/). +1. Go to **Design > Lead generation > Request access**. +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/). 3. Enter the **Success link URL**. -4. Switch the **Page details** button to **Live** and select **Save**. -5. You need to separately set up the **Request Access URL** on your website. +4. Select **Preview** to view how the page will look. +5. Once you like it, switch the **Page details** button to **Live** and then select **Save**. +6. To change the content on the page, go to **Page content** in the menu, and select the *Request access** page. Make the changes you want in all the relevant languages and **Save**. +5. You'll need to separately set up the **Request Access URL** on your website. ## Manage request access contacts From 7d1a1383f1c9dd08886b49bc27f384f41f5b798b Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 12:59:48 +1100 Subject: [PATCH 13/20] Feat/Update for custom UI --- src/content/docs/design/pages/marketing-consent.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/docs/design/pages/marketing-consent.mdx b/src/content/docs/design/pages/marketing-consent.mdx index 2df19891..061b1d74 100644 --- a/src/content/docs/design/pages/marketing-consent.mdx +++ b/src/content/docs/design/pages/marketing-consent.mdx @@ -2,7 +2,7 @@ page_id: 3821e088-e51c-4a10-a4e1-b471a525d75b title: User consent for marketing on sign up sidebar: - order: 5 + order: 6 relatedArticles: - a1887098-e139-4f98-adf7-ff5785aec76d - 43e8aa2d-76a4-4445-ae90-84d3f1a55fcb @@ -28,11 +28,11 @@ You need to switch this on for each application you want it to appear for. **Update the checkbox label** -1. Go to **Design > Pages > Sign up**. -2. On the preview side of the page, select **Edit**. -3. In the panel on the right, scroll to the **Marketing** section. -4. Add or edit the text that appears to the user. -5. Select **Save**. You can preview what it looks like. +1. Go to **Design > Page content**. +2. Select the **Sign up page** from the dropdown. +3. Scroll to the **Label for requesting marketing consent** field and make the required changes. +4. Select Select **Save**. +5. To preview, select **Sign up page** in the menu and select **Preview**. ## View or change the consent status for a user From 163b41aa510c083be42c2078493090baba72bc08 Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 13:02:30 +1100 Subject: [PATCH 14/20] Small update for custom UI --- src/content/docs/design/pages/internationalization.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/design/pages/internationalization.mdx b/src/content/docs/design/pages/internationalization.mdx index 84be1ad9..6e10c535 100644 --- a/src/content/docs/design/pages/internationalization.mdx +++ b/src/content/docs/design/pages/internationalization.mdx @@ -58,7 +58,7 @@ Through language matching, Kinde automatically works out the closest base langua ## Customize text on authentication pages -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. +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. ## Support for right to left (RTL) languages From aaecc1430bd10460c5a4c38773756aa3fdc27bdd Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 13:03:55 +1100 Subject: [PATCH 15/20] Feat/Minor change for custom UI --- src/content/docs/design/forms/set-up-subscription-form.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/design/forms/set-up-subscription-form.mdx b/src/content/docs/design/forms/set-up-subscription-form.mdx index c9e2ddf4..3eadedc0 100644 --- a/src/content/docs/design/forms/set-up-subscription-form.mdx +++ b/src/content/docs/design/forms/set-up-subscription-form.mdx @@ -17,9 +17,9 @@ app_context: 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. -## Customize the form +## Customize the subscription form -1. Go to **Design > Widgets > Subscribe**. +1. Go to **Design > Lead generation > Subscribe**. 2. In the panel on the right, make any content changes you want. 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`). 4. Select **Save and generate code**. From 10445dcfb0d783851454fabc64256e7d4d2192ec Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 16:16:37 +1100 Subject: [PATCH 16/20] Feedback - update --- .../design/content-customization/how-content-is-managed.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/design/content-customization/how-content-is-managed.mdx b/src/content/docs/design/content-customization/how-content-is-managed.mdx index 6b232ed2..d3270fdc 100644 --- a/src/content/docs/design/content-customization/how-content-is-managed.mdx +++ b/src/content/docs/design/content-customization/how-content-is-managed.mdx @@ -22,7 +22,7 @@ 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. +Some of the key page content, including headings, descriptions, button labels, email labels, some error messages. Go to Design > Page content. From 2f0be470d6ac52cb0e28074dfb47df3fcef88c6a Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 16:23:09 +1100 Subject: [PATCH 17/20] Fix/Feedback changes --- .../docs/design/pages/set-up-the-request-access-page.mdx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/content/docs/design/pages/set-up-the-request-access-page.mdx b/src/content/docs/design/pages/set-up-the-request-access-page.mdx index 07e32dd5..48bc2a86 100644 --- a/src/content/docs/design/pages/set-up-the-request-access-page.mdx +++ b/src/content/docs/design/pages/set-up-the-request-access-page.mdx @@ -24,8 +24,9 @@ People who customize pages also like to [use their own domain instead of Kinde 3. Enter the **Success link URL**. 4. Select **Preview** to view how the page will look. 5. Once you like it, switch the **Page details** button to **Live** and then select **Save**. -6. To change the content on the page, go to **Page content** in the menu, and select the *Request access** page. Make the changes you want in all the relevant languages and **Save**. -5. You'll need to separately set up the **Request Access URL** on your website. +6. To change the content on the page, go to **Page content** in the menu, and select the *Request access** page. +7. Make the changes you want in all the relevant languages and **Save**. +8. You'll need to separately set up the **Request Access URL** on your website. ## Manage request access contacts From 88bc602dccf509bf5cf32f48106a23a9b588931b Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 16:25:42 +1100 Subject: [PATCH 18/20] Fix/Feedback --- .../update-auth-page-content.mdx | 20 ------------------- 1 file changed, 20 deletions(-) diff --git a/src/content/docs/design/content-customization/update-auth-page-content.mdx b/src/content/docs/design/content-customization/update-auth-page-content.mdx index e1d521e7..6c194e27 100644 --- a/src/content/docs/design/content-customization/update-auth-page-content.mdx +++ b/src/content/docs/design/content-customization/update-auth-page-content.mdx @@ -31,26 +31,6 @@ Variables are used to stand in for actual values that you want to appear on page 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}` From 062434624ead4bed4c867bbf17aa1ee5fe680695 Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 16:26:19 +1100 Subject: [PATCH 19/20] Fix/typo --- .../design/content-customization/update-auth-page-content.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/design/content-customization/update-auth-page-content.mdx b/src/content/docs/design/content-customization/update-auth-page-content.mdx index 6c194e27..0e0d0caf 100644 --- a/src/content/docs/design/content-customization/update-auth-page-content.mdx +++ b/src/content/docs/design/content-customization/update-auth-page-content.mdx @@ -16,7 +16,7 @@ This lets you update the copy on most screens, which you can do via the **Page c ### Update page content -If your application is build for [multiple languages](https://docs.kinde.com/design/pages/internationalization), select these first in Kinde. +If your application is built 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). From 1317dfede4bc5cc9c980444cfa23734fd7b31507 Mon Sep 17 00:00:00 2001 From: ClaireM <127452294+clairekinde11@users.noreply.github.com> Date: Thu, 16 Jan 2025 16:29:42 +1100 Subject: [PATCH 20/20] Delete page - to be added later --- .../how-translation-works.mdx | 50 ------------------- 1 file changed, 50 deletions(-) delete mode 100644 src/content/docs/design/content-customization/how-translation-works.mdx diff --git a/src/content/docs/design/content-customization/how-translation-works.mdx b/src/content/docs/design/content-customization/how-translation-works.mdx deleted file mode 100644 index 08bc4bdb..00000000 --- a/src/content/docs/design/content-customization/how-translation-works.mdx +++ /dev/null @@ -1,50 +0,0 @@ ---- -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; - -} alt={content.logoAlt} /> - -{content.description}
-```