Customizing branding for your vanity URL in Zoom

In order to customize your vanity URL, you will need to have the vanity URL approved by your organization’s branding department. The Zoom logo and other marketing materials should be customized in accordance with our branding guidelines before incorporating them into your site.

Changing the branding of the Zoom web portal will only take effect if the URL that your organization uses to access it is the vanity URL (for example, yourorganization.zoom.us). Using zoom.us as a portal to access the web portal will not allow you to use the branding.

This article covers: 

• How to access branding settings
• How to upload images
• How to customize the landing page
  • Background image
  • Content text color
  • Page title
  • Button background color
  • Button background hover color
  • Button text color
  • Logo
• How to customize the header, footer, and sidebar of the web portal
• How to use custom CSS
• How to customize email templates
• How to customize meeting invite email templates

Prerequisites for customizing branding settings for your vanity URL

• Business, Education, or API plan

• A vanity URL that conforms to our guidelines has been approved as a vanity URL (for example, success.zoom.us)

• An administrator who is familiar with HTML and CSS

How to access branding settings

1. Zoom’s web portal can be accessed by logging in.

2. You will find the Branding option in the Advanced section of the navigation menu.

How to upload images

Upload your organization’s logo and a background image before you begin customizing the branding, so that you can choose exactly what you want.

1. Zoom’s web portal can be accessed by logging in.

2. Click on the Advanced link in the navigation menu and then click on Branding.

3. The image tab will appear when you click it.

4. If you would like to upload an image from your computer, you need to browse your computer and select it.

5. In the list of files, you will be able to see the uploaded files once they have been uploaded. Whenever you click the Path column on the right side of the image, you will see the image URL.

How to customize the landing page

Your organization’s vanity URL is the main page on which you display the vanity URL for your organization. A landing page by default looks something like this:

The HTML code and inline CSS files of the landing page can be customized as follows:

1. To access the Zoom web portal, you will need to sign in.

2. Click on the Advanced link in the navigation menu and then click on Branding.

3. On the Landing Page tab, click the Landing Page button.

4. Make changes to the landing page as outlined in the section below so that it is consistent with the branding of your organization.
   Note: You can quickly search for the attributes below by pressing Ctrl + F and typing in the attribute name in the search box. Afterwards, follow the instructions on how to update the attribute by following the instructions.

Background image

Attribute name: background-image

If you wish to change the background image, you will need to replace the URL between the quotation marks with the URL of the image that you have uploaded. Click on the Images tab in the menu bar and copy the link in the Path column in order to find the URL for the background image.

Sample:

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

Content text color

If you would like to change the color of the text on the landing page (excluding the buttons), then you should add the color attribute within the .content-body { }. If you have a dark background, you may want to use a lighter color.

Sample:

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

Page title

Attribute name: title

If you choose to change the title of the page, what will be seen in the browser tab for the page name will change. The title of your page should be entered between the elements <title> and </title>.

Sample:

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

Button background color

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

Changing the background color of the three buttons (Join, Host, and Sign In) is quite simple, you just need to use a color hex value, for instance, #FFFFFF is white, to specify colors. By using Colorpicker, you will be able to identify and select colors according to 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: background-color (nested under .button.hover)

In order to change the color of the buttons when your mouse pointer hovers over them, you can use color hex values to specify the color, such as #FFFFFF for white. If you would like to identify and select colors based on their hex values, you can use Colorpicker.

Sample:

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

Button text color

Attribute: color (nested under .btn-text)

The text inside the button can be changed to a different color by changing its font. Set the attribute to white if the background of your button is a darker color than what you used in the design. The color of the background should be black if it has a lighter color than the background.  It is also possible to specify a custom hex value in addition to the standard value. The Colorpicker is a tool that identifies and selects colors based on the hex value of each color.

Sample:

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

Logo

It would be great if you could change the logo that appears above the three buttons. Using the Images tab, you will find the URL for the logo, just copy it from the Path column in the Images tab to be able to find the 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

