Customizing branding for your vanity URL

Once you have an approved vanity URL, you can customize it with your organization's branding. Review our branding guidelines before customizing your page with the Zoom logo or other marketing materials.

Any changes made to branding will only apply when accessing the Zoom web portal from your vanity URL (for example, yourorganization.zoom.us). Branding will not apply when accessing the web portal from zoom.us.

Notes:

This article covers: 

Prerequisites for customizing branding settings for your vanity URL

How to access all branding settings

  1. Sign in to the Zoom web portal.
  2. In the navigation menu, click Advanced then Branding.

How to upload images

Before customizing branding, upload images you will use like the background image and your organization's logo.

  1. Sign in to the Zoom web portal.
  2. In the navigation menu, click Advanced then Branding.
  3. Click the Images tab.
  4. Browse your computer and select the image you would like to upload.
  5. Once uploaded, the files will be displayed in the list. The image URL is displayed in the Path column.

How to customize the landing page

The landing page is the main page for your organization's vanity URL. By default, the landing page looks like this:

To customize the landing page's HTML and inline CSS:

  1. Sign in to the Zoom web portal.
  2. In the navigation menu, click Advanced then Branding.
  3. Select the vanity URL you want to edit. 
    Note: If you have only one vanity URL, you will not see additional options. Learn about multiple vanity URLs. 
  4. Click the Landing Page tab.
  5. Follow the sections below make basic changes to the landing page so that it matches your organization's branding.
    Note: To find the below attributes faster, press Ctrl + F and type in the attribute name. Then follow the instructions to update the attribute.

Background image

Attribute name: background-image

To change the background image, update the URL between the quotation marks with the URL of the uploaded background image. To find the URL of the background image, go to the Images tab and copy the link in the Path column.

Sample:

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

Content text color

To change the text color of the landing page content (not including the buttons), add the color attribute within .content-body { }. Use a lighter color if your background is dark.

Sample:

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

Page title

Attribute name: title

The page title will change what will be seen in a browser tab for the page name. Enter your own page title between <title> and </title>.

Sample:

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

branding-edit-title.gif

 

Button background color

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

To change the background color of the three buttons (Join, Host, and Sign In), you need to specify colors using color hex values, for example, #FFFFFF is white. Use Colorpicker for identifying and selecting colors by hex value.

.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)

To change the button color when you hover your mouse pointer over it, specify colors using color hex values, for example, #FFFFFF is white. Use Colorpicker for identifying and selecting colors by hex value.

Sample:

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

Button text color

Attribute: color (nested under .btn-text)

Change the color of the text inside the button. If you used a darker color as your button background, set the attribute to white. If you have a lighter background color, set the attribute to black.  You can also specify a custom hex value. Use Colorpicker for identifying and selecting colors by hex value.

Sample:

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

Logo

Change the logo that appears above the three buttons. To find the URL of the logo, go to the Images tab and copy the link in the Path column.

Note: By default, the logo is resized to 140px by 31.5px. This will most likely distort your custom logo. To remove this, remove class="zoom-logo" after the image URL in the landing page HTML.

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

You can customize the header and footer that appears throughout the web portal when accessed from your vanity URL.

Note: These settings don't affect your landing page.

  1. Sign in to the Zoom web portal.
  2. In the navigation menu, click Advanced then Branding.
  3. Click the Header/Footer/Sidebar tab.
  4. Follow the sections below:
<div id="footer" class="container">
</div>

How to use custom CSS

You can use customize the CSS used for the web portal.

Note: Custom CSS doesn't apply to the landing page. You can customize the inline CSS for your landing page.

  1. Sign in to the Zoom web portal.
  2. In the navigation menu, click Advanced then Branding.
  3. Click the Custom CSS tab.
  4. Click Edit to the CSS select you want to customize.
  5. Use the Custom CSS to define other CSS selectors. 

How to customize email templates

You can customize email templates for general administrative emails.

  1. Sign in to the Zoom web portal.
  2. In the navigation menu, click Advanced then Branding.
  3. Click the Emails tab.
  4. Click Edit next to the template you want to edit.
    List of customizable email templates:

Note: You can use custom email variables in the template.

How to customize meeting invite email templates

You can also customize the meeting invite email templates at the account or group level.

  1. Sign in to the Zoom web portal.
  2. In the navigation menu, access account or group settings:
  3. Click the Meeting tab.
  4. In the Invitation Email Branding section, click Edit on the email template you want to update. Learn more about the schedule meeting email template.
  5. Click Apply Changes then Done.