How to Customize branding for your vanity URL

Obtaining an approved vanity URL will allow you to customize it with your organization’s branding once it is approved. If you wish to customize your page with the Zoom logo or other marketing material, please review the Zoom branding guidelines.

The branding changes will only apply if you access Zoom via your vanity URL (for example, yourcompany.zoom.us) and access the Zoom web portal from this URL. When you access the Zoom.us web portal through the zoom.us address, the branding will not apply.

Prerequisites for customizing branding settings for your vanity URL

• You can choose from Business, Education, or API plans
• The vanity URL must comply with our guidelines and be approved by the team (for example, success.zoom.us).
• An administrator who has a basic understanding of HTML/CSS is preferred.

How to access branding settings

1. Please sign in to the Zoom web portal.
2. Click on Advanced, then click on Branding on the left side of the screen.

How to upload images

Upload the images you will use when customizing your branding, such as the background image and your organization’s logo, before you begin.

1. Log in to the Zoom web portal by using your email address and password.
2. Once you have logged in, click Advanced then Branding from the navigation menu.
3. Next, click the Images tab.
4. You will then be able to choose an image from your computer to be uploaded.
5. The images will then be displayed in a list once they have been uploaded. When you click on the Path column, you will see the image URL.
   

Customizing the landing page

It is important to keep in mind that your landing page is going to be the destination of your organization’s vanity URL. You’ll find that your landing page defaults to looking like the following:

The HTML and the inline CSS of the landing page can be customized in the following manner

1. Log on to the Zoom web portal by entering your email address and password.
2. Click on ‘Advanced’ then ‘Branding’ in the navigation menu.
3. Go to the box labeled ‘Landing Pages’ and click on it.
4. Following the sections below, you can make basic changes to the landing page in order to make it reflect your organization’s branding.
   Note: Using Ctrl + F, you can find the below attributes more quickly if you type the name of the attribute in after pressing Ctrl + F. If you want to update the attribute, follow the instructions below.

Background image

Attribute name: background-image

The URL between the quotation marks of the background image should be updated with the URL of the uploaded image if you wish to change it. Go to the Images tab of the Preferences dialog box, then click the Path column to find the URL of the background picture.

Sample:

background-image: url("https://yourorganization.zoom.us/account/branding/p/backgroundimage.jpg");

Content text color

Adding the color attribute to .content-body [ ] is the easiest way to change the color of the text in landing page content (excluding buttons). If you have a dark background, use a lighter color.

Sample:

.content-body {
 display: table-cell;
 vertical-align: middle;
 color: white;
}

Page title

Attribute name: title

In a browser tab, what will be shown for the page name will be determined by the title of the page. Enter the title of your own page between the brackets <title> and </title>.

Sample:

<title>Video Conferencing, Web Conferencing, Online Meetings, Screen Sharing</title> <!--customize landing page title-->

Button background color

Attribute name: background-color (look for the background-color attribute that is nested under .button)

You can specify the color of the buttons’ backgrounds using their hexadecimal values, for instance, #FFFFFF indicates white. You can also change the color of the text on the buttons. Colorpicker can be used to identify and select colors based on their hexadecimal values.

.button {
 width: 80px;
 background-color: #000000; /*customize button color */
 border-color: #2D8CFF;
 padding: 12px 20px;
 display: inline-block;
 text-align: center;
 margin: 10px 0;
 transition: .3s ease;
}

Button background hover color

Attribute name: background-color (nested under .button.hover)

For example, if you want to change the color of the buttons when hovering the mouse pointer over them, you can use hex numbers to specify colors, for instance #FFFFFF is white. Colorpicker is a tool which allows you to select and identify colors by their hexadecimal values.

Sample:

.button:hover {
  background-color: #eb9834; /*customize button color */
 }

Button text color

Attribute: color (nested under .btn-text)

The text inside the button can be changed to a different color. It is advised to set the attribute to white if you have used a darker color for the background of your button. In the event that your background color is lighter, set the attribute to black.  It is also possible to specify a custom hex value for the background color. Make use of the Colorpicker to identify and select colors based on their hex values.

Sample:

.btn-text {
 color: #008BFF; /*customize button font color */
 font-size: 17px;
}

Logo

Make the logo that appears above the three buttons more appealing. Go to the Images tab and copy the link in the Path column of the images tab to find the URL of the logo.

Sample:

<div class="row">
  <img src="https://zoom.us/account/branding/p/1c7dfaf5-2646-4224-92e0-5abef82036b1.png" alt="Zoom Logo"> <!--customize company logo-->
<div class="row">

How to customize the header, footer, and sidebar of the web portal

If you access the web portal from your vanity URL, you have the option of customizing the header and footer that appears throughout the website.

1. Sign in to the Zoom web portal using your email address and password.
2. Then click on Advanced then Branding from the navigation bar.
3. Choose the Header/Footer/Sidebar tab from the drop down menu.
4. The following steps will guide you:

• Logo URL: The header logo can be customized. If you want to upload an image, you will need to paste its URL. If you want to use an external image URL to store your image, then you can paste the URL in the external image field.
• Header Html:This section allows you to modify the floating header bar.
• Footer Html: By removing the Zoom information and links from the footer of your vanity URL, you can make your URL look much more professional. Using the code below, you can replace the entire footer section with the following if you wish to remove the footer.

<div id="footer" class="container">
</div>

•  Show frequently used links on the left sidebar: The links that display in the menu on the left side of the screen can be changed.

How to use custom CSS

The web portal’s CSS can also be customized by you if you wish.

1. Log in to the Zoom web portal by entering your email address and password.
2. Then, click on Advanced and then Branding under the navigation menu.
3. Select Custom CSS from the drop-down menu.
4. Once you are done making changes to the CSS, click on Edit.
5. To define other CSS selectors, you will need to use the Custom CSS.

How to customize email templates

Email templates can be tailored to fit a variety of requirements, such as sending general administrative emails when a user resets their password or signs up for the first time.

1. Join the Zoom web portal by logging in with your email address and password.
2. Once you have logged in, click on Advanced followed by Branding in the navigation menu.
3. Choose the Emails tab from the drop-down list.
4. You will be able to edit a template by clicking Edit next to it.
   Note: In templates, you are permitted to use personalized variables for emails.

How to customize meeting invite email templates

In addition, you are able to customize the meeting invitation templates at either the group or account level.

1. To access the Zoom web portal, you will need to sign in.
2. Access your account or group settings via the navigation menu:
   • Account: From the Account menu, choose the Account Settings link.
   • Group:From the User Management page, click on the Groups link. You can either click on the group name or create a new User Group by clicking the group name.
3. Choose Meetings from the menu.
4. Select the email template you want to edit from the Invitation Email Branding section and click Edit. Learn more about this template for scheduling meetings here.
5. Once you apply the changes, click Done.