How to customize HTML email templates that impresses your audience: Part 2
In the first part of the series, we covered basic customization of emails. We learned how to edit text and use variables. We also learned how to add your logo.
In this part, we will focus on the next level of customization where we will tinker with some HTML code. As long as you can copy paste text, we will make through this without learning knowing what HTML stands for.
We will learn how to add
- Logos
- Working with images
- Fonts
- Background colors
We recommend you to read through the notes first.
1. How to replace Zoho logos with your brand logo
Estimated Completion Time - less than 20 minutes
- Log in to Zoho Bookings. Navigate to the email template you wish to edit. (Services > Service Notifications)
- Click on the HTML button among the formatting tools. Now click Ctrl + F (Windows) or Command + F (MacOS). A search bar will pop up.
- Now type in 'src' without quotation marks and hit enter.
- You'll find that src shows up in two places; The first src points to the Zoho Bookings logo, and the second to Zoho Logo.
- Copy the image URL from your website or Imgur.
- Now replace one of the following links with your brand image URL.
- Zoho Bookings Logo - 'https://www.zoho.com/sites/default/files/bookings/dannyemail/logo.png'
- Zoho Logo - 'https://zoho.com/sites/default/files/bookings/imagesemail/zoho.png'
- Click HTML again to view the logo on your template.
- If you're a HTML pro, feel free to play around with the HTML code to change the logo's positioning and sizes.
Voila! You have successfully inserted your brand logo into your email template.
2. Working with images
Note - By now, you should have replaced the default link with your logo's link.
a. To alter the height and width of your images
- The first step is to locate the image tag in the HTML code.
- Log in to Zoho Bookings.
- Navigate to the email template you wish to edit. (Services > Service Notifications)
- Click on the HTML button among the formatting tools.
- Search for 'src.'
- The following is the default Zoho bookings logo tag. Note that the link you see will differ from the below link if you already changed your logo.
- <img style='width: 134px;' src='https://www.zoho.com/sites/default/files/bookings/dannyemail/logo.png'>
- Change the numbers to alter the width.
- To change its height, insert the following code at the end of it.
- height = __
Like this
- <img style='width: 134px;' src='https://www.zoho.com/sites/default/files/bookings/dannyemail/logo.png' height=100>
Here is another example of how to adjust height and width. We are trying to adjust it for the default Zoho logo. You can apply the same for your image as well. In our example the width and height are not provided.
- <img style='padding-top: 3px;' src='https://zoho.com/sites/default/files/bookings/imagesemail/zoho.png'>
No worries, we can add them manually.
- height = __ width = __
The code will look like this after adding height and weight.
- <img style='padding-top: 3px;' src='https://zoho.com/sites/default/files/bookings/imagesemail/zoho.png' height = 100 width = 80>
b. Aligning the images left or right
- The first step is to locate the image tag in the HTML code.
- Log in to Zoho Bookings.
- Navigate to the email template you wish to edit. (Services > Service Notifications)
- Click on the HTML button among the formatting tools.
- To align the image, right/left or center, search for the following text.
- <td style='vertical-align: middle;' align='right'>
You can find it in two places. Instead of left, you can put it as right and vice versa. Center alignment works well only when you have a single logo. Refer to the following video to learn more about this.
3. Changing Fonts
Fonts help you to be consistent with your brand next to Logos. To change your fonts and background colors,
- Log in to Zoho Bookings.
- Navigate to the email template you wish to edit. (Services > Service Notifications)
- Click on the HTML button among the formatting tools.
- Click Ctrl + F. Type in 'font-family' (without quotes) inside the text box. You'll find something like this.
- font-family: 'Open Sans','Trebuchet MS',sans-serif;
- There are three things here. Two specific fonts(Open Sans, Trebuchet MS), and the third one is the font family (sans-serif).
- To ensure maximum compatibility between operating systems and browsers, follow the below format. Read more about it here.
- To replace the font, type in the font name of your choice. I wish to have Times New Roman as my first font and Montserrat as my backup. If this were the case, I would change my code to this.
- font-family: Montserrat,'Helvet',sans-serif;
Font Notes
- If your fonts have spaces in your font names, put them between quotes. Ex: 'Times New Roman.'
- For font families with multiple words, you should use '-.' Ex: sans-serif
- Font changes don't dynamically reflect on your email template in bookings like background colors, or logo sizes. However, these changes apply to outgoing emails. (Refer to video)
- We recommend you stick to system fonts and families for better compatibility between different browsers and operating systems. Here are a few of those.
auto | inherit | revert | ui-rounded |
cursive | initial | sans-serif | ui-sans-serif |
emoji | math | serif | |
fangsong | monospace | system-ui | |
fantasy | none | ui-monospace |
4. Changing Background Colors
Estimated Completion Time - 20 minutes
To change the email's background
- Click Ctrl + F (in windows) or Cmd + F (in mac).
- Now type in 'background: #fff' in the search box without quotes. (Note - there is a space between ':' and '#')
- Instead of the three letters, you can type in the color code of your choice
- You can also verify this guide to change the email template's colors - Link
To change the background of the whole email
- Click Ctrl + F (in windows) or Cmd + F (in mac) and search for
- .zb-email-success{background:#F2F1F7;
- Instead of the six-letter code, you can insert a color code of your choice.
- To find the color code of your website, you can upload screenshots of the color you are trying to replicate from your website to this site - Color Picker Online.
- The above process works for 'Booked', 'Rescheduled', 'Marked as Completed', and 'Marked as Noshow' emails
- To change the BG color of cancelled emails, search for
- .zb-email-cancel{background:#F9F0F1;
Notes
Sometimes you might not be comfortable working with the in-built editor.
In those cases, use online editors like codepen.io. Once you make the changes, paste the code into Zoho Bookings Dashboard. Refer to the following video to learn more about it. As soon as you enter codepen.io. Hit save. The first save alone is manual. The rest are automated.
If you haven't taken a backup yet, check out the following video to take one.
What if you make mistakes?
If at any point you wish to revert to your default template, copy the backup from the text document you have created and paste it back there. However, don't worry if you've failed to create a backup.
- Create a dummy service.
- Now navigate to services > service notification > configure.
- Now copy the entire HTML code without changing anything.
- Now navigate back to the broken template.
- All you have to do is to click paste and hit save.
- Voila! Your default template is back.
- Before editing your template, please take a backup.
- Note - If you made mistakes in the customer's booked template, please copy the same template and replace it accordingly.
Conclusion
While we understand that our HTML editing interface isn't for everyone, our engineers are working hard to make it so.
Meanwhile, these are other methods of editing HTML templates. In part three, we will explore ways to supercharge our email templates.
Access your files securely from anywhere
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Zoho Meeting app update.
Hello, everyone! In the latest Android (v2.3.7) and iOS (v1.7.1) versions of the Zoho Meeting app, we have brought in support for the following features: Report Abuse option. WorkDrive integration. Report Abuse option You can now report to us any deceptiveZoho Meeting Android app update - v2.4.0
Hello everyone! We are excited to announce that we have brought in support for the following features in the latest version of the Zoho Meeting Android app(v2.4.0): 1. Start Personal Meeting Rooms 2. Revamp of the schedule meeting screen and meeting detailsIntroducing Zoho Desk integration and a few minor enhancements
Zoho Desk Integration We've now introduced an integration between Zoho Meeting and Zoho Desk to efficiently manage meeting-related customer inquiries. With this integration, you can track, respond to, and resolve meeting-related tickets directly fromZoho Meeting iOS app update: Hearing aid, bluetooth car audio and AirPlay audio support.
Hello everyone! We are excited to announce the below new features in the latest iOS update(v1.7.4) of the Zoho Meeting app: 1. Hearing aid support: Hearing aid support has been integrated into the application. 2. Bluetooth car Audio, AirPlay audio support:Zoho Meeting Android app update: Breakout rooms, noise cancellation
Hello everyone! In the latest version(v2.6.1) of the Zoho Meeting app update, we have brought in support for the following features: 1. Join Breakout rooms. 2. Noise cancellation Join Breakout rooms. Breakout Rooms are virtual rooms created within a meetingiOS 12 update: Introducing autofill passwords and Siri Shortcuts in Zoho Vault
With this iOS 12 release, Zoho Vault users can now autofill usernames and passwords on Safari and other third-party apps. Users can enjoy a seamless login experience to their everyday apps without compromising security and also access passwords stored in Zoho vault with Siri Shortcuts by adding personalized phrases. How to enable autofill password on your iOS device? First, you need to update your device to iOS 12. Apple recommends you to take a backup before you update your device to the latestZoho Vault: A look at what's new for iOS, iPadOS, and macOS
Hi everyone, At Zoho Vault, we constantly aim to improve your security experience. Based on both internal and external feedback, we have recently rolled out updates across our iOS, iPadOS, and support for macOS platforms. Introducing the desktop app forBiometric Access Support on Zoho Vault Desktop App
Is there any plans to add biometric authentication (fingerprint, face recognition) for Vault desktop apps (Windows/macOS) to enhance security and ease of access. I would love to hear other members view on thisFree webinar: Learn the benefits of migrating to Zoho Vault's new interface
With remote work becoming more and more common across the globe, productivity and time management are now pivotal concerns for every organization. With the number of business applications employed by companies constantly increasing, a password manager like Zoho Vault saves a lot of productive hours for your team. Vault's new interface has been carefully designed to address these pressing needs, helping users increase their productivity while improving their overall online experience. This July,Free Webinar: An exclusive live Q&A session with the Zoho Vault team
As 2020 draws to an end, we're closing out a year that has seen drastic changes all around the world. Many businesses have adopted cloud solutions and a remote work culture for the first time, and this has given rise to newer cyber risks and threats thatWhy passwordless authentication should be your top security project for 2021
Hello users! We know that nobody likes to remember passwords, yet they form an indispensable part of our lives. Many of us working with any kind of technology today manage numerous passwords for personal and business accounts. With the widespread adoptionFree Webinar: See why Zoho Vault is the best alternative to LastPass
When LastPass was acquired by LogMeIn in Oct 2015, we expressed our genuine concern about how this would change the LastPass business model and how customer trust would transfer from one company to another. As we suspected, LastPass doubled their pricingManaging cyber threats when working remotely | A Customer Survey Report
The nearly universal adoption of remote work has changed the way businesses function. Globally, enterprises continue to work to find new ways to make life easier for employees working remotely. However, a commonly cited concern has been the lack of cybersecurityWorld Password Day: 5 interesting facts about passwords
It's World Password Day: that time of the year when we talk about password hygiene and the importance of safe password management. World Password Day is observed on the first Thursday of every May, and this year, we'd like to talk about some of the mostFree Webinar: Go passwordless in 2022 with Zoho Vault
Passwords have long been the preferred authentication method, largely due to their universal appeal. While they're easy for people to use and implement, they're also convenient for hackers to exploit. Reports from 2021 state that weak and stolen passwordsMyki has announced EOL for its services | Learn why Zoho Vault password manager is the best alternative
Hello Myki users, Myki has announced end-of-life for its Teams, MSP, and GUARD services, after being acquired by JumpCloud. In their recent announcement, Myki stated that they will be removing their apps and extensions from the respective stores, turningJoin our exclusive meetup with Zoho's Real Estate community
Hey there, The Zoho Vault team is conducting a meetup for all real-estate users from Zoho. During this session, we will be discussing the need for secure password management and how Vault can help you and your clients safely protect passwords and otherFree webinar: A quick walkthrough of Zoho Vault and major updates in 2023
Managing passwords is crucial for all businesses. You can securely store, share, and manage passwords effectively from anywhere with Zoho Vault. We have introduced several new features in 2023 to offer the best online experience for our users. Join ourFree webinar: Why a password manager is a “must-have” for everyone in 2024
In the past decade, we've witnessed numerous cybersecurity breaches globally, with a significant portion resulting from the "it won't happen to me" mindset. Shockingly, in 2023, 86% of breaches involved weak and stolen passwords. Password hygiene is crucialZoho Vault - Webinars 2023 - Video Recordings and Slide Decks
Hello, We wanted to offer a consolidated list of Zoho Vault webinar resources from 2023. Therefore, we're putting together a list that includes links to our webinar recordings and slide decks for easy access. Webinar Video recording Slide deck GettingFree webinar: Focal point: Building a financial ecosystem with Zoho Vault and Zoho Workplace
Hi everyone! Cyber threats against the financial sector are escalating. In the last two decades, nearly one-fifth of reported incidents targeted financial institutions, causing $12 billion in direct losses. Cybercriminals are becoming more sophisticated,New features in Zoho Vault
We’re thrilled to introduce a wave of powerful updates in Zoho Vault, designed to enhance security, streamline workflows, and improve your overall experience. Let’s dive into what’s new! Folder creation restrictions Limit who can create folders in yourJoin our World Password and Passkey Day expert Q&A 2025
Hey everyone! World Password and Passkey Day is almost here, and there's no better time to talk about something we all rely on daily—secure authentication. Did you know that a staggering 60% of hacking-related breaches are tied to weak or stolen passwords?Dashlane discontinued its free plan: Here's why Zoho Vault's free plan is worth the switch
Hey everyone, Dashlane password manager has officially announced that its free plan will be discontinued starting September 16, 2025. This change means that current free users will need to either upgrade to a paid subscription or export their data andIntroducing SecureForms in Zoho Vault
Hey everyone, Let’s face it—asking someone to send over a password or other sensitive data is rarely straightforward. You wait. You nudge. You follow up once, twice—maybe more. And when the information finally arrives, it shows up in the worst possibleClickjacking: Zoho Vault's Response
Issue: Password manager browser extensions are found to be vulnerable to clickjacking security vulnerabilities that could allow attackers to steal account credentials, TFA codes, and card details under certain conditions. Reported by: Marek Toth, IndependentFree webinar: Security that works: Building resilience for the AI-powered workforce
Hello there, Did you know that more than 51% of organizations worldwide have experienced one or more security breaches, each costing over $1 million in losses or incident response? In today’s threat landscape, simply playing defense is no longer enough.Free webinar—Redefining workforce security with Zoho Vault: Passwords, passkeys, and multi-factor authentication
Hi everyone! Did you know that in Q2 alone, 94 million data records were leaked globally? Behind every breach is a combination of poor password habits, phishing attacks, privilege misuse, and simple human error. The fallout—including reputational damage,Fill Colors
Hello, Just curious, is it possible to manage the Used and standard colors in the fill drop down menu ? I would like to change/edit them is possible to colors I frequently use. Thanks for you reply, BruceIs there a way to generate a virtual meeting for a group service in Zoho Bookings?
Are virtual meetings not supported for group services/meetings? I have integrated Zoom with one-on-one services, but I need a way to create an online group meeting. ThanksItems Below Reorder Point Report?
Is there a way to run a report of Items that are below the Reorder Point? I don't see this as a specific report, nor can I figure out how to customize any of the other stock reports to give me this information. Please tell me I'm missing something sClient scripts for Zoho Books ?
Good day everyone, I am looking for a way to be able to interact with the Quotes and Invoices as they are being created. Think of it like Zoho client script in Zoho CRM. But for the life of me I dont see a way to do this. The issue with having functionFillable template with dynamic tables?
Is there a way to build a fillable template so that users can add rows to a table? To describe what I'm trying to accomplish the table has 3 sections; a header row, some number of rows with custom information, and a summary row with totals. I can't figureInvoicing multiple expense items as a single line item
My client would like me to invoice them for multiple expense items on a single line item on an invoice. Can this be done? I know I can import billable expenses to an invoice, but I don't know how to show them as a single line item or have themZoho IP blocked by SpamCop
Hi, Many of my emails are blocked and I receive this: INVALID_ADDRESS, ERROR_CODE :550, ERROR_CODE :spamcop.mimecast.org Blocked - see https://www.spamcop.net/bl.shtml?136.143.188.51. - https://community.mimecast.com/docs/DOC-1369#550 [DGwIYPPSOfWITables improvement ideas / features
Heya, I've been using Zoho Tables for a few months now and wanted to post some features that I think will be greatly beneficial for the tool: 1. Ability to delete a record in automation or move a record in automation. - Usecase: I move a record from oneAnnouncing offline payment modes for event tickets
Hello everyone, Collecting ticket payments from prospective attendees can be a tricky part of event planning. While Zoho Backstage has always allowed you to collect payments online as people buy tickets from your event microsite, we have now enabledGmail is ramping up its email sender policy from November 2025
Hello marketers, As you may be aware, Gmail introduced a guideline for bulk senders starting February 2024. If not, here's a quick refresher straight from Google: After this policy was announced first in 2023 and soft-implemented in February 2024, weDeluge Error Code 1002 - "Resource does not exist."
I am using the following script in a Custom Button on a Sales Return. Basically, the function takes the information in the sales return (plus the arguments that are entered by the user when the button is pushed) and creates a return shipping label viaItem images
Can we get an "On hover" expanded image for items please ?Next Page