Customizing the Infinity Connect Web App

The Infinity Connect Web App is available as part of all Pexip Infinity deployments. It provides a WebRTC or Flash-based interface to Pexip Infinity services.

The standard Infinity Connect Web App uses Pexip logos and icons and has an orange color scheme. However, you can customize all text, color, and image elements to provide a branded experience. To do this you must create and then upload a branding package to the Management Node.

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 procedures described here apply a generic customization for all Web App users. If you have specific customization requirements, such as hosting multiple different branding customizations under different URLs on external web servers or reverse proxies, see Advanced Infinity Connect Web App customization.

The following instructions describe how to create and upload, edit and remove a branding package.

Creating and uploading a branding package

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

There are two main ways to create a branding package for the Infinity Connect Web App:

• via the Pexip branding portal (https://branding.pexip.com)
• manual configuration of the default branding files after downloading them from the Management Node

Note that both methods use the same set of configuration files — you can use the branding portal to easily apply your basic customization requirements and then make further manual amendments to the configuration files if necessary.

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.

Creating a branding package via the Pexip branding portal

You can use the Pexip branding portal to customize your Web App. 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:

1. Go to the Pexip branding portal (https://branding.pexip.com/) and sign in.

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

2. From here you can choose to add a new customization (branding package), or edit an existing customization that you or somebody else in your organization has previously created.

3. Configure your customization as required, selecting the relevant image files, colors and languages.

   Note that you can use the Preview option to see how the Web App home page would look with your branding applied.

   The following screenshots show the default branding and indicate which elements of the Web App are controlled by the various image and color options presented in the branding portal.

   

   

   

4. When you have finished configuring your branding, select Download and choose the Pexip MCU software version as appropriate for your installation.

   This creates and downloads a <customization _name>.zip file containing your customizations.

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

   Allow a minute or so for the new branding to be replicated out to all Conferencing Nodes.

Using the Pexip branding portal

How to use the Pexip branding portal to customize the Infinity Connect Web App (8 mins)

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 add a language that is not available on the branding portal. 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_default.zip file to your local file system.

   Note that if you have existing branding files uploaded, you can choose to download those (as branding_custom.zip) instead of the default files.

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 Manually customizing the application files.

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 (for example, if you have only changed some of the images or aspects of the css), but you must retain the original file/folder structure in the rebuilt zip file.
   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.

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.

   Allow a minute or so for the new branding to be replicated out to all Conferencing Nodes.

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 Pexip branding portal or manually editing the branding files that were uploaded previously to the Management Node.

Note that when you upload a new branding package to the Management Node, all of the previously uploaded branding files are deleted and replaced with the new set of 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://branding.pexip.com/) and sign in.
2. Select the customization (branding package) you want to change.
3. Make your changes, previewing them if necessary, and then download a new ZIP file.
4. On the Management Node, go to Service configuration > Web App customization and upload your new ZIP file.

Allow a minute or so for the new branding to be replicated out to all Conferencing Nodes.

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 current 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 Manually customizing the application files.

4. Repackage your modified branding files into a single .ZIP file.
5. Upload the new ZIP file back onto the Management Node (Service configuration > Web App customization then Choose File followed by Upload branding).

Allow a minute or so for the new branding to be replicated out to all Conferencing Nodes.

Removing a branding package (revert to default branding)

If you want to revert to the default Infinity Connect Web App 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 Delete and confirm.

Allow a minute or so for the customized branding to be removed from all Conferencing Nodes and for them to revert to the default branding.