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!



    Access your files securely from anywhere

        All-in-one knowledge management and training platform for your employees and customers.








                              Zoho Developer Community



                                  Bootcamp
                                  Community
                                  Pricing
                                  Webinars
                                  What's New
                                  Integrations
                                  Contact Support
                                  Contact Sales
                                    Zoho Survey Resources
                                      Features
                                      Survey Templates
                                      Integrations
                                      Community
                                      iOS Mobile Surveys
                                      Pricing
                                      Android Mobile Surveys
                                      Insurvey Blogs
                                      Insight Blogs
                                      Tips & Tricks





                                                  Latest Feature Updates

                                                    • Desk Community Learning Series


                                                    • Digest


                                                    • Functions


                                                    • Meetups


                                                    • Kbase


                                                    • Resources


                                                    • Glossary


                                                    • Desk Marketplace


                                                    • MVP Corner


                                                    • Word of the Day


                                                    • Ask the Experts




                                                        Zoho SalesIQ Resources


                                                              Manage your brands on social media
                                                              Access Zoho Social

                                                                Zoho Pagesense Resources


                                                                    Zoho TeamInbox Resources

                                                                      Zoho DataPrep 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

                                                                                        • CRM Community Learning Series

                                                                                          CRM Community Learning Series


                                                                                        • Kaizen

                                                                                          Kaizen

                                                                                        • Functions

                                                                                          Functions

                                                                                        • Meetups

                                                                                          Meetups

                                                                                        • Kbase

                                                                                          Kbase

                                                                                        • Resources

                                                                                          Resources

                                                                                        • Digest

                                                                                          Digest

                                                                                        • CRM Marketplace

                                                                                          CRM Marketplace

                                                                                        • MVP Corner

                                                                                          MVP Corner









                                                                                            Design. Discuss. Deliver.

                                                                                            Create visually engaging stories with Zoho Show.

                                                                                            Get Started Now


                                                                                              Zoho Show Resources

                                                                                                Zoho Writer

                                                                                                Get Started. Write Away!

                                                                                                Writer is a powerful online word processor, designed for collaborative work.

                                                                                                  Zoho CRM コンテンツ




                                                                                                    Nederlandse Hulpbronnen


                                                                                                        ご検討中の方




                                                                                                                • Recent Topics

                                                                                                                • Homepage not assignable to group

                                                                                                                • MS Teams for daily call operations

                                                                                                                  Hello all, Our most anticipated and crucial update is finally here! Organizations using Microsoft Teams phone system can now integrate it effectively with Zoho CRM for tasks like dialling numbers and logging calls. We are enhancing our MS Teams functionality

                                                                                                                • Automation#22 Track Ticket Duration at Specific Status

                                                                                                                  Hello Everyone! Welcome back to the Community Learning Series! Today, we explore how Zylker Techfix, a gadget servicing firm, boosted productivity by tracking the time spent at a particular ticket status in Zoho Desk. Zylker Techfix customized Zoho Desk’s

                                                                                                                • Automation#23: Automate Guided Conversations in Zoho Desk with Business Hours

                                                                                                                  Hello Everyone, This week's edition introduces a custom function designed to automate Guided Conversations in Zoho Desk, based on your business hours. With this feature, you can align the bot's behavior with your business schedule, ensuring a smooth and

                                                                                                                • Address changes in quote form

                                                                                                                  When entering a quote, the first piece of information required is the Account, which properly populates the billing and shipping address fields. Then I use the lookup function to select a contact, and when I do, the billing and shipping addresses are

                                                                                                                • Automation#24: Auto-Update custom field from Accounts to Tickets

                                                                                                                  Hello Everyone! Welcome back to the Community Learning Series! This episode dives into how Zylker Techfix streamlines account-related ticket references. Previously, employees had to manually check account details to retrieve specific customer information,

                                                                                                                • Kaizen #227 : Client Script Support for List Page (Canvas)

                                                                                                                  Hello everyone! Welcome to another week of Kaizen. In today's post lets see how Client Script can be used in Canvas List Page to mask sensitive information from specific roles and add colors to Canvas List Page records based on custom criteria.This use

                                                                                                                • Implement Date-Time-Based Triggers in Zoho Desk

                                                                                                                  Dear Zoho Desk Support Team, We are writing to request a new feature that would allow for the creation of workflows triggered by specific date-time conditions. Currently, Zoho Desk does not provide native support for date-time-based triggers, limiting

                                                                                                                • Automation#25: Move Tickets to Unassigned When the Owner Is Offline

                                                                                                                  Hello Everyone, Welcome to this week's Community Series! 'Tis the holiday season—a time when work often takes a brief pause. The holiday spirit is in full swing at Zylker Techfix too, with employees taking some well-deserved time off. During this period,

                                                                                                                • Automation#27: Retain Ticket Owner on Moved Tickets

                                                                                                                  Hello Everyone! This week, we present to you a custom function that retains the ticket owner when a ticket is moved from one department to another. Here’s more to help you understand the custom function: At Zylker Techfix, Alex, the Support Engineer manages

                                                                                                                • Automation#28 Notify Agents on Article Expiry

                                                                                                                  Hello Everyone! This week, we’re bringing you a feature that notifies your team when articles in the Knowledge Base are set to expire to keep your content relevant and helpful for customers. The Zoho Desk's Knowledge Base is an asset for customers to

                                                                                                                • Automation#29 Retain ticket status on moved tickets

                                                                                                                  Hello Everyone, Hear out Zylker Techfix’s Success Story on Smoother Ticket Transitions! Zylker Techfix, a gadget servicing firm committed to quick repairs and timely deliveries, faced a challenge when ticket statuses changed automatically while moving

                                                                                                                • Automation#32:Auto Add New Portal Users to the Help Center User Groups

                                                                                                                  Hello Everyone, Introducing a custom function that automates the process of adding new portal users to Help Center user groups, making user management effortless! By default, Zoho Desk allows you to assign new portal users to groups manually. But with

                                                                                                                • Automation#34 : Automate Email threading for Ticket notification

                                                                                                                  Hello Everyone, It's been a while since we've presented an automation. However, our community has been buzzing with ideas, use cases, and discussions with our community experts and Ask the Experts session. So, here we are again, presenting an automation

                                                                                                                • Automation#35 : Auto-Add Comments under the Owner's Name in Tickets via Macros

                                                                                                                  Hello Everyone, This week's custom function provides simple steps to configure a Macro for adding comments to tickets with the name of the Comment owner. When managing tickets, you can use the Comment feature to communicate internally with your team and

                                                                                                                • Automation#36: Auto-create time-entry after performing the Blueprint transition

                                                                                                                  Hello Everyone, This week’s edition focuses on configuring a custom function within Zoho Desk to streamline time tracking within the Blueprint. In this case, we create a custom field, and request the agent to enter the spending time within the single

                                                                                                                • Automation#33: Automate Splitting Names for Existing Contact Records

                                                                                                                  An organized directory – who doesn't love one? Previously, we explored how to split contact names into First Name and Last Name for new contacts in Zoho Desk. But what about existing contacts already in your database? This week, we bring you a custom

                                                                                                                • Workqueue

                                                                                                                  I really like the idea of the Workqueue generally - it will be really useful. What it seems to lack however, is the ability to customise it properly. I want to be able to show a custom view rather than just "My Leads" and "Leads Assigned in Last 3 hours".

                                                                                                                • Webform & spam

                                                                                                                  Hi, We set up 2 webform on our website, fowarding the content to Zoho CRM. Since it has been opened up, we are getting lot of spam message (for now about 20 a day). To lower the amount of false new leads we added the captcha field and new enquieries are

                                                                                                                • Zoho CRM Web form page URL

                                                                                                                  Hi there, I am getting quite a bit of spam through my Zoho CRM Web form and want to restrict the URLs it is submittable from. I can see that I can add Location URLs but I need to be able to just add a domain so can I enter mydomain.com/* to cover all

                                                                                                                • Receiving too many Spam Leads. Why?

                                                                                                                  I am receiving so many junk leads from web forms created by zoho's platform. The junk queries are increasing day by day and are affecting our business. I am continuously following up with zoho team from the past one year but not getting any satisfactory

                                                                                                                • Mail Merge is not working properly as far as the AUTOMATE section is concerned

                                                                                                                  Hi there, I created a Mail Merge template for the Deal module. I would like Deal owners to mail merge their Deal records, download the Mail Merge document as a Word doc and make a few changes before sending it to the customer. Thing is, neither the "Merge

                                                                                                                • Canvas Detail View Related List Sorting

                                                                                                                  Hello, I am having an issue finding a way to sort a related list within a canvas detail view. I have sorted the related list on the page layout associated with the canvas view, but that does not transfer to the canvas view. What am I missing?

                                                                                                                • project name field issue- n8n

                                                                                                                  Hey guys, I have a question. I want to create a new product using the workflow. The problem is with the product name field; I don't know how to fill it in. The workflow starts with retrieving information from the leads table, retrieving links to scrape

                                                                                                                • Function #20: Custom calculation in item table of invoices

                                                                                                                  When you create an invoice in Zoho Books, the 'Amount' of a line item is typically calculated as the product of the "Quantity" and the "Rate" of the item. For instance, if an item has a sales rate of $50 and a quantity of 5 is sold, then the amount would

                                                                                                                • Critical:- Eneble TDS filing for 26Q from the zoho book

                                                                                                                  We currently extract TDS data from Zoho Books and manually input it into a separate TDS software to generate the FUV file and file returns. Previously, while using Tally, we benefited from an integrated feature that seamlessly recorded transactions and

                                                                                                                • How to track repeat customers?

                                                                                                                  I own a food business and every order is entered into Zoho with: a unique Customer ID total order amount date of order With this information, I want to be able to see a list of my "best" customers. In other words, descending lists arranged according to:

                                                                                                                • Zoho Books - Breaking A Working App

                                                                                                                  We've been using Zoho for many years now. Across all apps, entering phone numbers in standard formats was enabled in all apps. These formats are: xxx.yyy.zzzz xxx-yyy-zzzz (xxx) yyy-zzzz and we were able also to add extension numbers in these formats:

                                                                                                                • Build data protection into your support

                                                                                                                  At Zoho, privacy is our principle. Every Zoho product is built with privacy as the foundation and the finishing touch, guiding every decision we make. Security, privacy, and compliance are woven into the software development lifecycle, starting from how

                                                                                                                • Conditional formatting: before/after "today" not available

                                                                                                                  When setting conditional formatting, it only allows me to set a specific calendar date when choosing "Before" or "After" conditions. Typing "today" returns the error "Value must be of type date". Is there a workaround? Thanks for any help!

                                                                                                                • Display Client Name in Zoho Creator Client Portal Dashboard

                                                                                                                  Hello Zoho Creator Team, We hope you are doing well. Zoho Creator recently introduced the option to set a client’s display name in the Client Portal settings, which is very helpful for providing a personalized portal experience. However, there is currently

                                                                                                                • Customizable UI components in pages | Theme builder

                                                                                                                  Anyone know when these roadmap items are scheduled for release? They were originally scheduled for Q4 2025. https://www.zoho.com/creator/product-roadmap.html

                                                                                                                • 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.

                                                                                                                • Feature Request - Set Default Values for Meetings

                                                                                                                  Hi Zoho CRM Team, It would be very useful if we could set default values for meeting parameters. For example, if you always wanted Reminder 1 Day before. Currently you need to remember to choose it for every meeting. Also being able to use merge tags

                                                                                                                • Windows Desktop App - request to add minimization/startup options

                                                                                                                  Support Team, Can you submit the following request to your development team? Here is what would be optimal in my opinion from UX perspective: 1) In the "Application Menu", add a menu item to Exit the app, as well as an alt-key shortcut for these menus

                                                                                                                • Ability for admin to access or make changes in zoho form without asking for ownership

                                                                                                                  Currently in zoho form only form owner can make the changes in the form and if someone else has to make changes then we have to transfer the ownership to them and even admin also cant access it . So i think admin must have the ability or option to access

                                                                                                                • Issue with WhatsApp Template Approval and Marketing Message Limit in Zoho Bigin

                                                                                                                  We are facing issues while creating and using WhatsApp message templates through Zoho Bigin, and we request your clarification and support regarding the same. 1. Utility Template Approval Issue Until December, we were able to create WhatsApp templates

                                                                                                                • Zoho CRM Calendar View

                                                                                                                  Hello Zoho team, We need desperately a calendar view next to list, kandan and other views. I think it should be easy to implement as you already have the logic from Projects and also from Kanban View in CRM. In calendar view when we set it up - we choose

                                                                                                                • Camera

                                                                                                                  I can sign on to a meeting and see the other participants, but my screen is dark. The instructions for Zoho "Camera Settings" say "click on lock icon in address bar," but I don't see that icon! Suggestions?

                                                                                                                • What is Workqueue and how to hide it?

                                                                                                                  Hi， My CRM suddenly have this "Workqueue", may I ask how to set the permission of this tab?

                                                                                                                • Next Page