8.4 Customize your Veeam Cloud Connect Portal

A service provider can guarantee that tenants have easy access to their cloud failover plans by deploying the Veeam® Cloud Connect Portal. Tenants can run cloud failover plans to switch to VM replicas in the cloud disaster recovery (DR) site in an easy and secure way.

By default, Veeam Cloud Connect Portal looks like this:

8.15: Veeam Cloud Connect Portal login screen

Since many tenants will access the Veeam Cloud Connect Portal on a regular basis, it represents a critical component of the service provider’s branding strategy. It communicates who the service provider is, and what they offer, through its organization and appearance.

Service providers can give Veeam Cloud Connect Portal that familiar look and feel by using the company’s color scheme and name. This is very easy to achieve because Veeam provides both simple and quick options to brand the Veeam Cloud Connect Portal.

Text

Most of the visible information in Veeam Cloud Connect Portal is editable in two app.js files. These two files need to be both edited for the changes we are suggesting in this chapter.

By default, the installation folder of the Cloud Connect Portal is C:\Program Files\Veeam\Backup and Replication\CloudPortal, and the two files to edit are the login page:

[PortalDir]Scripts\build\production\LoginApp\app.js

and the application page:

[PortalDir]Scripts\build\production\veeamCloud\app.js

Frist, we can change Veeam© in the upper green banner with the name of the provider company. Let’s locate this string in both files:

componentCls:'app-header-title',bind:{html:'<div class="sup">Veeam <sup>

Replace it with the desired name (“Virtual to the Core” in this example):

componentCls:'app-header-title',bind:{html:'<div class="sup">Virtual to the Core <sup>

Don’t forget the space at the end of the text, it will leave the needed space for the © to not overlap the last letter. Once the two files are updated, we will see something similar to the following:

8.16: Personalized company name in Veeam Cloud Connect Portal

The other editable part is the portal name, right below the company name. To change it we replace the line containing the application name:

appName: " Cloud Connect Portal "

by entering our new application name:

appName: " Failover Portal "

Then, we have to open also the web config file:

[PortalDir]\Web.Config

and change the title name:

<add key="AppName" value="Failover Portal"/>

Once reloaded, the Portal will look like this:

8.17: Personalized text in the portal

Color

The Veeam Cloud Connect Portal color scheme is present in three CSS files:

[PortalDir]Scripts\build\production\LoginApp\resources\LoginApp-all.css

[PortalDir]Scripts\build\production\VeeamCloud\resources\VeeamCloud-all_01.css

[PortalDir]Scripts\build\production\VeeamCloud\resources\VeeamCloud-all_02.css

By default, Veeam uses green (#54b948). So, you need to replace it across the mentioned documents with a hex code for the color you want. For instance, the following example uses violet (#8f00ff):

8.18: Violet portal

Most of information regarding styles, names and colors of the Veeam Cloud Connect Portal are present inside the .js or .css files. Having a basic understanding of JavaScript and CSS should help you to modify it even further.