You are here: Infinity Connect > Administering Infinity Connect > Advanced Web App customization

Advanced Infinity Connect Web App customization

Most customization requirements for the Infinity Connect Web App can be implemented by using the Pexip branding portal to generate the branding files and then applying that branding by uploading the branding package to the Management Node (see Creating and uploading a branding package).

However, for advanced customization requirements you may need to make manual changes to the branding files, or you may want to host the customized files on a reverse proxy or external web server instead of on the Pexip Infinity Conferencing Nodes.

This topic covers the alternative methods for hosting the customized Web App, and how to manually customize the application.

Note that manual configuration requires knowledge of core web design technologies such as HTML, JavaScript and CSS.

Hosting the customized Web App

There are two methods for hosting the customized Infinity Connect Web App, either:

on the Conferencing Nodes (via an upload on the Management Node), or
on an external web server or reverse proxy.

Hosting on the Conferencing Nodes

This is the standard method for applying branding to the Pexip Infinity platform — it applies a generic customization for all Pexip Web App users. It involves uploading a branding package to the Management Node which then automatically pushes those changes out to all Conferencing Nodes, from where those customizations are served to all Web App users.

Branding customizations that are applied via the Management Node will persist over upgrades to subsequent versions of Pexip Infinity software (although you may need to adapt the customization to cater for any new features when upgrading to a new major release).

For this hosting method, the Pexip branding portal can be used to configure the branding requirements for the Infinity Connect Web App and to generate a ZIP file suitable for uploading to the Management Node.

Hosting on an external web server or reverse proxy

This hosting method involves copying the entire Web App onto an external web server or reverse proxy (e.g. the Pexip Reverse Proxy) and serving it from that server. This method allows you, for example, to host multiple different branding customizations under different URLs on those external web servers or reverse proxies.

Locating the Infinity Connect Web App files

The Infinity Connect Web App is stored in /opt/pexip/share/web/static/app on the Pexip Conferencing Nodes. If you are hosting the Web App on an external web server or reverse proxy, this whole directory tree should be copied over to the other server.

The configuration subdirectory contains the files that can be customized (see Manually customizing the application files below for details):

When hosting the Web App on an external web server, you must edit the configuration/settings.js file and change the serverAddress variable to point to a Conferencing Node e.g. serverAddress: "conferencingnode1.example.com", (by default this variable points to the domain serving the site). You can only specify one Conferencing Node. This modification is not required if you are hosting the Web App on a reverse proxy as it will typically already be configured to forward requests to your Conferencing Nodes.

Note that files can be copied to or from the Conferencing Nodes using the SCP protocol, for example with a tool such as WinSCP.

Maintaining customizations when upgrading Pexip Infinity

If the Web App is being hosted on an external web server or reverse proxy, the copy of the Web App must be upgraded manually whenever the Pexip Infinity installation is upgraded. You should migrate the existing customized configuration directory on the external web server or reverse proxy onto the new version:

Backup the configuration directory on the external web server or reverse proxy containing your current customizations.
Upgrade your Pexip Infinity Conferencing Node.
Copy the upgraded /opt/pexip/share/web/static/app directory tree from the Conferencing Node to the external web server or reverse proxy.
Replace the contents of the configuration directory with your previously customized contents.
Check if you need to add any more customizations to support any new features.

When a new version of Pexip Infinity adds more features to the Web App, any new customizable elements are added to the default versions of the files in the configuration directory that are shipped with the new software. Therefore, after an upgrade you should compare your customized versions of these files with the new default versions, to see if any text, styles, colors or resource files should be adjusted (see Changelog).

Manually customizing the application files

This section describes the Infinity Connect Web App files that can be manually customized.

When editing the configuration files, you must use a text editor that does not apply "smart quotes" or make any automatic text changes, as the files are sensitive to correct formatting. Use a code editor or simple file editor instead of word processing software.

