Comment on page
Configuration parameters
You can configure many aspects of ECP, such as the look and feel, the theme or the actions that the user can perform in the chat.
These are client-side parameters, which will not override the configuration of the pod.
For example, if a user's admin has blocked file attachments in the Admin Portal, the setting
showAttach
to true will have no effect.{
// APP PARAMETERS
// Common
streamId: string; // stream ID of an existing conversation to open
userIds: string; // IM/Group chat: Comma separated user IDs or emails (or both)
allowedApps: string; // Comma separated list of App IDs to whitelist
// Focus mode only
theme: IThemeColors; // Colour Palette overrides
// CONFIGURABLE APP SETTINGS
// Common
canAddPeople: boolean; // allow add members to rooms if owner. default false
canClickExternalLinks: boolean; // allow user to click links in messages. default false
condensed: boolean; // condensed mode. default true
condensedMessageBelowName: boolean; // if in condensed mode, display message below or next to name. default true (below)
ecpLoginPopup: boolean; // perform login within a popup, for SSO systems that refuse iframe integration. default false
mode: 'light' | 'dark' | undefined; // built-in colour palettes. default light
showAttach: boolean; // enable attachments. default true
showEmoji: boolean; // enable emojis in the editor. default true
showSuppressMessage: boolean; // allow user to suppress messages. default true
showSystemMessages: boolean; // show system/maestro messages (e.g. a user joined room). default false
sound: boolean; // enable sound notifications
// Focus mode only
canClickInternalLinks: boolean; // allow user to click Symphony links in messages. default false
showChatSearch: boolean; // enable search feature. default true
showBookmarkMessage: boolean; // allow user to bookmark message. default true
showCompose: boolean; // enable compose mode editor. default true
showDisableInput: boolean; // enable user to disable editor. default true
showEditor: boolean; // enable editor. default true
showTitle: boolean; // show room title in the header. default true
showInfo: boolean; // show room information in the header. default true
showMembers: boolean; // show list of members. default true
showProfilePopover: boolean; // show popover profile cards. default true
symphonyLogo: boolean; // Display the 'Powered by SYMPHONY logo' below ECP chats. default true
// Collaboration mode only
allowChatCreation: boolean; // enable user to create new chats. default false
}
There are several ways to update the ECP settings:
- Through the
updateSettings
method, documented below. - At initialization, when rendering the chat, though the
render
method. - In direct iFrame rendering only, you can specify the settings using the query string parameters of the iFrame source URL. Note: Not all settings are supported.
The
updateSettings
method exposed by the SDK lets you update the ECP configuration parameters (listed above):Parameter | Type | Description |
---|---|---|
settings | Partial<EcpSettings> | Object containing the settings to update |
// Example
window.symphony.updateSettings({
mode: 'dark',
condensed: true,
symphonyLogo: false,
...anyOtherSettingsObject
});
ECP comes with out-of-the-box support for Symphony's two color themes: Light and Dark.
You can also specify a custom theme, in order to align with the design system of the parent page. An example demonstrating the use of color palette overrides can be found here.
Note: Theming is currently only supported in Focus mode.
To set a custom theme, use either the
render
method or use the updateTheme
method defined below.The
updateTheme
method exposed by the SDK lets you update the ECP theme.Parameter | Type | Description |
---|---|---|
theme | IThemeColors | Object containing the theme to update |
//Example
window.symphony.updateTheme({
primary: "#ff00dd",
secondary: "#ac0202",
accent: "#F7CA3B",
success: "#2EAA35",
error: "#DE342E",
background: "#ffb8b8",
surface: "#ffe0e0",
text: "#000000",
textPrimary: "#FFFFFF",
textSecondary: "#FFFFFF",
textAccent: "#17181B",
textSuccess: "#FFFFFF",
textError: "#FFFFFF",
});
Theme object (IThemeColors)
The list of available theme parameters is provided below.
Note: Shades are completely optional; by default they will be interpolated from the main colors.
export interface IThemeColors {
// Application colors: 8 main colors
primary: string;
secondary: string;
accent: string;
success: string;
error: string;
background: string;
surface: string;
mention: string;
// Text colors
textPrimary: string;
textSecondary: string;
textAccent: string;
textSuccess: string;
textError: string;
text: string;
// Optional shades
textShades?: ITextShades;
textSurfaceShades?: ITextShades;
primaryShades?: IColorShades;
secondaryShades?: IColorShades;
accentShades?: IColorShades;
successShades?: IColorShades;
errorShades?: IColorShades;
}
export interface ITextShades {
'10': string;
'20': string;
'30': string;
'40': string;
'50': string;
'60': string;
'70': string;
'80': string;
'90': string;
}
export interface IColorShades {
'10': string;
'20': string;
'30': string;
'40': string;
'60': string;
'70': string;
'80': string;
'90': string;
}
Last modified 16d ago