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

    • Archive Option in Conversation View

      Hello, I have a suggestion\request to add an "Archive Thread" button in conversation view of Zoho Mail. The best suggestion I have is to put an "Archive Thread" button next to the "Label Entire Thread" button in conversation view. Most users don't just

    • Possible to backdate Stage shifts in Deals module?

      I want to enter my organisation's historical dealflow data into the CRM and it's important that the Stage history is showing the correct dates in the past of when it happened. Is there a way for me to modify the "Modified Time" in the Stage History Related

    • Layout Prompt when creating an oportunity

      Hi There, Is there a way to create a pop-up prompt when I create a new Deal giving me the option of what layout to use based on a certain requirement? So, if the prompt had two options 1. is a new business Deal 2. is a renewal Deal Thanks in advance

    • Conditional layouts - support for multi-select picklists

      Hi, The documentation for conditional layouts says the following: "Layout Rules cannot be used on the following field types: Auto Number Lookup Multi Select Lookup User Lookup Formula File Upload Multi Line" I have a custom module with a multi-pick list

    • Elevating Email Security on Zoho Desk: DKIM Now Mandatory

      Hello Zoho Desk Users! It has been a wonderful journey with you on Zoho Desk. As we welcome 2025, we are strengthening our efforts to ensure a secure and seamless experience for you. To enhance email security, DKIM configuration will be mandatory for

    • How to upload mass inventory quantity adjustment with batch number?

      I wanted to clean-up our inventory list; however, I have trouble performing the task as I don't know how to mass upload inventory adjustment with batch numbers. I don't want to do it manually as there are if not thousands at hundreds of inventory tr

    • Product sale report with margins

      we unable to get the data as per product sale report with margins so we need help in this

    • Amazon.in FBA multiple warehouse integration with Zoho Inventory

      My organisation subscribed to Zoho One looking at the opportunity to integrate Amazon.in with Inventory. But during the configuration, we understood the integration has severe limitations when it involves multiple warehouses in the same Organisation.

    • CLIENT PORTAL (If clients can place orders directly on the portal)

      Zoho client portal is excellent. Everything is there except one thing. Client should be able to place orders directly on the portal. This would enhance the portal and end users will be extremely happy. This suggestion infact came from one of our client.

    • Is there provision to charge the attendees to join the webinar?

      We want to host some webinar of public interest and want to charge them to participate in this. Does this feature in-build in the application? Offcourse, we will be having Razor pay account activated for these purpose.

    • Zoho Vault App for Windows

      Hello, is there a Windows app that can be used to access the passwords saved in Zoho Vault? Thank you

    • Emails take up to 14 hours to arrive and often never arrive at all.

      I've been on hold on your support phone for two hours. I spent an hour waiting to talk to somebody somebody finally picked up. They asked me to give them my ID number and when I found it, they were gone they didn't hang up. They just walked away from

    • Emails take up to 14 hours to arrive and often never arrive at all.

      I've been on hold on your support phone for two hours. I spent an hour waiting to talk to somebody somebody finally picked up. They asked me to give them my ID number and when I found it, they were gone they didn't hang up. They just walked away from

    • Print PO receipt

      Hi I would like to print the PO receipt. There does not seem to be any way to do this. I track batch numbers and printing the PO does not show this. Only the receipt would show the details of the receipt. Currently I print the screen which does not have

    • "We’ve fine-tuned Zoho Inventory..."

      Every day I have this message at the top of my screen. I hit refresh everyday and then the next I see it again. What is being "fine-tuned" on a daily basis?

    • Checklist/ save to onedrive/ a group of items invoicing in Zoho FSM

      hi, is there a way to add a specific checklist to any WO without passing eachtime by the model customization? can we save file such picture directly in our sharepoint ak onedrive? is there any way to add a group of item pre defined to make invoicing easier

    • How can the direct link to a ticket be created from ticket #?

      Our agents will be using ZDesk but we will have to create direct link to tickets in another ERP by providing the Desk Ticket # Is there a way to create the direkt links from the ticket # alone? Do we have to use the API to get the direct links?

    • Allow standard layout to be used/edited as a starting point for canvas

      Hello, I would really love to improve the look of our CRM interface using Canvas but we have spent so much time customising the screens already (in standard view) that the thought of starting from scratch and building everything again, field by field,

    • How to link to/displaya png stored in workdrive in a Creator HTML snippet?

      How to link to/display png stored in workdrive in a Creator HTML snippet? I've tried it as a plain external link and as an iframe. The iframe works but is kinda slow...and I'd prefer to be able to do finer-grained positioning but referencing the png as

    • Has anyone built a ticket export that allows Help Center users to export the tickets shown in the My Area list they are looking at?

      Hi, We are moving to Zoho Desk soon. Our current support system displays an option in our help center allowing customers to export their Open, Closed, or all tickets based on which list they are looking at. We need to offer the same in Zoho Desk help

    • Contemplating moving my site from WordPress to Zoho Sites

      Hi Everyone, We currently find ourselves in a situation where we ant to review and update our current sites content. We are small business owners, not developers. We currently use a wide range of Zoho products. We sometimes think about the possibility of either moving or just starting from scratch on Zoho Sites. I would like to know if anyone has done this and of course the things that need to be considered. We have spent quite a bit of time getting our current site positioned organically and I guess

    • Using AVG in SQL Query

      My current SQL Query is: SELECT "Client Info", avg("Revenue") FROM "Funded Deals" GROUP BY "Client Info" The current table that this is creating: Client Info avg(Revenue) Previous 4175 1st - New 3411 1st - Old 3013 Renew 3069 While this works as I had

    • Unified customer portal login

      As I'm a Zoho One subscriber I can provide my customers with portal access to many of the Zoho apps. However, the customer must have a separate login for each app, which may be difficult for them to manage and frustrating as all they understand is that

    • Tracking Implementations

      We create Opportunities (Renamed Deals) with associated Quotes (renamed Products and Services). When we close the deal, we want to be able to track the implementation of each product separately. For instance, the client may have ordered Item A, Item B

    • Is this link the transparent pixel used to track opens?

      Could someone please help me identify this highlighted link? It is automatically created by Zoho and a lot of contacts receiving campaigns will click on this link. I don't believe that it is the "update your preferences link" because on the Link Clicks

    • Zoho desk desktop application

      does zoho desk has a destop applicaion?

    • How can I view Help Center articles in 'Sandbox' mode?

      I have published some help center articles but when I try to preview the knowledge base page, it says 'We have no content to display'.

    • Is this possible with Campaigns?

      My company is currently moving CRM's from Monday to Zoho One. Currently, our marketing lead process is send out 7 sms messages over 14 days if the lead is in a certain status. If we don't get a response the lead is put into a "Closed" status. Do we buy

    • Tracking leads through the sales process

      Our leads are being generated via paid google ads and are arriving to us with UTM data showing lead sources, campaign mediums and campaign names. I want to track the progress of those leads as they migrate through our sales funnel while maintaining a

    • Error 403: Forbidden When Updating Email Signature via API

      Hi Zoho Desk team, First, congratulations again on the excellent Zoho API. But, I’m encountering an issue while attempting to update an email signature via the API. Whenever I make a request to update the signature, the response returns an HTTP 403 Forbidden

    • Opening & working multiple tickets

      We work in multiple tickets at the same time. Currently to do this, we have to open multiple instances of Desk.  Is there a way to do this by just opening multiple ticket tabs within 1 instance of Desk?  

    • Different content per social media account..

      Is there a way to add different content per social media account on one post?

    • Merge tickets

      Hello, I am attempting to merge two tickets; however, the option to merge does not appear to be available. Could you kindly confirm if this feature has been relocated or removed? Additionally, could you please provide guidance on the correct process to

    • Add "Merge by Ticket ID" Option on Ticket Screen

      Dear Zoho Team, We would like to request a new feature for the ticket interface in Zoho Desk. Specifically, we propose adding a button to the ticket screen that allows users to merge the current ticket with another ticket by directly providing the second

    • Using tickets to train Zia

      Hi Team, I would like to know if there is any way that Zia can also learn from previous tickets in addition to the articles from the knowledge base. Since we have most of our knowledge curerently in the tickets and that this is hard to combine into a

    • Unable to delete Junk Lead and Not Qualified from the Lead Status field

      Are Junk Lead and Not Qualified default fields or something that cannot be deleted? I have gone into the Leads module and made sure there are no records using these values. Other values have a minus sign that allows me to remove them, but these two fields do not have that option.

    • Welcome Link Expired

      Hi The links sent to the users didn't get clicked on in time and now all the links have expired. Is there a way to send a new link without deleting them and re-adding them>

    • Alert for Back Navigation in Zoho Creator Widgets on Mobile Apps

      In Zoho Creator widgets, when a user navigates back on mobile devices, the data within the widget is reset. This leads to a loss of any unsaved changes or inputs, causing frustration for users. To enhance user experience, we need to implement a confirmation

    • Zoho Developer Community Monthly Digest - December 2024

      Hello everyone! As we step into the new year, let’s reflect on the strides we’ve made together and gear up for the exciting opportunities 2025 holds. This month’s digest highlights key updates, engaging discussions, and upcoming events designed to keep

    • Allow "add new" option to picklists and multiselection fields from add or edit pages

      Hello zoho, please insert an add option (ie +)sign) to pick and multiselect fields so we can add new options while entering or editing records. For example. in my lead module, while adding a new record, I realized I had a new lead source. I went to my

    • Next Page