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

        • Save the pdf report from a registration form in a Folder

          Through Zoho Forms I created a registration form with quite a lot of rules to handle different variables (TEAM types, payment in installments, etc.), and the result is pretty good. The automatic PDF that is sent to the respondent upon submission is already

        • zoho forms integration to zoho work drive

          Scenario: A user fills out a Zoho Form, entering details such as email, mobile number, and other required information, and uploads supporting documents like PAN, Aadhaar, etc. Upon submission, the data is available in Zoho Forms Reports. Requirement:

        • Zoho Forms to Zoho CRM Integration failed - can I restart it?

          The integration of Zoho Form to Zoho CRM has failed. Is there a way for me to restart it for the impacted entry?

        • insert an equation, but in document, it shows an image not available.

          I'm new to Zoho writer and used Zoho writer in desktop app version . When I inserted an equation, I got an image not available sign. Any help is appreciated. Thanks, Charles

        • Zoho Desk Android app update - Swipe action customization

          Hello everyone! We have brought in support for the swipe action customization in latest version(v2.9.13) of the Zoho Desk Android app update, enabling you to configure left and right swipe gestures on tickets to carry out the actions swiftly without opening

        • Import KB template OR Export template for zoho desk?

          Greetings. Can you tell me if there is a way to get an EXPORT of my KB articles? OR is there a template you supply for importing KB articles into my zoho desk? I am looking for a method of understanding what fields can be imported, and what their possible

        • XML format to import knowledgebase into Zoho Desk

          Hi, We just started to use Zoho Desk and want to import our knowledgebase from our old support system (Freshdesk) to Zoho Desk. Can anyone give us information about the format of xml file to import? There is no explanation on the related page.

        • Zoho Desk integration with Power BI

          Hi, I want to be able to create a Power BI report which has live updates of ticket data from zoho desk, is this possile at all? Thanks Jack

        • Arranging Ticket Templates

          Is there any way to arrange our ticket templates? It doesn't look very organised when it's just arranged according to when they were created. We want the list to look more organised, by arranging/grouping them by topics, or even just by alphabetical

        • What they mean with "Portal"?

          I just downloaded this app to take my personal notes on digital art studio because it seemed to me the most comfortable app to do it, I use it very often, what do they mean by “no activity on your portal”? I have about 1 year of work here and I don't

        • Inactive User Auto Response

          We use Zoho One, and we have a couple employees that are no longer with us, but people are still attempting to email them. I'd like an autoresponder to let them no the person is no longer here, and how they can reach us going forward. I saw a similar

        • favorites no longer listed

          Hello, I can no longer navigate to my Favorites from the pulldown at the top of my grid view (see attached screenshot). I wasn't able to find it anywhere! Please help me display my Favorites. Thank you!

        • Notecards Disappeared

          Got a new phone. Downloaded and signed in Zoho Notebook. Not finding the Note cards. Just Empty Note books. Frustrating.

        • Table Errors

          Hello, I'm new to Zoho Notebook and using it on several Mac/Apple devices. My question is regarding tables: Why do they become broken, and how to fix the error without retyping all my data? (Please see the screenshot attached.)

        • Aggregating the First Value in the Group By of a dataset

          Hi I am trying to get the following Aggregate Formula to work in my chart, but cannot seem to get the right format. I have a series of data that I am running an include_groupby and want to SUM only a column in the first row of each group. So for example.

        • Online Calculator with Zoho Forms?

          I'd like to build a custom calculator on my website. Zoho Forms seems to offer all the fields for basic calculations performed live without pressing any "Calculate" buttons. Unfortunately, there is still that "Submit" button at the bottom. There is nothing

        • Zoho Tables instead of Zoho Creator Spreadsheet reports <3

          That would make my day for sure. Zoho Creator is create, but miss data entering as AirTable/Spreadsheet can. Seeing Zoho putting effort in this makes me think maybe one day we could see a similar interface for Zoho Creator spreadsheet reports. B.

        • Zoho Sheet - Desktop App or Offline

          Since Zoho Docs is now available as a desktop app and offline, when is a realistic ETA for Sheet to have the same functionality?I am surprised this was not laucned at the same time as Docs.

        • Notebook Stack

          Hi Everyone I Hope you´re fine, I´m sorry if this idea was posted before (I made a search but I haven´t find anything related). So, Having the possibility of stacking notebooks would be an interesting way to order notebooks that correspond to the same

        • Writing on sketch cards is bugged when zoomed in

          When zoomed in, it writes a noticeable distance above or to the side of where you're actually trying to write. The further you're zoomed in, the more noticeable it is. Zooming is also entirely absent on the desktop version.

        • Swipe between notes on iPhone

          It'd be convenient if I could move from one note to the next in a notebook simply by swiping left to right.

        • Sales IQ chat is not working in signed android apk

          I have integrated ZOHO sales IQ support chat and i have followed each step and its working fine in my development build but when i create signed APK for it. Chat does not work in it and showing awaiting for detail. I previously asked the same query but

        • COQL order by COUNT not working

          Dear community, I am trying to get a list of deal amounts per planner working on it and sorted to get see who has the least amount of deals. For some reason, I am unable to use sort by in combination with a COUNT. My original code was: query = "select

        • I want to duplicate a report and name it something else

          Hi, I have created a report, and now want to reproduce it and call it something else. so that I will end up with TWO separate reports with different titles. Please tell me how do I copy / reproduce a report please

        • Zoho CRM: Sales Rep Professional Certification Program on Coursera

          We are happy to share that we have published the Zoho Sales Representative Professional Certificate in partnership with Coursera, a leading platform for online learning and career development that offers access to courses and degrees from leading universities

        • OS X Notebook quits immediately upon launch

          NoteBook for OS X (Sequoia, but also under Sonoma) always quits immediately upon launch (so I cannot use the "Attach user log" option). I've restarted my MacBook but the problem persists. If it helps, attached is a diagnostic report from Library>Log

        • Can External users upload files or images to WorkDrive?

          I want to know if it is possible for someone externally through a link and PW be able to upload files and images onto WorkDrive?

        • Multi-line fields character limits

          Is there a way to set the character limit higher on multi-line fields so that we are not losing information pasted into the field? When the text is entered or pasted, there is no error to say that the text is too large. After saving and going back to view most of the text is gone.   Also, when viewing the resume, the text is not wrapped in the multi line fields and can t be read without scrolling across the page.

        • Taz bot not working — What should I do to resolve this issue?

          I am experiencing issues with the Taz bot in Zoho Cliq—not receiving responses or it does not seem to work as expected. Could you please explain why the Taz bot might not be functioning and what steps I should take to resolve this issue? Thank you!

        • Zoho Calendar soft bounce on @hotmail.com and @yahoo.com email addresses

          Hello, our Zoho calendar recently does not send the calendar invites to emails with hotmail and yahoo domains and comes back with a "soft bounce". other domains like Gmail works fine. Also sending "email" to the same emails to the above domains work well

        • OneNote Migration

          I am trying to migrate two notebooks from OneNote. For five days now I have had no notification that migration has completed and the migration page show 50% complete - one notebook completed one not finished. It just stays like this. I am unable to cancel

        • Set various time slot reminders for task and event

          Hi I would like known if there is possibility to set various time reminders for a task or event like we have the possibility to do in google calendar or google task. For example I'am creating an event or task and I want to be alerted before 30min and

        • Zoho Calendar not functioning---cannot edit, add attendees, etc.

          Hello, My calendar is acting strange. I'm using Chrome as my browser and pop ups are not blocked (the calendar worked fine yesterday). When creating an event, I'm not able to "edit" the event and add attendees, etc. The link is non-responsive. I cannot

        • Spilt Axis for stacked column and line graph

          Each month around this time I prepare a business review deck. One of the biggest annoyances I have with Zoho, also happens to be something that most other platforms have provided for a long time now, and that is being able to create a chart with stacked

        • Pin a note on top

          Dear Zoho Notebook Team, Please highly consider adding ability to pin a note on top and arrange pinned notes. I have a lot of notes that I want to pin important ones on top and this feature is missing badly. Thank you.

        • Windows 11 app ver 2.2.8

          I have been trialing Zoho Notes syncing between my PC and iphone. No problems with iphone but the Windows 64 bit app ver 2.2.8 was very buggy and would lock up completely, needing a Control Alt Delete etc to close it down. It seemed to be connected to

        • Deluge Script: Onboarding → Access Form

          Hello everyone, Edit: Sorry, I think I put this topic in the wrong section. I’ve recently run into an issue that’s been giving me a bit of a headache for the past few weeks. Context: This is my first time using Deluge to create a script, but it’s not

        • Windows Device Authentication

          We have recently started using ManageEngine, and my boss saw a device management feature in the Zoho One directory. We thought it would either help give us more intergration into Zoho one through bringing ManageEngine services through Zoho one. Or, it

        • How can I change spell check language?

          I cannot find the way to change spell check language. My "display language" is English, and I want to have the same one for Spell Check, but it is Russian!!! How can I change it? In one of your explanations you mentioned that I have to choose it from

        • Mail is so slow - doesn't even work!

          Mail has been getting slower and slower - and today it's not even pulling up emails in either Inbox or Unread. This is beyond frustrating since email is a big part of business. Sent a request through the useless help portal - no response. Called the useless

        • Next Page