About DRACOON Branding

DRACOON includes powerful branding capabilities, which is called DRACOON Branding. With DRACOON Branding, you can customize the design of DRACOON on your own and change it with custom colors and images to best reflect your corporate design.

DRACOON Branding is a web application that allows you to edit any branding setting at ease. As soon as you save your branding adjustments, they are automatically activated in the corresponding DRACOON clients.

The following clients can be customized with DRACOON Branding:

• DRACOON Web App
• DRACOON for Outlook, version 5.2.2 or later
• DRACOON for iOS, version 5.3 or later
• DRACOON for Android, version 5.2 or later

Additionally, the appearance of the following DRACOON areas can be customized:

• DRACOON login window (used by all DRACOON clients)
• DRACOON emails (e.g. when sending share links with the web app)

Requirements for a custom DRACOON Branding

You can have an individual DRACOON Branding if your DRACOON instance has its own Internet address (that is only used by your company/organization).

Sign in to the DRACOON Branding web application

To customize your DRACOON Branding, use the DRACOON Branding web application.

How to access the DRACOON Branding web application:

1. In the browser, enter your DRACOON instance address and add /branding at the end.
   Example: If your DRACOON instance is available at dracoon.example.com, you would need to enter dracoon.example.com/branding.
   

   In the DRACOON Web App, you can open the Branding web application via Settings > Branding (only visible if you have the Config Manager role in DRACOON).

2. If the correct address has been entered, the DRACOON Branding login page appears:
3. Click Login.
4. Enter your DRACOON credentials and click Login.

   You need to have the Config Manager role to sign in.

5. The user interface of the DRACOON Branding web application appears.

Customizable DRACOON elements

The following elements of DRACOON can be customized via DRACOON Branding:

• product name
• colors (base and accent color, option to display header bar background in base color)
• company logo and background splash image
• horizontal position of the login window
• display style of the local login option in the login window (only relevant for OpenID users)
• links to imprint, privacy, and support URLs
• email signature and contact email address
• text for terms of use (in multiple languages, if desired)

Most branding settings affect all DRACOON clients. For example, a changed color will be reflected in all clients. Only the Images section applies to clients individually.

Preview of branding changes

The Branding web application offers a rich preview, with which you can see how the customizations will appear in the different clients. For example, if you change the base color, you can preview the effect on each client by clicking the relevant preview and see which elements have changed:

• Login page: Effects on the login page and login window (applies to DRACOON Web App, DRACOON for Outlook, DRACOON for iOS, and DRACOON for Android)
• Web: Effects on the DRACOON Web App
• Public: Effects on share and file request landing pages (public pages of the DRACOON Web App)
• iOS: Effects on the DRACOON app for iOS
• Android: Effects on the DRACOON app for Android
• Outlook: Effects on the DRACOON Outlook add-In
• Email: Effects on emails sent via DRACOON

---

Edit branding: Product name

If you want to change the default product name DRACOON, enter your desired name under Company Profile in the field Product Name.

Edit branding: Colors

You can select two colors via DRACOON Branding, which will be used for different elements of the user interface of DRACOON. The two colors are called base color and accent color. With this option, you can customize the overall look and fit it to your corporate design.

Depending on the client, different elements are displayed with the selected base and accent colors:

DRACOON Web App

• Base color: is used for the header bar (only if the option Use base color as header bar background has been switched on—otherwise, the base color is not used in the web app)
• Accent color: is used to highlight selected elements and to display commands in the right side panel as well as default buttons

DRACOON for Outlook

In DRACOON for Outlook, no colors are used—the design is neutral in black and white to avoid conflicts with different color themes in Outlook. The color settings in DRACOON Branding, therefore, have no effect in DRACOON for Outlook.

DRACOON for iOS

• Base color: is used for the header bar (only if the option Use base color as header bar background has been switched on—otherwise, the base color is not used in the iOS app)
• Accent color: is used to highlight selected elements

DRACOON for Android

• Base color: is used for the header bar (only if the option Use base color as header bar background has been switched on) and for the upper part of the fly-out menu (which is visible after tapping on  )
• Accent color: is used to highlight selected elements, headers in settings, progress bars, command links in dialogs, and the large round   button.

Login window (in DRACOON Web App, DRACOON for Outlook, DRACOON for iOS, DRACOON for Android)

• Base color: is used for the header of the login window (only if the option Use base color as header bar background has been switched on—otherwise, the base color is not used in the login box)
• Accent color: is used to display buttons and links

Emails

• Base color: is used for the header in the email message (only if the option Use base color as header bar background has been switched on—otherwise, the base color is not used in the email)
• Accent color: is used for buttons in the email message

Select colors

