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

                                                                                                                • Ticket to article and Ticket to template

                                                                                                                  Hello! I would like to know if it is possible (and how) to do the following actions: 1. To generate an article from a ticket (reply + original message) 2. Easy convert an answer to an email template

                                                                                                                • Is there API Doc for Zoho Survey?

                                                                                                                  Hi everyone, Is there API doc for Zoho Survey? Currently evaluating a solution - use case to automate survey administration especially for internal use. But after a brief search, I couldn't find API doc for this. So I thought I should ask here. Than

                                                                                                                • Kaizen #225 - Making Query-based Custom Related Lists Actionable with Lookups and Links

                                                                                                                  Hello everyone! Welcome back to another post in the Kaizen series! This week, we will discuss an exciting enhancement in Queries in Zoho CRM. In Kaizen #190, we discussed how Queries bridge gaps where native related lists fall short and power custom related

                                                                                                                • WebDAV / FTP / SFTP protocols for syncing

                                                                                                                  I believe the Zoho for Desktop app is built using a proprietary protocol. For the growing number of people using services such as odrive to sync multiple accounts from various providers (Google, Dropbox, Box, OneDrive, etc.) it would be really helpful

                                                                                                                • Change the "from" field

                                                                                                                  Hello, I used some random word to create the account ID to later host the domain based emails. That username shows up in the "from" field on test emails. How do I change that to a custom one, like first name/last name or business name? I tried to create second user and "named" it the way I want and it worked to a degree, although the "from" field shows all lower case letters, while original had some capital letters. So the "all-low-case" is another issue I am having... Thank you

                                                                                                                • [Free Webinar] Learning Table Series - AI-Enhanced Logistics Management in Zoho Creator

                                                                                                                  Hello Everyone! We’re excited to invite you to another edition of Learning Table Series, where we showcase how Zoho Creator empowers industries with innovative and automated solutions. About Learning Table Series Learning Table Series is a free, 45-60

                                                                                                                • How to use Rollup Summary in a Formula Field?

                                                                                                                  I created a Rollup Summary (Decimal) field in my module, and it shows values correctly. When I try to reference it in a Formula Field (e.g. ${Deals.Partners_Requested} - ${Deals.Partners_Paid}), I get the error that the field can’t be found. Is it possible

                                                                                                                • Zoho Creator to Zoho CRM Images

                                                                                                                  Right now, I am trying to setup a Notes form within Zoho Creator. This Notes will note the Note section under Accounts > Selected Account. Right now, I use Zoho Flow to push the notes and it works just fine, with text only. Images do not get sent (there

                                                                                                                • Error Logs / Failure logs for Client Scripts Functions

                                                                                                                  Hi Team, While we are implementing client scripts for the automation, it is working fine in few accounts but not working for others. So, it would be great if we can have error Logs for client scripts also just like custom functions. Is there any way that

                                                                                                                • Zoho Books blocks invoicing without VeriFactu even though it is not mandatory until 2027

                                                                                                                  I would like to highlight a very serious issue in Zoho Books for Spain. 1. The Spanish government has postponed the mandatory start of VeriFactu to January 1st, 2027. This means that during all of 2026 businesses are NOT required to transmit invoices

                                                                                                                • Problem : Auto redirect from zoho flow to zoho creator

                                                                                                                  Hi there, I've been waiting for zoho team to get back on this for last couple of days. Anyone else have the problem to access zoho flow? everytime I click on zoho flow it redirects me to zoho creator. I tried incognito mode but it still direct me to zoho

                                                                                                                • Why am I seeing deleted records in Zoho Analytics syncing with Zoho CRM?

                                                                                                                  I have done a data sync between Zoho CRM and Zoho Analytics, and the recycle bin is empty. Why do I see deleted leads/deals/contacts in Zoho Analytics if it doesn't exist in Zoho CRM? How can I solve this problem? Thanks

                                                                                                                • Peppol: Accept Bill (Belgium)

                                                                                                                  Hi, This topic might help you if you're facing the same in Belgium. We are facing an issue while accepting a supplier bill received by Peppol in Zoho Books. There is a popup with an error message: This bill acceptance could not be completed, so it was

                                                                                                                • Zoho Books is now integrated with Zoho Checkout

                                                                                                                  Hello everyone,   We're glad to be announcing that Zoho Books is now integrated with Zoho Checkout. With this integration, you can now handle taxes and accounting on your payment pages with ease.   An organization you create in Zoho Checkout can be added to Zoho Books and vice-versa. Some of the key features and benefits you will receive are:   Seamless sync of customer and invoice data With the end-to-end integration, the customer and invoice details recorded via the payment pages from Zoho Checkout

                                                                                                                • Sync Issue

                                                                                                                  My Current plan only allows me with 10,000 rows and it is getting sync failure how to control it without upgrading my plan

                                                                                                                • Add Zoho PDF to Zoho One Tool Applications

                                                                                                                  It should be easy to add from here without the hassle of creating a web tab:

                                                                                                                • JOB WISE INVOICE PROCESS

                                                                                                                  I WANT TO ENABLE JOB WISE TRACKING OF ALL SALES AND PURCHASE

                                                                                                                • PDF Template have QTY as first column

                                                                                                                  I want to have the QTY of an item on the sales orders and invoices to be the first column, then description, then pricing. Is there a way to change the order? I went to the Items tab in settings but don't see how to change the order of the columns on

                                                                                                                • RAG (Retrieval Augmented Generation) Type Q+A Environment with Zoho Learn

                                                                                                                  Hi All, Given the ability of Zoho Learn to function as a knowledge base / document repository type solution and given the rapid advancements that Zoho is making with Zia LLM, agentic capabilities etc. (not to mention the rapid progress in the broader

                                                                                                                • In App Auto Refresh/Update Features

                                                                                                                  Hi,    I am trying to use Zoho Creator for Restaurant management. While using the android apps, I reliased the apps would not auto refresh if there is new entries i.e new kitchen order ticket (KOT) from other users.   The apps does received notification but would not auto refresh, users required to refresh the apps manually in order to see the new KOT in the apps.    I am wondering why this features is not implemented? Or is this feature being considered to be implemented in the future? With the

                                                                                                                • IMAP mail after specify date

                                                                                                                  Hi My customer's mail server is on premise and mail storage is very huge. So It never finish sync. and finally stop sync. Cloud CRM have a option like zoho mail sync mail after some date.

                                                                                                                • Claude + MCP Server + Zoho CRM Integration – AI-Powered Sales Automation

                                                                                                                  Hello Zoho Community 👋 I’m excited to share a recent integration we’ve worked on at OfficehubTech: ✅ Claude + MCP Server + Zoho CRM This integration connects Zoho CRM with Claude AI through our custom MCP Server, enabling intelligent AI-driven responses

                                                                                                                • Search Bar positioning

                                                                                                                  Why is the Search bar on the far right when everything is oriented towards the left?

                                                                                                                • Import Error: Empty values for mandatory fields - Closing Date

                                                                                                                  Hello, I've tried multiple times to import a CVS Potential list from another Zoho account. But the error message I get is: Empty values for mandatory fields - Closing Date There are valid dates in this field, so I don't understand why this error messages

                                                                                                                • Feature Requests - Contact Coloured Picklist Visibility & Field Visibility During Ticket Creation

                                                                                                                  Hi Desk Team, I have 2 feature requests for you. Since Coloured Picklists are now available in Desk, It would be great if the colours were visible on the Related Details (Contact Information) when creating a ticket. In the screenshot below, I have 2 fields

                                                                                                                • Accounts Receivable Balances Differs in Balance Sheet, Customer Balance Report, AR Ageing Summary, and AR Ageing Details.

                                                                                                                  Hello Zoho Accounts Receivable Balances Differs in Balance Sheet, Customer Balance Report, AR Ageing Summary, and AR Ageing Details. Please clarify and fix the issues here. Thanks

                                                                                                                • How to integrate XML with Zoho CRM

                                                                                                                  Hi, I have an eCom service provider that gives me a dynamic XML that contains order information, clients, shipments... The XML link is the only thing I have. No Oath or key, No API get... I want to integrate it into Zoho CRM. I am not a developer nor

                                                                                                                • Feature Request - Ability to Customise Contact Info Card on Ticket Details View

                                                                                                                  Hi Desk Team, I've added a "Contact Priority" and "Account Prioirty" field and it would be very useful to agents if they could see that information in the Contact Info card on the Ticket Details view. It would be great if we could choose some fields to

                                                                                                                • Tax in Quote

                                                                                                                  Each row item in a quote has a tax value. At the total numbers at the bottom, there is also a Tax entry. If you select tax in both of the (line item, and the total), the tax doubles. My assumption is that the Tax total should be totalling the tax from

                                                                                                                • Zoho Flow integration with Facebook Messenger and Whatsapp

                                                                                                                  Hi there,  any plans of adding integrations with Facebook Messenger and Whatsapp into Zoho Flow? Seems that more and more business are delivering automated updates such as "your order is received",  "your order has been shipped" and so on via these two platforms. Not sure if Whatsapp has the API access needed i am pretty sure that Facebook Messenger has... Kind regards Bo Thygesen 

                                                                                                                • Campaigns unsubscribe/manage preferences links

                                                                                                                  Hi, Where can I edit the unscubscribe and manage preferences link in the footer of the email. I would like it so that when you click 'manage preferences' an form opens up that allows the person to choose what type of emails they do and don't wish to

                                                                                                                • email address somehow still not verified (?!)

                                                                                                                  L.S. After creating a new email template in CRM I was about to send a group email to my clients, then Zoho CRM announced that they would change the sender address to some kind of Zoho-e-ddress because my email address "has not been verified". Not only

                                                                                                                • Marketing Tip #17: Add credibility to your online store with Review Widgets

                                                                                                                  One of the fastest ways to build trust in an online store is to show real customer feedback right where people are deciding to buy. Third-party widgets let you embed things like Google Reviews, Instagram feeds, or even a WhatsApp chat button. These add

                                                                                                                • adding several team members to an Opportunity

                                                                                                                  How can we add several team members to one opportunity for collaboration? I have researched and only found something called Deal Team which I cannot find in my CRM to configure.

                                                                                                                • Bulk update Profile Permissions

                                                                                                                  Dears, What should we do if we add new forms or reports and need to update more than 20 permissions? Updating them one by one feels pretty harsh, doesn’t it?

                                                                                                                • Filter in fields from Jira extension

                                                                                                                  We have installed the Jira extension so we can maken Jira issues from Zoho desk. In Zoho desk I can also see the Jira issue status for example but I can not filter on this field. I would like to setup an filter showing me the closed Jira issues. How can

                                                                                                                • Zoho Creator customer portal limitation | Zoho One

                                                                                                                  I'm asking you all for any feedback as to the logic or reasoning behind drastically limiting portal users when Zoho already meters based on number of records. I'm a single-seat, Zoho One Enterprise license holder. If my portal users are going to add records, wouldn't that increase revenue for Zoho as that is how Creator is monetized? Why limit my customer portal to only THREE external users when more users would equate to more records being entered into the database?!? (See help ticket reply below.)

                                                                                                                • Add Reporting feature to display variance/change columns when comparing periods

                                                                                                                  When running reports to compare periods (for example, Profit and Loss comparing current year to previous), I would like to be able to display variance columns in both (a) amount or (b) percentage.

                                                                                                                • Link Contacts to Billed Accounts

                                                                                                                  Hello, I want to do a survey on all my customers of 2025. For that I want to select all contacts linked to accounts who where billed in 2025. How to I create this link to I can then use Zoho Survey with this database of contacts?

                                                                                                                • Pre-Zoho Sales Info - Best Way to Add to Desk / CRM

                                                                                                                  My company has been using Zoho One since 2021, with sales data going back through 2020. However, we have been in business much longer, and we have historical sales information that we want to have at our fingertips when talking with customers (usually

                                                                                                                • Next Page