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
- Logos
- Working with images
- Fonts
- 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.
- Now replace one of the following links with your brand image URL.
- Zoho Bookings Logo - 'https://www.zoho.com/sites/default/files/bookings/dannyemail/logo.png'
- Zoho Logo - 'https://zoho.com/sites/default/files/bookings/imagesemail/zoho.png'
- Click HTML again to view the logo on your template.
- If you're a HTML pro, feel free to play around with the HTML code to change the logo's positioning and sizes.
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.
- <img style='width: 134px;' src='https://www.zoho.com/sites/default/files/bookings/dannyemail/logo.png'>
- Change the numbers to alter the width.
- To change its height, insert the following code at the end of it.
- height = __
Like this
- <img style='width: 134px;' src='https://www.zoho.com/sites/default/files/bookings/dannyemail/logo.png' height=100>
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.
- <img style='padding-top: 3px;' src='https://zoho.com/sites/default/files/bookings/imagesemail/zoho.png'>
No worries, we can add them manually.
- height = __ width = __
The code will look like this after adding height and weight.
- <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
- 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.
- To align the image, right/left or center, search for the following text.
- <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.
- 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.
- 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
- .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
- .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.
Access your files securely from anywhere
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
New to Zoho TeamInbox?
Zoho TeamInbox 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
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Kaizen #59 - Creating alerts and custom messages using Client Script
Hello everyone! We are happy to resume our Zoho CRM Developer Community series - The Kaizen series! Welcome back to the new start of Kaizen! This post is about Client Script and its simple use cases involving ZDK Client functions. What is Client Script?[Webinar] Zoho Writer for content creators and publishing houses
Managing multiple drafts, edits, and client reviews doesn't have to slow you down. Join our upcoming webinar to see how Zoho Writer helps content creators and publishing houses create, edit, and publish seamlessly—all in one place. You'll learn how to:Universal search
Hi, it would be useful if the search bar was universal-so if you entered a term, it would bring up results from contacts, candidates, clients etc all at the same time (but broken down under the relevant headings)Attachment reminder?
My team and I often need to attach files to our messages, e.g. an explanatory screenshot or a shipping label. More often that I want to admit I mention the attachment but forget to actually attach it. Some email clients have a check-for-missing-attachmentsZIA in Zoho Cliq
Is It possible to use the ZIA feature from Zoho Analytics in the Zoho Cliq?Automating CRM backup storage?
Hi there, We've recently set up automatic backups for our Zoho CRM account. We were hoping that the backup functionality would not require any manual work on our end, but it seems that we are always required to download the backups ourselves, store them,Multiple upload field CRM
I desperately need the functionality to add more than one upload field to web to contacts form. How can I do this?Critical Need for Global Search in Zoho FSM
Hello Zoho FSM Team, We are currently in the process of deciding whether to fully transition to Zoho FSM for managing our field service operations. At present, our team actively uses Zoho Desk (with over 50 users) and Service Fusion, which we are consideringCollections Management: # 1 Payment Collection is All About Convenience
"Sir, can you come tomorrow? My manager wasn't available for the cheque sign-off", the customer said, avoiding eye contact. Ravi forced a polite smile, but inside, he felt a sense of defeat. He had already visited the customer's office twice in the lastCan the Product Image on the Quote Template be enlarged
Hello, I am editing the Quote Template and added ${Products.Product Image} to the line item and the image comes up but it is very tiny. Is there anyway that you can resize this to be larger? Any help would be great! ThanksAudio/video quality issues with Zoho Meeting – Any roadmap for improvement?
Hi Zoho Team, We’ve been using Zoho Meeting for both internal and external meetings, and unfortunately, the experience has been consistently poor. The video and audio quality are so unreliable that it often renders meetings ineffective—especially withCash based businesses cannot use the new fixed asset module
Hello all, If your bookkeeping is reporting in cash, you cannot use the new fixed acid module, as it does all the depreciation bookings accrual and not cash. This is definitive and you can't turn them into a cash booking. They will never appear in yourZoho Learn & Zoho Connect
Hi, Is there a way to sync the knowledge base we have in Zoho Learn with the manuals section is Zoho Connect? Thanks,Unblocked me
Please can you help unblocked my account thanks materiauxjcbrunet2000@zohomail.comApply Payment Received Amount Zoho Books Invoice
Hello team here is the sample code How can apply the payment received record over a unpaid zoho books invoice. //......................... paymentID = customer_payment.get("payment_id"); organizationID = organization.get("organization_id"); paymentmaplistZoho Books Finance Modules Not Accessible in Zoho CRM Mobile App
We have integrated Zoho CRM with Zoho Books using the Zoho Finance Suite integration. In the CRM web version, we can see the Finance modules (Estimates/Quotes, Invoices, Sales Orders, Items, Payments) and are able to create invoices and quotes directly[Live Webinar] New in Zoho WorkDrive: AI enhancements, Data Loss Prevention, Version Controls, and more
Hello everyone, We're excited to bring you another round of powerful updates in Zoho WorkDrive! Join us on May 15 for an exclusive live webinar where we’ll unveil the latest features designed to enhance your team’s productivity, collaboration, and dataLive webinar: Streamlining legal operations: Leveraging Zoho WorkDrive for law firm success
Hello everyone, Managing legal documents across departments and jurisdictions can be complex, but it doesn’t have to be. Join us on March 6 for an exclusive webinar where we’ll show you how Zoho WorkDrive empowers legal teams to stay compliant, organized,Live Webinar: Optimizing back-office operations in the manufacturing industry to maximize profitability
Hello everyone, We’re excited to invite you to our upcoming live webinar on February 6! Discover how Zoho WorkDrive can help manufacturing businesses optimize back-office operations, improve efficiency, and boost profitability. Our product experts willLive webinar: 2024 recap of Zoho WorkDrive
Hello everyone, We’re excited to invite you to our year-end live webinar! This session will take you through the transformative features and updates we’ve introduced in Zoho WorkDrive this year, helping you streamline document management like never before.Live webinar: Explore WorkDrive's seamless integrations with key Zoho apps
Hello everyone, We’re excited to invite you to our upcoming live webinar, where we'll delve into the seamless integration of WorkDrive with other key Zoho applications! This is a fantastic opportunity to enhance your productivity and streamline your workflowsLive webinar: Getting the most out of WorkDrive in Zoho Workplace
Hello everyone, We’re excited to invite you to our upcoming live webinar, where we’ll explore how to maximize your use of WorkDrive as part of the Zoho Workplace bundle. This is a fantastic opportunity to elevate your productivity and streamline yourLive webinar: Mastering data migration, organization, and team collaboration
Hello everyone, We’re excited to invite you to our upcoming live webinar! Discover how to seamlessly migrate your data, optimize file organization, and boost team collaboration using Zoho WorkDrive’s powerful features. This is a fantastic opportunityBARCODE PICKLIST
Hello! Does anyone know how the Picklist module works? I tried scanning the barcode using the UPC and EAN codes I added to the item, but it doesn’t work. Which barcode format does this module use for scanning?Join our live webinar: Explore the WorkDrive TrueSync application!
Hello everyone, We are thrilled to invite you to a live webinar focused on mastering the WorkDrive TrueSync application. Discover how to seamlessly sync your content between the cloud and your computer, ensuring smooth and efficient file management. OurBug tracking
Hi, does anyone know how to track errors during picking or packing? This way I can keep track and see how to improve and prevent errors in this area.Zoho Creator customer portal limitation | Zoho One
I'm asking you all for any feedback as to the logic or reasoning behind drastically limiting portal users when Zoho already meters based on number of records. I'm a single-seat, Zoho One Enterprise license holder. If my portal users are going to add records, wouldn't that increase revenue for Zoho as that is how Creator is monetized? Why limit my customer portal to only THREE external users when more users would equate to more records being entered into the database?!? (See help ticket reply below.)Script Editor not an option
I am trying to apply a script to a sheet and Script Editor is not an option. I don't want to go outside Sheets to do this (like Creator) if it can be done inside Sheets.Envio de mails
Hola! No puedo enviar mails pero si recibirlos. No se como solucionarlo! Mi dominio es chidobebes.com.arERROR CODE :554 - Your access to this mail system has been rejected due to poor reputation of a domain used in message transfer
In my email configuration: The domain's MX Records are pointed to Zoho The domain's SPF Records have been pointed out successfully DKIM is enabled. DMARC Record is pointed for the domain. The domain name is digioorja.in. Still facing the issue of Error:This Operation has been restricted. Please contact support-as@zohocorp.com for further details
l tried to verify my domain (casalimpaeperfumada.com.br) and its shows this error: This Operation has been restricted. Please contact support-as@zohocorp.com for further details.SLOW EMAILS
Is there an issue with the Zoho server? For two days now I've been having issues with very long buffering. Please advise. Thank you.POP3 authentication error - SOLVED
Just in case others are as forgetful as me ... As Zoho has changed the POP server for personal and free organisational users, I needed to change the POP server on my email client. This failed persistently but eventually I remembered that I had chosenSolution to Import PST File into Office 365.
MailsDaddy OST to Office 365 Migration Tool is an outstanding solution to recover OST files and migrate them into Office 365 without any hassle. Using this software users can multiple OST files into Office 365 with complete data security. It offers usersAdd Zoho One Groups/Departments to Shared Mailbox Access
Hi, I hope you're doing well. Currently, in Zoho Mail, I can manually add specific users or the entire organization to a shared mailbox. However, there is no option to add Zoho One groups or departments. Feature Request: We would like the ability to assignAllow Filters with Only Special Characters in Zoho Mail
Hi Zoho Mail Team, I hope you're doing well. We have noticed that currently, Zoho Mail does not allow creating filter criteria using only special characters, such as = or #. However, there are scenarios where such a filter is necessary. For example: FilteringHow to save email as PDF?
I saw 2 previous threads about this. One is from 14 years ago. The other was closed as "answered" a year ago but the feature was never implemented: https://help.zoho.com/portal/en/community/topic/how-to-download-save-emails-as-pdf Is the "save as PDF"Flexible plans
Hi, I have a Workplace Standard subscription. On Zoho's website, it mentions that with the annual plan it's possible to have multiple plans under the same organization—for example, Workplace Standard and Mail Lite. However, I can’t find a way to do thisWeekly Tips : Teamwork made easy with Multiple Assignees
Let's say you are working on a big project where different parts of a single task need attention from several people at the same time—like reviewing a proposal that requires input from sales, legal, and finance teams. Instead of sending separate remindersCannot give public access to Html Snippet in Zoho Creator Page
Hi, I created a form in Zoho Creator and published it. The permalink works but I want to override the css of the form. (style based URL parameters is not good enough) So I created a page and added an Html snippet. I can now override the css, which isNext Page