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






                    Zoho Campaigns Resources




                          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

                                                                                                            • Using Contains as a filter

                                                                                                              We are using Zoho Reports, ServiceDesk Plus analytics. I do not see how to create a report filter using Contains comparison of a string values, is one string contained in another. For example, Task Title contains the word Monitor. Is this possible in Zoho Reports?  This reporting feature is available in SDP reporting. Thanks in advance, Craig Rice

                                                                                                            • Mass import of documents into Zoho Writer

                                                                                                              I'm using Google's word processor at the moment but feel that Zoho does a better job (on the online apps market). Iwant to move my documents (about 50-70) to Zoho but it seems to me that I have to import them seperately. Is it already possible to upload several documents at a time or is this a forthcoming feature? Cheers Rolli :?:

                                                                                                            • Error 400 Booking

                                                                                                              Added a custom domain to Booking. Am Getting a SSL Error that has some other domain on the SSL and giving a 400 error. Followed instructions and it stated it verified our domain.. However it is not working. Please Help!

                                                                                                            • Set off Unearned Revenue

                                                                                                              Hi, I would like to get a clarification on the below. I have an opening balance of BD.725/- in my Unearned Revenue A/c which includes the overpayments of 6 clients. No One of my clients settled his invoices by paying the value of the invoice less the

                                                                                                            • How Zoho Desk contributes to the art of savings

                                                                                                              Remember the first time your grandmother gave you cash for a birthday or New Year's gift, Christmas gift, or any special day? You probably tucked that money safely into a piggy bank, waiting for the day you could buy something precious or something you

                                                                                                            • Add Webhook Response Module to Zoho Flow

                                                                                                              Hi Zoho Flow Team, We’d like to request a Webhook Response capability for Zoho Flow that can return a dynamic, computed reply to the original webhook caller after / during the flow runs. What exists today Zoho Flow’s webhook trigger can send custom acknowledgements

                                                                                                            • When moments in customer support get "spooky"

                                                                                                              It’s Halloween again! Halloween is celebrated with spooky symbols and meanings based on history and traditions, with each region adding its own special touch. While we were kids, we would dress up in costumes along with friends, attend parties, and enjoy

                                                                                                            • email moderation issue when email is sent in the name of a mail group

                                                                                                              Symptom: an email that is sent by a mail group moderator in the name of a moderated mail group is held back for approval. Reproduction: Create a moderated mail group with members and moderators. Allow that mails can be sent in the name of the group (extended settings). Send an email to the group as a group moderator, but in the name of the group. This mail is held back for moderation which is unexpected. Expected: A mail sent by group moderator to a moderated group are not held back for moderation

                                                                                                            • Questions about Zoho mail

                                                                                                              Hello, I had up until recently, the free version. I got a warning message that said, "The user account (Redacted email address) 6.02 GB in your organization is almost nearing the allocated storage of 5.00 GB. If the storage exceeds the allowed limit,

                                                                                                            • How can I delete duplicate transactions?

                                                                                                              I want to delete the duplicates not simply exclude them. I have duplicates, because I had automatic bank feeds turned on (had to make sure this critical functionality was working before migrating to Zoho). Now when I import my csv's exported from Wave,

                                                                                                            • Zoho Migration Assistant not working

                                                                                                              Hello, I am trying to use you Migration assistant to migrate emails from Rediff to Zoho. I am stuck in the first step. After downloading the migration tool, I copied the link to verify user credentials, however, after pasting the link in the browser,

                                                                                                            • Python - code studio

                                                                                                              Hi, I see the code studio is "coming soon". We have some files that will require some more complex transformation, is this feature far off? It appears to have been released in Zoho Analytics already

                                                                                                            • Multiple email addresses

                                                                                                              Multiple email addresses: I understand there is the ability to add an additional email field to a contact, but the functionality here needs to be drastically revised. Currently, this second email address does not log under the contact email history, nor is it available as a send address when using the Send Mail button within CRM. We recently migrated from GoldMine. I hate GoldMine, but there is one thing they did well: Email. I suggest copying them. Change the email field to an editable picklist,

                                                                                                            • ViewID and Zoho Desk API

                                                                                                              I'm looking at the documentation for Listing contacts and it looks like you can filter by ViewID. I assume this is views created in a department or all departments. Is this correct? And if so, how do I find the ViewID for that view? EDIT: I see the view

                                                                                                            • Ability to Link Reported Issues from Zoho Desk to Specific Tasks or Subtasks in Zoho Projects

                                                                                                              Hi Zoho Desk Team, Hope you're doing well. When reporting a bug from Zoho Desk to Zoho Projects, we’ve noticed that it’s currently not possible to select an existing task or subtask to associate the issue with. However, when working directly inside Zoho

                                                                                                            • Print Tickets

                                                                                                              We have field engineers who visit customers. We would like the option to print a job sheet with full details of the job and account/contact details.

                                                                                                            • 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

                                                                                                            • Ability to Attach Images When Reporting Issues to Zoho Projects from Zoho Desk

                                                                                                              Hi Zoho Desk Team, Hope you’re doing well. We’re using the Zoho Desk–Zoho Projects integration to report bugs directly from support tickets into the Zoho Projects issue tracker. This integration is extremely useful and helps us maintain smooth coordination

                                                                                                            • Ability to Choose Task List and Add Subtasks When Creating Tasks from Zoho Desk

                                                                                                              Hi Zoho Desk Team, Hope you’re doing well. We’re using the Zoho Desk–Zoho Projects integration to seamlessly connect customer tickets with project tasks. While the integration works great overall, we noticed two important limitations that affect our workflow

                                                                                                            • Sync Task Status from Zoho Projects to Zoho Desk

                                                                                                              Hi Zoho Desk Team, Hope you’re doing well. We’re actively using the Zoho Desk–Zoho Projects integration, which helps our support and project teams stay aligned. However, we noticed that when we change a task’s status in Zoho Projects, the change is not

                                                                                                            • Default/Private Departments in Zoho Desk

                                                                                                              1) How does one configure a department to be private? 2) Also, how does one change the default department? 1) On the list of my company's Zoho Departments, I see that we have a default department, but I am unable to choose which department should be default. 2) From the Zoho documentation I see that in order to create a private department, one should uncheck "Display in customer portal" on the Add Department screen. However, is there a way to change this setting after the department has been created?

                                                                                                            • Zoho CRM IP Addresses to Whitelist

                                                                                                              We were told to whitelist IP addresses from Zoho CRM.  (CRM, not Zoho Mail.) What is the current list of IP Addresses to whitelist for outbound mail? Is there a website where these IP addresses are published and updated?  Everything I could find is over

                                                                                                            • Mark As Read Sync?

                                                                                                              So I set up Zohomail to use my personal gmail account in it as well. I was wondering, when I mark the gmail email as read in Zohomail, can it automatically mark it as read in my gmail account as well?

                                                                                                            • Color of Text Box Changes

                                                                                                              Sometimes I find the color of text boxes changed to a different color. This seems to happen when I reopen the same slide deck later. In the image that I am attaching, you see that the colors of the whole "virus," the "irology" part of "virology," and

                                                                                                            • The difference between Zoho Marketing Automation and Zoho Campaigns

                                                                                                              Greetings Marketers! This post aims to differentiate between Zoho Marketing Automation and Zoho Campaigns. By the time you get to the end of the post, you will be able to choose a product that objectively suits you. What is Zoho Marketing Automation?

                                                                                                            • How to use Rollup Summary in a Formula Field?

                                                                                                              I created a Rollup Summary (Decimal) field in my module, and it shows values correctly. When I try to reference it in a Formula Field (e.g. ${Deals.Partners_Requested} - ${Deals.Partners_Paid}), I get the error that the field can’t be found. Is it possible

                                                                                                            • Zoho Mail Android app update - View emails shared via Permalink on the app.

                                                                                                              Hello everyone! In the latest version(v2.8.2) of the Zoho Mail Android app update, we have brought in support to access the emails shared via permalink within the app. Earlier, when you click the permalink of an email, you'll be redirected to a mobile

                                                                                                            • Let us view and export the full price books data from CRM

                                                                                                              I quote out of CRM, some of my clients have specialised pricing for specific products - therefore we use Price Books to manage these special prices. I can only see the breakdown of the products listed in the price book and the specialised pricing for

                                                                                                            • How to create a Zoho Mail extension similar to Outlook's OnSend add-in?

                                                                                                              Hi, I want to create a Zoho Mail extension similar to Outlook’s OnSend add-in. The extension should: Let the user select headers and footers from a taskpane while composing an email. When the user clicks Send, the extension should: Automatically insert

                                                                                                            • How to display Motivator components in Zoho CRM home page ?

                                                                                                              Hello, I created KPI's, games and so but I want to be able to see my KPI's and my tasks at the same time. Is this possible to display Motivator components in Zoho CRM home page ? Has someone any idea ? Thanks for your help.

                                                                                                            • Introducing Record Summary: smarter insights at your fingertips

                                                                                                              Hello everyone, We’re excited to introduce the Record Summary feature. This powerful addition makes use of Zia to simplify how you interact with your CRM data, providing a seamless, consolidated view of critical record information. Scrolling through the

                                                                                                            • Zoho Bookings changes Lead Source

                                                                                                              Hi. i would like to know if there's a way for Zoho Bookings to not change the lead source when booking a lead for an appointment as the lead source will be used in a report. Scenario: Lead source: Website after booking an appointment Lead source: Zoho Bookings Thanks. Dan

                                                                                                            • Delegates should be able to delete expenses

                                                                                                              I understand the data integrity of this request. It would be nice if there was a toggle switch in the Policy setting that would allow a delegate to delete expenses from their managers account. Some managers here never touch their expense reports, and

                                                                                                            • Function #9: Copy attachments of Sales Order to Purchase Order on conversion

                                                                                                              This week, we have written a custom function that automatically copies the attachments uploaded for a sales order to the corresponding purchase order after you convert it. Here's how to configure it in your Zoho Books organization. Custom Function: Hit

                                                                                                            • Kaizen #8 - Handling Recurrence and Participants in the Events Module via API

                                                                                                              Hello everyone! We are back this week with an exciting post—Handling recurrence and participants in the Events module through API. First things first—What is the Events module? "Events" is a part of the Activities module in Zoho CRM.  An event is an activity that happens at a given place and time. You can find Events on the user's Zoho CRM's home page, Activities home page, Calendar, and in other related records. What are the types of Events? Events are of two types—Recurring and non-recurring events.

                                                                                                            • Marketer’s Space - Get Holiday-Ready with Zoho Campaigns

                                                                                                              Hello marketers, Welcome back to another post in Marketer’s Space! Q4 is packed with opportunities to connect with your audience - from Halloween, Black Friday, and Cyber Monday, to Thanksgiving, Christmas, and New Year. In this post, we’ll look at how

                                                                                                            • Personalized demo

                                                                                                              can I know more about the personalized demo we are construction company and

                                                                                                            • Can I collect email addresses in a form??

                                                                                                              Can I add new subscribers to my email list (hosted in FloDesk) when they check a box and add their email address on a Zoho form?

                                                                                                            • Zoho CRM Android app updates: Kiosk and multiple file upload support for subforms

                                                                                                              Hello everyone, We've rolled out new enhancements to the Zoho CRM Android app to bring better mobile CRM experience and efficiency. Let's take a quick look at what's new: Kiosk Multiple file uploads for subforms Kiosk Kiosk is a no-code tool in Zoho CRM

                                                                                                            • Alerts for mentions in comments

                                                                                                              We are testing the use of Writer internally and found that when a user is mentioned in a comment, there is no email alert for the mention. Is this something that's configurable, and if so, where can we enable this option?

                                                                                                            • Next Page