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.

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

This article covers:

Prerequisites

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

Instructions

Uploading Images

You can upload a custom background and your organization logo to be used on your vanity URL.

  1. Login to your Zoom portal and navigate to Branding.
  2. Click the Images tab.
    Screen_Shot_2018-04-03_at_10.34.28_AM.png
  3. Click Upload an Image.
    Screen_Shot_2018-04-03_at_10.37.13_AM.png
  4. Browse your computer and select the image you would like to upload.
  5. Once uploaded, the files will be displayed in the list. 
    Screen_Shot_2018-04-03_at_10.42.49_AM.png
  6. To get the full URL of the file, right-click on the image and choose Copy Image Address.
    copyimageaddress.gif

Note: We restrict the display size on the page to avoid breaking the layout if the logo is too big. You can change the display size via custom CSS as follows:

#header .left {
    margin-top: -12px;
}
#header .left .logo {
   height: 69px;
   width: 158px;
}

 

Landing Page

The Landing Page HTML is fully customizable for branding the landing page to match your organization's branding. Some commonly edited sections are listed below. 

Line 4: This is the Title portion of the landing page. This will change what will be seen in a browser tab for the page name. 

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

branding-edittitle.gif

Line 22: Update the URL with the full URL of the uploaded background. To find the full URL of the background image, go to the Images tab, right-click on the background image, and choose Copy Image Address.

.container {
display: table;
height: 100%;
width: 100%;
background-image: url("https://yourorganization.zoom.us/account/branding/p/backgroundimage.jpg"); /*customize background image*/
background-size: cover;
}

Lines 51-67: These lines contain the color codes for your Join and Host a Meeting buttons and when the mouse is hovering over these buttons. This is noted by "background-color: #2D8CFF". Colorpicker for identifying and selecting colors by hex code. In this section, you can also edit the button positioning. 

.button {
width: 80px;
background-color: #2D8CFF; /*customize button color */
border-color: #2D8CFF;
padding: 12px 20px;
display: inline-block;
text-align: center;
margin: 10px 0;
transition: .3s ease;
}
.button:hover {
background-color: rgb(45, 165, 255); /*customize button color */
}
.btn-text {
color: white; /*customize button font color */
font-size: 17px;
}

Line 150: This is where you can change your logo. To find the full URL of the logo, go to the Images tab, right-click on the logo, and choose Copy Image Address.

<div class="row">
<img src="https://d24cgw3uvb9a9h.cloudfront.net/static/90733/image/new/ZoomLogo.png" class="zoom-logo" alt="Zoom Logo"> <!--customize company logo-->
</div>
<div class="row">

 

Header / Footer

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

Logo: You can enter the URL of your organization's logo. 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.
Note: If you edit the header below, you do not need to change the logo, as editing the header overrides the logo field.

Header: You can edit the header to remove elements such as Zoom's phone number and pricing. For example, to remove the Zoom header and replace it with only your logo, you could remove the existing code and replace it with the following:  

<img class="logo" src="https://yourorganization.zoom.us/account/branding/p/organizationlogo.png" alt="Your Company Logo" />

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 Custom CSS is used to hide the Sign Up Free 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?
Have more questions? Submit a request
Powered by Zendesk