> For the complete documentation index, see [llms.txt](https://docs.enginsight.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.enginsight.com/docs/knowledge-base/english/miscellaneous/what-white-labeling-options-does-enginsight-offer-for-its-platform.md).

# What white labeling options does Enginsight offer for its platform?

You can adapt the appearance of the Enginsight platform to your corporate design.

In addition to adding your own logo and support contact details via the Enginsight user interface, these customization options also include more extensive settings that can be configured through the Enginsight configuration file.

***

## Customization via the Enginsight User Interface

### Adding your own logo

You can add your own logo so that it is displayed in the platform sidebar as well as in PDF and DOCX reports.&#x20;

Follow these steps:

{% stepper %}
{% step %}
Log in to the Enginsight platform.
{% endstep %}

{% step %}
Navigate to **Settings** → [Organisation](https://docs.enginsight.com/docs/manual/english/administration/settings/organisation).
{% endstep %}

{% step %}
Scroll to the **Corporate Design** section and click **Expand** to open the corresponding area.
{% endstep %}

{% step %}
Click **Datei auswählen** (Choose File) to upload an image file containing your logo.

{% hint style="warning" %}
**Please note**: The uploaded file must not be larger than 1 MB. Supported image formats are SVG, PNG, and JPG. PNG and JPG files must be at least 150x150 pixels.
{% endhint %}
{% endstep %}
{% endstepper %}

### Adding your own support contact details

You can enter contact information if you, as the main organization, provide support for linked customer suborganizations.

{% hint style="warning" %}
**Please note**: This feature is only available for main organizations in the on-premises version of Enginsight.
{% endhint %}

Follow these steps:

{% stepper %}
{% step %}
Log in to the Enginsight platform.
{% endstep %}

{% step %}
Navigate to **Settings** → [Support](https://docs.enginsight.com/docs/manual/english/administration/settings/support).
{% endstep %}

{% step %}
Enter the following information:

<table><thead><tr><th width="200.1640625">Option</th><th>Description</th></tr></thead><tbody><tr><td>Name of the Organisation</td><td>Enter the name of the organization that is responsible for the support.</td></tr><tr><td>Email</td><td>Enter the email address where the support can be reached.</td></tr><tr><td>Phone Number</td><td><p>Enter the phone number where the support can be reached.</p><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>This field is optional.</p></div></td></tr><tr><td>Website</td><td><p>Enter the website of the organization that is responsible for the support, or the website where the support can be reached, for example via a contact form.</p><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>This field is optional.</p></div></td></tr></tbody></table>
{% endstep %}

{% step %}
Click **Save changes**.
{% endstep %}
{% endstepper %}

The specified contact details are now shown to linked customer suborganizations when they click the **headset** icon in the platform top bar.

<div align="left"><figure><img src="/files/fvYWacoU2pafsEU4txLg" alt=""><figcaption></figcaption></figure></div>

***

## Customization via the Enginsight Configuration File

You can make more extensive changes through the Enginsight configuration file. This mainly affects the login page and links to legally required pages such as the terms and conditions or the privacy policy.

Follow these steps:

{% stepper %}
{% step %}

### Open the Enginsight configuration file

1. Log in to the **Enginsight Application Server**.
2. Open the Enginsight configuration file using the following command:

```
sudo nano /opt/enginsight/enterprise/conf/ui-m1/environment.js
```

{% endstep %}

{% step %}

### Add your corporate design

1. Add the `corporateIdentity` section to the configuration file to define the accent color, logo, browser tab design, login page design, and more:

```
corporateIdentity: {
    colors: {
        primaryH: '',
        primaryS: '',
        primaryL: ''
        },
    tabTitle: '',
    favicon: '',
    company: '',
    companySlug: '',
    about: '',
    website: '',
    logo: '',
    logoIcon: '',
    offlineBackgroundImage: '',
    offlineBackgroundImageWithoutText: false
},
```

2. Add the parameters as follows:

<table><thead><tr><th width="274.1953125">Parameter</th><th>Description</th></tr></thead><tbody><tr><td><code>colors</code></td><td><p>Enter the accent color for the platform using the HSL color model:</p><ul><li><code>primaryH</code>: Enter the H value (hue) as an integer (0-360).</li><li><code>primaryS:</code> Enter the S value (saturation) as a percentage (0% - 100%).</li><li><code>primaryL</code>: Enter the L value (lightness) as a percentage (0% - 100%).</li></ul></td></tr><tr><td><code>tabTitle</code></td><td>Enter the text that should be displayed as the browser tab title.</td></tr><tr><td><code>favicon</code></td><td><p>Enter the full path, including <strong>https://</strong> or <strong>http://</strong>, to a favicon that should be displayed for example on the browser tab.<br><br>Example: <code>https://company.com/favicon.ico</code></p><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>Supported formats are ICO and PNG.</p></div></td></tr><tr><td><code>company</code></td><td>Enter the name of your company.</td></tr><tr><td><code>companySlug</code></td><td>Enter a short name for your company.</td></tr><tr><td><code>about</code></td><td>Enter a short description of your company.</td></tr><tr><td><code>website</code></td><td>Enter your company website, including <strong>www.</strong> <br><br>Example: <code>www.company.com</code></td></tr><tr><td><code>logo</code></td><td><p>Add your main logo, for example a wordmark and icon, directly to the configuration as an .svg file. See the example configuration below.</p><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>Only the SVG format is supported.</p></div></td></tr><tr><td><code>logoIcon</code></td><td><p>Add an approximately square logo, for example the icon only, directly to the configuration as an .svg file. See the example configuration below.</p><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>Only the SVG format is supported.</p></div></td></tr><tr><td><code>offlineBackgroundImage</code></td><td><p>Optionally enter the full path, including <strong>https://</strong> or <strong>http://</strong>, to a background image for the login page.<br><br>Example: <code>https://company.com/images/background.png</code></p><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p>Supported formats are PNG and JPG.</p></div></td></tr><tr><td><code>offlineBackgroundImageWithoutText</code></td><td><p>Define how the login page should be displayed.</p><ul><li><code>false</code>: The organization's logo, name, description, and website are placed in front of the background image. See <a href="#example-1-login-page-without-a-background-image">example 1</a> below.</li><li><code>true</code>: The organization's logo, name, description, and website are not displayed. Instead, the logo is placed above the login form on the left-hand side. See <a href="#login-page-with-a-background-image">example 2</a> below.</li></ul></td></tr></tbody></table>
{% endstep %}

{% step %}

### Add links to legally relevant pages

1. Add the `legal` section to the configuration file to add links to the terms and conditions, privacy policy, legal notice, and data processing agreement:

```
legal: {
    dataProcessingAgreement: "https://...",
    privacyPolicy: "https://...",
    imprint: "https://...",
    terms: "https://..."
},
```

{% hint style="danger" %}
**Please note**: If you omit the entire `legal` section or leave individual values empty, the corresponding links to Enginsight will still be displayed. Therefore, hide values that you do not want to display as described below.
{% endhint %}

2. Set values for links that you want to hide to null, for example:

```
legal: {
    dataProcessingAgreement: null,
    privacyPolicy: null,
    imprint: "https://...",
    terms: "https://..."
```

{% endstep %}

{% step %}

### Save changes

Save the configuration file (**Ctrl** + **o**) and confirm the save process. Close the file (**Ctrl** + **x**).
{% endstep %}

{% step %}

### Apply the changes on the Application Server

You must now run the setup script for the Application Server again to apply your configuration changes.

1. To do so, navigate to the Enginsight installation directory using the following command:

```
cd /opt/enginsight/enterprise
```

2. Now run the setup script anew using the following command and confirm all prompts with the **Enter** key:

```
sudo ./setup.sh
```

{% endstep %}
{% endstepper %}

***

## Examples for Customizing the Login Page

### Example 1: Login Page Without a Background Image

For a login page without a background image, the configuration could look as follows:

<pre><code>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: '&#x3C;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 410.84 87.9">&#x3C;defs>&#x3C;style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#58595b;}&#x3C;/style>&#x3C;linearGradient id="linear-gradient" x1="39.42" x2="39.42" y2="87.9" gradientUnits="userSpaceOnUse">&#x3C;stop offset="0" stop-color="#fc7808"/>&#x3C;stop offset="0.43" stop-color="#ff006c"/>&#x3C;stop offset="0.79" stop-color="#8338ea"/>&#x3C;stop offset="1" stop-color="#3887fe"/>&#x3C;/linearGradient>&#x3C;/defs>&#x3C;g id="OBJECTS">&#x3C;path class="cls-1" d="M39.42,14.1l2.71,1.56V6.27L39.42,4.7,36.7,6.27v9.39ZM59.84,32.16,65.27,29,42.13,15.66v6.27ZM0,24.32V63.58l5.43-3.13v-33Zm78.84-3.13L42.13,0V6.27L73.41,24.33ZM2.71,68.27l34,19.63V81.63L8.14,65.14ZM36.7,0l-34,19.62,5.43,3.14L36.7,6.27Zm-15,30.59,15-8.66V15.66L16.28,27.46ZM39.42,73.8,36.7,72.24v9.39l2.72,1.57,2.71-1.57V72.24ZM59.84,55.74,42.13,66v6.27L65.27,58.87ZM42.13,81.63V87.9L78.84,66.71l-5.43-3.14ZM13.57,29l2.71-1.57-8.14-4.7L5.43,24.33v3.12l8.14,4.7ZM36.7,66l-15-8.66-5.43,3.13L36.7,72.24ZM19,52.61V35.29l-5.42-3.14v23.6Zm-5.42,6.26V55.75l-8.14,4.7v3.12l2.71,1.57,8.14-4.7Z"/>&#x3C;path class="cls-2" d="M104.2,44c0-11.91,9.11-20.35,21.52-20.35,7.21,0,13,2.63,16.82,7.38l-7,6.37a11.57,11.57,0,0,0-9.22-4.58c-6.43,0-10.9,4.47-10.9,11.18s4.47,11.18,10.9,11.18a11.57,11.57,0,0,0,9.22-4.58l7,6.37c-3.8,4.75-9.61,7.37-16.82,7.37C113.31,64.29,104.2,55.85,104.2,44Z"/>&#x3C;path class="cls-2" d="M144.61,44c0-11.74,9.22-20.35,21.74-20.35S188.1,32.21,188.1,44s-9.23,20.34-21.75,20.34S144.61,55.69,144.61,44Zm32.31,0c0-6.76-4.64-11.18-10.57-11.18S155.79,37.19,155.79,44s4.64,11.18,10.56,11.18S176.92,50.71,176.92,44Z"/>&#x3C;path class="cls-2" d="M229.23,63.51l-.11-20.73L219.06,59.66h-4.92l-10-16.33V63.51H193.91V24.39H203L216.77,47l13.41-22.58h9.12l.11,39.12Z"/>&#x3C;path class="cls-2" d="M282.5,38.86c0,8.89-6.7,14.42-17.38,14.42H258.3V63.51H247.23V24.39h17.89C275.8,24.39,282.5,29.92,282.5,38.86Zm-11.18,0c0-3.63-2.29-5.75-6.87-5.75H258.3V44.56h6.15C269,44.56,271.32,42.44,271.32,38.86Z"/>&#x3C;path class="cls-2" d="M312.13,55.91H295.58l-3.07,7.6H281.22l17.27-39.12h10.9l17.33,39.12H315.2Zm-3.24-8.16-5-12.52-5,12.52Z"/>&#x3C;path class="cls-2" d="M367.07,24.39V63.51H358L340.69,42.66V63.51H329.85V24.39H339l17.27,20.84V24.39Z"/>&#x3C;path class="cls-2" d="M395.86,49.48v14H384.79V49.31L369.87,24.39h11.68l9.28,15.54,9.28-15.54h10.73Z"/>&#x3C;/g>&#x3C;/svg>',
    logoIcon: '&#x3C;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 78.84 87.9">&#x3C;defs>&#x3C;style>.cls-1{fill:url(#linear-gradient);}&#x3C;/style>&#x3C;linearGradient id="linear-gradient" x1="39.42" x2="39.42" y2="87.9" gradientUnits="userSpaceOnUse">&#x3C;stop offset="0" stop-color="#fc7808"/>&#x3C;stop offset="0.43" stop-color="#ff006c"/>&#x3C;stop offset="0.79" stop-color="#8338ea"/>&#x3C;stop offset="1" stop-color="#3887fe"/>&#x3C;/linearGradient>&#x3C;/defs>&#x3C;g id="OBJECTS">&#x3C;path class="cls-1" d="M39.42,14.1l2.71,1.56V6.27L39.42,4.7,36.7,6.27v9.39ZM59.84,32.16,65.27,29,42.13,15.66v6.27ZM0,24.32V63.58l5.43-3.13v-33Zm78.84-3.13L42.13,0V6.27L73.41,24.33ZM2.71,68.27l34,19.63V81.63L8.14,65.14ZM36.7,0l-34,19.62,5.43,3.14L36.7,6.27Zm-15,30.59,15-8.66V15.66L16.28,27.46ZM39.42,73.8,36.7,72.24v9.39l2.72,1.57,2.71-1.57V72.24ZM59.84,55.74,42.13,66v6.27L65.27,58.87ZM42.13,81.63V87.9L78.84,66.71l-5.43-3.14ZM13.57,29l2.71-1.57-8.14-4.7L5.43,24.33v3.12l8.14,4.7ZM36.7,66l-15-8.66-5.43,3.13L36.7,72.24ZM19,52.61V35.29l-5.42-3.14v23.6Zm-5.42,6.26V55.75l-8.14,4.7v3.12l2.71,1.57,8.14-4.7Z"/>&#x3C;/g>&#x3C;/svg>',
<strong>    offlineBackgroundImage: '',
</strong><strong>    offlineBackgroundImageWithoutText: false
</strong>},
</code></pre>

<figure><img src="/files/KfoDol2RGJA9yjZu6rdZ" alt=""><figcaption></figcaption></figure>

### Example 2: Login Page With a Background Image

For a login page with a background image and `offlineBackgroundImageWithoutText: true`, the configuration could look as follows:

<pre><code>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: '&#x3C;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 410.84 87.9">&#x3C;defs>&#x3C;style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#58595b;}&#x3C;/style>&#x3C;linearGradient id="linear-gradient" x1="39.42" x2="39.42" y2="87.9" gradientUnits="userSpaceOnUse">&#x3C;stop offset="0" stop-color="#fc7808"/>&#x3C;stop offset="0.43" stop-color="#ff006c"/>&#x3C;stop offset="0.79" stop-color="#8338ea"/>&#x3C;stop offset="1" stop-color="#3887fe"/>&#x3C;/linearGradient>&#x3C;/defs>&#x3C;g id="OBJECTS">&#x3C;path class="cls-1" d="M39.42,14.1l2.71,1.56V6.27L39.42,4.7,36.7,6.27v9.39ZM59.84,32.16,65.27,29,42.13,15.66v6.27ZM0,24.32V63.58l5.43-3.13v-33Zm78.84-3.13L42.13,0V6.27L73.41,24.33ZM2.71,68.27l34,19.63V81.63L8.14,65.14ZM36.7,0l-34,19.62,5.43,3.14L36.7,6.27Zm-15,30.59,15-8.66V15.66L16.28,27.46ZM39.42,73.8,36.7,72.24v9.39l2.72,1.57,2.71-1.57V72.24ZM59.84,55.74,42.13,66v6.27L65.27,58.87ZM42.13,81.63V87.9L78.84,66.71l-5.43-3.14ZM13.57,29l2.71-1.57-8.14-4.7L5.43,24.33v3.12l8.14,4.7ZM36.7,66l-15-8.66-5.43,3.13L36.7,72.24ZM19,52.61V35.29l-5.42-3.14v23.6Zm-5.42,6.26V55.75l-8.14,4.7v3.12l2.71,1.57,8.14-4.7Z"/>&#x3C;path class="cls-2" d="M104.2,44c0-11.91,9.11-20.35,21.52-20.35,7.21,0,13,2.63,16.82,7.38l-7,6.37a11.57,11.57,0,0,0-9.22-4.58c-6.43,0-10.9,4.47-10.9,11.18s4.47,11.18,10.9,11.18a11.57,11.57,0,0,0,9.22-4.58l7,6.37c-3.8,4.75-9.61,7.37-16.82,7.37C113.31,64.29,104.2,55.85,104.2,44Z"/>&#x3C;path class="cls-2" d="M144.61,44c0-11.74,9.22-20.35,21.74-20.35S188.1,32.21,188.1,44s-9.23,20.34-21.75,20.34S144.61,55.69,144.61,44Zm32.31,0c0-6.76-4.64-11.18-10.57-11.18S155.79,37.19,155.79,44s4.64,11.18,10.56,11.18S176.92,50.71,176.92,44Z"/>&#x3C;path class="cls-2" d="M229.23,63.51l-.11-20.73L219.06,59.66h-4.92l-10-16.33V63.51H193.91V24.39H203L216.77,47l13.41-22.58h9.12l.11,39.12Z"/>&#x3C;path class="cls-2" d="M282.5,38.86c0,8.89-6.7,14.42-17.38,14.42H258.3V63.51H247.23V24.39h17.89C275.8,24.39,282.5,29.92,282.5,38.86Zm-11.18,0c0-3.63-2.29-5.75-6.87-5.75H258.3V44.56h6.15C269,44.56,271.32,42.44,271.32,38.86Z"/>&#x3C;path class="cls-2" d="M312.13,55.91H295.58l-3.07,7.6H281.22l17.27-39.12h10.9l17.33,39.12H315.2Zm-3.24-8.16-5-12.52-5,12.52Z"/>&#x3C;path class="cls-2" d="M367.07,24.39V63.51H358L340.69,42.66V63.51H329.85V24.39H339l17.27,20.84V24.39Z"/>&#x3C;path class="cls-2" d="M395.86,49.48v14H384.79V49.31L369.87,24.39h11.68l9.28,15.54,9.28-15.54h10.73Z"/>&#x3C;/g>&#x3C;/svg>',
    logoIcon: '&#x3C;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 78.84 87.9">&#x3C;defs>&#x3C;style>.cls-1{fill:url(#linear-gradient);}&#x3C;/style>&#x3C;linearGradient id="linear-gradient" x1="39.42" x2="39.42" y2="87.9" gradientUnits="userSpaceOnUse">&#x3C;stop offset="0" stop-color="#fc7808"/>&#x3C;stop offset="0.43" stop-color="#ff006c"/>&#x3C;stop offset="0.79" stop-color="#8338ea"/>&#x3C;stop offset="1" stop-color="#3887fe"/>&#x3C;/linearGradient>&#x3C;/defs>&#x3C;g id="OBJECTS">&#x3C;path class="cls-1" d="M39.42,14.1l2.71,1.56V6.27L39.42,4.7,36.7,6.27v9.39ZM59.84,32.16,65.27,29,42.13,15.66v6.27ZM0,24.32V63.58l5.43-3.13v-33Zm78.84-3.13L42.13,0V6.27L73.41,24.33ZM2.71,68.27l34,19.63V81.63L8.14,65.14ZM36.7,0l-34,19.62,5.43,3.14L36.7,6.27Zm-15,30.59,15-8.66V15.66L16.28,27.46ZM39.42,73.8,36.7,72.24v9.39l2.72,1.57,2.71-1.57V72.24ZM59.84,55.74,42.13,66v6.27L65.27,58.87ZM42.13,81.63V87.9L78.84,66.71l-5.43-3.14ZM13.57,29l2.71-1.57-8.14-4.7L5.43,24.33v3.12l8.14,4.7ZM36.7,66l-15-8.66-5.43,3.13L36.7,72.24ZM19,52.61V35.29l-5.42-3.14v23.6Zm-5.42,6.26V55.75l-8.14,4.7v3.12l2.71,1.57,8.14-4.7Z"/>&#x3C;/g>&#x3C;/svg>',
<strong>    offlineBackgroundImage: 'https://company.com/images/background.png',
</strong><strong>    offlineBackgroundImageWithoutText: true
</strong>},
</code></pre>

<figure><img src="/files/67KO26DVY8xl5zll2D6s" alt=""><figcaption></figcaption></figure>

***
