On this page

The appConfig.js object

You can control the behavior and appearance of your self-hosted Flex UI instance by specifying configuration properties in a JavaScript object housed within a file named appConfig.js.

This file must be made accessible on your Flex UI server at the location:

public/assets/appConfig.js

The Flex UI application attempts to load the appConfig.js file from your server at startup. Flex UI then fetches your account's current Configuration resource via the Flex Configuration REST API, and merges any properties found in the ui_attributes field with the properties defined in appConfig.js to determine the app's effective configuration. Values defined in your server's appConfig.js take precedence over corresponding values defined in ui_attributes via the REST API.

See the REST API configuration guide to learn more about the Flex Configuration REST API.

(information)

Info

The appConfig.js object is only directly accessible if you are running a self-hosted instance of Flex UI. If you are not running a self-hosted Flex instance (i.e. if you access Flex at https://flex.twilio.com), use the Flex Coniguration REST API to manage your Flex instance's configuration.

Configuration properties

To see a complete list of fields you can specify in the configuration object, check out the Flex UI reference docs for the major version of Flex UI that you are using:

Sample content

This is example content for a valid Flex UI 2.x.x appConfig.js file.

1var appConfig = {
2  serviceBaseUrl: "https://dancing-owl-1234.twil.io/",
3  sso: {
4    accountSid: "ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
5  },
6  sdkOptions: {
7      chat: {},
8      insights: {},
9      voice: {},
10      worker: {}
11  },
12  logLevel: "debug",
13  theme: {
14    isLight: false
15  },
16  componentProps: {
17    CRMContainer: {
18      uriCallback: (task) => task
19        ? `https://www.bing.com/search?q=${task.attributes.name}`
20        : "http://bing.com"
21    }
22  },
23  router: {
24    type: "memory",
25    history: {
26      initialEntries: [ "/agent-desktop" ]
27    }
28  }
29};