Symphony Messaging Dev Docs
Developer CertificationREST API
  • Start Your Developer Journey
  • Bots
    • Building Bots
    • Planning Your Bot
      • Conversational Bot
      • Interactive Bot
      • Headless Bot
    • Getting Started
      • Getting Started with BDK
      • Creating a Service Account
      • Configuration
      • Truststores
    • Overview of REST API
      • REST API Architecture
      • Overview of Pod API
      • Overview of Key Manager API
      • Overview of Agent API
      • Bot Permissions
      • REST API Reference
    • Authentication
      • RSA Authentication Workflow
      • Certificate Authentication Workflow
    • Datafeed
      • Real-Time Events
      • Overview of Streams
    • Messages
      • MessageML
        • MessageML Basics
          • Content Grouping
          • Text formatting and semantics
          • Tables
          • Images
          • Tags and mentions
            • Enhanced tags notice
          • Style Attributes
          • Special Characters
          • Emojis
        • Elements Interactive Forms
          • Buttons
            • Icon set for Buttons
          • Text Field
          • Masked Text Field
          • Text Area
          • Checkbox
          • Radio Button
          • Dropdown Menu
          • Person Selector
          • Room Selector
          • Date Picker
          • Time Picker
          • Timezone Picker
          • Table Select
          • Regular Expressions - Regex
        • Extensibility UI Actions
          • OpenChat
          • Dialog
        • Entities
          • Standard Entities
          • Custom Entities
      • PresentationML
    • Bots Best Practices
    • Open Source Code Samples
  • Extension Apps
    • Building Extension Apps
    • Planning Your App
    • Getting Started
      • Getting Started with ADK
      • Application Manifest Bundle
      • Add an Extension App to a Symphony Pod
    • Overview of Extension API
      • Initialization
      • Register and Connect
      • Extension API Services
        • Service Interface
        • Register and Subscribe
        • Modules Service
        • Entity Service
          • Entity Advanced Templating
          • Message Format - ExtensionML
        • Applications-Nav Service
        • Share Service
        • Commerce Service
        • Dialogs Service
        • UI Service
          • Receiving Conversation and User Information
          • Filter Function
    • App Authentication
      • Circle of Trust Authentication
      • OBO Authentication
  • Developer Tools
    • Symphony Messaging Generator
    • Bot Developer Kit for Java
      • Build a Conversational Bot
      • Build an Interactive Bot
      • Build a Headless Bot
      • Integrate a Bot with an Identity Provider
    • Bot Developer Kit for Python
    • App Developer Kit
      • Build a Basic Extension App
      • Build an Extension App with App Views
        • Add Buttons and Handlers to an Extension App
        • Add BDK to an Extension App for Circle of Trust
      • Build an Extension App with Message Renderers
    • Postman
    • UI Style Guide
      • Colors
      • Form Elements
      • Buttons
  • Embedded Modules
    • Symphony Messaging URI
      • Symphony Messaging URI for Mobile (deprecated)
    • Desktop interoperability
      • FDC3 intents
        • Message format
      • Configuration guide
        • Configure Interop.io
        • Configure Here Core
        • Configure Finsemble
        • Configure with Embedded Mode
        • Troubleshooting
      • Change log
    • Embedded Mode
      • Get started
      • Configuration parameters
      • Open a chat
      • Send a message
      • Create a room
      • Pin a message
      • Notifications
      • Support for extension applications
      • Open an app
      • Embedded Mode with Sponsored Access
      • Pricing tiers
      • Logout
    • Universal Webhook
      • User guide
        • Example with Splunk
      • Installation guide
  • Symphony REST API
    • Messaging REST API
    • Federation
    • Sponsored Access API
    • Enhanced Directory API
  • Developer Certification
    • Developer Certification
  • Mobile Frameworks
    • Blackberry
    • MobileIron
  • Admin Guides
    • Change Logs
      • API Agent
        • Agent - 25.5
        • Agent - 25.3 (LTS)
        • Agent - 24.12 (LTS)
        • Agent - 24.9 (LTS)
        • Agent - 24.6 (LTS)
        • Archives
          • Agent - 24.11
          • Agent - 24.10
          • Agent - 23.9 (LTS)
          • Agent - 24.8
          • Agent - 24.3 (LTS)
          • Agent - 24.2
          • Agent - 24.1
          • Agent - 23.12 (LTS)
          • Agent - 23.11
          • Agent - 23.10
          • Agent - 23.7
          • Agent - 23.6 (LTS)
          • Agent - 23.4
          • Agent - 23.3 (LTS)
          • Agent - 23.1
          • Agent - 22.12 (LTS)
          • Agent - 22.11
          • Agent - 22.10
          • Agent - 22.9 (LTS)
          • Agent - 22.8
          • Agent - 22.7
          • Agent - 22.6 (LTS)
          • Agent - 20.14
          • Agent - 20.13
          • Agent - 20.12
          • Agent - 20.10
          • Agent - 20.9 (2.62)
          • Agent - 20.7 (2.61)
          • Agent - 20.6 (2.60)
          • Agent - 20.5 (2.59)
          • Agent - 20.4 (2.58)
      • SBE (Pod API)
        • SBE - 24.1
        • SBE - 20.16
        • SBE - 20.15
        • Archives
          • SBE - 20.14
          • SBE - 20.13
          • SBE - 20.12
          • SBE - 20.10
          • SBE - 20.9 (1.62)
          • SBE - 20.7 (1.61)
          • SBE - 20.6 (1.60)
          • SBE - 20.5 (1.59)
          • SBE - 20.4 (1.58)
      • Client 2.0 APIs
        • Client 2.0 - 25.05
        • Client 2.0 - 25.03
        • Client 2.0 - 24.12
        • Client 2.0 - 24.05
        • Client 2.0 - 23.02
        • Client 2.0 - 22.11
        • Archives
          • Client 2.0 - 20.4
          • Client 2.0 - 20.5
          • Client 2.0 - 20.6
          • Client 2.0 - 20.7
          • Client 2.0 - 20.9
          • Client 2.0 - 20.10
          • Client 2.0 - 20.12
          • Client 2.0 - 22.8
          • Client 2.0 - 22.10
      • Universal Webhook
        • Univ Webhook - 2.6
        • Univ Webhook - 2.4
        • Univ Webhook - 2.2
        • Univ Webhook - 2.1
        • Univ Webhook - 2.0
    • API Change Management
    • Global Throttling
    • Agent Guide
      • Network Topology
      • Agent Download
      • Agent Installation
      • Agent Configuration Fields
      • Agent Server High Availability
      • Agent Performance Tuning
Powered by GitBook
On this page
  • Embedded Mode settings
  • How to update settings
  • Custom themes

Was this helpful?

Export as PDF
  1. Embedded Modules
  2. Embedded Mode

Configuration parameters

You can configure many aspects of Embedded Mode, such as the look and feel, the theme or the actions that the user can perform in the chat.

Embedded Mode 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 Embedded Mode chats. Default true
  // Collaboration mode only
  allowChatCreation: boolean; // Enable user to create new chats. Default false
}

How to update settings

There are several ways to update the Embedded Mode 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 Embedded Mode 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 
});

Custom themes

Embedded Mode comes with out-of-the-box support for Symphony's two color themes: Light and Dark.

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.

Update theme method

The updateTheme method exposed by the SDK lets you update the Embedded Mode 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 updated 2 months ago

Was this helpful?

explains how clicks on internal links are processed by Symphony Messaging.

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 .

Symphony Messaging link notifications
here