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
Can I export all attachments from Zoho CRM?
Can I export all attachments from Zoho CRM?Exciting Updates to the Kiosk Studio Feature in Zoho CRM!
Hello Everyone, We are here again with a series of new enhancements to Kiosk Studio, designed to elevate your experience and bring even greater efficiency to your business processes. These updates build upon our ongoing commitment to making Kiosk a powerfulChange eMail Template for Event-Invitations
Hello ZOHO-CRM Team How I can change the eMail Template for Event-Invitations? I work with the German Version of the Free Version. I know how I can modify eMail alerts or Signature Templates, but where I can other eMails modify you send out? Thank you for your answer. Regards, JuergRight-Click Pipeline to Open in New Tab
Please add the ability to right-click on a pipeline to open it in a new tabService Title in Service Report Template Builder
I am currently working on the Service Report Template Builder in Zoho FSM. I have created three separate service report templates for different workflows: Preventive Maintenance Report Requested Service Report Installation Report My issue is that I cannotZoho Sign for Zoho Projects
Documents authorization and validation with signature is now easier in project management with Zoho Projects' Zoho Sign extension. Sign documents or send them for signatures directly from tasks and issues using Zoho Sign extension in Zoho Projects. ExtensionDeluge Learning Series – Best Practices in Deluge | December 2025
We’re excited to bring you the next session of the Deluge Learning Series, focused entirely on writing cleaner, faster, and more reliable Deluge code. In this edition, we’ll dive deep into the essential best practices every Deluge developer should followAssociate a Contact to a Campaign using deluge?
If I want to add one record to another related list, which zoho function do I use? zoho.updateRelatedRecord is not it I don't think. I simply want to take a "Contact" and associate it to a "Campaign" using deluge. Can anyone help? contactId = 5122008000000796037;Add "Groups" above "Users" in the Zoho Forms Left Menu
Hi, We have Groups but you have to go to a Form and Share or use the Directory App to manage them, please add "Groups" above "Users" in the Zoho Forms Left Menu so you can manage them in 1 place within Zoho Forms too. Thanks DanZoho Books | Product updates | October 2025
Hello users, We’ve rolled out new features and enhancements in Zoho Books. From iOS 26 updates to viewing reports as charts, explore the updates designed to enhance your bookkeeping experience. Zoho Books Updates for Apple Devices At WWDC 2025, AppleAdding Taxes to paid consultations in Zoho Bookings
I created a 'paid' consultation under Zoho Booking and integrated it with payment gateways for online/instant payment before a booking is done. How can I add 'taxes' to the price of consultation? I can add taxes to other Zoho apps (liks Books, Checkout,Zoho CRM Reports Module on Mobil App
I have the mobile app and the reports module doesn't appear in the sidebar for some reason. I saw a Youtube video where the user had the Reports module on mobile. Is there a setting to show it on mobile? Thanks.Inquiry on Help Centre Tab Customisation
Hi Zoho team, I’m wondering if it’s possible to further customise the Help Center tabs, specifically the descriptions under Knowledge Base, Community, and Tickets. While the current setup allows customising tab names, being able to tailor the descriptionsPassing a form object to a function
Suppose I have a sort_order field in multiple tables and I want to increment it by +1 onCreate of a new record. Is there a way to pass the form object as an argument into the function to keep things DRY? The following function from Zia works, but I'dCan you copy and paste a page within a form?
I have been looking at trying to copy/duplicate a whole page within a form. I can't see how I can do this without having to add all the data in again. This is very time consuming. Any help would be great.SMS to customers from within Bigin
Hi All, Is there anyone else crying out for Bigin SMS capability to send an SMS to customers directly from the Bigin interface? We have inbuilt telephony already with call recordings which works well. What's lacking is the ability to send and receiveUnable to sort as Descending order
Trying to change the sort order for a lookup field (checkboxes) from Ascending to Descending and keep getting an error in Deluge that the order must be Ascending Did anyone ran into this? Thanks EyalHow do I copy an email message to one or more other folders?
I can move a message to another folder using the "move to" option but I can't figure out how to copy a message.New feature request: Allow copy of email message to another folder
Hello Zoho team, This is a suggested new feature to allow copy an email message to either another folder or the same folder. Within the same Zoho account. This is not a support request about "label". This is a suggested new feature to allow copies ofHotmail is blocking the zoho mail IP
Greetings, Since last Tuesday (5 days ago today) I wrote to Zoho support and I still haven't received a single response (Ticket ID: 2056917). Is this how you treat people who pay for your email service? I am making this public so that those who want toDesk DMARC forwarding failure for some senders
I am not receiving important emails into Desk, because of DMARC errors. Here's what's happening: 1. email is sent from customer e.g. john@doe.com, to my email address, e.g info@acme.com 2. email is delivered successfully to info@acme.com (a shared inboxCreator Simplified #11: Create a custom button to download files
Hey there! This time, let's see how to create custom buttons to download the files uploaded in the file upload field. Sample use-case A training app has a module that provides the materials for all the available courses. Students can click on the correspondingHide horizontal lines at bottom of form
Hi I have a page with 3 forms embedded in html snippets. On each of the forms I can hide the submit button easily but I am left with the horizontal lines that bound that section and I cannot figure out to remove them (see below for the two sets of horizontalAutosaving of Form Field
HI can anyone suggest a way of autosaving or simulating an autosave function for a specific field in a form. The story is as follows. I have a bunch of technicians who write notes on how they do a repair. Sometimes they write for a couple of hours the troubleshooting process. If they click incorrectly, press ESC, Cancel or the browser crashes the information is lost which can be heartbreaking so my guys use notepad and then copy the information in. The only way around this is to click submit on theZoho Tracking Image location
So we've been having an issue with tracking email opens. Specifically in Gmail. Our emails are not that long either, maybe 4 sections of image/250 characters of text/button per section. But all my test accounts I used via Gmail we're showing opens. But then come to find out the tracking image is at the very bottom of the email. So If the message is clipped (It always just clips our social icons on the bottom) and the user doesn't click the show more button it never tracks the open. Looking at otherAI Interview Insights: Turn Recorded Interviews into Quick Transcripts & Summaries
Evaluating interviews shouldn’t require replaying long recordings or taking manual notes. With AI Interview Insights, you can now review complete transcripts and AI-generated summaries of your One-way (Recorded) interviews right inside Zoho Recruit. ThisAPI in E-Invoice/GST portal
Hi, Do I have to change the api in gst/e-invoice portal as I use zoho e books for my e-invoicing. If yes, please confirm the process.Ask the Experts 26: Brighten every customer interaction with Zoho Desk all year long
Hello everyone, Greetings and welcome to Ask the Experts 26. As we wrap up 2025, we are excited to invite you to the 26th episode of our Ask the Expert series. 🎄The Merry Metrics Edition = Best of Zoho Desk [Best Practices + Holiday Automation + Year-EndPricing calculator
Alright, so I'm trying to create a pricing calculator/pricing report generator to use in a cabinet shop. I did all the logic and such, and the calculator works. I have a few other things that I would need it to be able to do though, I'll do my best toBug Details
In the Bug detail the milestoneid is missingStop completed task lists from disappearing?
Is there any way to stop projects from making tasks lists disappear when all the tasks in the list are completed? That's one of those little things where we're constantly fighting the product. For instance we have some projects which are ongoing - no start and end date. We use Kanban view to show the various task lists. We don't want the kanban list to disappear every time the items on it happen to be closed out. ThanksOne Contact with Multiple Accounts with Portal enabled
I have a contact that manages different accounts, so he needs to see the invoices of all the companies he manage in Portal but I found it not possible.. any idea? I tried to set different customers with the same email contact with the portal enabled andChange of Blog Author
Hi, I am creating the blog post on behalf of my colleague. When I publish the post, it is showing my name as author of the post which is not intended and needs to be changed to my colleague's name. How can I change the name of the author in the blogs?? Thanks, RamananAllow customers to choose meeting venue and meeting duration on booking page
My business primarily involves one-to-one meetings with my clients. Given the hybrid-work world we now find ourselves in, these meetings can take several forms (which I think of as the meeting "venue"): In-person Zoom Phone call I currently handle theseBooking outside of scheduled availability
Is there a way for staff (such as the secretary) to book appointments outside of the scheduled availability? Right now to do this special hours must be set each time. There should be a quicker way. Am I missing something?Operation Questions.
Hello, I hope you are well. To explain a little, we are a company that sells services and products with a technical team responsible for installation and maintenance. Zoho FSM can be useful for the technical team, namely for the technical coordinatorDirect Access and Better Search for Zoho Quartz Recordings
Hi Zoho Team, We would like to request a few enhancements to improve how Zoho Quartz recordings are accessed and managed after being submitted to Zoho Support. Current Limitation: After submitting a Quartz recording, the related Zoho Support ticket displaysUpdate date & time when a cell is edited
Hi All, I am desiring to have a cell update with the current date and time when another cell is edited. Any ideas? Thank youAdd "Groups" to "Share With" on Reports & All Entries
Hi, On Forms we can share Publicly, with Specific Users And/Or Specific Groups or All Users. With Reports and All Entries we lack the "Groups" option, please add this as with many users this saves a lot of work. Thanks DanAdd Pause / Resume Option to Zoho Quartz Recordings
Hi Zoho Team, We would like to request an enhancement to Zoho Quartz recordings: the ability to pause and resume an ongoing recording. Current Limitation: At the moment, when recording an issue with Zoho Quartz, the recording continues even when we areNext Page