Customizing and branding the Connect apps

The branding and styling of the Connect web apps and Connect desktop app can be customized. This changes the look and feel of the Connect app regardless of which service is being accessed. (However, the theme-based elements of each individual service may also have been customized — a theme changes the look and feel of the actual conference you have joined, or are trying to join.)

Connect app customization can be used to control:

  • default app settings such as bandwidth, default background image, screen sharing frame rate
  • default user settings such as whether microphone and camera are muted on join
  • the ability to display an image/logo and accompanying welcome text on a landing page, and to use a custom favicon
  • language translations and the default language
  • the color scheme for buttons, icons and other graphic indicators; elements can be customized individually or a general color scheme can be applied to all similar items.

To customize the Connect web apps you typically create a branding package and then upload it to the Management Node. Separate branding packages are required for each of the web app versions in use in your deployment. You can use Pexip's branding portals (available separately for Webapp3 and for Webapp2 and the desktop client) to quickly and easily create branding packages, or you can create them manually for more advanced customizations.

To customize the Connect desktop app, you use the same customized branding files as for Webapp2. You then use either Pexip Infinity's provisioning features or a locally-installed branding file to instruct those clients to override their built-in branding and use the customized branding instead.

This topic explains the two main steps in applying branding to Connect web apps in your deployment:

  1. Creating a branding package:

  2. Uploading the branding package to the Management Node so that it is available to all users.

It also includes information on:

Creating a branding package using the portals

You must create a branding package before you can upload it to the Management Node or use it to brand the Connect desktop app. Our recommended method for creating a branding package is to use the branding portals for either Webapp3 or Webapp2 (although you can also create the required files manually). These web-based portals guide you through the selection of your image files and colors (without having to edit individual CSS files etc.), and then generate the customized branding package for you.

Downloading an existing package

As an alternative to using the branding portals to create new branding packages, you can download, edit, and upload an existing branding package. This might be a default branding package downloaded from the Management Node, a package previously created using the branding portals, or a package downloaded from previous versions of Pexip Infinity.

If you are using a Webapp2 branding package created for a v30 or earlier version of Pexip Infinity, you must amend the file structure before uploading it — see Using a pre-v31 Webapp2 branding package.

Manually editing an existing package is useful if you have very specific modifications that you want to apply to the branding files, or if you are including plugins. Note that manual configuration requires knowledge of core web-design technologies such as HTML, JavaScript and CSS.

This section covers how to obtain branding packages. For full information on manually editing these packages, see Advanced Pexip app branding and customization

Downloading branding packages from the Management Node

Pexip Infinity includes a number of default branding packages that you can download and edit to create your own customized branding. . For full details, see Default branding packages. In addition, if you have existing custom branding files uploaded for any of the three web apps, you can also download and use these as the basis on which to apply your modifications.

You may also wish to download an existing branding package in order to upload it to an external server if you are hosting the Connect web app externally.

To download an existing branding package from the Management Node:

  1. Go to Web App > Web App Branding.
  2. Select the Pexip branding package for the relevant web app version and then from the bottom of the detail page select Download.

    A ZIP file containing the selected branding files is downloaded to your local file system.

  3. Unpack the downloaded file and apply your modifications to the relevant files.

    The contents of the branding files and how to modify them is fully described in Advanced Pexip app branding and customization.

  4. Repackage your branding files into a single ZIP file. This file will need to have a different name to any packages already uploaded. If you are editing an existing branding package, after uploading simply redirect the current path to point to this new package.

    The ZIP file must contain the complete set of branding files. You must retain the original file/folder structure in the rebuilt ZIP file.

    You must include the manifest.json file in the webapp2/branding or webapp3/branding folder.

  5. Upload the branding package to your Management Node.

Using a pre-v31 Webapp2 branding package

If you are using an existing Webapp2 branding package that was created for Pexip Infinity version 30 or earlier, you will need to change the structure of the files and folders within the branding package before it can be uploaded to the v31 or later Management Node. To do this:

  1. Unpack the contents of the .zip file. This will be unpacked to a /webapp2 folder.
  2. Within the /webapp2 folder, create another folder called branding and move the contents of the /webapp2 folder into this subfolder. This will give you a structure that looks like the following:

  3. If you wish to make further customizations you can edit the contents of the folder, and then re-zip it. See Manually customizing Webapp2 and the desktop app for full information.
  4. Upload the webapp2.zip file to your Management Node.

Editing an existing package

You can also use as the basis of your new branding packages any other existing branding packages. These might be downloaded from previous versions of Pexip Infinity, from either of the branding portals, or be packages that you created entirely manually. Simply ensure that these packages meet the current branding requirements outlined in Manually customizing Webapp3 or Manually customizing Webapp2 and the desktop app as appropriate, before zipping and uploading the new package.

Uploading the branding package

Branding packages are uploaded as .ZIP files. The files must contain the required branding files in a webapp3/branding or webapp2/branding subfolder.

To upload a branding package to your Management Node:

  1. Go to Web App > Web App Branding.
  2. From the bottom of the page, select Add Webapp branding package.
  3. On the Add Webapp branding package page, enter the following information about the package you wish to upload:

    Name The name for this branding package.
    Description An optional description of this branding package, to help you identify it easily.
    Web app version Select the web app version to which this branding package will apply.
    Branding package to upload Select Choose File and select the ZIP file containing your customizations.
  4. Select Save.

    The branding package is verified and uploaded.

  5. After the branding package is uploaded, to use it you must select it for use with one or more web app paths, creating a new path if necessary.

Any changes you make to branding packages and paths must be replicated out to all Conferencing Nodes before being available (typically after approximately one minute).

Updating an existing package

To make changes to a branding package already in use in your deployment:

  1. Download the old branding package and edit it with your updates.
  2. Save the updated branding package as a ZIP file.
  3. Upload the updated branding package (web app > web app branding), giving it a different name to the existing version.
  4. Edit all paths that use the old version of the branding package so that they use the new version instead.
  5. Delete the old branding package.

Don't delete the old branding package before uploading the new package and redirecting to it. If you do, all the paths that used the deleted package will revert to using the default branding, meaning that participants will experience the default branding until you have redirected the relevant paths to use the new package.

Removing a package (reverting to default branding)

Default branding packages cannot be deleted. You can remove customized branding in one of two ways:

  • If you wish to keep the branding for possible later use, simply edit the paths that currently use that package, so that the paths either use a different branding package, or use the default branding.
  • If you no longer wish to keep the branding package, delete it. Any paths that point to deleted branding packages will revert to using the default branding.

To delete a branding package:

  1. On the Management Node, go to to Web App > Web App Branding.
  2. Select the tick boxes next to the branding packages you wish to remove.
  3. From the Action drop-down, select Delete selected Web app branding packages.

Wait for the customized branding to be removed from all Conferencing Nodes (typically after approximately one minute). After this time, all new participants accessing the path will see the default branding. Note however that any participants currently using the deleted package will continue to see the deleted branding until they refresh their browser.

Applying branding to the Connect desktop app

Any branding package that is uploaded to the Management Node is only applied to the relevant Connect web app.

To customize the Connect desktop app, you use the same customized branding files as for Webapp2. You then use either Pexip Infinity's provisioning features or a locally-installed branding file to instruct those clients to override their built-in branding and use the customized branding instead.