Customizing branding for your vanity URL in zoom App
You can customize a vanity URL that is approved by your organization with your branding.If you wish to customize your webpage with Zoom’s logo or other marketing materials, please review our branding guidelines.
Whenever your branding changes are made to the Zoom web portal, the changes will only be visible when you access Zoom via your vanity URL (e.g., business.zoom.us). Zoom.us does not apply branding to its web portal.
Notes:
- If you are going to customize branding settings, we strongly recommend you have an understanding of HTML and CSS. If you are experiencing problems with your HTML/CSS, contact an experienced web developer.
- We do not support Javascript branding at this time.
- A sub-account’s branding can be forced to use the parent account’s branding settings if it is owned and controlled by an account owner or administrator. In their own accounts, the sub-accounts will not be able to make any changes to branding settings.
Prerequisites for customizing branding settings for your vanity URL
- You can choose an API plan for your business or education
- If your vanity URL complies with our policy (for example, success.zoom.us), then we have approved it.
- If you have an admin that understands HTML and CSS, then you will be fine.
How to access branding settings
- Log into Zoom’s web portal.
- Select Branding from the menu on the left.
How to upload images
You need to upload images such as your logo and your background image before you customize branding.
- Log in to the Zoom website.
- Select Branding under Advanced.
- Select Images.
- Choose an image from your computer.
- Select Upload. Select an image from your computer. The Path column displays the URL for the selected image.
How to customize the landing page
Your organization’s vanity URL is the primary page for the vanity URL for your organization. This is what your landing page should look like by default:
You can customize the HTML and the inline CSS on the landing page by using the following tips:
- Log on to the Zoom web portal by entering your email address and password.
- Then click Advanced, followed by Branding in the navigation bar.
- Select Landing Page from the list of tabs.
- Making some basic adjustments to your landing page to ensure it matches the brand of your organization is as easy as following the steps below.
Note: The following attributes can be found faster by pressing Ctrl + F and typing the attribute name into the search box. You can then update the attribute by following the instructions.
Background image
Attribute name: Photo/background
Change the URL between quotation marks of the background image to replace the URL of the image you want to use as the background. Click on the Images tab, and under the Path column, you will find the link to the URL of the background image.
Sample:
Background-image: url("https://yourorganization.zoom.us/account/branding/p/backgroundimage.jpg");
Content text color
You can add the color attribute within the .content-body [ ] within the .content body tag (not including the buttons) to change the color of the text on the landing page. In the case of a dark background, choose a lighter color.
Sample:
.content-body { display: table-cell; Vertical-alignment: middle; color: white; }
Page title
Attribute name: Title
As a result, you will see a different page title in a browser tab. title> and /title> should contain your own page title.
Sample:
<title>Video Conferencing, Web Conferencing, Online Meetings, Screen Sharing</title> <!--customize landing page title-->
Button background color
Attribute name: (Look for the attribute background-color in the .button section)
As a result of the fact that you need to specify color hex values using the Join, Host, and Sign In buttons, you will be able to change the color of those three buttons. For example, white would be #FFFFFF. Hexadecimal color values can be identified with the Colorpicker and selected with their hex 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: In the “Background-color” field of .button.hover, you can specify the color of the background
When the mouse is hovered over a button to change the color, hex values can be used to specify colors, so #FFFFFF, for example, is white when the mouse is hovered over the button. By using Colorpicker, you can identify and select colors based on their hexadecimal values.
Sample:
.button: hover { background-color: #eb9834; /*customize button color */ }
Button text color
Attribute: In .btn-text, the color is nested beneath the .btn-text
The text inside the button can be changed in color by clicking the button and changing the color. The attribute white should be set when you are using a darker colored background for your buttons. Alternatively, you can choose black if you are using a lighter colored background. The hex value can also be specified if you need something different. You can identify and select colours based on their hex values by using Colorpicker.
Sample:
.btn-text { color: #008BFF; /*customize button font color */ font-size: 17px; }
Logo
Above the three buttons, change the logo. Click on Images in the left-hand menu and copy the path of the URL in the Images tab.
Note: A default size of 140px by 31.5px is used for the logo. Your custom logo will be distorted by this. Alternatively, you can remove the class=”zoom-logo” from the landing page by removing the class=”zoom-logo” in the image URL.
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
When you access the web portal from your vanity URL, you can customize the header and footer displayed.
Note: Your landing page is not affected by these settings.
- To access the Zoom online web portal, you will need to sign in.
- Then click on Advanced and then Branding to access the Zoom online web portal.
- Click Header, Footer, Sidebar to access the Zoom online web portal.
- You will find the following sections:
- Logo URL: Add a custom logo to the header. Simply type in an image URL that you have uploaded. If you want to store your image externally, you can paste the URL of an external image.
- Header Html: Set the floatable header to a custom height.
- Footer Html: The Zoom information can be removed from the footer of your vanity URL, including the zoom links. Replace the entire footer section with the following code if you want to remove the footer.
<div id="footer" class="container"> </div>
- Show frequently used links on the left sidebar: Customize the links displayed on the left sidebar.
How to use custom CSS
Web portals can be customized by changing the CSS.
Note: The landing page does not use custom CSS. Inline CSS can be customized on the landing page.
- Zoom is the web portal where you can sign in.
- Choose Advanced, then Branding from the navigation menu.
- Select Custom CSS.
- Then, click Edit next to the CSS selection you wish to edit.
- You can also define CSS selectors using Custom CSS.
How to customize email templates
There are different types of email templates which you can customize to suit your needs. For example, there are email templates which can be customized to send emails when users reset their password or sign up.
- To access the Zoom website, sign in with your Zoom ID.
- Then click the Advanced option and then click Branding.
- Click on the Email tab.
- Select the template you would like to edit and then click Edit.
Note: Custom email variables can also be used in the template.
How to customize meeting invite email templates
It is also possible to customize the templates for meeting invitation emails either at the account level or at the group level.
Note: Those who signed up for a Zoom account after August 21, 2021; or those who have enabled the New Admin Experience on their accounts, will now find the Group Management section is renamed to the Groups section.
- Zoom’s web portal requires you to sign in.
- To do this, go to Settings and access your account or group:
- Account: From Account Management, select Account Settings to access your account settings.
- Group: To manage your groups, click User Management. Alternatively, you can create a new User Group by clicking the group name.
- Select Meetings.
- To update an email template, click Edit in the Invitation Email Branding section. Discover how an email template for schedule meetings works.
- Apply changes and click Done.