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



      Zoho Campaigns Resources

            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 Marketing Automation
                                          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 Writer

                                                                                  Get Started. Write Away!

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

                                                                                    Zoho CRM コンテンツ








                                                                                      Nederlandse Hulpbronnen


                                                                                          ご検討中の方




                                                                                                • Recent Topics

                                                                                                • Syncing with Google calendar, Tasks and Events

                                                                                                  Is it possible to sync Zoho CRM calendar, task and events with Google Calendar's tasks and events. With the increasing adoption by many major tool suppliers to sync seamlessly with Google's offerings (for instance I use the excellent Any.do task planning

                                                                                                • Merge invoices

                                                                                                  This has come up three times in a month of me using the system. a client whom i do work for on a regular bases asked me to invoice separate jobs on a single invoice. I would then go and cancel the old invoices and make a new one. It would be great if i could just select the invoices and click merge to create a single invoice.

                                                                                                • Pipeline stages for product-led growth (PLG) subscription services

                                                                                                  (Estagios de pipeline com foco em serviço digital por assinatura (PLG)) Dear colleagues, I am writing to request assistance with a significant challenge I am currently facing. I manage a digital service that operates on a subscription-based model. I am

                                                                                                • Multiselect lookup in subform

                                                                                                  It would be SO SO useful if subforms could support a multiselect look up field! Is this in the works??

                                                                                                • Zoho CRM for Email ( Microsoft add on app) Feb 25, 2025

                                                                                                  We are currently experiencing issues with Zoho CRM for Outlook despite updating the Microsoft add on app and Zoho software to the latest versions. When working in Outlook on our Macs and PC's and 365 on the web, when we try to link an email in Outlook

                                                                                                • Sheet View for Reports

                                                                                                  We often need to filter our contacts in a way that is too complex for Custom Filters (which now allows filtering by Related Modules - amazing! - but doesn't allow for an *OR* relationship between the multiple filters) or Custom View (which does not yet

                                                                                                • Feature enhancement: Highlight rows based on a cell value

                                                                                                  Hello Sheet users, We're excited to announce a new feature enhacement, shaped directly by your valuable feedback! As you might know, conditional formatting is a great tool for anyone dealing with large data sets. Previously, if you’ve ever wanted to draw

                                                                                                • Urgent: Unable to Receive OTP Email for Portal User Registration in Zoho Creator

                                                                                                  I paid to enable the Portal User feature on 2/25, and followed the official instructions (Youtube video: Customer Portals | Zoho Creator) to set up the Portal User using my Gmail account. However, I am not receiving the OTP email and am unable to successfully

                                                                                                • Zoho not receiving verification email.

                                                                                                  I developed a website registration page and need to send verification email. I am using sendinblue for sending out the verification emails. Somehow, the mail is not being received by the Zoho users. Gmail, outlook, yahoo domains works fine but when I try to send the mail to my Zoho account I am not able to receive the mail. Can you please let me know what might be the issue?

                                                                                                • Restore deleted spreadsheet

                                                                                                  Hi all, I can not find my spreadsheet. It seems that my spreadsheet is deleted. Please, restore the spreadsheet. Thanks in advance

                                                                                                • Lookup fields can't be used for anything important

                                                                                                  Hi It seems the lookup fields are mostly.... informative, you can at most link stuff between modules... You can't use lookup fields in blueprints, you can't use them in layout rules or anything... It that correct?

                                                                                                • Function to check frequency of customer ordering patterns

                                                                                                  Hi, I'm no coder, so I thought I could make use of Chat GPT to generate some Deluge script to create a function that would check order frequency of our customers so that I could send an email if they go beyond their usual order pattern. Chat GPT and Claude

                                                                                                • Better Control over Team Ordering and Display

                                                                                                  Two feature requests for Zoho Desk team drop downs: The ability to change the order of teams, currently it's not in alphabetical order, which is confusing. I'm thinking a manual ordering via number or drag and drop, alphabetical order, and creation order

                                                                                                • Clear specific tag or tags from all leads

                                                                                                  I'm looking for a way to clear a specific tag from all Leads. I have a function when a tag is added to a lead they are added to a campaign and their status is set to "invited". I need to find a method to remove the tag. If I try to delete the tag to clear

                                                                                                • Cisco Webex Calling Intergration

                                                                                                  Hi Guys, Our organisation is looking at a move from Salesforce to Zoho. We have found there is no support for Cisco Webex Calling however? Is there a way to enable this or are there any apps which can provide this? Thanks!

                                                                                                • Has Anyone Else Built a State Machine into a Function?

                                                                                                  I'm in the process of building a state machine for lead lifecycle management within Zoho CRM, and I'm curious if anyone else has tried integrating a state machine into their Deluge functions, especially considering Zoho’s 12-function cap. I’ve managed

                                                                                                • Is there a way for a custom function to trigger a custom made email alert?

                                                                                                  Hi Zoho Team, We have currently maxed out our 30 workflows in one of our department and we are trying to find ways to make it more efficient. We usually use our workflows to send automated email notifications per team leader for approval of tickets. Is

                                                                                                • Unified WhatsApp Number Management in Zoho Desk and SalesIQ

                                                                                                  Dear Zoho Desk Support Team, We are currently utilizing both Zoho Desk and Zoho SalesIQ for our customer support operations. While both platforms offer WhatsApp integration, we are facing challenges due to the requirement of separate WhatsApp numbers

                                                                                                • Multi User Lookup field on the Zoho CRM iOS app.

                                                                                                  Hello all!   Hope you are all safe and sound.   We have now brought in support for the Multi User Lookup field on the Zoho CRM mobile app. Below are the enhancements that are supported in this update:   * Multi User Lookup field can be added through the

                                                                                                • Help with Deluge Script in Zoho SalesIQ (Input Variables Always Null)

                                                                                                  Hi everyone, I’m working on a Deluge script for Zoho SalesIQ, specifically for a block in Zobot. The script is supposed to: Check the visitor’s name when they start a chat. If the name is empty, return false; if a name is present, return true. However,

                                                                                                • Item/service subtotal

                                                                                                  Just discovered & really pleased that we can drag to re-order the line items in Sales orders & Invoices, a very nice feature which doesn't seem to be documented? It would be nice to be able to insert a subtotal as a line item to complete this great feature

                                                                                                • Hide/Show Certain Fields When Creating/Editing Invoices, Estimates, Etc.

                                                                                                  Hello there, I would like the ability to hide or show certain fields for different employees/roles in my company when they are creating or editing invoices, estimates, etc.. Most of the time, we don't use half of the fields shown on the create/edit invoice

                                                                                                • Is there a way to make an account inactive in ZoHo Desk

                                                                                                  We have a few Clients "Accounts" that we no longer do business with. It would be beneficial for them to not show up in lists. However, we want to go back and view tickets, time, etc.

                                                                                                • Any way to Associate a Recurring Invoice with Deal/Potential in Zoho CRM

                                                                                                  When we create an Invoice in Zoho Books, we have the option to associate that invoice with a Potential/Deal that is tied to that same customer. Can we do the same thing with Recurring Invoices? When creating a Recurring Invoice, I want to be able to Associate

                                                                                                • SSO/SAML

                                                                                                  Question - how are you guys handling SSO for Desk?  It seems the only options lead back to ADFS which is a dying technology, stupidly complicated to set up and configure (I mean, you can put that on your resume) and seems like overkill for SSO when AAD does it so much better and effortlessly.  We want to have our clients have SSO to log into our support portal and we want our Agents to have SSO as well. I shouldn't have to expose our server, turn on ADFS, configure it, install multiple clients (Sync

                                                                                                • Are downloadable product available in Zoho Commerce

                                                                                                  Hi all. We're considering switching to Zoho Commerce for our shop, but we sell software and remote services. Is there a features for downloadable products? I can't find any information about this. Thank you very much Alice

                                                                                                • Ask the Experts 17: Elevate Customer Communication With Multichannel & Instant Messaging

                                                                                                  Hello Everyone, Get ready for the opportunity to interact with Zoho Desk specialists! This month, we’re diving into Multichannel Operations, helping you manage customer interactions across various platforms seamlessly. Why Join? Customers reach out through

                                                                                                • ZOHO DESK

                                                                                                  I use Outlook Exchange to receive emails and want to forward them to Zoho Desk for better management. Additionally, I want to reply to emails in Zoho Desk and have them sent to customers via Outlook Exchange, but I don’t know how to configure it.

                                                                                                • Automating Custom Web Link Messages to Customers via Instant Messaging in Zoho Desk

                                                                                                  Hello, I am looking for assistance with Zoho Desk's Instant Messaging feature. Is there a way to automate the sending of a custom web link to customers every day at 6:30 PM? Any guidance or suggestions on how to achieve this would be greatly appreciated.

                                                                                                • Exciting Update: Multi WhatsApp Business Account (WABA) Support Now Available in SalesIQ!

                                                                                                  We’re pleased to share an important update that will enhance the way you manage your WhatsApp Business accounts (WABAs) within SalesIQ. With the launch of Multi WABA support, you can now connect and manage multiple brands more effectively, each under

                                                                                                • An error occurred while uploading the attachment.

                                                                                                  From the image below, attaching files is not possible via the website but is supported through the Mobile App.

                                                                                                • One time offer in Zoho Campaigns

                                                                                                  Hello! I have an idea to improve my sales. I would like to make a "one time offer" in Zoho Campaigns with a clock that will count down the bid validity period.  Is it possible? Regards.

                                                                                                • How to Initiate WhatsApp Message on SalesIQ?

                                                                                                  I've just activated a Business WhatsApp phone number through SalesIQ because of its touted omnichannel chat approach. Sounds exciting. I understand that when a customer sends me a WA message, I can reply to it on SalesIQ and keep the chat going, perfect.

                                                                                                • Multiple self client instances

                                                                                                  there a couple of details that deserve clarification / improvement in Zoho's OAuth 2: 1. for building true server apps - cloud to cloud REST - one has to choose Self Client when creating a new instance in API Console; Server-based Appplications is slightly

                                                                                                • Workdrive Oauth2 Token Isn't Refreshing

                                                                                                  I have set up oauth for a bunch of zoho apis and have never had a problem with oauth. With workdrive i am using the exact same template i usually use for the other zoho apps and it is not working. All requests will work for the first hour then stops so

                                                                                                • Zoho Desk - Delete an email conversation

                                                                                                  When using Zoho support desk I see an option to delete and edit conversations that are comments, BUT if the conversation was automatically added as a conversation from an email, then the option to delete it seems not to be available. Is there a way to

                                                                                                • Organizational Emails Send through Email Relay Server

                                                                                                  Hello, It would be great if the the Organizational Emails could send through the Email Relay Server as well. I often need to send email as someone else and since we use the GMail API option I have to use the organizational emails to do this.  We use Postmark for our Email Relay Server to increase deliver-ability which is something that we have had issues with when sending everything through Zohos servers. Also with postmark there is no need for each organizational email to have its own credentials

                                                                                                • Emoji support in workdrive

                                                                                                  Hello, We are using emojis in our filenames and folder to help visually find relevant data. Currently Workdrive is stripping out emojis and the rest of the filename (along with the suffix), making the file unreadable when they are synchronized with desktop.

                                                                                                • What is a 'user' in Zoho Surveys, and can I have multiple Offline Kiosks running?

                                                                                                  Is a 'user' the amount of people that can make and edit surveys on the website? I basically just want to know if I am able to have multiple Offline Kiosks running on multiple devices at the same time. Either on the Basic or Plus plan which both have 1

                                                                                                • Fundation / Non profit : Could you help ?

                                                                                                  Hi, We're about to handle a Medical research fundation, non profitable structure, what kind of prices could we hope from you ? Could you help us ? We would need Survey, automated campaign and ZIA Thanks in advance

                                                                                                • Next Page