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

    • [Free Webinar] Learning Table Series - AI-Enhanced Insurance Claim 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. Struggling with lengthy claim processes, a lack of visibility into

    • Not sure how to use credits to my account

      Hi I have a $50 credit to my account. I'm just wondering how I can apply that to either a current invoice or to try a new service. Any advice would be great, thanks. Kind Regards Chris

    • Control who sees Timeline and Interactions in Zoho CRM through Profiles

      The feature has been enabled for all DCs (except US, EU, and IN DCs). We will be rolling it out to the other DCs in the upcoming days. Dear All, In a CRM, not all users would require access to the history of a record. For instance, a Marketing Operations

    • Zoho Desk Integration - Add the option to send the estimate from the Zoho Desk Ticket Integration

      Hi, Currently in the Zoho Desk integration, the user is able to create an estimate from a ticket, once the estimate is created the user can see the estimate under the ticket (see screenshot below), but is not able to send that estimate from Zoho Desk.

    • Utilisation de Zoho en conformité avec l’article 286 du Code général des impôts (CGI)

      Cher(e) client(e), Conformément à l’article 286 du Code général des impôts (CGI) impose aux entreprises assujetties à la TVA d’utiliser des systèmes de caisse ou de gestion commerciale certifiés lorsqu’elles enregistrent des ventes à des particuliers.

    • CRM Validation Rules Support Only Single Condition

      Simply put, CRM validation rules support only a single condition for each field on "All Records". You also cannot specify additional validation rules on the same field because it has already been used in an existing validation rule. The ONLY solution

    • Unapproved Leaves are hard to distinguish in Attendance View

      This is a an unapproved leave request It appears in the Attendance view without any visual indicator if its approved or not For a whole day request this might be manageable but for hourly requests it gets very hard to know which are approved, which are

    • Performance Appraisal Probation Period

      Hello All,  Is there any possible way to create an appraisal cycle for new staff members, at the end of probation period? Many thanks!

    • Zoho Creatorの一括操作における処理の同期/非同期について

      現在、Creatorのレポート機能を利用して、複数のレコードに対して一括で処理を実行しようとしていますが、処理の実行順序について確認したいことがあります。 レポート内の複数レコードに一括で処理を実行した際、処理は同期的に行われるのでしょうか？それとも非同期的に行われるのでしょうか？ 【同期処理の場合】 レコード①に対する処理が開始され、終了後にレコード②に対する処理が開始され、最後にレコード③に対する処理が実行されるように、処理が順番に行われる場合。 【非同期処理の場合】 レコード①、レコード②、レコード③の処理が一斉に開始され、それぞれ並行して処理が行われ、全処理が終了する場合。

    • Mail Delivery Failed

      Good morning,   I have just set up an account with 5 users, however each time a message is sent to 1 user a m'mail delivery failed' message is generated. See below.   Any ideas   Thanks   Rob   This message was created automatically by mail delivery software. A message that you sent could not be delivered to one or more of its recipients. This is a permanent error. The following address(es) failed: robb@thesmartgroup.ae mailbox is full: retry timeout exceeded ------ This is a copy of the message,

    • Delete commerce website

      I need to delete a commerce website, but the only option is to click on settings, REQUEST DELETE, choose an urgency notice, add a message....AND THEN nothing, no way to send the request. Why is nothing simple!?!?!  I just want to delete the store.  The

    • Adding external users to Zoho Social under Zoho ONE licence - how to best achieve this

      My client has a small business, and we are looking to implementing Zoho ONE with a single flexible user licence as that is all they really need and offers the best pricing for the range of modules we eventually wish to set them up with, one of which will

    • This mobile number has been marked spam. Please contact support.

      Problem Description: One of our sales agents in our organization is unable to sign in to Zoho Mail. When attempting to log in, the following message appears: This mobile number has been marked as spam. Please contact support at as@zohocorp.com @zohocorp

    • What’s New in Zoho Inventory | April 2025

      Hello users, April has been a big month in Zoho Inventory! We’ve rolled out powerful new features to help you streamline production, optimise stock management, and tailor your workflows. While several updates bring helpful enhancements, three major additions

    • Pass current date to a field using Zoho Flow

      I am trying to generate an invoice automatically once somebody submits a record in Zoho CRM. I get an error in the invoice date. I have entered {{zoho.currentdate}} in the Date field. When I test the flow, I get "Zoho Books says "Invalid value passed

    • API: Mark Sales Order as Open + Custom Status

      Hi, it's possible to create Custom Status (sub-status actually) states for the Sales Order. So you have Open, Void. Then under Open you can have Open, and create one called Order Paid, Order Shipped, etc etc...which is grouped under Open. I can use the

    • Multi-Unit Inventory with Flexible Unit Selection (Purchase in One Unit, Sell in Another)

      We need multi-unit inventory management in Zoho Books with the flexibility to choose units (e.g., Box or Piece) at the time of purchase or sale. For example, if 1 Box = 10 Pieces, we should be able to record purchases in Boxes but sell either in Boxes

    • Zoho Quartz Screen Recording

      Hello, can we get access to Quartz, please, as a standalone solution? It would be great for creating training videos for current and future staff on how to use Zoho software according to our company requirements. Thank you

    • This domain is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details

      This is the error i keep getting when trying to use my Zoho Domain Mail. This domain is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details Find attached. I hope this can be resolved very quickly so i can go on and make

    • Tip 26: How to hide the "Submit" button from a form

      Hi everyone, Hope you're staying safe and working from home. We are, too. By now, we at Zoho are all very much accustomed to the new normal—working remotely. Today, we're back with yet another simple but interesting tip--how to hide the Submit button from your forms. In certain scenarios, you may want to hide the submit button from a form until all the fields are filled in.  Use case In this tip, we'll show you how to hide the Submit button while the user is entering data into the form, and then

    • Email address for forwarding is not saving and there's no confirmation ema

      Steps to reproduce: 1. Enter my forward email in the email forward section of the account 2. Click save 3. See a notification stating saved successfully 4. Refresh the page, no forward email is saved 5. No email confirmation received at the forwarding

    • How do I move Notes around within a Group?

      It says here: " You can now sort notes by title (alphabetically), or by date modified and date created. You can even organize your notes by dragging and dropping them into a particular order. To sort your notes, simply go to Settings and tap “Sort By.” Please note: all sort settings will be saved and synced across devices, except for custom sorting. Custom sorting will be device specific."However, I am unable to 'custom sort' in either Notebook for Mac or on the Web. In addition, I can't find the

    • javax.mail.authenticationfailedexception 535 authentication failed

      Hi, I am facing 535 authentication failed error when trying to send email from zoho desktop as well as in webmail. Can you suggest to fix this issue,. Regards, Rekha

    • Zoho Sign: need to leave document pending for up to a year, or maybe there's a better way?

      I have zoho one, maybe there's a better way to do this with another service than sending a zoho sign template from zoho crm. At the end of the day this requirement is due to regulations, no matter how dumb it may seem. I'm just looking for a way of getting

    • Separate Items & Services

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

    • Unable to edit or delete email address

      I signed up for free Zoho today. I usually am pretty good at understanding and configuring things like this, but your interface baffles me, and your online help is cryptic to say the least. I have spent hours just trying to set up a couple of email accounts in Zoho before pointing my domain MX records to Zoho. I solved some other issues on my own, but I can't figure out this latest problem: I have created two email addresses in Zoho. Let's call the first one myname@mydomain.com and the second one

    • Mastering Zia Match Scores | Let's Talk Recruit

      Feeling overwhelmed by hundreds of resumes for every job? You’re not alone! Welcome back to Let’s Talk Recruit, where we break down Zoho Recruit’s features and hiring best practices into simple, actionable insights for recruiters. Imagine having an assistant

    • We are unable to process your request now. Please try again after sometime or contact support@zohoaccounts.com

      I cannot sign up and return the error of we are unable to process your request now. Please try again after sometime or contact support@zohoaccounts.com

    • Multi-currency - What's cooking ?

      Hi,       We have been doing this feature for sometime and we would like to give you some glimpses of it.  Working with Multi Currency :        Multicurrency support gives you the ability to handle business transactions in multiple currencies. You can define a base currency for your organization and add more currencies with exchange rates based on the base currency.  Setup :        From the setup page, you can manage all the currencies supported by your organization.       Currencies page        

    • How to reduce programmatically the image uploaded by user?

      I need a function that will automatically reduce the pixel dimension to 800 x 600 pixels / 180 resolution or (approx. 1.37MB) of image uploaded by user from digital camera, for example, 2271 x 1704 pixels /180 resolution or approx. 11.1MB. After the user selected the image, the function will able to detect if pixels is above 800x600, process the photo (crop/ reduce) and resume upload. Need help...  

    • Dark mode for Zoho Creator / Zoho CRM Code editor

      Hi Team, Is there any plans for Dark mode in Zoho creator / Zoho Crm code editor and development pages in pipeline?

    • Is there a way to make a button scroll down?

      Looking to have a button on a landing page scroll down to another section on the page. Any recomendations outside of coding?

    • ZOHO Android Client

      Hi, I installed the Android app, but it had an issue, so I reinstalled it. I was able to add multiple accounts, but now when I add the next account, it just duplicates the one I already have and will not even allow me to enter the info for another account.

    • I'd like to suggest a feature enhancement for SalesIQ that would greatly improve the user experience across different channels.

      Hello Zoho Team, Current Limitation: When I enable the pre-chat form under Brands > Flow Controls to collect the visitor’s name and email, it gets applied globally across all channels, including WhatsApp, Messenger, and Instagram. This doesn't quite align

    • Enhance Barcode/QR Code scanner with bulk scanning or continuously scanning

      Dear Zoho Creator, As we all know, after each scan, the scanning frame closes. Imagine having 100 items; we would need to tap 100 times and wait roughly 1 second each time for the scanning frame to reopen on mobile web. It's not just about wasting time;

    • Managing Rental Sales in Zoho Inventory

      I am aware that Zoho Inventory is not yet set up to handle rental sales and invoicing. Is anyone using it for rentals anyway? I'd like to hear about how others have found work arounds to manage inventory of rental equipment, rental payments, etc. Th

    • Zoho Flow to Creator 3001 Respoonse

      I have updated my Flows with the new V2 connection to Zoho Creator, but now some Flows do not work. They take in data from a Webhook and are supposed to create a record in Creator, however creator returns a 3001 message along with a failure, but I cannot

    • File Upload to Work Drive While Adding Records in Zoho Creator Application

      Hi I am trying to set a file attachment field in zoho creator form, to enable the user to upload a scanned document from their local pc. The file should be uploaded to zoho workdrive and not to the default zoho creator storage. The file link should be

    • Why not possible to generate?

      Using this https://desk.zoho.com/DeskAPIDocument#TicketCount#TicketCount_Getticketcountbyfield on my ZML script url :"https://desk.zoho.com/api/v1/ticketsCountByFieldValues?departmentId=XXXXXXXXXXX&accountId!=XXXXXXXXX&customField1=cf_country_1:XXXXXX&field=overDue"

    • email

      Hi My crm email is not working, can you check, I have zoho one account.

    • Next Page