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.





      Zoho Campaigns Resources


        • Desk Community Learning Series


        • Digest


        • Functions


        • Meetups


        • Kbase


        • Resources


        • Glossary


        • Desk Marketplace


        • MVP Corner


        • Word of the Day


        • Ask the Experts


          Zoho CRM Plus Resources

            Zoho Books Resources


              Zoho Subscriptions Resources

                Zoho Projects Resources


                  Zoho Sprints Resources


                    Zoho Orchestly Resources


                      Zoho Creator Resources


                        Zoho WorkDrive Resources



                          Zoho CRM Resources

                          • CRM Community Learning Series

                            CRM Community Learning Series


                          • Tips

                            Tips

                          • Functions

                            Functions

                          • Meetups

                            Meetups

                          • Kbase

                            Kbase

                          • Resources

                            Resources

                          • Digest

                            Digest

                          • CRM Marketplace

                            CRM Marketplace

                          • MVP Corner

                            MVP Corner




                            Zoho Writer Writer

                            Get Started. Write Away!

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

                              Zoho CRM コンテンツ



                                ご検討中の方

                                  • Recent Topics

                                  • Print Sales Orders, Purchase Orders or Invoices from API

                                    Hello, Is it possible to use the print option that is available in Sales Orders Purchase Orders and Invoices with the API?. I don't see any information in the docs about this. Thanks
                                  • How to show a hided report??

                                    in CRM Report , I clicked Hide incidently , how to show the floder again? Nowhere I can find the hided report floder...
                                  • Converting Customer Invoice to Purchase Bill

                                    Hi, In my service-based business, I sometimes create the customer invoice first, and later I receive the purchase bill from the vendor for the same job. Is there any option in Zoho Books to: Convert a customer invoice into a purchase bill, or Link/associate
                                  • Email tracking inquiry

                                    I am trying to track when my emails are opened and clicked like I previously did in HubSpot. HubSpot pretty much did the entire process automatically. After digging through, I finally found in settings --> emails --> BCC Dropbox there is an email I can
                                  • Mass Update of Lookup Fields not possible

                                    Hello List I've created a custom field for Leads and Contacts 'Current Campaign'. This is very Handy as I can filter leads and then related them to a campaign. Everything ready, but then I realized that mass update doesn't work for lookup fields... a
                                  • Collapsible Sections & Section Navigation Needed

                                    The flexibility of Zoho CRM has expanded greatly in the last few years, to the point that a leads module is now permissible to contain up to 350 fields. We don't use that many, but we are using 168 fields which are broken apart into 18 different sections.
                                  • Quick Create needs Client Script support

                                    As per the title. We need client scripts to apply at a Quick Create level. We enforce logic on the form to ensure data quality, automate field values, etc. However, all this is lost when a user attempts a "Quick Create". It is disappointing because, from
                                  • Download Attached Files

                                    Hi everyone, Brand new to Zoho Creator.  I have a form with a subform. The subform has a field for "File Upload"   I have this in a subform to allow multiple files to be uploaded to the parent form. Once the files are uploaded, how can i download or view them?   Is this a setting I am just not seeing? If there isn't a way to download them, could i create another form field that dynamically creates the file's URL?  That way a user can click the URL to get to the file? Any help with this would be greatly
                                  • Ticket layout based on field or contact

                                    Hi! I want to support the following use-case: we are delivering custom IT solutions to different accounts we have, thus our ticket layouts, fields and languages (priority, status field values should be Hungarian) will be different. How should I setup
                                  • No funcionan correctamente el calculo de las horas laborales para informe de tickets

                                    Hola, estoy intentando sacar estadísticas de tiempo de primera respuesta y resolución en horario laboral de mis tickets, pero el calculo de horas en horario laboral no funciona correctamente cree los horarios con los feriados : Ajusté los acuerdos de
                                  • Zoho Mail Android app update: Set out of office response exclusively for organization members and external users, response interval

                                    Hello everyone! We have now introduced an option to configure out of office messages exclusively for organization members and external users within the Zoho Mail app. Additionally, now you can also customize response intervals for the Out of office messages.
                                  • Feature Request: Detailed View - Related Block Links!

                                    Desperately need a view record link option on records displaying in the related blocks on a Detail View. For the love of god, please add this feature. Thank you!
                                  • Sub-Form Padding in CSV Export

                                    Hi, When you use the Sub-Form, and for example you have a Date Field on the Main Page, then Option 1 and Option 2 fields on the Subform, when you export this to CSV the Date column will only have the Date in 1 row, the first row, it would be nice to pad
                                  • Dependent / Dynamic DropDown in ZohoSheets

                                    Has anyone figured out a way to create a Dropdown, the values of which is dependent on Values entered in the other cell ?
                                  • How do I change the order of fields in the new Task screen?

                                    I have gone into the Task module layout, and moving the fields around does not seem to move them in the Create Task screen. Screenshot below. I have a field (Description) that we want to use frequently, but it is inconveniently placed within the More
                                  • Zoho → ShipStation Integration – Sales Order–Driven Fulfilment Workflow

                                    Hello All, I’m reaching out to explore the best way to integrate a shipping tool into our inventory which will speed our process up. We are looking to integrate ShipStation into our existing order-to-fulfilment workflow, as we’re keen to standardise on
                                  • IA ou je peux trouver comment utiliser IA

                                    Je voudrais utiliser IA dans l'interface zoho pour m'aider quand j'ai des questions de rôle partage ou autre configuration d'automatisation, j'utiliser ChatGPT externe mais il ne connait pas toujours l'interface zoho et les réponses sont parfois longue
                                  • Data Processing Basis

                                    Hi, Is there a way to automate the data processing for a candidate every time an application arrives from job boards, without requiring manual intervention? That is, to automatically acquire consent for data processing. I've seen a workflow that allows
                                  • Disable Zoho Inventory Tracking / Delink Zoho Books & Inventory

                                    We have integrated zoho inventory with zoho books? Now after a long time, we want to disable inventory tracking and delink these 2 modules. Zoho says we cant do it. Anybody else going thru the same ? Any possibility at all? Why does zoho not allow to
                                  • Zoho vault instal on windows

                                    I am trying to use Zoho Vault Desktop for Windows, but I am unable to complete the sign-in process. Problem description After logging in to my Zoho account and clicking Accept on the authorization page, nothing happens. The application does not proceed
                                  • ZOHO GLITCHES

                                    Ok, you guys have done a great job at building a platform that has the potential to surmount the competition but these glitches are becoming more than frustrating! This is beyond annoying, I'm trying draft lawsuits and type up privacy and refund policies
                                  • Please, make writer into a content creation tool

                                    I'm tired of relying on Google Docs. I'm actually considering moving to ClickUp, but if Writer were a good content creation tool instead of just a word processor, I would finally be able to move all my development within the Zoho ecosystem, rather than
                                  • Notification to customers when I use a Zoho function

                                    Hi all, I tried searching the community but couldn't find anything about it. I noticed that the customer receives the notification of reopening the old ticket but does not receive the notification of opening a new ticket when I use the function: "separate
                                  • Date Filters in Zoho Desk Dashboard

                                    Hello Team, Currently, in the Zoho Desk dashboard, the date filter is available only for daily, weekly, and monthly views. Could we also add a yearly date filter to allow filtering by an entire year? Additionally, in the custom date filter, it is currently
                                  • Mobile app - offline

                                    If I made a couple of forms and my field guys had the mobile app and were somewhere without signal, could they open the app, complete and sumbit a form and have it upload when they are back in signal (we need different info at different jobs and I'm trying
                                  • Consumption based inventory

                                    I am currently using Zoho Books for my hospitality business, which includes lodging and restaurant services. We purchase many items in bulk for storage and consumption as needed. I'd like these items to be recorded as inventory when purchased and categorized
                                  • Zoho Survey reminder settings are extremely confusing

                                    Hi, I just want to set 3 reminders, one week apart from the first email out. Your form is too confusing and I don't understand. Can you simplify and be more specific regarding the language used on the form ?
                                  • Zobot drop down list

                                    Hi, I am trying to create a drop down list in Zobot by creating a plug. I think I am close but I just can't get it over the line and was hoping that someone could help me. I had a little bit of help getting the script started (hence the comments) // Deluge
                                  • How to compare a subform lookup field that allows multiple entries when edited

                                    I have a form with a subform with multiple fields. One of the fields is a lookup field that allows a multi select. On edit validation, I want a workflow to execute only when the entries in that subform field has changed. The old. function is not working
                                  • Translation of Tooltip Messages

                                    The descriptive help messages should be available to provide translations for.
                                  • Function #53: Transaction Level Profitability for Invoices

                                    Hello everyone, and welcome back to our series! We have previously provided custom functions for calculating the profitability of a quote and a sales order. There may be instances where the invoice may differ from its corresponding quote or sales order.
                                  • Business Day Logic Update: More Accurate Scheduling for Your Workflows

                                    Hello everyone, We’re improving how business-day calculations work in workflows, especially when triggers happen on weekends. This update ensures that offsets like +0, +1, and +2 business days behave exactly as intended, giving you clearer and more predictable
                                  • Lead Blueprint transition in custom list view

                                    Hi, Is It possible to insert the Blueprint transition label in a custom Canvas list view? I am using Lead module. I see the status, but it would be great if our users could execute the Blueprint right from the list view without having to enter the detailed
                                  • Email Notifications not pushing through

                                    Hi, Notifications from CRM are not reaching my users as they trigger.  We have several workflow triggers set up that send emails to staff as well as the notifications users get when a task is created for them or a user is tagged in the notes.  For the past 6 days these haven't been coming through in real time, instead users are receiving 30-40 notifications in one push several hours later.  This is beginning to impact our daily usage of CRM and is having a negative effect on our productivity because
                                  • Debit opening balances of vendors

                                    Dear colleagues: I am looking at the trial balance as on 31st March 2024, and punching opening balances (1st April 2024) in Zoho Books. Vendors have credit balances, by its nature, but some of our vendors have debit balances as well (e.g., we have paid
                                  • Is there an equivalent to the radius search in RECRUIT available in the CRM

                                    We have a need to find all Leads and/or Contacts within a given radius of a given location (most likely postcode) but also possibly an address. I was wondering whether anyone has found a way to achieve this in the CRM much as the radius search in RECRUIT
                                  • Allow Text within a Formula

                                    Hi, I would like to be able to use this for others things like taking an existing Date Field and copying its value, so by entering getDay(Date)&"-"&getMonth(Date)&"-"&getYear(Date) it results in 01-02-2026. And then when the Date is changed so is this
                                  • Change Number Field to Decimal Field

                                    Hi, It would be nice to be able to change the field type without having to delete it and create a new one, messing up the database and history. Thanks Dan
                                  • Pipeline.Company Name field shows up as numbers! [Bigin Developer Console > Component > URL]

                                    Hi there, I am setting up to invoke URL to send infromation zoho bigin > zoho forms with company name pre-fill in the form. however when I use : ${Pipelines.Company Name} field it shows up as a string of number instead of words. Help.
                                  • Add specific field value to URL

                                    Hi Everyone. I have the following code which is set to run from a subform when the user selects a value from a lookup field "Plant_Key" the URL opens a report but i want the report to be filtered on the matching field/value. so in the report there is
                                  • Next Page