--- title: 'Tutorial: How to Change the Branding on the Admin and Client Web UIs' canonical: https://openvpn.net/as-docs/tutorials/tutorial--web-server-logo-branding/ product: Access Server Docs description: Looking to change the logo on the web server interfaces of OpenVPN Access Server? Here's how to do just that. --- # Tutorial: How to Change the Branding on the Admin and Client Web UIs ## Overview It's easy to add branding to your Access Server [web interfaces—it takes](https://openvpn.net/as-docs/configuration/#cws-settings_body) just a few simple steps. This tutorial walks you through the process. When you first launch Access Server, your VPN has an [Admin Web UI](https://openvpn.net/as-docs/admin-web-ui-user-manual.md) and a [Client Web UI](https://openvpn.net/as-docs/v3/client-web-ui-user-manual.md), 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. ## Prerequisites - An installed Access Server. - A file transfer program (WinSCP or SCP, for example). - Console access and the ability to get root access. ## Step 1: Update the UI logo When you sign in to the Admin or Client Web UIs, you see the OpenVPN Logo above the login fields. Here’s how you can replace that image with your company branding. ### Prepare your image file 1. Obtain an image file of your logo. - We recommend PNG with a transparent background, 340 pixels wide, and 50-300 pixels high. 2. Name the file with a simple name, all lowercase characters. #### Transfer the file to your server For this, you'll likely use a tool such as WinSCP for Windows or SCP or GUI programs available in Mac/Linux. Our example uses WinSCP for the steps below. 1. Connect to a session with your hostname and port number. You can enter your username in the login profile or when prompted after clicking **Login**. 2. Navigate to the **/usr/local/openvpn\_as** folder. 3. Copy your image file into this location. > **Important** > > Ensure that the filename does not contain foreign characters or spaces. ##### Update the as.conf file 1. Sign in to your Access Server console and get root privileges. 2. Open the as.conf file for editing (we use nano): ``` nano /usr/local/openvpn_as/etc/as.conf ``` 3. Locate the `#sa.company_name` line and add the extra logo variable as follows: ``` sa.logo_image_file=/usr/local/openvpn_as/companylogo.png ``` 4. Save and exit the file, then restart the Access Server service: ``` systemctl restart openvpnas ``` - Your web interface pages should now show your logo. If it has not yet been 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**, sign in to the console or connect over SSH, obtain root privileges, and move the file from the **/tmp** directory to **/usr/local/openvpn\_as/**. ## Step 2: 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. For example, you could use it as an identifier to quickly see which server you are logging into. 1. Sign in to the console and get root privileges. 2. Open the as.conf file for editing (we use nano): ``` nano /usr/local/openvpn_as/etc/as.conf ``` 3. 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. ``` 4. Save and exit the file. 5. Restart the Access Server service: ``` systemctl restart openvpnas ``` - The new text should now display on the Admin and Client Web UI login pages. ## Step 3: Hide the footer The footer is displayed on your web server pages by default, but you can hide it by following the steps below for your Access Server version. ### Access Server 2.14 and newer 1. Open the as.conf file for editing (we use nano): ``` nano /usr/local/openvpn_as/etc/as.conf ``` 2. Add the following to hide the footer on the Admin Web UI: ``` cs.footer=hide ``` 3. Save and exit the file. 4. Then, set the **cws.footer** config key value to hide the footer on the Client Web UI: ``` sacli --key 'cws.footer' --value 'hide' ConfigPut ``` 5. Restart the Access Server service: ``` systemctl restart openvpnas ``` - You will no longer see the footer displayed. ### Access Server 2.13 and older 1. Open the as.conf file for editing (we use nano): ``` nano /usr/local/openvpn_as/etc/as.conf ``` 2. Add the following to hide the footer on the Admin Web UI: ``` cs.footer=hide ``` 3. Then, add the following if you wish to hide the footer on the Client Web UI: ``` cws.footer=hide ``` 4. Save and exit the file. 5. Restart the Access Server service: ``` systemctl restart openvpnas ``` - You will no longer see the footer displayed. ## Web server interface FAQs ### Why can’t I reach my web server’s 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. You can also review the file name and path to ensure accuracy and correct any errors you find. It also helps avoid complicating your filename with characters such as spaces, extra dots, etc. 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 Windows. - OpenVPN Connect macOS - Linux (for the community client download) - iOS mobile app - Android app You can show or hide these from the CWS Settings page in your Admin Web UI and change additional settings. Refer to the [user manual](https://openvpn.net/as-docs/configuration/#cws-settings) for details. > **Tip** > > You can also configure whether users can change their password from the Client Web UI from **Authentication \> Settings**. Refer to the [user manual](https://openvpn.net/as-docs/authentication-78640/#local-user-passwords) for details. --- Prev: [Tutorial: Setting up your Access Server Hostname](https://openvpn.net/as-docs/tutorials/tutorial--custom-hostname.md) Next: [Tutorial: Connect to Access Server via SSH using PuTTY](https://openvpn.net/as-docs/tutorials/tutorial--connect-with-putty.md) Index: https://openvpn.net/as-docs/llms.txt