Sample Branding Follow

Overview

Once you have an approved vanity URL, you can customize the vanity URL with your organization's branding. Please review Zoom's 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 (e.g. yourorganization.zoom.us). Branding will not apply when accessing the web portal from zoom.us.

Changes are made using HTML and CSS. HTML allows you to add text, images and other content to the page and change it's structure. CSS is used to format the layout of the page. It can be used to define text styles, image sizes, and other aspects of the pages that was previously added using HTML.

This article covers:

Prerequisites

  • Business, Education, or API Plan
  • Approved Vanity URL
  • Account owner or admin permissions to customize

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. Click AdvancedBranding.
  3. Click the Images tab.
  4. Click Upload an Image.
  5. Browse your computer and select the image you would like to upload.
  6. Once uploaded, the files will be displayed in the list. The image URL is displayed in the Path column.

Customizing the Landing Page

You can customize the landing page for your vanity URL. By default, the landing page looks like this:

To access the landing page's HTML and CSS:

  1. Sign in to the Zoom web portal.
  2. Click AdvancedBranding.
  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 and Footer of the Web Portal

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

  1. Sign in to the Zoom web portal.
  2. Click AdvancedBranding.
  3. Click the Landing Page tab.
  4. Follow the sections below to customize the logo, header, or footer.

Header Logo

Enter the URL of your organization's logo in the Logo URL field. This will change the logo in the header throughout your vanity URL. To find the full URL of the logo, go to the Images tab, right-click on the logo, and choose Copy Image Address.

Footer

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>

 

Custom CSS

The Custom CSS page can be a powerful tool to change the styling of the page and remove certain elements. The sample below is used to hide the Sign Up Free link and change the header coloring.

#header_container {
    background: none #fff;
}
#header_login li a { color: #000 !important; }
#header_outer .hostmeeting, #header_outer .rr { color: #000 !important; }
.signupfree { display: none; }
Was this article helpful?