Dev Portal customization

Uses: Dev Portal

Visibility

All menu items have visibility controls, which determine which developers can see different menus. Visibility is Private by default, and will only be displayed to logged-in Developers. If Public is selected, the menu item will be available to all visitors to your Dev Portal.

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.

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

SEO customization

To optimize how search engines crawl your Dev Portal, you can provide a /robots.txt directly.

Portal editor

The Portal Editor provides you with a variety of tools for creating highly customized content for your Dev Portal. Navigate to a specific Dev Portal, and select Portal Editor from the left sidebar.

Pages are built using Markdown Components (MDC). Additional documentation on syntax, as well as tools for generating components, are available on a dedicated MDC site.

Appearance

Appearance settings are applied globally to all pages in your Dev Portal. You’ll find the Appearance icon in the left sidebar of the Portal Editor.

Basic appearance settings quickly create basic styles for your default Portal template:

Setting	Description
Theme	You can choose from default light and dark options. This changes the background and text in your default template. Dark or light theme is not selectable by developers.
Brand color	This color is used to set the primary color in the default template.
Portal logo	Automatically used in the header and footer menu sections to ensure consistent branding across pages.
Favicon	Icon displayed in the browser tab and Favorites for Dev Portal visitors.

Custom CSS

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.

Preview panel

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.

There are three icons above Preview that allow you to test adaptive designs in some predefined viewports:

Desktop
Tablet
Mobile

Generated URL

Custom pages allow you to define a page structure/tree that organizes your pages and generates the page URL based on page slugs. The generated URL is shown at the bottom of the preview pane.

Developer email customization

You can customize both the email domain and content of emails that developers receive for the following events:

Welcome (developer sign-up approved)
App registration approved
App registration rejected
App registration revoked
Confirm email address
Reset password
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.

Email customization variables

In the customization settings, you can use variables. For example, {{application_name}} will be replaced with the name of the application in the email.

The following table contains the variables you can use when customizing emails:

Variable	Description
`{{api_documentation_url}}`	The documentation URL for the API.
`{{api_name}}`	The name of the API.
`{{api_version}}`	The version of the API.
`{{application_name}}`	The name of the developer’s application.
`{{dev_portal_reply_to}}`	The Dev Portal reply-to email address.
`{{developer_email}}`	The email address of the developer.
`{{developer_fullname}}`	The full name of the developer.
`{{developer_status}}`	The Dev Portal status of a developer. For example, "approved", "pending", or "revoked".
`{{portal_display_name}}`	The display name of the Dev Portal.
`{{portal_domain}}`	The URL of the Dev Portal.

Customize the email domain

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.

Once you’ve added your new domain, you must add the CNAME records to your DNS server.

Certain domain names are restricted. See Domain name restrictions for more information.

FAQs

What are the limitations of the Dev Portal Preview feature?

The Preview feature only displays Visibility: Public assets like APIs and Menus because it does not simulate a logged-in Developer context.

Preview behavior examples:

Private Pages can be previewed.
Private APIs will not appear when using the :apis-list MDC component.
Private Menus in headers or footers will not be shown.

I just edited or deleted my spec, document, page, or snippet. Why don’t I immediately see these changes live in the Dev Portal?

If you recently viewed the related content, your browser might be serving a cached version of the page. To fix this, you can clear your browser cache and refresh the page.

You can add external links to your main menu or footer by navigating to your Dev Portal in Konnect and clicking Customization in the sidebar. From the Menu tab, you can select the menu you want to customize and add the external link by clicking Add menu item. You can also send a PATCH request to the /portals/{portalId}/customization endpoint to add an external link using the Konnect API.

Dev Portal customization

Menu customization

Visibility

Main menu

Footer menu sections

Footer bottom menu