If you have used the Pexip branding portal to generate your branding package, or if you have downloaded the default branding from the Management Node, your ZIP file when unpacked will contain the following files:

If you are customizing the files on a Web App that you are hosting on an external server or reverse proxy, these files are stored in the /opt/pexip/share/web/static/app/configuration directory.

The files that can be customized are summarized below, and are then explained in more detail in the subsequent sections:

The settings.js file contains the application and default user settings.
The favicon.png file contains the icon used to represent the application within the browser's address bar and bookmarks (for the Web App) and the application title bar and the Window's system tray (for the desktop client).
The languages subfolder contains the text strings for each language. By default, English is the only available language and the text strings are contained in the en-us.json file. You can add more languages if required.
The themes/default subfolder contains the files used to control the colors, styles and images used within the application. The folder contains:
- brand.css: the application's stylesheet.
- background.jpg: referenced from brand.css and contains the home page background image.
- conference-avatar.jpg: referenced from settings.js (although commented out by default), this is the image used to represent the conference at the top of the participant list. By default, the avatar shown is served from the Conferencing Node and is part of the conference theme (presence_avatar_image.jpg). If enabled in settings.js, this will override what is shown. Note that participant avatars cannot be branded here, but they can be controlled by using external policy (see More information).
- logo.png: referenced from brand.css and contains the image shown on the home page.
- The green.svg and red.svg files apply only to the Infinity Connect desktop client.
The following screenshots show the default branding and indicate which elements of the application are controlled by the various image and CSS elements.

If you change the file type of any of the image files, for example, you use a conference-avatar.png file instead of a conference-avatar.jpg file, you must change the reference to that filename in the appropriate settings.js or brand.css file.

If you refer to any additional custom images as part of your customization, those image files should also be stored within this directory structure.

The default settings for the appearance of Infinity Connect are hard-coded within the application itself, and are used automatically where no customization overrides are specified. Therefore, you can modify a subset of the branding files in the configuration directory (for example, only changing some of the images or aspects of the CSS), and then remove the other unmodified files to ensure that the default branding for those elements is always applied in the future. Note that if you change the background.jpg or logo.png graphics files you must also include a brand.css file that at least includes the references (brand-logo and brand-background classes) to those customized images.

If you also use the Infinity Connect desktop client, you can use the same set of customized files in both the Infinity Connect Web App and the Infinity Connect desktop client. See Customizing the Infinity Connect desktop client for more information.

Application and default user settings (settings.js)

The settings.js file contains the application and default user settings. The following items in the applicationSettings block can be configured:

