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.
ECP settings
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; // Color 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. Links will be opened in a separate browser tab. 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. Upon click the platform receives an event and decides how to manage the link (see informative note). Default false
showChatSearch: boolean; // Enable search feature. Default true showBookmarkMessage: boolean; // Ellow 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.
Update settings method
The updateSettings method exposed by the SDK lets you update the ECP configuration parameters (listed above):
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.
Toset a custom theme, use either the render method or use the updateTheme method defined below.
Update theme method
The updateTheme method exposed by the SDK lets you update the ECP theme.