feat(portal): Reply to and from FAQ (#4858)

cloudjumpercat · Copilot · lena-larionova · web-flow · commit 5844488c4657 · 2026-04-20T11:08:33.000-05:00
* reply to and from FAQ

Signed-off-by: Diana &lt;75819066+cloudjumpercat@users.noreply.github.com&gt;

* Apply suggestions from code review

Co-authored-by: Copilot &lt;175728472+Copilot@users.noreply.github.com&gt;

* Add API instructions, fix alt text

Signed-off-by: Diana &lt;75819066+cloudjumpercat@users.noreply.github.com&gt;

* Apply suggestions from code review

Co-authored-by: lena-larionova &lt;54370747+lena-larionova@users.noreply.github.com&gt;

* Add email icon, add API steps

Signed-off-by: Diana &lt;75819066+cloudjumpercat@users.noreply.github.com&gt;

* remove icon

Signed-off-by: Diana &lt;75819066+cloudjumpercat@users.noreply.github.com&gt;

* please vale

Co-authored-by: Diana &lt;75819066+cloudjumpercat@users.noreply.github.com&gt;

* Apply suggestions from code review

Co-authored-by: lena-larionova &lt;54370747+lena-larionova@users.noreply.github.com&gt;

---------

Signed-off-by: Diana &lt;75819066+cloudjumpercat@users.noreply.github.com&gt;
Co-authored-by: Copilot &lt;175728472+Copilot@users.noreply.github.com&gt;
Co-authored-by: lena-larionova &lt;54370747+lena-larionova@users.noreply.github.com&gt;
diff --git a/app/_includes/faqs/portal-email.md b/app/_includes/faqs/portal-email.md
@@ -0,0 +1,38 @@
+To customize the reply-to and from, do the following in the {{site.konnect_short_name}} UI:
+1. Set up a [custom domain](/dev-portal/custom-domains/) in {{site.dev_portal}}.
+1. In the Portal Editor, navigate to the email settings.
+1. Click **Email notification settings**.
+1. Enter your from name and email.
+    Reply-to email is optional.
+
+Alternatively, you can use the {{site.dev_portal}} API:
+1. Send a POST request to the [`/portals/{portalId}/custom-domain` endpoint](/api/konnect/portal-management/v3/#/operations/create-portal-custom-domain):
+{% capture create_custom_domain %}  
+<!--vale off-->
+{% konnect_api_request %}
+url: /v3/portals/$DEV_PORTAL_ID/custom-domain
+method: POST
+body:
+    hostname: example.com
+    enabled: true
+    ssl: {}
+{% endkonnect_api_request %}
+<!--vale on-->
+{% endcapture %}
+{{ create_custom_domain | indent: 3 }}
+
+2. Send a POST request to the [`/portals/{portalId}/email-config` endpoint](/api/konnect/portal-management/v3/#/operations/create-portal-email-config):
+{% capture create_email_config %}
+<!--vale off-->
+{% konnect_api_request %}
+url: /v3/portals/$DEV_PORTAL_ID/email-config
+method: POST
+body:
+  domain_name: example.com
+  from_name: KongAir
+  from_email: user@example.com
+  reply_to_email: admin@example.com
+{% endkonnect_api_request %}
+<!--vale on-->
+{% endcapture %}
+{{ create_email_config | indent: 3 }}
diff --git a/app/_landing_pages/dev-portal/customizations/dev-portal-customizations.yaml b/app/_landing_pages/dev-portal/customizations/dev-portal-customizations.yaml
@@ -1,17 +1,19 @@
 metadata:
-  title: "Dev Portal customizations"
+  title: "{{site.dev_portal}} customizations"
   content_type: landing_page
-  description: Customize the look, structure, and access of your Dev Portal with flexible page controls and branding options
+  description: Customize the look, structure, and access of your {{site.dev_portal}} with flexible page controls and branding options
   products:
     - dev-portal
+  works_on:
+    - konnect
 breadcrumbs:
   - /dev-portal/
 rows:
 
   - header:
       type: h1
-      text: "Dev Portal customizations"
-      sub_text: Customize the look, structure, and access of your Dev Portal with flexible page controls and branding options
+      text: "{{site.dev_portal}} customizations"
+      sub_text: Customize the look, structure, and access of your {{site.dev_portal}} with flexible page controls and branding options
 
   - columns:
       - blocks:
@@ -20,14 +22,14 @@ rows:
               blocks:
                 - type: text
                   text: |
-                    You can customize your Dev Portals with the following features:
+                    You can customize your {{site.dev_portal}}s with the following features:
                     - Configure layout, navigation, branding, and domain settings.
                     - Build content-rich pages with Markdown Components, nest information, and reuse snippets.
                     - Manage page visibility, publishing workflow, and SEO metadata.
                     - Customize global appearance, apply custom CSS, and set up menus and navigation structures.
                     - Set up and manage custom domains, SSL certificates, and URL paths.
 
-                    The preview will automatically show what your page should look like when developers view your Dev Portal. In the event that it fails to refresh after editing the page, there is a refresh button next to the generated URL at the bottom.
+                    The preview will automatically show what your page should look like when developers view your {{site.dev_portal}}. In the event that it fails to refresh after editing the page, there is a refresh button next to the generated URL at the bottom.
 
                     There are three icons above **Preview** that allow you to test adaptive designs in some predefined viewports:
                     * Desktop
@@ -48,12 +50,12 @@ rows:
               blocks:
                 - type: text
                   text: |
-                    In your Dev Portal, you can create pages that contain content such as text, buttons, tabs, and more. 
-                    Pages are used to convey information about your API and Dev Portal to users. 
+                    In your {{site.dev_portal}}, you can create pages that contain content such as text, buttons, tabs, and more. 
+                    Pages are used to convey information about your API and {{site.dev_portal}} to users. 
                     They are highly customizable using Markdown Components (MDC), allowing you to create nested page structures to organize pages and generate URLs or slugs. 
                     You can also stage new pages or restrict access to logged-in developers by using visibility controls and publishing status. 
                     
-                    To configure pages and content, navigate to your Dev Portal in {{site.konnect_short_name}} and click **Portal Editor** in the sidebar. 
+                    To configure pages and content, navigate to your {{site.dev_portal}} in {{site.konnect_short_name}} and click **Portal Editor** in the sidebar. 
                     In the Portal Editor sidebar, click the folder icon.
       - blocks:
           - type: image
@@ -67,25 +69,25 @@ rows:
             config:
               title: Pages and content
               description: |
-                Create pages in your Dev Portal to share API information with users. Pages support text, buttons, tabs, and more using Markdown Components (MDC). Organize them in nested structures, control visibility, stage drafts, and customize URLs.
+                Create pages in your {{site.dev_portal}} to share API information with users. Pages support text, buttons, tabs, and more using Markdown Components (MDC). Organize them in nested structures, control visibility, stage drafts, and customize URLs.
               icon: /assets/icons/markdown.svg
               cta:
                 url: /dev-portal/pages-and-content/
       - blocks:
             - type: card
               config:
-                title: Dev Portal MDC docs
+                title: "{{site.dev_portal}} MDC docs"
                 description: |
-                  Create a Dev Portal tailored to your organization with flexible layouts, customizable components, and brand-aligned design elements.
+                  Create a {{site.dev_portal}} tailored to your organization with flexible layouts, customizable components, and brand-aligned design elements.
                 icon: /assets/icons/code.svg
                 cta:
                   url: https://portaldocs.konghq.com/
       - blocks:
             - type: card
               config:
-                title: Dev Portal global settings
+                title: "{{site.dev_portal}} global settings"
                 description: |
-                  Make global changes such as naming your portal, setting the display name used for SEO and page titles. Configure custom domains and review audit logs specific to your Dev Portal.
+                  Make global changes such as naming your portal, setting the display name used for SEO and page titles. Configure custom domains and review audit logs specific to your {{site.dev_portal}}.
                 icon: /assets/icons/dev-portal.svg
                 cta:
                   url: /dev-portal/portal-settings/
@@ -94,8 +96,8 @@ rows:
             config:
               title: VS Code extension
               description: |
-                Edit and view your Dev Portal pages in real-time in Visual Studio Code. 
-                Integrates with the {{site.konnect_short_name}} API and kongctl to securely manage Dev Portal content.
+                Edit and view your {{site.dev_portal}} pages in real-time in Visual Studio Code. 
+                Integrates with the {{site.konnect_short_name}} API and kongctl to securely manage {{site.dev_portal}} content.
               icon: /assets/icons/vscode.png
               cta:
                 url: https://marketplace.visualstudio.com/items?itemName=konghq.vscode-konnect-dev-portal-toolkit
@@ -110,8 +112,8 @@ rows:
               blocks:
                 - type: text
                   text: |
-                    Appearance settings are applied globally to all pages in your Dev Portal. For advanced needs, you can also create custom CSS that applies custom styles to your Dev Portal. Custom CSS provides global customization to all pages in Dev Portal.
-                    To configure appearance settings, navigate to your Dev Portal in {{site.konnect_short_name}} and click **Portal Editor** in the sidebar. In the Portal Editor sidebar, click the paint bucket icon.
+                    Appearance settings are applied globally to all pages in your {{site.dev_portal}}. For advanced needs, you can also create custom CSS that applies custom styles to your {{site.dev_portal}}. Custom CSS provides global customization to all pages in {{site.dev_portal}}.
+                    To configure appearance settings, navigate to your {{site.dev_portal}} in {{site.konnect_short_name}} and click **Portal Editor** in the sidebar. In the Portal Editor sidebar, click the paint bucket icon.
 
                     Basic appearance settings quickly create basic styles for your default Portal template:
           - type: table
@@ -129,27 +131,27 @@ rows:
                 - setting: Portal logo
                   description: Automatically used in the header and footer menu sections to ensure consistent branding across pages.
                 - setting: Favicon
-                  description: Icon displayed in the browser tab and Favorites for Dev Portal visitors.
+                  description: Icon displayed in the browser tab and Favorites for {{site.dev_portal}} visitors.
       - blocks:
           - type: image
             config:
               url: /assets/images/dev-portal/dev-portal-appearance.png
               alt_text: "KongAir Dev Portal"
   - header:
       type: h2
-      text: "Dev Portal navigation"
+      text: "{{site.dev_portal}} navigation"
     columns:
       - blocks:
           - type: structured_text
             config:
               blocks:
                 - type: text
                   text: |
-                    You can configure the main menu, footer, and footer bottom navigation menus in your Dev Portal. 
-                    To configure navigation settings, navigate to your Dev Portal in {{site.konnect_short_name}} and click **Portal Editor** in the sidebar. 
+                    You can configure the main menu, footer, and footer bottom navigation menus in your {{site.dev_portal}}. 
+                    To configure navigation settings, navigate to your {{site.dev_portal}} in {{site.konnect_short_name}} and click **Portal Editor** in the sidebar. 
                     In the Portal Editor sidebar, click the menu tree icon.
 
-                    * **Main menu**: Main menus are a flat list of links that will be added to the header of every page in your Dev Portal. These titles and links will be spaced evenly horizontally. You can also add external links to all Dev Portal menu items either using the {{site.konnect_short_name}} UI or the [`/portals/{portalId}/customization` endpoint](/api/konnect/portal-management/v3/#/operations/update-portal-customization).
+                    * **Main menu**: Main menus are a flat list of links that will be added to the header of every page in your {{site.dev_portal}}. These titles and links will be spaced evenly horizontally. You can also add external links to all {{site.dev_portal}} menu items either using the {{site.konnect_short_name}} UI or the [`/portals/{portalId}/customization` endpoint](/api/konnect/portal-management/v3/#/operations/update-portal-customization).
                     * **Footer menu sections**: Footer menus allow you to create a set of columns with links for global navigation. Select **Footer Sections Menu** from the dropdown list to begin creating your menus. Footer sections create vertical columns across the bottom of every page, with the logo from [Appearance](#appearance) on the left side. We recommend creating your desired footer sections before creating footer menu items. Footer menu items are links to any URL you prefer, with a title to be displayed. Items must specify a footer menu section.
                     * **Footer bottom menu**: Footer bottom menu is a flat list of links that will be added to the bottom of every page. Footer bottom menus are placed below footer menu sections.
       - blocks:
@@ -168,7 +170,7 @@ rows:
               blocks:
                 - type: text
                   text: |
-                    The API specification settings allow you to control how developers can interact with your API specs in your Dev Portal. To configure API spec settings, navigate to your Dev Portal in {{site.konnect_short_name}} and click **Portal Editor** in the sidebar. In the Portal Editor sidebar, click the code brackets icon.
+                    The API specification settings allow you to control how developers can interact with your API specs in your {{site.dev_portal}}. To configure API spec settings, navigate to your {{site.dev_portal}} in {{site.konnect_short_name}} and click **Portal Editor** in the sidebar. In the Portal Editor sidebar, click the code brackets icon.
 
                     The following table describes the API spec settings you can configure:
       - blocks:
@@ -181,7 +183,7 @@ rows:
                   key: description
               rows:
                 - setting: Show Try it
-                  description: Enable in-browser testing for your APIs. All linked gateways must have the CORS plugin configured. For more information, see [Allow developers to try requests from the Dev Portal spec renderer](/catalog/apis/#allow-developers-to-try-requests-from-the-dev-portal-spec-renderer).
+                  description: Enable in-browser testing for your APIs. All linked gateways must have the CORS plugin configured. For more information, see [Allow developers to try requests from the {{site.dev_portal}} spec renderer](/catalog/apis/#allow-developers-to-try-requests-from-the-dev-portal-spec-renderer).
                 - setting: Show Try it in Insomnia
                   description: Enables users to open the API spec in [Insomnia](/insomnia/) to explore and send requests with the native client.
                 - setting: Continuous scroll
@@ -216,7 +218,7 @@ rows:
                     * Account access rejected
                     * Account access revoked
 
-                    To configure email customization settings, go to your Dev Portal, click **Portal Editor**, and then click the **Email** icon in the sidebar.
+                    To configure email customization settings, go to your {{site.dev_portal}}, click **Portal Editor**, and then click the **Email** icon in the sidebar.
 
                     In the customization settings, you can use variables. For example, `{% raw %}{{application_name}}{% endraw %}` will be replaced with the name of the application in the email.
 
@@ -243,17 +245,17 @@ rows:
                 - variable: "<code>&#123;&#123;credential_expires_at&#125;&#125;</code>"
                   description: "The date when the [key auth credential expires](/dev-portal/auth-strategies/#configure-the-key-auth-strategy)."
                 - variable: "<code>&#123;&#123;dev_portal_reply_to&#125;&#125;</code>"
-                  description: The Dev Portal reply-to email address.
+                  description: The {{site.dev_portal}} reply-to email address.
                 - variable: "<code>&#123;&#123;developer_email&#125;&#125;</code>"
                   description: The email address of the developer.
                 - variable: "<code>&#123;&#123;developer_fullname&#125;&#125;</code>"
                   description: The full name of the developer.
                 - variable: "<code>&#123;&#123;developer_status&#125;&#125;</code>"
-                  description: The Dev Portal status of a developer. For example, \"approved\", \"pending\", or \"revoked\".
+                  description: The {{site.dev_portal}} status of a developer. For example, \"approved\", \"pending\", or \"revoked\".
                 - variable: "<code>&#123;&#123;portal_display_name&#125;&#125;</code>"
-                  description: The display name of the Dev Portal.
+                  description: The display name of the {{site.dev_portal}}.
                 - variable: "<code>&#123;&#123;portal_domain&#125;&#125;</code>"
-                  description: The URL of the Dev Portal.
+                  description: The URL of the {{site.dev_portal}}.
   - header:
       type: h3
       text: "Customize the email domain"
@@ -264,8 +266,8 @@ rows:
               blocks:
                 - type: text
                   text: |
-                    If you want to change the from and reply-to email domains, you can configure a different domain through Dev Portal settings.
-                    Navigate to your Dev Portal, click **Settings** in the sidebar and click the **Custom domains** tab. Click **New email domain** and configure the settings.
+                    If you want to change the from and reply-to email domains, you can configure a different domain through {{site.dev_portal}} settings.
+                    Navigate to your {{site.dev_portal}}, click **Settings** in the sidebar and click the **Custom domains** tab. Click **New email domain** and configure the settings.
 
                     Once you've added your new domain, you must add the CNAME records to your DNS server.
 
@@ -278,7 +280,19 @@ rows:
             config:
               title: Custom domains
               description: |
-                Set up custom URLs for your Dev Portal. Custom URLs require DNS setup and your portal’s default URL.
+                Set up custom URLs for your {{site.dev_portal}}. 
+                Custom URLs require DNS setup and your portal’s default URL.
               icon: /assets/icons/domain.svg
               cta:
-                url: /dev-portal/custom-domains/
+                url: /dev-portal/custom-domains/
+  
+  - header:
+      text: "Frequently asked questions"
+      type: h2
+    columns:
+      - blocks:
+        - type: faqs
+          config:
+            - q: How do I customize the reply-to and from for {{site.dev_portal}} emails?
+              a: |
+                {% include faqs/portal-email.md %}
diff --git a/app/assets/icons/email.svg b/app/assets/icons/email.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" data-testid="kui-icon-svg-mail-icon" fill="none" height="100%" role="img" viewBox="0 0 24 24" width="100%" xmlns="http://www.w3.org/2000/svg"><path d="M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM12 13L4 8V18H20V8L12 13ZM12 11L20 6H4L12 11ZM4 8V6V18V8Z" fill="currentColor"></path></svg>
