9.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:

Veeam Cloud Connect Portal login screen

9.14: 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.

Company name

A company’s name plays a crucial role not only in a brand’s growth, but also in the customer’s perception of it. This makes the company name one of the first impressions the company has on many people.

Most of the visible information in Veeam Cloud Connect Portal is editable via app.js file, and the company name is no exception.

In order to replace Veeam© with the name of your company, you should find the following files, the login page:

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

and the application page:

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

Locate the string including Veeam© in both files:

componentCls:"app-header-title",bind:{html:'<div class="sup">Veeam <sup>&#174;</sup></div>

Replace it with the appropriate name (Wonderland Corp. in this example):

componentCls:"app-header-title",bind:{html:'<div class="sup">Wonderland Corp.<sup>&#174;</sup></div>

You’ll see something similar to the following:

Personalized company name in Veeam Cloud Connect Portal

9.15: Personalized company name in Veeam Cloud Connect Portal

The other missing part is the portal name. That is also configurable via text editor. This time, we’re going to replace the line containing the application name:

appName: " Cloud Connect Portal "

Enter your new application name:

appName: " Awesome Portal "

The application title still preserves its previous name. So, we have to open web config file:

[PortalDir]\Web.Config

Change the title name:

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

Personalized text in the portal

9.16: 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 blue (#4c05ff):

Blue portal

9.17: Blue 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.