Branding Configurations on the Admin and Client Web Server Interfaces

Upgrade to Latest Version

Introduction

It is easy to add branding to your OpenVPN Access Server web interfaces — it can be done in just a few simple steps. This page will walk you through the process.

When you first launch Access Server, your VPN has an Admin Web UI and a Client UI, with a default display using our OpenVPN logo. Some customers leave this as is; others prefer to replace it with their company branding. Here’s what you can configure:

  1. The web interface logo
  2. A name or tag for the admin web interface
  3. Show or hide the footer

When you log in to the Admin Web UI or Client UI for Access Server, you see the OpenVPN Logo above the login fields. Here’s how you can replace that image with your company branding.

1 - Prepare your image file

Obtain an image file of your logo. We recommend PNG with a transparent background, 340 pixels wide, and 50-300 pixels high. Name the file with a simple name, all lowercase characters.

2 - Transfer the file to your server

Next, transfer your file to your Access Server system. You’ll likely use a tool such as WinSCP for Windows or SCP or GUI programs available in mac/Linux. For our steps below, our example uses WinSCP.

  1. Connect to a session with your hostname and port number. You can enter your username in the login profile or when you’re prompted after clicking on Login.
  2. Navigate to the /usr/local/openvpn_as folder.
  3. Copy your image file into this location. Note: Ensure that the filename does not contain foreign characters or spaces.

3 - Update as.conf file

Log in to your Access Server’s console or connect through an SSH session and obtain root privileges.

  1. Open the as.conf file for editing (such as by using nano or another text editor): nano /usr/local/openvpn_as/etc/as.conf
  2. Locate the #sa.company_name line and add the extra logo variable as follows: sa.logo_image_file=/usr/local/openvpn_as/companylogo.png
  3. Save and exit the file, then restart the Access Server: service openvpnas restart

Your web interface pages should now show your logo. If it has not yet updated, you may need to refresh the webpage forcibly or empty your browser cache. If you encounter an issue with the pages being unavailable or not found, it’s likely an error with the filename or location. Correct the settings or undo the changes and restart the Access Server again.

Helpful Tips:

  • You cannot reference an image hosted online. The image file must be placed on the file system of the Access Server.
  • For the best display, use a PNG with a transparent background, 340 pixels wide, and 50-300 pixels in height.
  • Make sure the image filename is in lowercase. Uppercase characters do not work.
  • JPG, GIF, and BMP are supported but may not look as good.
  • If your Linux operating system requires that your WinSCP or SCP connection is via a user with limited privileges, you may not be able to upload a picture directly to a folder in /usr/local/openvpn_as/. If that’s the case, you can upload it in a directory like /tmp, login to the console or connect over SSH, obtain root privileges, and move the file from the /tmp directory to /user/local/openvpn_as/.

How to add a server name to web UI logins

When your users sign in to the Admin or Client Web UIs, you can display a name or description with the server or instance. You could use it as an identifier to quickly see what server you are logging into, for example. Here’s how:

  1. Open the as.conf file for editing (again, we use nano): nano /usr/local/openvpn_as/etc/as.conf
  2. Locate the sa.company_name and change it to your specific text desired (if it is commented out, make sure you delete the #): sa.company_name=OpenVPN Inc.
  3. Save and exit the file, then restart the Access Server: service openvpnas restart

Now you should see the new text displaying on the Admin and Client Web UI login pages.

By default, the footer displays on your web server pages, but you have the option to hide it by making a change in the as.conf file. To do so:

  1. Open the as.conf file for editing (again, we use nano): nano /usr/local/openvpn_as/etc/as.conf
  2. Below the sa.company_name and/or sa.logo_image_file variables, add the following to hide the footer on the Admin page: cs.footer=hide
  3. Then, add the following if you wish to hide the footer on the Client page: cws.footer=hide
  4. Save and exit the file, then restart the Access Server: service openvpnas restart

After adding this line, you will no longer see the footer displayed.

Web Server Interface FAQ

Why can’t I reach my web server’s web interfaces after these changes?

If you can’t access your Admin or Client Web UI pages online after making these changes, there’s likely a mistake in the file name or path in as.conf. It helps to use a very simple filename. You can easily back out your changes by removing the two offending lines from as.conf and issuing a service openvpnas restart command again. Or you can review the file name and path to make sure it’s accurate, correcting any errors you find. It also helps to avoid complicating your filename with characters such as spaces, extra dots, and so on. Keep it simple: companylogo.png, for example.

Can I add branding to OpenVPN Connect apps?

Branding options are not present with the OpenVPN Connect apps.

How do I configure the Client Web UI page?

In addition to what you see on the Client Web UI login screen, you can configure what displays for them after they log in. By default, they will see these links for downloading the OpenVPN Connect apps:

  • OpenVPN Connect versions for Windows
  • OpenVPN Connect versions for macOS
  • Linux (for the community client download)
  • iOS mobile app
  • Android app

You can choose to show or hide these from the CWS Settings page in your Admin Web UI. You can also change additional settings. For the details, refer to the user manual page: Configuration: CWS Settings.