Feat/page content

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
@@ -14,7 +14,7 @@ app_context:
 
 <Aside type="upgrade">
 
-Available on the [Kinde Pro plan](https://kinde.com/pricing/)
+Available on [paid Kinde plans](https://kinde.com/pricing/)
 
 </Aside>
 

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?
+
+Some of the key page content, including headings, descriptions, button labels, email labels, some error messages. 
+
+Go to Design > Page content.
+

src/content/docs/design/content-customization/update-auth-page-content.mdx

@@ -0,0 +1,50 @@
+---
+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 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).
+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 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**.

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**.

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.
-
-   <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.
+You can [change the light and dark theme settings for your organizations](/design/brand/apply-branding-for-an-organization/) as well.
 
-   </Aside>
+## Set brand colors for page elements
 
-<img
-  src="https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/cc9ef0ab-51fc-4302-3a96-0273eaae6900/public"
-  alt=""
-  width="672px"
-  height="auto"
-  fetchpriority="low"
-  loading="lazy"
-  decoding="async"
-/>
+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/).

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
 

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

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
 

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.
+
+   <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**.

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,14 @@ 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. 
+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
 

src/data/sidebarData.ts

@@ -194,30 +194,35 @@ 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/",
     items: [
       {
-        label: "Your brand",
+        label: "Brand",
         autogenerate: {directory: "design/brand"},
         collapsed: false
       },
       {
-        label: "Pages",
+        label: "Page layout",
         autogenerate: {directory: "design/pages"},
         collapsed: false
       },
       {
-        label: "Forms",
-        autogenerate: {directory: "design/forms"},
+        label: "Content",
+        autogenerate: {directory: "design/content-customization"},
         collapsed: false
       },
       {
         label: "Emails",
         autogenerate: {directory: "design/emails"},
         collapsed: false
+      },
+      {
+        label: "Forms",
+        autogenerate: {directory: "design/forms"},
+        collapsed: false
       }
     ]
   },