Setting	Description
serverAddress	In most deployments you will not need to customize this setting. You should only change this setting if you want to explicitly configure the FQDN of the Conferencing Node or reverse proxy to which calls are sent. To configure a specific address, change the serverAddress variable to refer to the relevant FQDN. You can only specify a single address, for example: serverAddress: "conferencingnode1.example.com", Note that the TLS certificate installed on the server needs to be trusted by the client system (as the client system will not display any certificate trust security alerts). Infinity Connect Web App: you only need to change this setting if you are hosting the Web App on an external web server (rather than on a Conferencing Node or reverse proxy). Infinity Connect desktop client: normally, the Infinity Connect desktop client uses DNS SRV lookups to determine the server address to which calls are sent. If an address is configured here, it will override any serverAddress value added to the defaultUserSettings, and the end user will also be unable to see or change the connection server address.
defaultDialOutProtocol	The default protocol presented to users when adding a participant to the conference. The default setting is 'sip'. The alternative options are 'h323', 'mssip', 'rtmp' and 'auto'. Note that to successfully place calls via the 'auto' protocol option, suitable Call Routing Rules must be configured. To change the displayed options, see Dial out protocols.
languages	Controls the set of languages available to the user. When additional languages have been configured, users get an additional option on the Settings page that allows them to choose their preferred language. For more information, see Adding more languages.
bandwidths	Controls the set of bandwidth options available to the user. For more information, see Changing bandwidth settings.
defaultDialOutRole	The default role presented to users when adding a participant to the conference. The default setting is 'host'. The alternative option is 'guest'.
enableFullMotionPresentation	Controls whether users are given the option to view presentations as full motion video (as an alternative to still images). The valid values are true (full motion option is available) and false (still images only).
enablePNGPresentation	Controls whether PNG format is used for presentation sharing (it is higher quality than JPG but uses more bandwidth). By default this configuration setting is commented out. To use PNG format for presentation sharing, remove the '//' comment markers.
overrideConferenceAvatar	Controls whether the image file in themes/default/conference-avatar.jpg is used to represent the conference at the top of the participant list. By default this configuration setting is commented out, and thus the default conference avatar (based on the conference theme) is always used. To use the customized conference-avatar.jpg file, remove the '//' comment markers.
turnServer	This setting provisions Infinity Connect with a TURN server that it can offer as a relay candidate in ICE negotiations. By default this configuration setting is commented out and is not required for standard operation. To configure a TURN server you must remove the '//' comment markers from one of the turnServer definitions ,and then replace turn.example.com with the actual TURN server address, and replace 'user' and 'pass' with the TURN server's credentials (note that these credentials are not encrypted within the settings file).
controlGatewayCalls	Controls whether the conference control menu is displayed in calls made via the Pexip Distributed Gateway. By default this setting is commented out, and the menu in gateway calls is disabled. To enable the menu, remove the '//' comment markers.

The defaultUserSettings block in the settings.js file contains the default user settings that are applied to first-time users. The application subsequently remembers the user's last-used settings. The configurable options are:

Setting	Description
language	Points to the default language file. Default: 'configuration/languages/en-us.json'
defaultBandwidth	The default bandwidth used for video and audio. The value specified here must match one of the values configured in the bandwidths block above it. Default: 512 + 64
screenshareFrameRate	Controls the frame rate (in fps) for screen sharing. Default: 5
promptDisconnect	Controls whether to ask the user for confirmation before disconnecting from a conference. The valid values are true and false. Default: true
promptMedia	Controls whether to show the camera and microphone options when connecting with media. Default: true
analyticsReportingEnabled	Controls whether or not anonymous Infinity Connect usage statistics are sent to Pexip. The valid values are true and false. Note that the Automatically send deployment and usage statistics to Pexip global setting on the Management Node must also be enabled in order to allow the Infinity Connect application to send usage statistics. Default: true
fullMotionPresentationByDefault	Controls whether the user views presentations as full motion video or as still images by default, when a presentation is started by another participant. Users can switch between both viewing modes once a presentation has started. The valid values are true (full motion) and false (still images). This option only applies if enableFullMotionPresentation is true. Default: false
muteOnJoin	Controls whether to locally mute the participant's microphone when first connecting. Default: false
startMinimized	Controls whether the Infinity Connect desktop client is minimized automatically on startup (and so is only visible in the tray area). This setting has no effect on the Web App. Default: false
sideBarHidden	Controls whether the sidebar (that contains the participant list and chat window) is initially hidden when making any type of call. If this setting is set to true (to hide the sidebar), the user can still use the in-call controls to show the sidebar. Default: false
sideBarHiddenInGW	Controls whether the sidebar is initially hidden when making a person-to-person gateway call. The user can still use the in-call controls to show the sidebar. This setting only applies if sideBarHidden is false. Default: true

Application favicon (favicon.png)

The favicon.png file contains the icon used to represent the application within the browser's address bar and bookmarks (for the Web App) and the application title bar and the Window's system tray (for the desktop client).

The default icon is .

To change the icon, you should replace the existing favicon.png file with a new .PNG file of the same name. The new image file should be 16x16 pixels.

Text used in labels and messages (en-us.json) and additional languages