1. To change the base color, click the color circle below Base Color:
2. Select the desired color from the color selection or enter the numerical color value that is used in your corporate design:
   • With the RGBA color model, the first 3 values represent the red, green, and blue content. The fourth value (A) refers to transparency. '1' (maximum and default value) indicates that the color is completely opaque, '.5' indicates 50% transparency.
   • If you want to enter the color value in a format other than RGB (as HTML color code, for example), click the black arrows to the right of the color fields to switch to another color format.
3. If you want to use the base color as the background color of the header bar in the DRACOON Web App, DRACOON for iOS, DRACOON for Android, login box, and emails, switch on the option Use base color as header bar background. Check the preview at the top to see the difference in all those clients.
4. To change the accent color, click the color circle below Accent Color:

Edit branding: Company image and background splash image

You can replace the DRACOON company image with your own company image or product logo. In addition, it is possible to select a background splash image for the login page of the DRACOON Web App and the start page of DRACOON for iOS and DRACOON for Android.

To change the company image, you need three different versions of your company logo file:

1Company image for DRACOON Web App, login window, and emails

For the company image in the top left corner of the DRACOON Web App and in the header area of the login window and emails, the same image file is used.

Required: rectangular, wide image with minimum 568 x 220 pixels and maximum 1136 x 440 pixels, ideally in PNG format with transparency (JPG is also possible as a fallback), RGB color mode

If you have selected a colored header bar (by switching on Use base color as header bar background), we recommend using a company image with transparency stored in a PNG file. This will ensure that your image seamlessly integrates into your selected background.

2Company logo for DRACOON for Outlook

Required: square image with minimum 1024 x 1024 pixels and maximum 2048 x 2048 pixels, ideally in PNG format with transparency (JPG is possible as fallback), RGB color mode

We recommend using a PNG file instead of a JPG file to ensure that the company logo seamlessly blends into the Outlook ribbon without displaying a fixed white background. Please consider that some users might use a dark Outlook theme that would interfere with a fixed white background of the company logo.

3App logo for start page of DRACOON for iOS and DRACOON for Android

Required: square image with minimum 1900 x 1900 pixels and maximum 2200 x 2200 pixels, PNG format

The high resolution of the images is required to ensure a high-quality display on high-DPI monitors. If necessary, reach out to your marketing or design division to obtain the images in the required quality.

Edit company image for DRACOON Web App and header area of the login window and emails

1. In the Company Profile section, under Images and presentation, click Web.
2. Click Edit:
3. Select an image file from your device.

Edit company image for DRACOON for Outlook

1. In the Company Profile section, under Images and presentation, click Outlook.
2. Click Edit:
3. Select an image file from your device.

Company image for DRACOON for iOS and Android

1. In the Company Profile section, under Images and presentation, click iOS and Android.
2. Under App Logo, click Edit.
3. Select an image file from your device.

Edit background splash image for the login page of the DRACOON Web App

You can choose an individual background image for the login page of the DRACOON Web App. Requirement: Image between minimum FullHD resolution (1920 x 1080 pixels) and maximum 4K resolution (3840 x 2160 pixels), RGB color mode. Ideally, you should use a JPG file (PNG is also possible but not recommended due to larger file sizes).

Please note that many users now use very high display resolutions, even on laptop computers. Therefore, we recommend the maximum resolution (4K, 3840 x 2160 pixels) to ensure a high-quality display of the background image.

1. In the Company Profile section, under Images and presentation, click Login page.
2. Click the Edit button next to Background Splash Image.
3. Select the desired background splash image from your device.
4. At the top, under Preview, click Login page to check the look.

Edit branding: Horizontal position of the login window for the DRACOON Web App

The default position of the login window is horizontally centered. You can move the login window to the right or left, e.g. not to hide a specific portion of your background splash image (as the flower in the example above).

1. In the Company Profile section, under Images and presentation, click Login page.
2. The slider position sets the horizontal value—the default is 50% (centered). Using a value smaller than 50% will result in a login window further to the left, using a value larger than 50% further to the right.

Please note: The size of the background splash image and the size of the login window depend on the size of the browser window and will therefore vary—the exact position of the login window cannot be exactly defined. Please check the horizontal login window position for various browser window sizes to find a position that best fits your needs.

Edit branding: Display style of local login option in login window (only relevant for OpenID users)

This setting is only relevant if you use the OpenID Connect authentication method in your DRACOON.

With this setting you can define how the local login option (via DRACOON or Active Directory username, if enabled under Settings > Authentication) is displayed in the login window in addition to the OpenID login option. There are three options:

Always visible login form

If you choose this setting, the form for entering username and password for the local login (with DRACOON or Active Directory username) is always initially visible. This setting is useful if the local login is used regularly in addition to OpenID Connect.

Example:

Display as a button

If you choose this setting, users can log in via local login (with their DRACOON or Active Directory username) instead of OpenID Connect by clicking the Other login option button. After clicking this button, the login form for entering username and password appears.

