Customizing branding settings for your vanity URL Follow

Overview

Note: We strongly recommend you have experience with web design (HTML and CSS) before customizing branding settings. If you contact Zoom support for help, questions will be handled with best effort and resolutions are not guaranteed. Consult a web developer if you are having issues with your HTML/CSS.

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.

Prerequisites

  • Business, Education, or API plan
  • Approved vanity URL that is compliant with our guidelines (for example, success.zoom.us)
  • Admin that is familiar with HTML/CSS

This article covers: 

Accessing branding settings

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

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

Customizing 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. Click the Landing Page tab.
  4. 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-edittitle.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">

 

Customizing 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:
  • Logo URL: Customize the header logo. Paste the URL of an image you uploaded. You can paste an external image URL if you want to store you image externally. 
  • Header Html: Customize the floating header bar.
  • Footer Html: You can remove the footer with Zoom information and links from your vanity URL. To remove the footer, remove all of the code from the footer section and replace it with the following.
<div id="footer" class="container">
</div>
  •  Show frequently used links on the left sidebar: Change what links are displaying  in the left-side navigation menu.

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

Customizing email templates

  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.
    Note: You can use custom email variables in the template.

 

Updating email templates for groups

  1. Sign in to the Zoom web portal.
  2. In the navigation menu, click User Management then Group Management.
  3. Click the group name of the group, or create a new User Group.
  4. Click Group Settings.
  5. Click Invitation Email Branding.
  6. Click Edit on the email template you want to update.
  7. Once complete, click Apply Changes and then Done.
Was this article helpful?