Advanced White-Labeling of server
In the following guide, we will cover how to customize styling in more depth and how to add custom Javascript scripts to your server.
Please use caution when using these settings, as the misuse of them can cause problems on your server

Custom CSS

Can be found in Administration >> Settings >> Layout. This allows you to overwrite styling on UI. For the full mastery of this setting, we recommend studying the source code, as seen that overwriting classes directly can lead to side effects on styling.

CSS Variables

Rocket.Chat uses CSS variables to store key values when styling. Rocket.Chat recommends only overwriting the CSS variables, as you will have more control over what will be changed.
You can find the full list of variables here

Custom Scripts

You can add custom scripts for when a user takes specific actions. Scripts must be written in Javascript.

Logout Flow

This script runs after the user has logged out.

Custom Script for Logged Out Users

Custom Script that will run whenever a user that is not logged in accesses your server URL. e.g. (whenever you enter the login page)

Custom Script for Logged In Users

Custom Script that will run whenever a user that is logged in accesses your server URL (eg. opens a browser page or the desktop app)

Email Templates

Here you can configure various email settings. We will be going over only email templating sections found in the administration menu. Here you can use HTML for formatting. You can also use placeholders that will be changed to actual data when sending (for example [email] will turn into the user's email). You can also use Rocket.Chat internationalization engine by wrapping the sentence string with {}, see all our internationalization strings here

Email Address Changed

Informs that the user has changed the email. It is triggered when the user changes the email. You may use the following placeholders:
  • [email] for the user's email.
  • [Site_Name] and [Site_URL] for the Application Name and URL respectively.

Forgot Password

Resets the password. It is triggered when the user clicks on 'Forgot Password'
You may use the following placeholders:
  • [Forgot_Password_Url] for the password recovery URL.
  • [name], [fname], [lname] for the user's full name, first name or last name, respectively.
  • [email] for the user's email.
  • [Site_Name] and [Site_URL] for the Application Name and URL respectively.
Any changes made here will be reflected in every header and footer. Changes the header, footer, and direct reply warning HTML. You can use the following placeholders:
  • [Site_Name] and [Site_URL] for the Application Name and URL respectively.

Invitation

Invitation to use the site. It is triggered when the admin invites the person by email.
You can use the following placeholders:
  • [email] for the recipient email.
  • [Site_Name] and [Site_URL] for the Application Name and URL respectively.

Password Changed

Informs that the password has been changed by the admin. It is triggered when the admin change user's password. You can use the following placeholders:
  • [password] for the temporary password.
  • [name], [fname], [lname] for the user's full name, first name or last name, respectively.
  • [email] for the user's email.
  • [Site_Name] and [Site_URL] for the Application Name and URL respectively.

Registration

Is triggered when the user registers. You can use the following placeholders:
  • [name], [fname], [lname] for the user's full name, first name or last name, respectively.
  • [email] for the user's email.
  • [Site_Name] and [Site_URL] for the Application Name and URL respectively.

Registration via Admin

Is triggered when the admin creates an account for the user. You can use the following placeholders:
  • [name], [fname], [lname] for the user's full name, first name or last name, respectively.
  • [email] for the user's email.
  • [password] for the user's password.
  • [Site_Name] and [Site_URL] for the Application Name and URL respectively.

Style

Here you can edit the email styling using CSS.

Subject

Here you can define what email users will receive when they receive certain message notifications:

Direct Message:

Is triggered when a user receives a direct message. You can use the following placeholders:
  • [Site_Name], [Site_URL], [User] & [Room] for the Application Name, URL, Username and Roomname respectively.

Mention:

Is triggered when a user is mentioned using @username. You can use the following placeholders:
  • [Site_Name], [Site_URL], [User] & [Room] for the Application Name, URL, Username and Roomname respectively.

Mention All:

Is triggered when a user is mentioned using @all. You can use the following placeholders:
  • [Site_Name], [Site_URL], [User] & [Room] for the Application Name, URL, Username and Roomname respectively.

Verification

Email that the user receives to verify his account. You can use the following placeholders:
  • [Verification_Url] for the verification URL.
  • [name], [fname], [lname] for the user's full name, first name or last name, respectively.
  • [email] for the user's email.
  • [Site_Name] and [Site_URL] for the Application Name and URL respectively.