Infinity Connect Web App Customization Guide

(1)

Infinity Connect Web App

Customization Guide

Introduction

The Infinity Connect Web App is included with all Pexip Infinity deployments. It is part of the Pexip Infinity Connect suite of clients that provides an easy way for participants to access Virtual Meeting Rooms and Virtual Auditoriums, and make person-to-person calls via the Pexip Distributed Gateway from a web browser or desktop client. Infinity Connect clients also allow users to view a list of all other conference participants, control aspects of the conference (if they have Host privileges) and share their screen with other participants. The Infinity Connect Web App is accessed when users point a web browser at a Conferencing Node, and provides a WebRTC or Flash-based interface to Pexip Infinity services. The Web App is supported in the following browsers: l Google Chrome version 27 and later l Mozilla Firefox version 20 and later l Opera version 23 and later l Microsoft Internet Explorer version 10 and later (requires Flash Player 11 and later ActiveX® plug-in, and must not be in Compatibility View) l Apple Safari version 6 and later (Mac OS X only) (requires Flash Player 11 and later plug-in) This guide describes how to customize the Infinity Connect Web App, and explains how to make the most frequently required branding changes. This guide assumes knowledge of core web design technologies: HTML, JavaScript and CSS. This guide does not explain how to customize the Infinity Connect desktop client. For information on this, see the Infinity Connect Desktop Client Customization Guide.

(2)

Infinity Connect Web App Customization Guide Hosting the customized Web App

Hosting the customized Web App

There are two methods for hosting the customized Infinity Connect Web App: l Apply the changes to the Conferencing Nodes and serve them from the Conferencing Nodes. This method is easier for small deployments, but any changes must be backed up before upgrading to a later release of Pexip Infinity otherwise the upgrade will overwrite the customizations. l Copy the Web App to an external web server or reverse proxy (e.g. the Pexip Reverse Proxy) and serve it from this server. This method is more appropriate for production deployments, but the copy of the Web App on the external web server or reverse proxy must be upgraded manually when the Pexip Infinity installation is upgraded.

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 application_settings subdirectory contains the files that can be customized. There are two core files:

l branding.css: this is a stylesheet file that can be used to change colors and images etc.

l translations.js: this is a JavaScript file that provides all the text used in the Web App.

Additionally, if you are hosting the Web App on an external web server, the network.js file should be edited, and the RTC_NODE variable should be changed to point to the Conferencing Node for example, RTC_NODE: "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 that will typically already be configured to forward requests to your Conferencing Nodes.

We recommend that any additional custom images are also stored in the application_settings directory.

The default settings for the appearance of the Web App are hard-coded within the application itself, and are used automatically where no customization overrides have been specified.

Maintaining customizations when upgrading Pexip Infinity

When upgrading to a new version of Pexip Infinity, the customized application_settings directory can be migrated to the new version.

Customizations hosted on a Conferencing Node

If your customizations have been applied to a Conferencing Node:

1. Before you upgrade Pexip Infinity, backup the application_settings directory containing your current customizations. 2. After the upgrade, re-install your customized application_settings directory back onto the Conferencing Node. 3. Check if you need to add any more customizations to support any new features (see Checking for new features below).

Customizations hosted on an external web server or reverse proxy

If your customizations have been applied to an external web server or reverse proxy:

1. Backup the application_settings directory on the external web server or reverse proxy containing your current customizations. 2. Upgrade your Pexip Infinity Conferencing Node.

3. Copy the upgraded /opt/pexip/share/web/static/app directory tree from the Conferencing Node to the external web server or reverse proxy.

4. Re-install your customized application_settings directory back onto the external web server or reverse proxy. 5. Check if you need to add any more customizations to support any new features (see Checking for new features below).

(3)

Infinity Connect Web App Customization Guide Customizing the application

Checking for new features

When new versions of Pexip Infinity add more features to the Web App, any customizable text and colors will be added to the default versions of the application_settings files that are shipped with the new version. Therefore, we recommend that after an upgrade you 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.

Customizing the application

When editing the 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.

Branding and styles

Initially, all of the style definitions within branding.css are commented out (using /* … */ blocks).

To customize a specific style you must locate the relevant style in branding.css, remove the comment blocks, and then change the style definition according to your branding requirements. That style will then be applied and will override the default settings.

Example - Changing the home page logo

The home page logo is controlled by the contents of the .brand__logo block of the branding.css file. Initially, the style definitions within the .brand__logo block are commented out like this: .brand__logo { /* background-image: url(../application_settings/logo.png); height: 45px; width: 86px; */ } To use a different logo, you must: 1. Remove the comment blocks (the /* and */ lines).

