# White Label
Enginsight offers you a wide range of options for adapting your [on-premises installation](#on-premises) to your corporate identity and implementing white labeling. For example, you can incorporate your own logo or customize the accent color.
Our [SaaS platform](#saas) also offers you personalization options. You can add your logo to the PDF reports and the platform.
## On-Premises
{% hint style="warning" %}
If you customize a **configuration file** on the application server, you must always run **`setup.sh` afterwards**. Only then will the settings be applied.
{% endhint %}
1\. Upload your own logo at Settings → Organisation → Corporate Design.
{% hint style="info" %}
The logo you upload within the platform will be used for your reports and displayed on the dashboard. In addition, the logo will be displayed in the top left corner unless you have stored a logo in the UI module configuration file with `logoIcon`.
{% endhint %}
2\. Store the contact data of your support at Settings → Support.
3\. Log in to the application server with root privileges (SSH or console).
```
su
```
4\. Open the configuration file of the UI module with `nano`.
```
sudo nano /opt/enginsight/enterprise/conf/ui-m1/environment.js
```
5\. To customize the Enginsight platform according to your corporate design, add the `corporateIdentity` section.
```
corporateIdentity: {
colors: {
primaryH: '',
primaryS: '',
primaryL: ''
},
tabTitle: '',
favicon: '',
company: '',
companySlug: '',
about: '',
website: '',
logo: '',
logoIcon: '',
offlineBackgroundImage: '',
offlineBackgroundImageWithoutText: false
},
```
{% hint style="warning" %}
Make sure that the accent color **isn't too bright and white font on it is well readable**.\
To convert a HEX color code to the HSL model, you can find numerous converters on the Internet.
{% endhint %}
| Attribute Name | Format | Description |
| ----------------------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `colors` | HSL | Assign the accent color for the Enginsight platform in the HSL color model. |
| `tabTitle` | Specify the title to be displayed in the browser tab. | |
| `favicon` |
.ico
.png
| Customize the favicon to be specified in the browser tab next to the page title. Use a direct and full path (not internal): e.g. `https://company.com/favicon.ico`. |
| `company` | Specify the name of your organisation. | |
| `companySlug` | Specify the short name of your organisation. | |
| `about` | | Specify a description text of your organisation. |
| `website` | | Specify the website of your organisation. |
| `logo` | .svg | Store your entire logo (e.g. word and picture mark). To do this, insert the logo as an .svg file directly into the configuration file. |
| `logoIcon` | .svg |
Store an (approximately) square logo (e.g. only image mark). To do this, insert the logo as an .svg file directly into the configuration file.
The logoIcon is displayed within the platform on the top left.
|
| `offlineBackgroundImage` |
.jpeg
.png
| Optionally define a background image for the login page. Use a direct and complete path (not internal): e.g. `https://webseite.com/imges/background.png`. |
| `offlineBackgroundImageWithoutText` | |
Assign either the value true or false.
false: Logo, name, description and website of the organisation are located in front of the background image.
true: The organisation's logo, name, description and website are not displayed. Instead, the logo is located above the login screen.
|
### Examples for Corporate Identity
#### Example: Login without background image
```
corporateIdentity: {
colors: {
primaryH: '208',
primaryS: '66%',
primaryL: '60%'
},
tabTitle: 'Company Security',
favicon: 'https://company.com/favicon.ico',
company: 'Company GmbH',
companySlug: 'Company',
about: 'Best Security Monitoring of the world',
website: 'www.company.com',
logo: '',
logoIcon: '',
offlineBackgroundImage: '',
offlineBackgroundImageWithoutText: false
},
```
#### Example: Login with background image and `offlineBackgroundImageWithoutText: true`.
```
corporateIdentity: {
colors: {
primaryH: '208',
primaryS: '66%',
primaryL: '60%'
},
tabTitle: 'Company Security',
favicon: 'https://company.com/favicon.ico',
company: 'Company GmbH',
companySlug: 'Company',
about: 'Best Security Monitoring of the world',
website: 'www.company.com',
logo: '',
logoIcon: '',
offlineBackgroundImage: 'https://company.com/images/background.png',
offlineBackgroundImageWithoutText: true
},
```
#### Example: Corporate Identity within the Enginsight Platform
### Links to GTC, privacy policy, imprint and order processing contract.
1. Create links to GTC, privacy policy, imprint and order processing contract. Add the `legal` section to this.
```
legal: {
dataProcessingAgreement: "https://...",
privacyPolicy: "https://...",
imprint: "https://...",
terms: "https://..."
},
```
To hide one or more links, simply set the value to `null`, for example:
```
legal: {
dataProcessingAgreement: null,
privacyPolicy: null,
imprint: "https://...",
terms: "https://..."
},
```
{% hint style="info" %}
If you leave the value blank, e.g. `terms: ""` or you do not add the `legal` section, the corresponding link to Enginsight will still be displayed.
{% endhint %}
### Example: Entire configuration file
Your configuration file now looks something like this:
```
module.exports = function (environment) {
var ENV = {
hinting: true,
modulePrefix: 'ngs-ui-m1',
environment: environment,
rootURL: '/',
locationType: 'auto',
corporateIdentity: {
colors: {
primaryH: '208',
primaryS: '66%',
primaryL: '60%'
},
tabTitle: 'Company Security',
favicon: 'https://company.com/favicon.ico',
company: 'Company GmbH',
companySlug: 'Company',
about: 'Best Security Monitoring of the world',
website: 'www.company.com',
logo: '',
logoIcon: '',
offlineBackgroundImage: 'https://company.com/images/background.png',
offlineBackgroundImageWithoutText: true
},
legal: {
dataProcessingAgreement: "https://company.com/data",
privacyPolicy: "https://company.com/privacy",
imprint: "https://company.com/imprint",
terms: "https://company.com/terms"
}
};
ENV.apiDomain = '%%API_URL%%';
ENV.onpremise = {
version: 1
};
return ENV;
};
```
1. Save your changes (Ctrl+O) and close `nano` (Ctrl+X).
2. Navigate to `/opt/enginsight/enterprise`.
```
cd /opt/enginsight/enterprise
```
3. Update your installation for the changes to take effect.
```
sudo ./setup.sh
```
## SaaS
1. Upload your own logo under Settings → Organization → Corporate Design.
{% hint style="info" %}
For best results, use an .svg file with a near-square aspect ratio.
{% endhint %}
Your company logo will now automatically appear on all PDF reports \*\*\*\* and in the platform top left\*\*.\*\*
To upload your customer's company logo within the customer account (if it is created), go to Settings → Organization in the customer organization.
So your customer will receive his PDF reports with his own logo.
2. enter your contact details where your customers can reach you in case of problems. You can change the support data under Settings -> Support.
Your customer will then see this support data in the linked customer organization when they click on the headset in the top menu on the right.
