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

    • Introducing notifications in the vendor portal

      Imagine this: You're a recruiter working with multiple vendors on a high-volume hiring project. You’ve just updated a job description after a last-minute change from the hiring manager. One of your vendors, however, is still working off the older version

    • CRM limit reached: only 2 subforms can be created

      we recently stumbled upon a limit of 2 subforms per module. while we found a workaround on this occasion, only 2 subforms can be quite limiting in an enterprise setting. @Ishwarya SG I've read about imminent increase of other components (e.

    • LESS_THAN_MIN_OCCURANCE - code 2945

      Hi I'm trying to post a customer record to creator API and getting this error message. So cryptic. Can someone please help? Thanks Varun

    • Analytics for notes created

      Is there a way I can see how many notes were created per day? Via reporting or analytics?

    • No TDS Deduction

      In some of our case, where we are reselling items at the same rate we purchased. In this scenario, Indian IT Law has a provision to request customer not to deduct TDS if the transaction value is same. TDS is paid by us (intermediary reseller) before we

    • Cannot update Recurring_Activity on Tasks – RRULE not accepted

      Hello, I am trying to update Tasks in Zoho CRM to make them recurring yearly, but I cannot find the correct recurrence pattern or way to update the Recurring_Activity field via API or Deluge. I have tried: Sending a string like "RRULE:FREQ=YEARLY;INTERVAL=1"

    • Add image to report...

      Greetings, I send a weekly color coded report via Creator email. I would like to add the legend somewhere in the report. Header, footer where ever. I have the legend saved on Google Drive and can access it via shared link. Sure someone has wanted to add

    • More controls for User Fields in CRM

      Dear All, We are here with a minor but crucial enhancement to the user fields—now set accessibility permissions to the records for user field. User field allows you to extend co-ownership of records to your peers. You can collaborate with them for certain

    • Calls to accounts rather than leads or contacts?

      So..... We have a dilemma and I'm hoping someone has encountered this before and figured out a fix. We have just migrated to Zoho. It's great.....expect for how "Calls" are handled.... We are B2B. We do not use the leads module. A "Lead/Prospect" for

    • Image Upload Field | Zoho Canvas

      I'm working on making a custom view for one of our team's modules. It's an image upload field (Placement Photo) that would allow our sales reps to upload a picture of the house their working on. However, I don't see that field as a opinion when building

    • Power of Automation :: Automated 'Delayed & Closed' Status Update Based on Due Date

      Hello Everyone, A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate

    • 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

    • Range names in Zoho Sheet are BROKEN!

      Hi - you've pushed an update that has broken range names. A previously working spreadsheet now returns errors because the range names are not updating the values correctly. I've shared a video with the support desk to illustrate the problem. This spreadsheet

    • populate email address and name in zoho desk?

      Is it possible to populate the email address and name in the zoho desk widget? We only use it in the context of an authenticated user, so we already know the user's name and email. Thanks,

    • Are there default/pre-built dashboards in Zoho Desk?

      Hi, I am looking for some pre-built dashboard templates in Zoho Desk, similar to what we can find in CRM/Projects, etc Thank you

    • SAP S/4 HANA to CRM Integration - change the SAP Client ID

      Hi I am trying to push the business partners from SAP S/4 HANA to ZOHO CRM module. The SAP Client ID is 421 in my case....kindly let me know how do I specify the sap client because it's a dropdown with specific values as of now. Thanks Ravi Aswani

    • Staff rules

      Hi! Do you people know what are the default staff rules when a new booking is created? We have two staff members in my team (me as the admin, and my employee). As we share the same services, I'm wondering how Zoho will pick the staff for new apointments.

    • Adding branded signature to tickets reply

      Hi, i am unable to figure out how to add signatures with logo to tickets reply. please advice .

    • Zoho Mail Android app update: Manage folders

      Hello everyone! In the latest version(v2.9) of the Zoho Mail Android app update, we have brought in support for an option to manage folders. You can now create, edit, and delete folders from within the mobile app. You can also manage folders for the POP

    • How to share ticket numbers across different ticket types

      I'm running an event and have three different ticket types. Add on Event + Main Event - Early bird Main Event only - Early bird Add on Event only - Early bird And Standard class - shown but not available until early bird finishes Add on Event + Main Event

    • Adding Social Media Buttons to Basic Campaigns

      Hi, I'm quote new to using Zoho Campaigns and I can't work out how to add Social Media Buttons into my basic campaign? In MailChimp there's a button that brings the icons into your campaign for you. I've tried adding the social media icons as 'buttons' in Zoho but it's not looking great. Can anyone help? Thanks!

    • Hide Inactive Social Sign-In Providers from Login Screen

      Hello Zoho Team, We hope you are doing well. Currently, Zoho One allows admins to configure security policies and enable or disable Social Sign-In options for third-party providers such as Apple, Google, Microsoft, LinkedIn, Yahoo, Twitter, Facebook,

    • [Free Webinar] AI Agents in Zoho Creator - Creator Tech Connect

      Hello Everyone! We welcome you all to the upcoming free webinar on the Creator Tech Connect Series. The Creator Tech Connect series is a free monthly webinar that runs for around 45 minutes. It comprises technical sessions in which we delve deep into

    • Download All Attached Files

      It would be extremely useful to have "download-all" functionality for downloading files attached to a task, subtask, comment, forum post or hosted in the "Documents" section etc. We've instructed our users to zip multiple files prior to uploading, but of course they forget all the time. Having to download lots of files one-at-a-time off a comment or task wastes a lot of time.

    • unable to send message reason 554 5.1.8 Email outgoing blocked

      unable to send message reason 554 5.1.8 Email outgoing blocked

    • Ship via Carrier Not Working Since Commerce Update

      Since the recent update to the Commerce platform, I can no longer use the ship via carrier function. It will take me to the address screen and let me verify them but when I go to save and move tot he next screen it will not do anything. This is happening

    • automations: Can I execute a step on a specific date?

      I have created a form in Zoho forms, and created a contacts list. I have also begun setting up an automation with the intention of sending the form to the contact list on a specific date every month (via email) for the entire year (essentially sending

    • Zoho Expense - The ability to add detail to a Trip during booking

      As an admin, I would like the ability to add more detail to the approved Trips. At present a requestor can add flights, accommodation details and suggest their preferences. It would be great if the exact details of the trip could be added either by the

    • Adding Folders in Android App

      Is it possible to create a new email folder within the Zoho Mail Android app?  Or can this only be done from the desktop version of Zoho Mail? Cheers!

    • Schedule Exports for Regular Project Updates

      Tracking project data often means exporting data at regular intervals. Instead of manually exporting data every time, users can schedule exports for Phases, Tasks, and Tasks in Zoho Projects. These exports can be set to run once, daily, weekly, or monthly

    • Question about custom fields using Pivot Tables.

      I have created a pivot table showing annual revenue of a client and how much payment that client is paying my company. Is there a way using pivot table to add an additional field that subtracts those to fields / shows me a percentage of that difference?

    • Request for Light/Dark Mode

      Would love the ability to switch between Light and Dark mode similar to Zoho CRM. https://help.zoho.com/portal/en/community/topic/introducing-dark-mode-light-mode-a-new-look-for-your-crm

    • Journey Email - Ignored Contacts

      I have a journey setup which simply sends a string of emails over time. For some reason I am getting large amounts of the contacts who enter the first email being ignored and I can't find anywhere in reports or audit logs why these contacts are not

    • Involved account types are not applicable when create journals

      { "journal_date": "2016-01-31", "reference_number": "20160131", "notes": "SimplePay Payroll", "line_items": [{ "account_id": "538624000000035003", "description": "Net Pay", "amount": 26690.09, "debit_or_credit": "credit" }, { "account_id": "538624000000000403", "description": "Gross", "amount": 32000, "debit_or_credit": "debit" }, { "account_id": "538624000000000427", "description": "CPP", "amount": 1295.64, "debit_or_credit": "debit" }, { "account_id": "538624000000000376", "description":

    • Zoho Books - Include Payment Terms as a Custom View filter

      It would be great if you could created a custom view based on Payment Terms. This would be really handy for seeing a list of customers who have credit terms. A workaround is not required. I could do something with a creditor checkbox, but it would be

    • How to update changed purchase account of item in invoice

      I have selected the wrong purchase account for various articles and created invoices. I had to adjust the purchase account in the article afterwards, but the old purchase account is still posted in the transaction-journal of the invoice. To adjust the

    • Help - Zoho CRM notification on mobile (IOS/Android)

      Hello Community! Can I get the IOS/Andoid CRM app to notify me of events, calls, etc. due as I can with MANY other apps?   I am running the free Zoho I would like this to be native to the Zoho CRM app. I do not want to write a sep. mobile app

    • Zoho Books Idea - Include another field in Bank Details for Address

      Hi Books team, Currently use the Description field in the Bank Details to store the bank's address. This works fine but it would be great if you could add another field for Bank Address, so that other notes about the bank account could be stored in the

    • a question about the COQL API v8

      When I specify eight or more values in a WHERE IN clause and execute it, an error occurs. Is there a limit to the number of values that can be specified in a WHERE IN clause? ↓Error select * FROM Vendors WHERE (id in (1, 2, 3, 4, 5, 6, 7, 8, 9)) ↓Success

    • Zoho Books Idea - Bank Details Button on Banking

      Hi Books team, Sometimes I'm asked to share bank details with a customer or a colleague. So I go to the Banking Module, find the correct bank account, click Setting > Edit, then copy and paste the bank details. Wouldn't it be great if there was a button

    • Next Page