All of the text that is displayed in the application can be changed.

The files containing the text strings for each language are located in the languages subfolder. The en-us.json (English) file is supplied by default. You can add additional language files if required.

Text customizations are simply a matter of changing the text assigned with a token. To find the token to change, just search in the en-us.json file for the text that needs to be changed, edit the text, and save your changes back to the same file.

For example, the "Settings" label can be found towards the top of the en-us.json file and is associated with the "IDS_SETTINGS_TITLE" token:

"IDS_SETTINGS_TITLE": "Settings",

The strings are grouped together according to where or when they are displayed. For example, all tokens prefixed with "IDS_SETTINGS" refer to strings that appear on the Settings page.

We recommend that you search for strings that contain references to "Pexip" and replace them with your relevant alternative text where required. You must only change the text strings; do not change the tokens.

Note that there are some strings that are not used in the current version of the Web App, such as those tokens prefixed with "IDS_SETTINGS_REGISTRATION"; these are likely to be used in a future release.

Variable substitutions

Some strings contain variable substitutions, for example:

"IDS_PARTICIPANT_MUTE": "Mute {{displayName}}",

This message appears as a tooltip when a user hovers over the Mute button for a participant. In this case, the application automatically substitutes {{displayName}} with the participant's actual name as shown in the participant list. Do not change the format or content of these variables (although you can completely remove the variable from the string if required). You cannot create your own variables.

Error messages

There is a list of error message strings towards the end of the en-us.json file. These messages typically relate to connectivity issues between the Conferencing Node and Infinity Connect, or to conference validation errors.

They follow the same format as the other messages, except that the token name is also a readable text string, for example:

"Call Failed: Invalid role": "Invalid pin",

These items are used to substitute the text strings returned from the Conferencing Node, such as "Call Failed: Invalid role", with the text to be displayed to the Infinity Connect user, such as "Invalid pin".

You can change these messages in the same way as you can change the other messages — edit the display text part only; do not change the token name part.

Adding more languages

By default, English is the only available language.

To add a new language:

Create an additional <language>.json file in the languages folder:
1. Copy the existing en-us.json file as a basis for the new language.
2. Rename the new file as appropriate for your new language, for example spanish.json.
3. Edit the text strings as appropriate for the new language, leaving the token names unchanged.
Add a reference to the new <language>.json file in the settings.js file:

Insert a new line into the languages: { } block that contains the description to be presented to the user and the path to the new file, following the model of the existing entry for en-us.json, for example:

'Spanish (ES)': 'configuration/languages/spanish.json',

When additional languages have been configured, Infinity Connect users get an additional option on the Settings page that allows them to choose their preferred language.

Changing the default language

When additional languages have been configured, you can set one of those new languages to be the default language for first-time users.

To set the default language for first-time users:

Edit the settings.js file.
Locate the language: 'configuration/languages/en-us.json', item in the var defaultUserSettings = { } block.
Change the name of the language file from en-us.json to your new default language file, for example spanish.json.

Dial out protocols

To change the protocols displayed in the Add a new participant form:

Edit the settings.js file.
Add the following new section to the var applicationSettings = { } block e.g. underneath the defaultDialOutProtocol line:

dialOutProtocols: [
'sip',
'h323',
'mssip',
'rtmp',
'auto',
],
To remove a protocol from the dropdown list, delete the entry/line for that protocol.
To change the displayed name of a protocol, edit the corresponding IDS_PROTOCOL_<protocol> entries in the <language>.json file as required.

Changing bandwidth settings

You can add, remove or modify the bandwidth options presented to the user.

By default, 4 bandwidth options are provided. These are defined in the settings.js file:

bandwidths: [{
    name: 'IDS_BANDWIDTH_LOW',
    value: 192 + 64
  }, {
    name: 'IDS_BANDWIDTH_MEDIUM',
    value: 512 + 64
  }, {
    name: 'IDS_BANDWIDTH_HIGH',
    value: 1200 + 64
  }, {
    name: 'IDS_BANDWIDTH_MAXIMUM',
    value: 1800 + 64
  }],

