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

    • Zoho CRM API Credits & Limits for Workflow

      Hi Team, Just wanted to clarify how the API credits work for Zoho CRM and workflows with custom functions. API Credits are based on your subscription and are set at the account level. You can buy additional credits if needed. For Enterprise customers,

    • How to easy change layout in existing records in Deals?

      Hello, So far i have used only 1 layout in Deals. I have about 1000 records. Now i want to make new layout. So i have 2 layouts: Layout Old (1000 records) Layout New (0 records) How to easy change layout from Layout Old into Layout New for existing records?

    • Change Last Name to not required in Leads

      I would like to upload 500 target companies as leads but I don't yet have contact people for them. Can you enable the option for me to turn this requirement off to need a Second Name? Moderation update (10-Jun-23): As we explore potential solutions for

    • "Copy Field Values from one Module to another" how to use?

      Hi everyone! I'm sorry if this question was already asked, I didn't find it! So let me explain:  In my Tickets module, we have the custome field "customer type" where we indicate if it's a lead, user, etc... In the Contact module I used the "type" field with exactely the same entries. I would like when in the tickets module an operator choose an option that it automatically update it in the contact module. I found the "Copy Field Values from one Module to another" custom function which seems perfect

    • New Leave Type: Compensatory off

      Hi, there is a new Leave Type: Compensatory off. Can someone tell me how to use it, because it sounds it could work for overtime compensation for our techs. Thanks Andreas

    • Introducing bot filtering for accurate analytics

      Dear Zoho Campaigns Users, We're happy to introduce bot filtering to enhance the accuracy of your email campaign analytics. This new feature is designed to help you filter out bot-generated opens and clicks, which will ensure your campaign reports reflect

    • Create custom rollup summary fields in Zoho CRM

      Hello everyone, In Zoho CRM, rollup summary fields have been essential tools for summarizing data across related records and enabling users to gain quick insights without having to jump across modules. Previously, only predefined summary functions were

    • How can I create individual records from a subform

      Hi, I am collecting subform data into a Lead record and I need to create individual records for each row associated to the account when it is converted. How can I do this?

    • Introducing Zia LLM: Zoho’s in-house Generative AI solution for CRM's AI capabilities

      Hello everyone, We're excited to announce the launch of our in-house Large Language Model (LLM) by Zia to power our AI offerings. What is LLM? LLM stands for Large Language Model, a powerful AI technology that processes and generates human-like text based

    • How do I fix this? Unable to send message; Reason:554 5.1.8 Email Outgoing Blocked.

      How do I fix this? Unable to send message; Reason:554 5.1.8 Email Outgoing Blocked.

    • Zoho Desk Validation Rule Using Custom Function

      Hi all, I tried to find the way to validate fields using custom function just like in Zoho CRM but to no avail. Is there a way to do this?

    • 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

    • 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

    • Set another Layout as Standard

      We created a few layouts and we want to set another one to standard:

    • 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

    • Values in multi pick list are not copied to copied deal

      Hi, After a deal is completed in our sales funnel we copy the deal to an automatically created new deal in our project funnel. All fields are copied properly, but only a Multi Pick List is not copied. How can we copy the selected values in this field

    • 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

    • Next Page