Customize Tableau Server’s Look and Feel – Add custom messages on Tableau Server

Right off the bat, we know that Tableau Server has a pretty decent UI, that is both clean and ergonomic in most cases. But sometimes, companies using Tableau Server on-premises would like to customize the Tableau Server’s UI to match their internal customers’ needs, like:

• Adding a custom login message
• Displaying a personalized and permanent GDPR text
• Changing the Help menu options to add some internal Portal links to it

And these are just few of the changes that clients at some point will require their internal Tableau platform admins to do, or at least to research for feasibility.

If you are one of the Tableau admins of your company and you are looking to make small changes to the Tableau Server’s UI as the one describe above, read further!

How to add your personal touches to Tableau Server’s UI

Like any other Web interface, Tableau Server relies on HTML to display the content in a browser. So, for adding our personal touches to the Tableau Server’s UI, we’ll need to edit its HTML code.

Where are the HTML files located?

While this depends on your Tableau Server version, for Tableau Server 2020.2, you can find the Tableau Server’s HTML files under Tableau’s installation directory:

• <version> should be something like 20202.10.0427.1803 and depicts the Server version you have installed on your machines
• <lang> is the language you want to modify – most of the cases users use en language, but if you want to be thorough you’ll need to add the changes to all languages

By navigating to the above location we’ll find the HTML files for the Tableau Server’s UI, along with some duplicates of them.
For example:

• main.html
• main.html.gz
• main.html.br

While it is easy to understand the type of the *.html file, and should be easy enough to edit it, we should also add the changes to the *.gz and *.br files.

Editing the HTML file and adding a custom message

For this example, we’ll be using main.html file to inject our custom message to. For example, let’s advise the users not to save confidential data from the reports to their own laptops.

In the end, the change will look like below – see the footer message:

Let’s open the main.html file in a text editor of your choice. I’m using Notepad++ for this as it is fast and usually do small changes.
By opening the main.html file you’ll be seeing some HTML code like the one below (this might be slightly different on your side depending on your Tableau Server’s version).

Now lets add our custom text that will show at the bottom of the Tableau Server’s page. So, we’ll append the following code the the already existing code:

In the end, the final code for main.html for my Tableau Server version will be:

So, not we have the customized main.html file.
Let’s build the other 2 additional files, main.html.gz and main.html.br.

The main.html.gz file can be easily created by zipping the custom main.html into main.html.gz. This will be used by Tableau Server to serve a gz inflated version of main.html via the Tableau Server’s Web Server for faster page loads. You can use a zip archiver at your choice to zip main.html to main.html.gz. I use 7-Zip for example.

Now that we have both custom main.html and main.html.gz files, let’s create main.html.br file.
The *.br files are actually archived files using the Brotli compression algorithm.
For that we’ll need to download a small tool that will help us convert the custom main.html file to main.html.br.
The tool is called brotli.exe and can be downloaded from here: https://bayden.com/dl/brotli.exe.
Now, with this toold downloaded to the same location where the custom main.html files is located, use the following command to create main.html.br:

You now should have all 3 custom files created. You can go ahead and replace the original files on the Tableau Server’s vizportalclient folder. Make sure you keep backups of the original ones!!

Extra: my changes are not visible on the browser

This is fine, as Tableau actually caches all HTML content for 1 year.
You can check your changes by clearing your browser’s cache and refreshing the browser.
For a more permanent solution, you’ll need to change Tableau’s cache expiration time via TSM or Tabdmin (for older Tableau versions).

Here is how to do that:

For older Tableau Server versions that use tabadmin:

You can change the “2 minutes” for what suits you better.

Hope above hack will come in handy. You can use it to change any of the Tableau Server’s HTML files.
Make sure that you understand that above changes will not be supported by Tableau and you should take full responsibility and precautions while doing these changes!

Let me know what cool changes you’ve added to your Tableau Server’s UI in the comments section! 🙂