Example:

Display as a text link

If you choose this setting, users can log in via local login (with their DRACOON or Active Directory username) instead of OpenID Connect by clicking the Other login option text link. After clicking this link, the login form for entering username and password appears.

Example:

Edit branding: Links to imprint, privacy, and support pages

In the DRACOON Web App, DRACOON for Outlook, DRACOON for iOS, and DRACOON for Android links are included to refer to the imprint, privacy, and support pages. Example: If a user clicks Help in DRACOON for Outlook, the support page specified in DRACOON Branding is opened. The default URLs always point to pages on dracoon.com, such as https://support.dracoon.com when clicking Help.
You can change these links and therefore point to your own imprint on your website, for example.

• To specify your own imprint: Go to the Links section and enter your desired URL in the Imprint URL box.
• To specify your own privacy statement: Go to the Links section and enter your desired URL in the Privacy URL box.
• To specify your own support page: Go to the Links section and enter your desired URL in the Support URL box.
  

  If you change the support page, our extensive official documentation will no longer be accessible to your users in affected clients. Therefore, we recommend adding a link to our support page on your linked page so that your users can still find the official DRACOON client documentation if needed. (https://support.dracoon.com)

Edit branding: Emails (Common reply-to address and signature)

When using DRACOON, email messages are sent by the system when certain things occur—for example, a newly created user receives an invitation email, or a share link can be sent to recipients via email from within the web app.
By using DRACOON Branding, you can customize the following additional properties of emails sent by DRACOON besides product name, product logo, and colors (see above):

• Common reply-to address
• Email signature

The common reply-to address is used for emails sent by the DRACOON environment that have not been sent by any other user. An example of this is the password reset email that is sent when you click Forgot password? in the login dialog box. If the received email is then replied to in the email program, the common reply-to address defined in the branding is automatically used as the recipient. Related to the previous example: If the user has problems with resetting the password, he can reply to the email received from the system and thus, for example, directly reach your support for assistance, provided that your corresponding support email address has been defined as the common reply-to address in the branding.
However, for emails sent by another user (e.g. sent share links), the common reply-to address is not used, but the email address of the specific user (e.g. the one who sent the share).

If you want to specify a special common reply-to address:

1. Under Email, in the Common reply-to address text box, enter the desired email address.

If you want to specify a signature that should be automatically inserted at the end of every email sent by DRACOON:

1. First, under Email > Signature, click the gear icon to select the languages you want to provide for the signature.
2. Close the Languages dialog box.
3. Select the desired language in the dropdown box next to the gear icon.
4. Enter your signature in the text box below. Use the formatting toolbar that appears to style the signature.
   Example:

   You can make the signature text box larger by dragging the size grip in the bottom right-hand corner (highlighted in green in the example above).

5. Repeat steps 3 and 4 for all selected languages.

Edit branding: Terms of use

You can provide individual terms of use for DRACOON via DRACOON Branding, which need to be confirmed by your users on the first login (if the option Display Terms of Use is enabled in the web app under Settings). If required, additional versions of supported languages can be defined as well.

To customize the terms of use:

1. First, under Terms of Use, click the gear icon to select the languages you want to provide for the terms of use.
2. Close the Languages dialog box.
3. Select the desired language in the dropdown box next to the gear icon.
4. Enter your terms of use in the text box below. Use the formatting toolbar that appears to style the terms of use.
   Example:

   You can make the text box larger by dragging the size grip in the bottom right-hand corner (highlighted in green in the example above).

5. Repeat steps 3 and 4 for all selected languages.

---

Save branding adjustments

Branding adjustments will become active as soon as you save the branding settings.

1. Prior to saving your adjustments, please check the results in the preview at the top for all affected clients.
2. At the bottom of the page, click Save:

When do new branding settings become visible for users?

• In the DRACOON Web App: When opening the DRACOON Web App after saving the branding adjustments, all changes are instantly visible. Users who are currently using the web app will see the effects after refreshing the page (e.g. by pressing F5).
• In DRACOON for Outlook: Signed-in users will see the adjustments either after 4 hours or at the next start of Outlook (DRACOON for Outlook checks for branding changes every 4 hours). To instantly update your branding in DRACOON for Outlook, click Settings, click Advanced, and then click Update now under Branding.
• In DRACOON for iOS and Android: The changes are instantly visible for any user that signs in after saving the branding changes.
  DRACOON for iOS users who still have the app open will see the new branding after switching between apps with the app switcher.
  DRACOON for Android users who still have the app open will see the new branding after 15 minutes latest (DRACOON for Android checks for branding changes every 15 minutes at runtime).

If you distribute DRACOON for Outlook as a network installation, you can pre-select the DRACOON environment. This facilitates login, as users do not have to enter the server URL manually. Additionally, the correct Branding is obtained via the pre-selected server setting.