How to customize HTML email templates that impresses your audience: Part 2

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
  1. Logos
  2. Working with images
  3. Fonts
  4. 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.



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.
  • Change the numbers to alter the width.
  • To change its height, insert the following code at the end of it.
  1. height = __
Like this
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.
No worries, we can add them manually.
  1. height = __ width = __
The code will look like this after adding height and weight.
  1. <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   

  1. The first step is to locate the image tag in the HTML code.
  2. Log in to Zoho Bookings.
  3. Navigate to the email template you wish to edit. (Services > Service Notifications)
  4. Click on the HTML button among the formatting tools.
  5. To align the image, right/left or center, search for the following text.
  1. <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.
  1. 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.
  1. 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
  1. .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
  1. .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.

I want to try this!



    Access your files securely from anywhere

        All-in-one knowledge management and training platform for your employees and customers.








                              Zoho Developer Community



                                  Bootcamp
                                  Community
                                  Pricing
                                  Webinars
                                  What's New
                                  Integrations
                                  Contact Support
                                  Contact Sales
                                    Zoho Survey Resources
                                      Features
                                      Survey Templates
                                      Integrations
                                      Community
                                      iOS Mobile Surveys
                                      Pricing
                                      Android Mobile Surveys
                                      Insurvey Blogs
                                      Insight Blogs
                                      Tips & Tricks





                                                  Latest Feature Updates

                                                    • Desk Community Learning Series


                                                    • Digest


                                                    • Functions


                                                    • Meetups


                                                    • Kbase


                                                    • Resources


                                                    • Glossary


                                                    • Desk Marketplace


                                                    • MVP Corner


                                                    • Word of the Day


                                                    • Ask the Experts




                                                        Zoho SalesIQ Resources


                                                              Manage your brands on social media
                                                              Access Zoho Social

                                                                Zoho Pagesense Resources


                                                                    Zoho TeamInbox Resources

                                                                      Zoho DataPrep 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

                                                                                        • CRM Community Learning Series

                                                                                          CRM Community Learning Series


                                                                                        • Kaizen

                                                                                          Kaizen

                                                                                        • Functions

                                                                                          Functions

                                                                                        • Meetups

                                                                                          Meetups

                                                                                        • Kbase

                                                                                          Kbase

                                                                                        • Resources

                                                                                          Resources

                                                                                        • Digest

                                                                                          Digest

                                                                                        • CRM Marketplace

                                                                                          CRM Marketplace

                                                                                        • MVP Corner

                                                                                          MVP Corner









                                                                                            Design. Discuss. Deliver.

                                                                                            Create visually engaging stories with Zoho Show.

                                                                                            Get Started Now


                                                                                              Zoho Show Resources

                                                                                                Zoho Writer

                                                                                                Get Started. Write Away!

                                                                                                Writer is a powerful online word processor, designed for collaborative work.

                                                                                                  Zoho CRM コンテンツ




                                                                                                    Nederlandse Hulpbronnen


                                                                                                        ご検討中の方




                                                                                                                • Recent Topics

                                                                                                                • Languages in Zobot

                                                                                                                  Hello, I have found a list of supported languages for the Zobot. The information specifies the languages are supported in the following 3 features: SalesIQ supports 34 different languages in the following features. Resources (Articles, FAQs, Small Talks)

                                                                                                                • Composite items inside of composite items; bill of materials needed

                                                                                                                  Hi Zoho and Everyone, I am evaluating whether Zoho Inventory will work for my small business. I grow and harvest herbs and spices but also get from wholesalers. I use all these items to make herbal teas, but also sell them as individual items on my Shopify store and Etsy. I discovered the composite item bundling and am wondering if I could get some assistance since there is no bill of materials: Our herbal company's best selling tea is a sleepytime tea. Sleepytime Tea can be purchased in three weights

                                                                                                                • Action required: Reauthorizing your Google account in Zoho Sign for automatic cloud backup to Google Drive

                                                                                                                  This is applicable to users who have already configured automatic cloud backup to Google Drive. Hi there! Google has mandated reauthorization of all preconfigured third-party integrations to ensure only the necessary scopes are shared as an improved security

                                                                                                                • Zoho CRM Layouts

                                                                                                                  I have customised all our modules, Leads, Contacts and deals, and within them, I have created lots of different layouts depending on the type of Lead or contact, for example. Since the new Zoho UI came out, they have all disappeared. I have gone into

                                                                                                                • Streamlining E-commerce Photography with AI Background Tools

                                                                                                                  Hey Zoho Community, I’ve been messing around with ways to make product images less of a headache for fashion brands on Zoho Commerce. You know how boring generic backdrops can get, and how much time traditional photoshoots eat up, right? I tried out this

                                                                                                                • WhatsApp IM in Zoho Desk always routes to Admin instead of assigned agent

                                                                                                                  Hello Zoho Experts, I connected WhatsApp IM to my Zoho Desk account. I only assigned my Customer Service (CS) agent to the WhatsApp channel, and I did NOT include Admin in this channel. However, every new WhatsApp conversation automatically gets assigned

                                                                                                                • hide resolution from help centre

                                                                                                                  to my surprise, i just found out that the resolution text is public in the helpcenter, even if 'notify customer' is off. is there a workaround to that? how do others deal with this? How zoho support does this and I don't think its used by Zoho in the first place. the resolution is meant to be private, not public

                                                                                                                • Zoho Analytics + Facebook Ads: Performance Alerts for Active Campaigns

                                                                                                                  Is it possible with integration of Zoho Analytics with Facebook Ads and set up alerts or notifications for active campaigns when performance drops? For example, triggering a notification if CTR goes below a defined threshold or if other key metrics (like

                                                                                                                • Multiple upload field CRM

                                                                                                                  I desperately need the functionality to add more than one upload field to web to contacts form. How can I do this?

                                                                                                                • Sort by age

                                                                                                                  It would be very helpful if there was a way to sort by age in the Age column. Please add this function if possible. Thanks!

                                                                                                                • Lookup Field Option Not Available in Customization

                                                                                                                  Hello, I am trying to customize different modules (e.g., Work Orders, Systems, and others), but I am unable to find the Lookup field option in the layout customization. When I go to: Setup → Customization → Modules and Fields → Add Field The Lookup field

                                                                                                                • Scheduled sending of a poll and its results

                                                                                                                  Is there a way to schedule sending a poll to all my users and have the results sent separately to the team?

                                                                                                                • Canvas View bug

                                                                                                                  I would like to report a bug. When clone a canvas view from an existing canvas view, if the original canvas view have canvas button with client script. Then the new create canvas view will have canvas button, it is make sense. But when I try to delete

                                                                                                                • Integrating Zoho Suite and apps more with Linux

                                                                                                                  I just got introduced with Zoho just couple of months ago, and I've already planned to contribute to it, even though it's not an open-source software. Still I have found it's potential to beat the tech giants and still being respective towards data privacy

                                                                                                                • Store Submitted Forms as PDF

                                                                                                                  Hi there, Is there a method to store Form submissions as a PDF in workdrive for archival? I set the form to email the submission to the user and an internal inbox but I'd really love to store the final form as PDF in workdrive automatically. I can't seem

                                                                                                                • System Components menu not available for Tablet to select language

                                                                                                                  I have attached a screenshot of my desktop, mobile, and tablet menu builder options. I am using 2 languages in my application. Language Selection is an option under the System Components part of the menu, but only for my desktop and phone(mobile). My

                                                                                                                • Separate Items & Services

                                                                                                                  Hi, please separate items and services into different categories. Thank you

                                                                                                                • CRM->INVENTORY, sync products as composite items

                                                                                                                  We have a product team working in the CRM, as it’s more convenient than using Books or Inventory—especially with features like Blueprints being available. Once a product reaches a certain stage, it needs to become visible in Inventory. To achieve this,

                                                                                                                • Add an option to disable ZIA suggestions

                                                                                                                  Currently, ZIA in Zoho Inventory automatically provides suggestions, such as sending order confirmation emails. However, there is no way to disable this feature. In our case, orders are automatically created by customers, and we’ve built a custom workflow

                                                                                                                • What's new in Zoho Sheet: Simplify data entry and collaboration

                                                                                                                  Hello, Zoho Sheet community! Last year, our team was focused on research and development so we could deliver updates that enhance your spreadsheet experience. This year, we’re excited to deliver those enhancements—but we'll be rolling them out incrementally

                                                                                                                • Zoho Creator Developer Console | Improved Distribution and Lifecycle Management for apps

                                                                                                                  Hello everyone, We're excited to introduce new enhancements now in the Zoho Creator Developer Console. These updates strengthen private app distribution through licensing controls and extend environment support across all installed apps, helping teams

                                                                                                                • [Webinar] Solving business challenges- Handling the challenge of transitioning to Zoho Writer from legacy tools

                                                                                                                  Moving to Zoho Writer is a great way to consolidate your business tools and become more agile. With multiple accessibility modes, no-code automation, and extensive integration with business apps and content platforms, Zoho Writer helps solve your organization's

                                                                                                                • Feature Request - Gift Cards or Gift Voucher Capability in Zoho Commerce

                                                                                                                  Hi Zoho Commerce team, I'm comming accross more and more retail businesses who sell gift cards. As there is currently no way to manage this in Zoho Commerce, it is a blocker to addoption. This is particularly popular in Europe and North America. I recently

                                                                                                                • Highlight a candidate who is "off limits"

                                                                                                                  Hello: Is there a way to highlight a candidate who is "off limits"?  I would like to have the ability to make certain candidate and / or Client records highlighted in RED or something like that.   This would be used for example when we may have placed a candidate somewhere and we want everyone in our company to quickly and easily see that they are off limits.  The same would apply when we want to put a client or former client off limits so no one recruits out of there. How can this be done? Cheers,

                                                                                                                • Closing off tasks automatically based on project status

                                                                                                                  Is there a way to close off all open tasks when a project is set as Cancelled?

                                                                                                                • [Free webinar] Understanding connections and datasources in Zoho Creator - Creator Tech Connect

                                                                                                                  Hello everyone, We’re excited to invite you to another edition of the Creator Tech Connect webinar. About Creator Tech Connect The Creator Tech Connect series is a free monthly webinar featuring in-depth technical sessions designed for developers, administrators,

                                                                                                                • Bridge the Gap Between your Service and Finance Teams

                                                                                                                  In field service, the most expensive distance isn’t the drive to a customer’s home—it’s the gap between a finished job and a paid invoice. Zoho FSM leverages the power of Zoho Invoice to handle and manage billing operations. It enables you to: Instantly

                                                                                                                • Direct URL to "View Record"

                                                                                                                  I would like to create a button (Deluge Script) to jump to the "view record" without passing by the record menu, but I can not aford to find the right url. I don't want the "view record" as a single page. I want the "view record" in the application like the picture below: Thanks in advance for your help

                                                                                                                • Live Chat for user

                                                                                                                  Hi everyone, I’m new to Zoho Creator and wanted to ask if it’s possible to add a live chat option for all logged-in portal users so they can chat internally. I’m trying to create a customer portal similar to a service desk, but for vehicle breakdowns,

                                                                                                                • SalesIQ Chat Owner to CRM Lead Owner Mapping

                                                                                                                  There is no proper mapping between the SalesIQ chat owner and the CRM lead owner. When a chat is assigned to an agent, the lead created in CRM is often assigned to a different user, forcing admins to manually change ownership every time. This creates

                                                                                                                • Product line search in quotes

                                                                                                                  Is there a way to change the search setting when you add a product line to a quote. We have created a field in products called 'Part Number' and I would like when I'm adding a product line to the quote that I can search on that field. At the moment it only searches on product description. In products I can search on the 'Part Number' field Any help welcome.

                                                                                                                • Storage Limits

                                                                                                                  Hello, What is the storage limitations for each user on professional edition?  Thanks, Mekki

                                                                                                                • Zoho Recruit Community Meetup - London 🇬🇧

                                                                                                                  Hello Recruiters! We’re excited to announce that the Zoho Recruit team is coming to the UK for an in-person Zoho User Group (ZUG) Meetup in London! This is your chance to connect with fellow Zoho users, learn from experts, and walk away with actionable

                                                                                                                • Power Pivot and Data Modeling functionality in Zoho Sheet

                                                                                                                  When will MS Excel functionalities like Power Pivot and Data Modeling functionalities be available in Zoho Sheet?

                                                                                                                • Global Search placement in the new UI

                                                                                                                  Having a hard time with the global search placement in the UI redesign. Surely I can't be the only one. Previously global search placement was perfect. A bar at the top/center of the page. Exactly where you would expect it to be. Since the new UI has

                                                                                                                • What's New - January 2026 | Zoho Backstage

                                                                                                                  Welcome to 2026! If you thought last year was big, buckle up. We’re stepping into this year with a singular focus: unimaginable growth, elite scalability, and performance benchmarks that leave the old ways of event management in the rearview mirror. As

                                                                                                                • Cliq on your mobile phone

                                                                                                                  Some of the employees in my company get their cliq on their mobile phones but it will not let them answer the call. The employee has to go to their laptop to access it. 

                                                                                                                • Bulk Delete Messages in Cliq

                                                                                                                  Isn't it possible to bulk delete messages in Cliq? I have them delivered to me as notifications from another service but most of them need to be deleted as not of value. I get dozens of them per day, and deleting them is already difficult is the "Delete"

                                                                                                                • stock movement report by each transaction for each item

                                                                                                                  Dear Sir we are using zoho inventory for foodstuff and we lack the transaction report which clearly shows movement of an item from Opening balance of the month to Goods received in, Supplier return out, Invoice out, Sales return In, Transfer out and Transfer

                                                                                                                • Select the task view on the board in the Zoho Connect iPhone app

                                                                                                                  Hello. How do I select the task view on the board in the Zoho Connect iPhone app? The Android app has this functionality.

                                                                                                                • Next Page