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
Add Account column to Invoice screen
Please show the account column on Invoice creation screen. It is an unnecessary step to have to click add additional info and then select the account for line item. Example : on the bill creation screen when entering description we can easily code it against an account. On the invoice screen it requires additional click. Adding the column on the Invoice screen will make it faster to enter transactions. We currently have 5-6 different accounts that we code line items against, You can imagine the extraCustom Footer – Zoho Writer Document
Hello everyone, I’m having an issue adding a custom footer in a Zoho Writer document. I would like to insert my company information (including a logo + address) in the footer. The problem is that when I add these elements, the main content of my pagesReport grouping
I have added a grouping in a report but it is not working how i had expected. I wanted to group a summary on a field named Size but when i add the grouping the report is still showing me each record and making a summary at the bottom of the report. WhatSocial Media Simplified with Zoho Social: Preview your Instagram grid before posting
For a platform like Instagram that relies on visual appeal, it's important that you plan your image and video content in a way that holds your audience's attention. Planning your grid ahead of time gives you the benefit of understanding how your postsError code 1000
Can you please tell me why the following, occasionally causes this error via the api, not every time ?... zoho.books.updateRecord("salesorders",organizationID,salesorderID,{"template_id":"#################069","custom_fields":[{"label":"DelDate","value":"Tuesday,VAT rates - exempt and out of scope
Good Evening, UK based company here. I am a bit confused in respect of setting up VAT rates for exempt goods and services; at present I am simply leaving the VAT rate blank in the transactions in order to prevent any VAT appearing in the VAT return. WhenHow to loop through Multiple Upload and Display Actual File Name
I have been reading the help on the File Upload Control and reviewed the Deluge help on files and I can not figure out how to loop through the uploaded files and do anything but get the automatically created file names. The code below will run but eachabou arattai
I want to use the Arattai app for business purposes, so please convert my account to a business account.I have my own invoice app, and I want to link it with the Arattai app for direct messaging.Configurable Zoho Cliq Notifications for Zoho People Alerts
Hello Zoho People Product Team, Greetings and hope you are doing well. We would like to request an enhancement to Zoho People notifications, enabling a native delivery via Zoho Cliq with admin-level control, similar to the notification settings availableLooking back at Zoho Calendar in 2025
Hello Zoho Calendar Community, As we step into a brand-new year, we’d like to take a moment to thank you for being an active and valued part of the Zoho Calendar community. Your trust, feedback, and continued engagement motivate us to keep evolving andThere was an error while connecting to GSTN
I am trying to file GSTR1. Everything flows smoothly until I reach the final step of filing the return. After I enter the PAN and OTP for filing it raises the error "There was an error while connecting to GSTN"Zoho Books Extension: What Happens If Custom Fields Already Exist?
When developing Zoho Books extensions, what happens if the target Zoho Books organization already has a custom field with the same API name as one defined in the extension? I’m asking because we originally created an on-Books version of this functionality,Internal Server Error (500) When Attempting to View Banking Transactions
I am experiencing an Internal Server Error (500) when attempting to view transactions across all of my banking accounts. Despite multiple attempts to resolve this, I have received little more than runaround from support, and the issue remains unresolved.How do I add a blank line to the Organisation Address Format?
I'd like to have my VAT number, for example, shown prominently by having a clear gap between it and the address block above, but any blank lines in the address format get ignored in PDF outputs.Automatic Invoice Number generation for createRecord
Hello, while testing some custom Buttons in my Zoho Books application, I noticed that I get an error that previously did not occur. After some further digging I found that the automatic transaction numbering of invoices no longer work in my organization.Adding number of days to an estimate.
I need both QTY of item and "number of days hire" in my estimates at the line item level. Any clues as to how this is done would be greatly appreciated. It needs to calculate. Thanks JBooks Api: listing expenses created after certain dates
Is there any parameter I can add to the List Expenses endpoint that will let me look up expenses by when they were created?Why can't we change the Account type from an Expense to an Asset?
Like the question. Why in QuickBooks for example if I mistakenly created an account as an expenses and I already captured information in those accounts, I can just change the account type from expense to assetIs it possible to do validation for the Actions added to Reports?
We have an all-around On Validate function that checks all the possibilities before the Created/Edited form submissions. We want to have a button in the report view, so we can change records without entering. We are able to add this button, and it does[Free Webinar] Environments in Zoho Creator - Creator Tech Connect
Hello Everyone, We’re delighted to kick off the 2026 edition of the Zoho Creator Tech Connect Series and are excited to continue this learning journey with you. The Creator Tech Connect series is a free monthly webinar featuring deep-dive technical sessionsZoho Voice API SMS
I made a post request in Zapier to try to send an SMS. Authentication appears to be configured correctly. I followed the documentation and I'm getting a 400 Error "Internal Server Error". Not helpful at all. Anyways, I could not find any information onHow do I change (error) display messages
Hi! I would like to edit display messages like "invalid entries" and "enter a value for Nome" and so on into Italian language messages. How can I do that? Already tried on Validate on form submit. Where I am failing? Thanks in advance.Record Overseas Transactions Along with CC charges
Hi All, We receive payments via stripe in multiple currencies and stripe takes around 2.5% fees. The amount is settled in INR into our local bank. What should be the currency of the income account used for Stripe payments? Here is a sample flow that weEasier onboarding for new users with stage descriptions
Greetings, I hope all of you are doing well. We're happy to announce a recent enhancement we've made to Bigin. You can now add descriptions to the stages in your pipeline. Previously, when creating a pipeline, you could only add stages. With this update,Pieds de page personnalisé - Document Zoho Writer
Bonjour à tous, Je rencontre un souci avec l’ajout d’un pied de page personnalisé dans un document Zoho Writer. Je souhaite insérer les informations de mon entreprise (notamment un logo + adresse) dans le pied de page. Le problème, c’est que lorsque j’ajouteCredit card transactions are backwards after importing statements
I am new to Zoho Books so I'm importing my firm's bank and credit card statements in. My credit card statements have a single column with negative numbers so that is the option I chose. But when I went to categorize the credit card transactions, I canPermissions on Views
Having the option of any agent creating custom views is firing back and got a situation where there are a hundred different views across the team and tickets are not being dealt in the most efficient of ways. Tickets seems to be missed by some agents,Function #8: Add additional charges to invoices
Here goes one of the highly sought-after custom functions in Zoho Books. If you find yourself needing to apply additional charges to customers on their invoices (say credit card surcharges, or fuel charges applicable to customers from a certain region,VIsual maindmaps in Zoho notebook Ai
Can I create and export VIsual maindmaps in Zoho notebook Ai1stDibs Integration to Zoho Inventory
Hello is it possible to integrate my Zoho inventory and 1stDibs?Community Question: Renewal vs Invoicing
This is a question for the community. Does anyone else consider there to be a difference between a subscription renewal event and sending out a recurring invoice for a subscription? For example, let's say customer XYZ purchases a 1-year subscription tocloud console support for music websites
Hi Friends, I am not from a very technical background.. So need support from the Zoho family. I want to build a e-commerce website which is in Musical Niche. It will help people learn music & play instruments of all types. There are a few players in the market like Chordify , Guitaa, Guitar Dashboard, ChordU & few others. But I all these websites allow only a few instruments to play. So I want to build a better website than the one I mentioned. So wnated to know what UI & AI should I use so thatScheduled Reports - Do not send empty report
Hello, We are intensively using reports in the CRM, especially for sales managers. When data is empty, they still receive an email. Can you add an option to avoid sending the report when data is empty?Is Zoho One Desktop more secure than Zoho One Web SaaS?
Is Zoho One Desktop more secure than using Zoho One in browser? Inherently, it seems desktop would be unless you don't do things like share your pw or leave pc on. I am concerned about data being on the cloud or someone else's server and database.Reminder Settings - Time Tracker
On the time tracker in Reminder Settings I created a reminder according to the Zoho manual. But a manager asked me to change the message that goes in the email. Is it possible to change the message? I didn't find that in the Zoho manual. Another question: I configured to receive the reminder everyone who logged in less than 40 hours. Does Zoho consider less than 40 hours of the current week or the whole month? Another situation, I put it so that I and another specific user would receive the notification,Create Item group from a composite Item
I have applied my mind for hours but cannot figure this out. Can you have a composite item in an item group?. E.g. We bundle different color and size SKU's together as composite items. Also Using composite items as Bill of Materials. We want to createMain difference of Zoho Recruit Corporte version and Staffing HR vesion
Hi Zoho, I need help to fully understand what is the main key point differences of Recruit Corporate version versus the Staffing HR version? We are currently using Corporate HR version and we are looking on having an insightful automated reporting, doesOut of Stock items showing in Commerce
I have over 6000 items and most are not in stock, but all items are showing up in Commerce whether they are inventory or not. What option or feature can you use to hide items in Commerce at zero or negative quantities? I currently am using Commerce forIs it possible to transfer data from one related list to another within the same module ?
In the Leads module, there is an existing default Product related list that already contains data. Recently, I added a custom multi-lookup field, which created a new related list in the same Leads module. Now, I need to move the existing data from theHow to implement new online payment gateway?
Hello, Can you tell me how to proceed to implement my local payment gateway? DIBS has an open avaiable API that should be easy to implement into ZOHO BOOKS. http://tech.dibspayment.com/dibs_payment_windowNext Page