Customizing the Infinity Connect clients

The branding and styling of the Infinity Connect clients (web app, mobile and desktop) can be customized. This changes the look and feel of the Infinity Connect client regardless of which service is being accessed. (However, the theme-based elements of each individual service may also have been customized.)

Infinity Connect customization can be used to control:

  • default settings such as bandwidth, screen sharing frame rate and so on
  • 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 clients you must create and then upload a branding package to the Management Node. That branding package is then automatically applied to all users of the web app. To apply the same customized branding to the next-generation desktop and mobile clients you must use Pexip Infinity's provisioning features to instruct those clients to override their built-in branding and use the customized branding instead. Note that the clients do not need to be registered in order to use the branding provisioning feature.

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).

The instructions in this topic describe how to create and upload, edit and remove a branding package, and how to apply the branding to the mobile and desktop clients.

Note that the procedures described here apply a generic customization for all Infinity Connect users. If you have specific customization requirements, such as hosting multiple different branding customizations for web app users under different URLs on external web servers or reverse proxies, or need to customize the legacy clients, see Advanced Infinity Connect customization.

Creating and uploading a branding package

You must create a branding package before you can upload it to the Management Node.

The recommended method to create a branding package for the Infinity Connect clients is to use the Pexip branding portal (https://brandingportal.pexip.com).

Creating a branding package via the Pexip branding portal

You can use the Pexip branding portal to customize the Infinity Connect web, desktop and mobile clients. This web-based tool guides you through the selection of your image files and colors without having to edit individual CSS files etc, and then generates the customized branding package for you. The portal also lets you go back and modify existing branding packages and share your branding with colleagues from your organization.

To use the Pexip branding portal to generate your branding package for the Infinity Connect clients:

  1. Go to the Pexip branding portal (https://brandingportal.pexip.com), select the Next-generation platform and sign in.

    First time users need to register before they can use the portal.

    You can also use the portal to create customizations for the legacy web app if required.

  2. From here you can choose to create new customizations, or edit an existing customization that you or somebody else in your organization has previously created.

    Configure your customization as required, selecting the relevant image files, colors and settings:

    • The App Editor changes the look and feel of the Infinity Connect clients.
    • The Customizations section controls the client's configuration settings, including default options and plugins.
    • The Splash Screens section doesn't directly affect the Infinity Connect clients. It is used to customize the Pexip Infinity themes (which are used when you join a VMR or other service) and generates a separate ZIP package when built.
    • The Languages section allows you to set up additional languages for the Infinity Connect clients (currently, English is the only language that is available by default). If you set up a new language then you must use the Customizations section to select the languages you want to include.
  3. When you have finished configuring your branding, go to the Dashboard, select the relevant App Edits and Customizations and Build your customization package. If you have added new languages they are automatically included in your build depending upon which languages are selected in the Customization.

    This creates and downloads a branding.zip file containing your client customizations.

  4. Upload the branding package to your Management Node:

    1. Go to Service configuration > Web App customization.
    2. In the Upload Web App branding section, select Choose File and select the ZIP file containing your customizations.
    3. Select Upload branding.

      The branding package will be uploaded. The upload process automatically detects whether you are uploading legacy or next-generation files, or a package containing both legacy and next-generation files, and processes the ZIP file accordingly.

    Wait for the new branding to be replicated out to all Conferencing Nodes (typically after approximately one minute).

Manually configuring the branding files

Manual configuration is useful if you have very specific modifications that you want to apply to the branding files, or if you want to change the text or language used in the clients. Note that manual configuration requires knowledge of core web-design technologies such as HTML, JavaScript and CSS.

To manually configure the branding files:

  1. Download the default web app branding files from the Management Node:

    1. Go to Service configuration > Web App customization.
    2. Select Download (next to the Download default branding label). This downloads a branding_nextgen_and_legacy_default.zip file to your local file system.

    Note that if you have existing branding files uploaded, you can choose to download those instead of the default files. You can also use files that were originally created by the Pexip branding portal — both methods use the same set of configuration files — you can use the branding portal to apply your basic customization requirements and then make further manual amendments to the configuration files if necessary.

  2. 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 Infinity Connect customization.

  3. Repackage your branding files into a single ZIP file (<name>.zip).

    The ZIP file does not have to contain the complete set of branding files. You can upload a subset of the branding files, but you must retain the original file/folder structure in the rebuilt ZIP file. For example, if you are only customizing the next-generation web app files you only need to zip up the webapp2 folder.

    If you are customizing the next-generation clients, you must include the manifest.json file in the webapp2 folder.
    If you are customizing the legacy web app and want to 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.

  4. Upload the branding package to your Management Node:

    1. Go to Service configuration > Web App customization.
    2. In the Upload Web App branding section, select Choose File and select the ZIP file containing your customizations.
    3. Select Upload branding.

      The branding package will be uploaded. The upload process automatically detects whether you are uploading legacy or next-generation files, or a package containing both legacy and next-generation files, and processes the ZIP file accordingly.

    Wait for the new branding to be replicated out to all Conferencing Nodes (typically after approximately one minute).

You can now test the branding by dialing in to one of your Pexip Infinity services via the Infinity Connect web app.

Editing an existing branding package

You can modify an existing branding package by either returning to the Pexip branding portal, or manually editing the branding files that were uploaded previously to the Management Node.

Note that when you upload to the Management Node a new package that contains branding for the legacy web app, all of the previously uploaded legacy web app branding files are deleted and replaced with the new set of files. Similarly, when uploading a package that contains next-generation client branding, it replaces all of the previously uploaded next-generation client branding files.

Using the branding portal

If you initially created your branding package via the Pexip branding portal, you can return to the portal and change those files:

  1. Go to the Pexip branding portal (https://brandingportal.pexip.com) and sign in.
  2. Make your changes, previewing them if necessary, and then download a new ZIP file.
  3. On the Management Node, go to Service configuration > Web App customization and upload your new branding ZIP file.

Wait for the new branding to be replicated out to all Conferencing Nodes (typically after approximately one minute).

Manually changing your existing branding on the Management Node

You can manually edit the existing branding files that have been uploaded to the Management Node (even if those files were originally created via the Pexip branding portal):

  1. On the Management Node, go to Service configuration > Web App customization.
  2. Download the existing branding files:

    • Select the Download option next to the Download default branding label to download the system default branding files.
    • If customized branding has been uploaded for the legacy clients you can download it by selecting the Download option next to the Download current branding label.
    • If customized branding has been uploaded for the next-generation clients you can download it by selecting the Download option next to the Download next gen branding label.
  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 Infinity Connect customization.

  4. Repackage your modified branding files into a new ZIP file.

    If you are modifying both legacy and next-generation files, you can package them as two separate ZIP files i.e. one ZIP containing legacy branding and one ZIP containing next-generation branding, thus matching the ZIP packages you downloaded. You can also combine them into one ZIP package, but it must match the file structure that is produced when downloading the default branding files.

  5. Upload the new ZIP file back onto the Management Node (Service configuration > Web App customization then Choose File followed by Upload branding).

    The upload process automatically detects whether you are uploading legacy or next-generation files, or a package containing both legacy and next-generation files, and processes the ZIP file accordingly.

Wait for the new branding to be replicated out to all Conferencing Nodes (typically after approximately one minute).

Removing a branding package (revert to default branding)

If you want to revert to the default branding, you need to remove your customized branding from the Management Node. To do this:

  1. On the Management Node, go to Service configuration > Web App customization.
  2. From the bottom-right corner of the page:

    • Select Remove branding to remove any legacy web app branding.
    • Select Remove next gen branding to remove any next-generation branding.

Wait for the customized branding to be removed from all Conferencing Nodes and for the web app to revert to the default branding (typically after approximately one minute).

Applying the branding package to the mobile and desktop clients

Any branding package that is uploaded to the Management Node is automatically applied to the Infinity Connect web app.

To apply the same customized branding to the next-generation desktop and mobile clients you must use Pexip Infinity's provisioning features to instruct those clients to override their built-in branding and use the customized branding instead. Note that the clients do not need to be registered in order to use the branding provisioning feature. This is achieved by specifying the brandingURL provisioning parameter when you construct each individual mobile/desktop client user's provisioning URI.

The brandingURL parameter must refer to a directory that contains customized branding configuration. In most cases this will be:

https://<node_address>/webapp2/custom_configuration/

where <node_address> is the FQDN of a Conferencing Node.

When a branding package is uploaded to the Management Node it is automatically replicated by Pexip Infinity into the webapp2/custom_configuration directory of all of the Conferencing Nodes.

After an Infinity Connect client has been provisioned with a brandingURL provisioning parameter, every time it launches it checks the contents of the branding files at the brandingURL location to see if the branding has changed (it checks to see if the brandingID in the manifest.json file has changed). If the branding has been updated, the client fetches and caches the relevant files.

The manifest.json is automatically generated by the Pexip branding portal and includes the brandingID timestamp and also indicates which parts of the app are customized.

See Registering and provisioning the Infinity Connect client for full instructions about how to set up provisioning URIs.

Advanced branding scenarios

In advanced configuration scenarios, such as when hosting the web app on an external web server or reverse proxy, or when you need to use multiple different brandings, you can set the brandingURL parameter to refer to a directory on a another server.

The directory must have the correct structure and contain:

  • manifest.json (mandatory)
  • settings.json (optional)
  • watermark_icon.png (optional)
  • themes directory containing styles.css (both optional)

as shown below:

Full details of the structure of the manifest.json file and the other application files is contained in Advanced Infinity Connect customization.