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

    • Customer payment alerts in Zoho Cliq

      For businesses that depend on cash flow, payment updates are essential for operational decision-making and go beyond simple accounting entries. The sales team needs to be notified when invoices are cleared so that upcoming orders can be released. In contrast,

    • Figma in Zoho Creator

      Hi Team, I’m creating a form using Figma and would like to know how to add workflows like scheduling, custom validation, and other logic to it. Can anyone help me understand how to set this up for a Figma-based Creator UI form?

    • How to Delete Personal Account Linked with My Mobile Number in past or by someone else

      How to Delete Account Created with My Mobile Number in past or by someone else This is creating issues in making or sync with my credentials mobile and email address..

    • Restore lost Invoice!

      Some time ago I tried to Upgrade from Invoice to Books. I not upgraded and staid n Invoice. Now i tried again and first i deleted the old trial of books. But now all is gone, PLEASE HELP!! i have no backup and i have to have at least 7 years data retention by law. 

    • Zoho Desk Down

      Not loading

    • Has anyone integrated SMS well for Zoho Desk?

      Our company does property management and needs to be able to handle inbound sms messages which create a ticket for Zoho Desk. We then need to be able to reply back from Zoho desk which sends the user an sms message. This seems like a fairly common thing

    • lookup and integrated forms

      I might be misunderstanding things but I wanted to integrate our zoho crm contacts into creator. I imagined that when I used the integration it would mirror into creator. It did brilliant. BUT We have a ticket form in creator that we want to use a lookup

    • Zoho Expense and Chase Bank Visa credit cards - Direct Feed?

      Our company uses JP Morgan Chase Visa credit cards. We can't be the first to try and use a combination of Zoho Expense + Chase Bank + Visa Credit Cards --- anyone successful with this combination? 1. The direct feed automation isn't working. When I go

    • Partially receive PO without partial Bill?

      Most of our inventory is pre-paid. Let's say we purchase 30 pieces of 3 different items for a total of 90 pieces. It is common for our supplier to send us the items as they are ready. So we will receive 30 pieces at a time. How can I partially receive

    • 2 users editing the same record - loose changes

      Hello, I'm very new to Zoho so apology if this has been addressed somewhere i can't find. I have noticed the following: If we have 2 users put an inventory item in edit mode at the same time: say user1 click on edit and user2 while user1 is still in edit,

    • How to get the Dashboard page to be the first page when you open the app

      So when it opens on a tablet or phone it opens on the welcome page, thanks.

    • How I set default email addresses for Sales Orders and Invoices

      I have customers that have different departments that handle Sales Orders and Invoices. How can i set a default email for Sales Orders that's different than the default email for Invoices? Is there a way I can automate this using the Contact Persons Departments

    • Notes Attachments

      Two things it would be nice to have the attachment size the same as the attachments sections and it would be nice to be able to attach links like you can in the attachments section. Thank you

    • Formula fields not refreshing until page is reloaded

      I need help/advice about the formula fields and how I can refresh the information in real-time. We have two formula fields on our deals page which show calculated prices: One formula is in a subform which calculates the subform total + 1 other field amount

    • How can I setup Zoho MCP with Chat GPT

      I can set up custom connections with Chat GPT but I cat an error when I try to set it up. The error is: "This MCP server can't be used by ChatGPT to search information because it doesn't implement our specification: search action not found" Thoughts?

    • API ZOHO CRM Picket list with wrong values

      I am using Zoho API v.8. with python to create records in a custom module named "Veranstaltung" in this custom module I've got a picket list called "Email_Template" with 28 Values. I've added 8 new values yesterday, but if I try to use on of those values

    • Group Emails

      I have synced Zoho CRM to Campaigns but there are certain email not synced. showing it is Group Emails, but this email ids belongs to different individuals. please provide a solution as i nedd to sync the same.

    • Enable Password Import option in ulaa browser

      Dear Ulaa Team, I noticed that the Ulaa Password Manager currently offers an option to export passwords, but not to import them. This limitation poses a challenge for users like me who have stored numerous credentials in browsers like Chrome. Manually

    • "Is Zoho CRM customer" vs "Is linked with Zoho CRM"

      Recently while building a Flow, I was setting up a Decision action following a Zoho Invoice Fetch record action. There were 2 choices that I had not seen as something I could manually action in Zoho Invoice: "Is Zoho CRM customer" and "Is linked with

    • Client Script | Update - Introducing ZRC: Simplified HTTP request library

      Hello Developers! Are you tired of juggling different methods to make API calls? Are you confused with multiple syntaxes and version restrictions? Have you ever wished for one simple way to make all API calls in CRM? We heard you :) Here comes ZRC (Zoho

    • Selection Filed for Data Export section

      Hi FSM Team, I hope you are all doing well. I would like to share an idea for future development based on my experience. Currently, in FSM, we can only download up to 5,000 records at a time. If the development team could add a selection option to choose

    • Text wrap column headers in reports?

      Is it possible to auto wrap column headers so that a longer multi-word header displays as two lines when the column is narrower than the width of the header title?

    • What if I dont see contacts on the left side list

      My CRM does not show the contacts tab. In order to create list this is needed and I cant find it.

    • Comments Vs. Replies

      I'm curious as to the difference between a "Reply" and a "Comment" on a ticket. It appears that "Replies" are what's used to determine response time SLA's and there are also used to automatically re-open tickets. I'm just trying to understand the key differences so I can educate both our clientele and our back-end users on which function/feature to use to better improve the ticket lifecycle. If anyone has any insight it would be appreciated. Thanks!

    • Transitioning to API Credits in Zoho Desk

      At Zoho Desk, we’re always looking for ways to help keep your business operations running smoothly. This includes empowering teams that rely on APIs for essential integrations, functions and extensions. We’ve reimagined how API usage is measured to give

    • Add Custom Reports To Dashboard or Home Tab

      Hi there, I think it would be great to be able to add our custom reports to the Home Tab or Dashboards. Thanks! Chad

    • Resetting auto-number on new year

      Hi everyone! We have an auto-number with prefix "D{YYYY}-", it generates numbers like D2025-1, D2025-2, etc... How can we have it auto-reset at the beginning of the next year, so that it goes to D2026-1? Thanks!

    • Can you prevent closing Ulaa window when the last tab is closed (inadvertently)?

      Most browsers have started to bring this feature in to prevent closing their windows when the last tab is closed (inadvertently). I hope Ulaa should get this in too.

    • Microsoft Phone Link

      Does anyone know if you can use Microsoft Phone Link to make calls through Zoho?

    • Voip Phone system that integrates with Zoho

      Just checking to see if anyone could tell me what phone system they are using with Zoho that is on the list of systems that integrate with Zoho.  I use Vonage and have been with them for quite a few years but their service has really gone down hill and

    • Removing Related Modules Lookup Fields Assignment / Relationship

      Issue: When creating a related list, I accidently selected module itself creating a circle reference. See attached. Situation: I wish to relating a custom module called "Phone Calls" to Leads and Contacts. Outcome: 1) I either want to remove the this

    • [Product Update] TimeSheets module is now renamed as Time Logs in Zoho Projects.

      Dear Zoho Analytics customers, As part of the ongoing enhancements in Zoho Projects, the Timesheets module has been renamed to Time Logs. However, the module name will continue to be displayed as Timesheets in Zoho Analytics until the relevant APIs are

    • Kaizen #210 - Answering your Questions | Event Management System using ZDK CLI

      Hello Everyone, Welcome back to yet another post in the Kaizen Series! As you already may know, for the Kaizen #200 milestone, we asked for your feedback and many of you suggested topics for us to discuss. We have been writing on these topics over the

    • Seriously - Create multiple contacts for leads, (With Company as lead) Zoho CRM

      In Zoho CRM, considering a comapny as a lead, you need us to allow addition of more than one contact. Currently the Lead Section is missing "Add contact" feature which is available in "Accounts". When you know that a particular lead can have multiple

    • can I link a contacts to multiple accounts

      can I link a contacts to multiple accounts

    • Rotate an Image in Workdrive Image Editor

      I don't know if I'm just missing something, but my team needs a way to rotate images in Workdrive and save them at that new orientation. For example one of our ground crew members will take photos of job sites vertically (9:16) on his phone and upload

    • Free webinar! Digitize recruitment and onboarding with Zoho Sign and Zoho Recruit

      Hello, Tired of being buried in onboarding paperwork? With the integration between Zoho Sign and Zoho Recruit, a powerful applicant tracking system, you can digitize and streamline the entire recruitment and onboarding process, all from one platform.

    • is it possible to add more than one Whatsapp Phone Number to be integrated to Zoho CRM?

      so I have successfully added one Whatsapp number like this from this User Interface it seems I can't add a new Whatsapp Number. I need to add a new Whatsapp Number so I can control the lead assignment if a chat sent to Whatsapp Phone Number 1 then assign

    • Open Activities view.

      I really like the new views for the open and closed activities inside the deals. But when you are in the tab view instead of the column view you can only complete and edit the open activity there isn't the 3 dot option to be able to delete the activ

    • Potentially Outdated and Vulnerable Chromium Engine Installed by Ulaa Browser Installer

      I just installed Ulaa Browser a few minutes ago. Whats My Browser page shows I am using an outdated Chromium engine meaning I might be vulnerable for security exploits that might have got fixed in the new version.

    • Next Page