This means that the .brand__logo configuration specified within the branding.css file will now be applied to the Web App and will override the default settings.

2. Upload your alternative logo.png file to the application_settings directory, replacing the existing file.

3. Modify the height and width settings to match the actual width and height of the image contained in your logo.png file. Thus, when uncommented and adjusted for a logo.png file that contains, for example, a 50x90 pixel image, the .brand__logo block would look like this: .brand__logo { background-image: url(../application_settings/logo.png); height: 50px; width: 90px; }

Background color and image on the home page

You can change the background color and the background image via the background setting in the html segment toward the top of the branding.css file.

html {

background: #eee url(../application_settings/list-background.png); }

(4)

Infinity Connect Web App Customization Guide Customizing the application

This defines a light gray (#eee) background and fills it with a tiling pattern from a new file called list-background.png that needs to be added to the application_settings directory.

"Advanced" text label color on the home page

The .form__toggle block configures the text color of the “Advanced” label on the home page widget that toggles the display of the Advanced options.

.form__toggle { color: #f38b3c; }

Conference name color scheme (top of roster)

The .conference__details block controls the color scheme used to display the conference name at the top of the roster. .conference__details { background-color: #f38b3c; border-bottom-color: #d07125; color: #fff; } By default the text is white, the background is Pexip orange, with a darker orange border below.

Search box text color

The .search__participants block configures the color of the text in the participant search box.

.search__participants input { color: #f38b3c;

}

Connecting, audio-only, and presentation-only images

You can customize three of the images used in the Web App.

The .stage-audio-only block configures the image used to represent an audio-only call, by default an orange telephone.

.stage-audio-only {

background: #333 url(../assets/images/audio_avatar.png) center center no-repeat; }

The .stage-present-only block configures the image used to represent a presentation-only call, by default an orange screen with an arrow.

.stage-present-only {

background: #333 url(../assets/images/presentation.png) center center no-repeat; }

The .stage__child block configures the icon used while connecting, by default a spinning orange infinity sign.

.stage__child {

background: #333 url(../assets/images/spinner.gif) center center no-repeat; }

There are no specific file format, image or file size limitations imposed by the Web App.

Other settings

This guide only describes the most commonly customized settings in the branding.css file. The file contains many other

customizable settings that can be used to configure the colors of other text, icons, and backgrounds throughout the Web App. Use the style names within the branding.css file as an indication of each style's purpose.

(5)

Infinity Connect Web App Customization Guide More information

Text used in labels and messages

All of the text that is used in the Infinity Connect Web App can be configured in the translations.js file.

Although the translations.js file is set up for multi-language support, this is not yet implemented, and so all edits must be made on the ‘en’ language.

Text customizations are simply a matter of changing the text assigned with a token. To find the token to change, just search in the

translations.js file for the text that needs to be changed, edit the text, and save your changes back to the same file.

Home page text

The most common branding changes are made to the text on the home page, as follows: l The page title, as displayed in the browser tab:

TITLE: 'Pexip Infinity Connect',

l The text underneath the logo on the home page:

LOGIN_HEADING: 'Infinity Connect',

l The alternative text used in place of the logo on the home page:

LOGO: 'Pexip',

l The text above the input boxes on the home page:

LOGIN_LABEL_PERSON_OR_CONFERENCE: 'Person or conference to dial', LOGIN_YOUR_NAME: 'Your name',

l The error text displayed for invalid inputs on the home page:

LOGIN_NO_CONFERENCE: 'Please enter a conference name', LOGIN_NO_USERNAME: 'Please enter a username',

LOGIN_INVALID_CONFERENCE: 'Invalid conference',

Bandwidth options

The following items configure the bandwidth options in the drop-down box on the home page. This is expressed as a JavaScript associative array. Entries can be removed, renamed, or added.

The value parameters are expressed as strings, and represent the actual bandwidth in kbps that the Web App will use for video. The Web App automatically uses an additional 64kbps for audio, which cannot be customized. Therefore each specified value needs to be 64kbps less than the total bandwidth amount required for video and audio.

BANDWIDTHS: JSON.stringify([

{name:'Low Bandwidth (256kbps)', value: '192'}, {name:'Medium Bandwidth (576kbps)', value: '512'}, {name:'High Bandwidth (1264kbps)', value: '1200'}, {name:'Maximum Bandwidth (1864kbps)', value: '1800'} ])

More information

In addition to customizing the appearance of the Infinity Connect Web App, you can also: l Customize the Infinity Connect desktop client. For more information, see the Infinity Connect Desktop Client Customization Guide. l 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. For more information, see the Pexip Infinity Administrator Guide. If any further information on customizing Pexip Infinity is required, please contact [email protected].

Infinity Connect Web App Customization Guide