Custom Settings Pages

Learn how to configure a customized app settings page for your app. This page includes descriptions and examples for defining Custom Settings Pages in a Kustomer app.

Many apps don't require any configuration within Kustomer or require only the basic configuration available in the settings page generated when you define App Settings.

For apps that need more advanced validation, Kustomer provides the option to define custom settings pages. You can use advanced validation settings to place a custom UI in front of app settings values or run Commands from the settings page for the app to set up an external service in Kustomer.

The Kustomer platform embeds custom settings pages using iFrames and creates a page for the custom settings in the Settings menu for administrator access.

Settings pages can use the Cards SDK to interact with the Kustomer API and to run commands or update settings.

Custom Settings Pages in the app definition

The settingsPageConfig property defines the following for the settings page: the URL of the settings page, the display name for the page, and a description of the page content.

Custom Settings Pages definition example

The following sample JSON app definition includes a settingsPageConfig property definition that creates and configures the custom settings page Standard Ecommerce Settings.

{
  "app": "standardecomm",
  "version": "0.0.1",
  "title": "Standard E-comm",
  "settingsPageConfig": {
    "url": "https://standardecomm.com/kustomer/settings.html",
    "title": "Standard Ecommerce Settings",
    "description": "Adjust the configuration for the Standard Ecommerce app"
  }
}

Custom Settings Pages properties

The basic custom settings pages definition properties and their descriptions are listed below:

url

Required. The URL of the iFrame format settings page. Kustomer embeds the iFrame in the settings page when the app is installed for an organization.

Example: "url": "https://standardecomm.com/kustomer/settings.html"

title

The display name for the page. The display name appears in the sidebar Settings menu and at the top of the settings page.

Example: "title": "Standard Ecommerce Settings"

description

A summary of the settings page content.

Example: "description": "Adjust the configuration for the Standard Ecommerce app"

Custom Settings Pages and App Settings

You can define both Custom Settings Pages and App Settings for an app. Here's how the the App Settings and Custom Settings Pages definitions interact to generate the settings page for your app in Kustomer:

  • If you define only the App Settings, the app automatically renders a dynamic settings page to allow users to edit app settings.

  • If you define only the Custom Settings Pages, the app renders the custom settings page to allow users to edit app settings.

  • If you don't define any app settings or custom settings pages, the app won't render a settings page for the app.

  • If you define both App Settings and Custom Settings Pages and you want to allow users to edit app settings, you must also define the inputs for the custom settings page and the inputs for making API calls to update the app settings from the custom settings page.

For more information on defining and updating app settings, see App Settings.