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
- Logos
- Working with images
- Fonts
- 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.
- Now replace one of the following links with your brand image URL.
- Zoho Bookings Logo - 'https://www.zoho.com/sites/default/files/bookings/dannyemail/logo.png'
- Zoho Logo - 'https://zoho.com/sites/default/files/bookings/imagesemail/zoho.png'
- Click HTML again to view the logo on your template.
- If you're a HTML pro, feel free to play around with the HTML code to change the logo's positioning and sizes.
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.
- <img style='width: 134px;' src='https://www.zoho.com/sites/default/files/bookings/dannyemail/logo.png'>
- Change the numbers to alter the width.
- To change its height, insert the following code at the end of it.
- height = __
Like this
- <img style='width: 134px;' src='https://www.zoho.com/sites/default/files/bookings/dannyemail/logo.png' height=100>
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.
- <img style='padding-top: 3px;' src='https://zoho.com/sites/default/files/bookings/imagesemail/zoho.png'>
No worries, we can add them manually.
- height = __ width = __
The code will look like this after adding height and weight.
- <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
- 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.
- To align the image, right/left or center, search for the following text.
- <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.
- 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.
- 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
- .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
- .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.
Access your files securely from anywhere
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
New to Zoho TeamInbox?
Zoho TeamInbox 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
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Customer address in Zoho Bookings
Hello, Is it possible to add customer address information to the Zoho bookings appointment screen? Or have it pull that information automatically from the CRM? We are wanting to use this as a field management software but it is difficult to pull the address from multiple sources when it would be ideal to have a clickable address on the appointment screen that opens up the user's maps. It would also be advantageous for the "list view" to show appointment times instead of just duration and bookingGhost email notification on a form
Hello, We have recently encountered an error where I can not see a email notification set up for a form which I am currently the owner, although neither the form nor the notification were created by me. However, neither can the Super Admin access thebulk edit records and run internal logic
hi there is few logics in manner "it this than that" logics work well when i edit entry openning it one by one (via workflow "on add/edit - on success" , for custom field "on update/on user input") but when i try bulk edit records - logic does not work. how can i turn on logic to work as programmed - for mass editing records via bulk edit?Limitations on editing a message in Cliq
Hi I've checked the documentations and there's no mention of how many times a message can be edited. When trying with code, I get various numbers such as ~1000 edits or so. Please mention if there's a limit on how many times one can change a message viaemail address autocomplete
Is there a way to eliminate certain addresses from showing up in auto complete when entering an address? Many old and unused addresses currently show up, many of which I would like to get rid of. ThanksHow to use MAIL without Dashboard?
Whenever I open Mail, it opens Dashboard. This makes Mail area very small and also I cannot manage Folders (like delete/rename) etc. I want to know if there is any way to open only Mail apps and not the Dashboard.How can i download and secure all my mails from the archive folders?
Hi, i would like to download all my mails from my archive folders and secure it on my external HDD. Is this possible? Thx. amirHow to open filtered report in popup using Zoho Creator Deluge?
First report: There is so many records in Report, If I click one record, pop up is occur. Second report (Pop up): there is also so many record data, and this pop up is also Report, not Form. First report: It has got "Sales Order" field. when I click anyCan you default reports/charts to report the current week?
Our data table maintains two years of data. Management wants certain report to automatically filter the report to the latest calendar week. I know I can do this manually with filters but I want the report to automatically default to the latest calendarRendering PDF to view on page
My company upload lots of PDF files onto Zoho. But every time we open it, it downloads the file instead of viewing it on the web page. Does Zoho allow uploaded PDF files to be rendered to view on web page yet? I've been trying to use <embed> or <object> but it cannot be loaded. (similar thread: https://help.zoho.com/portal/community/topic/how-to-open-a-pdf-file-of-a-view-in-preview-mode)Overlapping Reports in Dashboards
It's rare, but occasionally it would be a good feature if I were able to overlap reports, either fully or partially in the Dashboards. Also, then having the ability to move objects to the front or rear, or make them transparent/translucent would be goodFeature request - pin or flag note
Hi, It would be great if you could either pin or flag one or more notes so that they remain visible when there are a bunch of notes and some get hidden in the list. Sometimes you are looking for a particular name that gets lost in a bunch of less importantAdmin guide: Handling Mailbox Settings for better user management
Managing day-to-day email scenarios, such as supporting users with multiple email addresses, ensuring uninterrupted email access during employee absences, enabling secure mailbox sharing, and enforcing organizational security and compliance, can be challengingCisco 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!Designing a practical Zoho setup for a small business: lessons from a real implementation
I recently finished setting up a Zoho-based operating system for a small but growing consumer beauty business (GlowAtHomeBeauty), and I wanted to share a practical takeaway for other founders and implementers. The business wasn’t failing because of lackDKIM (Marketing emails) UNVERIFIED (Zoho One)
I'm having a problem with Zoho One verifying my Marketing Email DKIM Record for MYFINISHERPHOTOS.COM. I have removed and re-entered the ownership, DKIM (Transactional emails), SPF and Marketing DKIM and all of them come back verified except the DKIM (MarketingZoho Recruit Community Meet-up - India
Namaste, India. 🙏🏼 The Zoho Recruit team is hitting the road—and we 're absolutely excited behind the scenes. Join us for the Zoho Recruit India Meet-up 2026, a morning designed to make your recruiting life easier (and a lot more effective). Date CityGenerate a Zoho Sign link
From time to time I get a response "I never received your you e-document for electronic signature" is there a way to generate a Zoho Sign link to share.Is it possible to create a word cloud chart in ZoHo Analystics?
Hi there, I have a volume of transaction text that I would like to analyse using word cloud (or other approcah to detect and present word frequency in a dataset). For example, I have 50,000 records describing menu items in restaurants. I want to be ableHow to Fix the Corrupted Outlook 2019 .pst file on Windows safely?
There are multiple reasons to get corrupted PST files (due to a power failure, system crash, or forced shutdown) and several other reasons. If You are using this ScanePST.EXE Microsoft inbuilt recovery tool, it only supports the minor corruption issue[Webinar] A recap of Zoho Writer in 2025
Hi Zoho Writer users, We're excited to announce Zoho Writer's webinar for January 2026: A recap of Zoho Writer in 2025. This webinar will provide a recap of the features and enhancements we added in 2025 to enhance your productivity. Choose your preferredHow to drag row(s) or column(s)?
Hi. Selecting a row or column and then dragging it to a new position does not seem to work. Am i missing something or this is just not possible in Zoho Sheet? Cheers, JayBuilding Toppings #5 - Creating and configuring custom service connections in Bigin Toppings
Hello Biginners, Integrating Bigin with external applications extends its capabilities and enables customized functionalities. In our last post, we saw how to create a default service connection. Today, we'll see how to create a custom service connectionOptimising CRM-Projects workflows to manage requests, using Forms as an intermediary
Is it possible to create a workflow between three apps with traceability between them all? We send information from Zoho CRM Deals over to Zoho Projects for project management and execution. We have used a lookup of sorts to create tasks in the past,Marketing Tip #15: Rank better with keyword-rich URLs for product pages
Your product page URL is a small detail that can make a surprisingly big difference. Clean, readable URLs help in two ways: They’re easier for customers to trust and remember (no one likes clicking a link that looks messy or random). They help searchConditional fields when converting a Lead and creating a Deal
Hi, On my Deal page I have a field which has a rule against it. Depending on the value entered, depends on which further fields are displayed. When I convert a Lead and select for a Deal to be created as well, all fields are shown, regardless of the valueATE Session on Payment Gateways: Our experts are live now. Post your questions now!
Hello everyone, Our experts are all excited to answer all your questions related to payment workflows. Please feel free to join this session and learn more about this topic. If you have a query at anytime, please post them here.Upload data deleted all Zoho form data that we manage
Good morning. Let me introduce myself, I'm Iky from Indonesia. I'm experiencing an error or problem using Zoho Forms. I manage Zoho Forms, but I previously encountered an error when I misclicked the delete button in the upload format. It apparently deletedZOHO FORMにURL表示ができない
初心者です。 ZOHO FORM で宿泊者名簿を作っています。 ゲストが、URLをクリックするとStripeで支払いができるようにURLを表示をしたいのですが、 上手くできません。 やり方が分かる方、ぜひ教えてください。Custom module - change from autonumber to name
I fear I know the answer to this already, but thought I'd ask the question. I created a custom module and instead of having a name as being the primary field, I changed it to an auto-number. I didn't realise that all searches would only show this reference.No Automatic Spacing on the Notebook App?
When I'm adding to notes on the app, I have to add spaces between words myself, rather than it automatically doing it. All my other apps add spacing, so it must be something with Zoho. Is there a setting I need to change, or something else I can do soHolidays - Cannot Enter Two Holidays on Same Day
I have a fairly common setup, where part-time employees receive 1/2 day's pay on a holiday and full-time employees receive a full day's pay. Historically, I've been able to accommodate this by entering two separate holidays, one that covers full-timeCampaigns set up and execution assistance
Hello Community, Can someone recommend a professional who can assist with the completion of my set up and deployment of Campaigns? Looking for a person or company that is not going to ask for big dollars up-front without a guarantee of performance toZobot with Plugs
Hello, I am having a problem with Zobot using Plugs. Here is my current flow: When I run the flow, I should immediately see the messages from the initial cards (Send Message cards), then after running the plug, and finally, see the messages after theKaizen #223 - File Manager in CRM Widget Using ZRC Methods
Hello, CRM Wizards! Here is what we are improving this week with Kaizen. we will explore the new ZRC (Zoho Request Client) introduced in Widget SDK v1.5, and learn how to use it to build a Related List Widget that integrates with Zoho WorkDrive. It helpsRemove Powered by Zoho at the footer
Hi, I've read two past tickets regarding this but it seems that the instructions given are outdated. I assume the layout keeps on changing, which makes it frustrating for me to search high and low. Please let me know how exactly do I do this now? ThError AS101 when adding new email alias
Hi, I am trying to add apple@(mydomain).com The error AS101 is shown while I try to add the alias.No Need To Fix Something That Is Working
Zoho Books is a great financial tool which helps businesses to become more efficient and productive with day-to-day operations. As such, every change, upgrade, improvement needs to be carefully thought before implemented in the software and I'm sure ZohoUsing email "importance" as workflow-criteria
I'd like to set up a workflow that triggers if an incoming email has been flagged as "high importance" but I'm not seeing any way to do that. Hopefully I'm just missing something obvious...?This domain is not allowed to add. Please contact support-as@zohocorp.com for further details
I am trying to setup the free version of Zoho Mail. When I tried to add my domain, theselfreunion.com I got the error message that is the subject of this Topic. I've read your other community forum topics, and this is NOT a free domain. So what is theNext Page