Each bandwidth option is defined as name-value pairs:

Each name item must have a corresponding entry in the en-us.json file (and any other <language>.json files you create).
The value item defines the total bandwidth (for video and audio) in kbps that Infinity Connect will use for that selection. The application always uses 64 kbps for audio, so the amount allocated for video is the total (n + n) value less 64 kbps.

So, for example, if IDS_BANDWIDTH_LOW is selected, the application will use 192 kbps for video and 64 kbps for audio. The n + n style is used to make it easier to see how much bandwidth is used for video, but you could, for example, specify the low bandwidth value as just value: 256 which would result in the same allocations for video and audio.

Adding a new bandwidth option

To add new bandwidth options you must add new items to the settings.js file and to the en-us.json file (and any other <language>.json files you have created).

To add a new bandwidth option:

Edit the settings.js file.
Add a new item into the bandwidth: { } block. Place it in the position, relative to the other entries, in which you want it to appear in the bandwidth selection dropdown as seen by the user.

For example, to add a "Medium high" option that uses 900 kbps for video, that should appear between the existing "Medium" and "High" options, you would insert an entry as follows:
```
  name: 'IDS_BANDWIDTH_MEDIUM',
  value: 512 + 64
}, {
  name: 'IDS_BANDWIDTH_MED_HIGH',
  value: 900 + 64
}, {
  name: 'IDS_BANDWIDTH_HIGH',
  value: 1200 + 64
```
Edit the en-us.json file.
Add a new IDS_BANDWIDTH_<xxxx> token entry using exactly the same format as the existing tokens.

The token name must match the name: item you created in the settings.js file.

For example, the matching token for the new "Medium high" option would be:
```
"IDS_BANDWIDTH_MED_HIGH": "Medium-High Bandwidth ({{bandwidth}}kbps)",
```
(The application automatically substitutes {{bandwidth}} with the corresponding value: entry (after performing any necessary arithmetic) in the settings.js file. Hence the end user would see "Medium-High Bandwidth (964kbps)".)

The new token can be placed anywhere in the en-us.json file, but we recommend adding it to the end of the file to make it easier to compare and identify any changes that have been added to the default version of the en-us.json file in any future releases.
If you have created additional <language>.json files, add a new IDS_BANDWIDTH_<xxxx> token entry into each of those files.

(Use the same token entry in each file, and do not translate the {{bandwidth}} variable.)

Application styles, colors and images

The themes/default subfolder contains the files used to control the colors, styles and images used within the application:

Changing the application styles and colors (brand.css)

The themes/default/brand.css file is the application's stylesheet. It contains the following styles:

