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!



    • Recent Topics

    • Zoho Sign and Zoho Workdrive Integration

      Hello, there. I want to know if it's possible to save a signed document from Zoho Sign in an specific folder for each signer in Zoho Workdrive.  For example: If John Doe signs the document in Zoho Sign I want to save it automatically in a folder named

    • How do you list multiple contacts for a lead?

      My sales team wants to be able to add additional contacts for leads, how do we do that? Is there a different way we should be using the lead / contact functionality? Moderation update (9th September 2025): Our developers have built an extension to achieve

    • Modifying Three Dot Menu Options

      Is there a way to modify the three dot menu options that display in a Report header? They currently display: Show As (List, Calendar, Timeline), Print, Import, Export. I'd like to remove the Show As and Print options, since they aren't applicable for

    • Field Not Updating in FSM Script - Service and Parts module.

      Dear Team, I am reaching out regarding a script I have implemented in Zoho FSM to automate the calculation of the End of Service date based on the End of Sale date in the Service and Parts module. Overview of the script: Fetches the End_of_Sale__C and

    • Zadarma + Zoho CRM Integration – Missed Calls Saved as Contacts Instead of Leads

      Hello everyone, I’m looking for input from anyone with experience using the Zadarma + Zoho CRM integration. Currently, I’m seeing that missed calls are automatically being created as Contacts instead of Leads. From a CRM perspective, this doesn’t make

    • Zoho Books | Product updates | September 2025

      Hello users, We’ve rolled out new features and enhancements in Zoho Books. From PayNow payment method to applying journal credits to invoices and bills in other locations, explore the updates designed to enhance your bookkeeping experience. Integrate

    • How to update Multiple Users field in Quote Module from Deal Module

      Scenario : Deal Module having Multiple User Field (Presales Engineer) which having more than 1 User and through Deluge Script I need to get that Users Details and need to put into Multiple User Field (Presales Engineer) of Quote Module. Note: Both Module

    • Clone a Module??

      I am giong to repurpose the Vendors module but would like to have a separate but very similar module for another group of contacts called Buyers. I have already repurposed Contacts to Sellers. Is it possible to clone (make a duplicate) module of Vendors

    • How to change the text in WhatsApp Zobot integrated to Zoho Booking?

      I have integrated Zoho Bookings into Zoho SalesIQ, I want to change the text in WhatsApp when creating a booking in Zobot how to change those text?

    • Updating Subform Record from other Form

      Just wanted to ask how to properly approach this. I have 2 forms and would like to trigger an auto update on the subform once record submitted. block below only updates 1 row for each recordRow in input.AV_System { AssetRecord = Site_Asset_Services[SOR_No

    • Zoho Books - Hide Convert to Sales Order if it can't be used.

      Hi Books team, I noticed that it is not possible to convert a Quote to a Sales Order when a Quote is not yet marked as accepted. My idea is to not show the Convert to Sales Order button when it is not possible to use it, or show it in a grey inactive

    • How do I bulk archive my projects in ZOHO projects

      Hi, I want to archive 50 Projects in one go. Can you please help me out , How can I do this? Thanks kapil

    • Cross-Data Center Collaboration and / Or allowing users to choose DC

      Dear Zoho Cliq Support Team, We are writing to request a significant enhancement to Zoho Cliq that would greatly benefit our geographically dispersed development team. Current Challenge: Currently, Zoho Cliq automatically routes users to specific data

    • New Mandatory One-Click Unsubscribe Link Overshadowing Custom Unsubscribe Link

      I was recently informed by Zoho CRM Support that they are now mandated by the large email service providers like Google and Yahoo to provide a one-click unsubscribe option in the header (not the body) of all mass emails. I have a custom unsubscribe link

    • Send / Send & Close keyboard shortcuts

      Hello! My team is so close to using Zoho Desk with just the keyboard. Keyboard shortcuts really help us to be more efficient -- saving a second or two over thousands of tickets adds up quickly. It seems like the keyboard shortcuts in Desk are only for

    • Is it possible to register webhooks in Zoho CRM using API?

      Hello, I am trying to register a webhook in Zoho CRM programmatically (using the API). Specifically, I want to register a webhook that is fired when new Contacts are created in the CRM. I was able to setup a webhook using the UI, by creating a rule that

    • Calls where the local audio is shared, have echo

      When another user is sharing their screen with audio, I get echo from my own voice. We tested this with multiple users, with different audio setups, and there's no obvious way to fix it. Is this a bug you could look into, or are we missing something?

    • Update application by uploading an updated DS file

      Is it possible? I have been working with AI on my desktop improving my application, and I have to keep copy pasting stuff... Would it be possible to import the DS file on top of an existing application to update the app accordingly?

    • Markdown support, code cells...

      Hi Zoho I'd like to vote for a feature that markdown is supported with: Headings Code highlighting Quoteblocks ... Furthermore a inline card(like inline sketch card) for special text like Code would be great. And just to add my vote as well for "Tags"!

    • Minimise chat when user navigates to new page

      When the user is in an active chat (chatbot) and is provide with an internal link, when they click the link to go to the internal page the chat opens again. This is not a good user experience. They have been sent the link to read what is on the page.

    • Zoho Projects app update: Voice notes for Tasks and Bugs module

      Hello everyone! In the latest version(v3.9.37) of the Zoho Projects Android app update, we have introduced voice notes for the Tasks and Bugs module. The voice notes can be added as an attachment or can be transcribed into text. Recording and attaching

    • zurl URL shortener Not working in Zoho social

      zurl URL shortener Not working in while creating a post in Zoho social

    • In the Zoho CRM Module I have TRN Field I should contain 15 digit Number , If it Contain less than 15 digit Then show Alert message on save of the button , If it not contain any number not want to sh

      Hi In the Zoho CRM Module I have TRN Field I should contain 15 digit Number , If it Contain less than 15 digit Then show Alert message on save of the button , If it not contain any number not want to show alert. How We can achive in Zoho CRm Using custom

    • Zoho Bookings know-how: A hands-on workshop series

      Hello! We’re conducting a hands-on workshop series to help simplify appointment scheduling for your business with Zoho Bookings. We’ll be covering various functionalities and showing how you can leverage them for your business across five different sessions.

    • Custom report

      Hello Everyone I hope everything is fine. I've tried to To change the layout of the reports, especially the summary page report, and I want to divide summary of each section in the survey but I can't For example: I have a survey containing five different

    • Zoho Journey - ZOHO MARKETING AUTOMATION

      I’ve encountered an issue while working with a journey in Zoho Marketing Automation. After creating the journey, I wanted to edit the "Match Criteria" settings. Unfortunately: The criteria section appears to be locked and not editable. I’m also unable

    • Custom Fields in PDF outputs

      I created a couple of custom fields. e.g Country of Origin and HS Tariff Code. I need these to appear on a clone of a sales order PDF template but on on the standard PDF template. When I select "appear on PDFs' it appears on both but when I don't select

    • How to create a Service Agreement with Quarterly Estimate

      Hello, I'm not sure if this has been asked before so please don't get mad at me for asking. We're an NDIS provider in Australia so we need to draft a Service Agreement for our client. With the recent changes in the NDIS we're now required to also include

    • Change Currency symbol

      I would like to change the way our currency displays when printed on quotes, invoices and purchase orders. Currently, we have Australian Dollars AUD as our Home Currency. The only two symbol choices available for this currency are "AU $" or "AUD". I would

    • Zoho Social - Post Footer Templates

      As a content creator I often want to include some information at the end of most posts. It would be great if there was an option to add pre-written footers, similar to the Hashtag Groups at the end of posts. For example, if there is an offer I'm running

    • Allow to pick color for project groups in Zoho Projects

      Hi Zoho Team, It would be really helpful if users could assign colors to project groups. This would make it easier to visually distinguish groups, improve navigation, and give a clearer overview when managing multiple projects. Thanks for considering

    • Zoho Books - Quotes to Sales Order Automation

      Hi Books team, In the Quote settings there is an option to convert a Quote to an Invoice upon acceptance, but there is not feature to convert a Quote to a Sales Order (see screenshot below) For users selling products through Zoho Inventory, the workflow

    • Can't find imported leads

      Hi There I have imported leads into the CRM via a .xls document, and the import is showing up as having been successful, however - when I try and locate the leads in the CRM system, I cannot find them.  1. There are no filters applied  2. They are not

    • Custom Button Disappearing in mobile view | Zoho CRM Canvas

      I'm working in Zoho CRM Canvas to create a custom view for our sales team. One of the features I'm adding is a custom button that opens the leads address in another tab. I've had no issue with this in the desktop view, but in the mobile view the button

    • The connected workflow is a great idea just needs Projects Integrations

      I just discovered the connected workflows in CRM and its a Great Idea i wish it was integrated with Zoho Projects I will explain our use case I am already trying to do something like connected workflow with zoho flow Our requirement was to Create a Task

    • Zoho Projects MCP Feedback

      I've started using the MCP connector with Zoho Projects, and the features that exist really do work quite well - I feel this is going to be a major update to the Zoho Ecosystem. In projects a major missing feature is the ability to manage, (especially

    • email template

      How do I create and save an email template

    • Enhancements in Portal User Group creation flow

      Hello everyone, Before introducing new Portal features, here are some changes to the UI of Portals page to improve the user experience. Some tabs and options have been repositioned so that users can better access the functionalities of the feature. From

    • Can I add Conditional merge tags on my Templates?

      Hi I was wondering if I can use Conditional Mail Merge tags inside my Email templates/Quotes etc within the CRM? In spanish and in our business we use gender and academic degree salutations , ie: Dr., Dra., Sr., Srta., so the beginning of an email / letter

    • email moderation issue when email is sent in the name of a mail group

      Symptom: an email that is sent by a mail group moderator in the name of a moderated mail group is held back for approval. Reproduction: Create a moderated mail group with members and moderators. Allow that mails can be sent in the name of the group (extended settings). Send an email to the group as a group moderator, but in the name of the group. This mail is held back for moderation which is unexpected. Expected: A mail sent by group moderator to a moderated group are not held back for moderation

    • Next Page