In the web portal, you will have the ability to customize the headers and footers that are displayed when the vanity URL is used to access the portal.

<div id="footer" class="container">
</div>

How to use custom CSS

In order to make the web portal more user friendly, the CSS used can be customized.

How to customize email templates

For general administrative emails, such as emails sent as part of a user’s password reset or when they sign up for the service, you can customize email templates.

1. Zoom’s web portal can be accessed by logging in.

2. Click on Advanced then Branding from the navigation menu on the left.

3. On the left side of the screen, click the Emails tab.

4. The template you wish to modify can be edited by clicking the Edit button beside it.
   Note: In the template, you have the option of using custom variables to customize the email.

How to customize meeting invite email templates

Also, the meeting invitation email templates can be customized at the account or group level to meet your specific needs.

1. Zoom’s web portal can be accessed by logging in.

2. Access the account or group settings by clicking on the following link in the navigation menu:

   • Account: In the Account Management section, click the Account Settings button.

   • Group: In the User Management window, click Groups and then click Manage Users. Click on the name of the group, or you can create a new User Group by clicking on the group name.

3. Select the Meeting tab on the left side of the screen.

4. If you want to edit the email template you are using for invitation emails, select Edit from the Invitation Email Branding section. Find out more about the email template that is used to schedule meetings.

5. After clicking on Apply Changes, click on Done to complete the process.

FAQ

How do I customize my vanity URL?

Creating a Vanity URL

The last step that you need to take is to get an accredited web host to register your domain name. Vanity URLs can be added to your website by going to settings, selecting Vanity URLs, and then clicking the plus icon when you are ready. Put your vanity URL in the box provided and make sure to add the “http://” before the URL before you enter your vanity URL.

Can you change vanity URL?

Step 1: Open your Web browser, sign on to Facebook, and then click the Account menu button in the top right-hand corner of the screen, and then choose Account Settings from the drop-down list. Step 2: Simply click on the Edit link on the right of the Username line as soon as you are in the new menu area that loads.

What is a vanity URL examples?

A vanity URL is usually a short, ten-character name that resembles a domain name of the organization or company that is used for its regular website. In the case of Business2BusinessITServices.com, the vanity URL domain name might be b2bIT, which will correspond to the normal domain name of the organization.

Are vanity URLs good for SEO?

It is both user-friendly and SEO-friendly to use vanity URLs. A short version of your URL will play a crucial role in the promotion of your offline business when you focus on online promotion.

Are vanity URLs worth it?

It is worthwhile to use vanity URLs as they build trust and assist you in reaching your marketing objectives. To be able to achieve this, it is important that they be used correctly. Vanity URLs or branded links can be extremely effective when there are a few guidelines that you must follow in order to make them succeed: Use When Necessary: A vanity URL does not have to be used for every link that you share.

How do I create a custom URL?

It is easy to create an entirely new URL for your website or your online content with OSlash. It takes only a few clicks to create a new URL for you.
How to create a custom URL shortcut

1. The OSlash extension can be downloaded here.

2. You need to click the OSlash extension when you are on the page you want to shortcut.

3. Choose a shortcut name for your computer.

4. Using this shortcut is as simple as clicking “save” and starting to use it.

What makes a good vanity URL?

Be clear and concise.

In addition to ensuring that the vanity URL is as short as possible, you need to make sure it describes to the user where they will be taken once they click on it. There should be a clear indication in the URL of what type of content can be accessed by clicking on it.

How many boosts do you need for a vanity URL?

30 boosts

There is no point in including a vanity URL as a boost perk since it does not make sense.

I would like to ask you a question. Let’s say you just got the 30 boosts needed for the vanity URL. It would be too risky to ever actually attempt to use it since a single boost would result in the link gone again in an instant if you lost just one.

All content and images credit goes to https://support.zoom.us