Style name	The style configures....
brand-logo	The reference to the logo.png file shown on the home page.
brand-background	How the home page background image (background.jpg) file is displayed.
brand-primary	The text and background colors used for the participant list title bar and the chat window title bar.
brand-secondary	The text and background colors used for: the home page the "Settings" button on the home page the Settings page all other dialogs such as when entering a PIN, disconnecting, adding a new participant or selecting the type of content to present participant names in the chat window the background color of the participant list and chat window
brand-tertiary-hover	The "on hover" colors for the brand-tertiary styled items. In the default stylesheet, the brand-secondary and brand-tertiary-hover styles both share the same definitions.
brand-tertiary	The text and background colors used for conference menu options, the participant list and for chat message content.
select	The text and background colors used in dropdown selection fields. In the default stylesheet, the brand-tertiary, select and input styles all share the same definitions.
stage-background	The stage-background controls the appearance of the screen background (referred to as the stage) when a conference is in progress. It is a color layer that is applied on top of the brand-background image. By default it is set to a shade of black and with an opacity of .8, which has the effect of providing a dark background to the stage and obscuring any brand-background image. If you have configured a brand-background image and want this to be displayed as a background on the conference stage, you should adjust the opacity setting accordingly. For example, setting opacity to 0.5 will allow the background image to be seen dimly; setting opacity to 0 will make the color layer completely transparent and the brand-background image will be clearly displayed.
black	Currently unused.
button	The colors of the text and background used in dialog buttons and the toolbar controls. (An exception is the "Settings" button on the home page which uses the brand-secondary styles; this enables you to deemphasize this button in relation to the "Connect" button.)
white	Currently unused.
input.ng-dirty.ng-invalid	Error messages shown in input fields.
select.ng-dirty.ng-invalid	Currently unused.
red	The colors of the text and background used in error messages, such as "Invalid conference" or "Invalid pin". The background color for the: disconnect toolbar button waiting room (pause sign), mute and conference lock badges
green	The foreground and background colors for the: connecting badges (phone ringing)
blue	The foreground and background colors for the: participant presenting and speaking badges unread chat messages (on the show side bar toolbar when the side bar minimized) buttons and thumbnails in the share slides dialog buttons to escalate the connection to use audio or video
gray	Currently unused.
button.outline	Styling for the "Settings" button on the home page.

Background image for the home page and conference stage (background.jpg)

The themes/default/background.jpg file is referenced from brand.css and contains the background image shown on the home page and on the conference stage. By default, the background image covers the whole browser window and scales if the browser window resizes. This behavior can be customized in the brand.css file. The default background image is a picture of clouds.

By default the image is obscured from view on the conference stage due to the settings of the stage-background style.

To change the background image, replace the existing background.jpg file with a new file of the same name. We recommend using a JPEG image (for smallest file size) that is approximately 2000x1400 pixels.

Conference avatar (conference-avatar.jpg)

The themes/default/conference-avatar.jpg file is referenced from settings.js and is used to represent the conference at the top of the participant list.

By default, the reference to conference-avatar.jpg in settings.js is commented out. This means that the default conference avatar — which is the presence_avatar_image.jpg file in the conference theme — is always used. (If the default conference theme is in use, then the avatar image will be the white on orange "pexip" logo.)

To change the conference avatar:

Replace the existing conference-avatar.jpg file with a new JPG file of the same name.

The image is automatically scaled to 40x40 pixels and rounded by the application.
Remove the '//' comment markers from the overrideConferenceAvatar entry in the settings.js file.

Home page logo (logo.png)

The logo.png file is referenced from brand.css and contains the image shown on the home page. The default logo is the orange text "pexip" logo.

To change the logo, you should replace the existing logo.png file with a new PNG file of the same name. The logo image is used "as is", so we recommend using a PNG image (for best quality) and that the logo is approximately 200x100 pixels and has a transparent background.

Changelog

Changes in version 14:

settings.js:
- screenshareFrameRate setting has moved from the applicationSettings block to the defaultUserSettings block

Changes in version 13:

settings.js:
- if you have added a customized list of DialOutProtocols to your settings.js file, you have to reapply the changes using the modified structure (see Dial out protocols)
- new enablePNGPresentation and screenshareFrameRate settings

Changes in version 12:

settings.js:
- defaultDialOutProtocol supports 'auto'
- defaultUserSettings has new sideBarHidden and sideBarHiddenInGW settings

More information

Participant avatars cannot be branded via the Web App, but they can be controlled by using external policy. For full details about how to integrate Pexip Infinity with an external policy server, see Using external and local policy to control Pexip Infinity behavior.

In addition to customizing the appearance of the Infinity Connect Web App, you can also:

Customize the Infinity Connect desktop client.
Use themes to change the voice prompts and images provided to participants when they are accessing a Virtual Meeting Room, Virtual Auditorium or Virtual Reception.

If any further information on customizing Pexip Infinity is required, please contact your Pexip authorized support representative.