Embedded Chat Module (legacy)

This page describes the legacy "embedded chat module" (ECM) product. 
Legacy ECM will no longer be available after Oct 31, 2022. It should not be used for new deployments, please use Embedded Collaboration Platform (ECP) instead. 
If you are using the legacy ECM, please plan your migration to ECP.
Description
The Symphony Embedded Chat Module allows you to embed stand-alone Symphony chat modules (both chatrooms and IMs) inside other applications.
The chat module can be embedded into websites or any tool that supports a webview. ECM allows custom themes and extensive interface configuration.
Supported browser versions
Safari 11
IE 11
Chrome 32+
Setup
There are three options to implement the Symphony Embedded Chat Module:
Automatic rendering
Explicit rendering
Direct iFrame rendering
Each of these options requires either a working Symphony Conversation ID or comma separated Symphony User IDs to load a working Symphony chat.
Conversation ID Encoding
The direct iFrame rendering, the Conversation ID must be URI encoded to be successfully placed within the iFrame URL.  
The automatic and explicit rendering use the standard Conversation ID.
Automatic Rendering
The easiest way to embed Symphony is to include a javascript resource and a symphony-ecm tag. The symphony-ecm tag is a DIV node with the classname symphony-ecm and is customized with various data-* options.
The script tag must be loaded over HTTPS and include all of the attributes in the code sample below. It can be safely loaded at any point during page rendering.
The example below contains many of the various configuration options, but the full list is available at the end of this document:
1
<script async defer id="symphony-ecm-sdk" src="https://yourpodhere.symphony.com/embed/sdk.js" type="text/javascript"></script>
2
​
3
<div class="symphony-ecm"
4
     style="height: 500px; width: 500px"
5
     data-module="room"
6
     data-stream-id="c4iuKb1aizAeLt9LPGB8f3///qGEf2rldA=="
7
     data-mode="light"
8
     data-contrast="true"
9
     data-condensed="true"
10
     data-show-title="true"
11
     data-show-info="true"
12
     data-show-x-pod="false"
13
     data-show-emoji="false"
14
     data-show-attach="false"
15
     data-show-disable-input="false"
16
     data-show-compose="false"
17
     data-show-system-messages="false"
18
>       
19
</div>
Copied!
SSO Support for Automatic Rendering
Note: SSO is not supported in automatic rendering mode. To use SSO with the JS SDK, please use the explicit rendering.
Explicit Rendering
Deferring the render can be achieved with the explicit rendering mode. This mode also supports themes.
You can customize the data-onloadcallback name. When your callback is invoked you will have access to the symphony object. You can invoke the symphony.render method with two parameters: the container classname, and the configuration object.
Important: Note that the sample code that invokes the render method with the object containing the style field only works if the HTML file is not directly accessed from the disk. A server must be used to render the HTML.
Theme colors can be expressed in hexadecimal or human friendly names.
To use SSO, use the urlIntercept callback, as exemplified below. If you do not wish to use SSO, simply remove that parameter. Parameter passed into the url is the generated url from the SDK.
1
<script async defer id="symphony-ecm-sdk" src="https://yourpodhere.symphony.com/embed/sdk.js" type="text/javascript" data-onload="onloadCallback"></script>
2
​
3
<script>
4
  var onloadCallback = function() {
5
    symphony.render('my-class', {
6
      'module': 'room',
7
      'streamId': 'nhOXoSY+xifD1S/Ya2GUA3///qBHxoW0dA==',
8
      //'module': 'im',
9
      //'userIds': [7696581462201],
10
      'mode': 'light',
11
      'contrast': true,
12
      'condensed': true,
13
      'showTitle': true,
14
      'showInfo': true,
15
      'showXPod': true,
16
      'showEmoji': false,
17
      'showAttach': false,
18
      'showDisableInput': false,
19
      'showCompose': true,
20
      'showSystemMessages': true,
21
      'urlIntercept': function(url) {
22
        return 'https://yourpodhere.symphony.com/login/sso/initsso?RelayState='+encodeURIComponent(url);
23
        }
24
      'style': {
25
    general: {
26
      color: "#ff0000",
27
      background: "#ff0000",
28
      font: 'italic 1em fantasy'
29
    },
30
    header: {
31
      background: "#1e72cc",
32
      font: "italic small-caps bolder condensed 16px/3 cursive;",
33
      color: "red",
34
    },
35
    input: {
36
      outline: "5px dotted blue",
37
      background: "pink",
38
      font: "bold 3em \"Comic Sans MS\", sans-serif",
39
      color: "#ca1e7a"
40
    },
41
    sendUsername: {
42
      font: "1em monospace",
43
      color: "grey"
44
    },
45
    sendText: {
46
      font: "bold italic large serif",
47
      color: "green"
48
    },
49
    receiveUsername: {
50
      font: "italic small fantasy",
51
      color: "white"
52
    },
53
    receiveText: {
54
      font: "italic 6px arial, sans-serif",
55
      color: "blue"
56
    },
57
    systemMessages: {
58
      font: "normal 1em monospace",
59
      color: "purple",
60
    }
61
  },
62
    });
63
  };
64
​
65
​
66
</script>
67
​
68
<div class="my-class" style="width: 500px; height: 500px;"></div>
Copied!
Direct iFrame Rendering
You can also use the direct iFrame rendering mode, but it does not allow some of the advanced features of automatic or explicit rendering such as custom themes. The direct iFrame rendering mode is recommended for native applications that support a webview. Set the content source of the webview to the Symphony ECM URL:
Embedding a Symphony Chat Module
1
<iframe src="https://yourpodhere.symphony.com/?embed&streamId=lX1hwfmQ-AK_k_a_BB0y2n___q2-0KfbdA&module=im&mode=light&font=xsmall"></iframe>
Copied!
The above example creates an Embedded Chat Module pointing to a room with a Conversation ID of lX1hwfmQ-AK_k_a_BB0y2n___q2-0KfbdA.
Embedded Chat Module Parameters
These parameters work in all embedded chat scenarios: iFrame, explicit and automatic:
Parameter
Description
Acceptable Values
Default
module
Which type of conversation the module contains.
im, room
null
streamId
The Conversation ID of the IM/MIM/Room. Needs the module parameter to be set to room.
URL encoded Conversation ID
null
userIds
To create an IM or MIM, use List of User IDs. Needs the module parameter to be set to im.
Comma separated userIds for IM/MIM
-
mode
Dark or light mode.
light, dark
light
contrast
Enables contrast mode.
true, false
false
condensed
Enables condensed mode.
true, false
false
font
Font size.
xsmall, small, medium, large
medium
showTitle
Display the module tile
true, false
true
showInfo
Display the module info (private icon, member count)
true, false
true
showXPod
Display orange coloring for cross pod rooms
true, false
true
showEmoji
Display the emoji picker
true, false
true
showAttach
Display the "attach file" button
true, false
true
showDisableInput
Display the "disable input" button
true, false
true
showCompose
Display the RTE "compose" mode
true, false
true
urlIntercept
Intercept the login URL to use with your SSO system
'function'
noop
showSystemMessages
Display system messages such as "Bob added John to the room"
true, false
true
'Theme'
Select the color of the theme
'blue', 'green', 'yellow', 'magenta' , 'grey'
N/A

Embedded Modules - Previous

Embedded Collaboration Platform

Next - Embedded Modules

Symphony URI

Last modified 1mo ago

Copy link

Contents

Direct iFrame Rendering

Embedded Chat Module Parameters