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
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.
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.
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.
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.
Are Junk Lead and Not Qualified default fields or something that cannot be deleted? I have gone into the Leads module and made sure there are no records using these values. Other values have a minus sign that allows me to remove them, but these two fields do not have that option.
Hi The links sent to the users didn't get clicked on in time and now all the links have expired. Is there a way to send a new link without deleting them and re-adding them>
Hi, I am collecting subform data into a Lead record and I need to create individual records for each row associated to the account when it is converted. How can I do this?
In Zoho Creator widgets, when a user navigates back on mobile devices, the data within the widget is reset. This leads to a loss of any unsaved changes or inputs, causing frustration for users. To enhance user experience, we need to implement a confirmation
Hello everyone! As we step into the new year, let’s reflect on the strides we’ve made together and gear up for the exciting opportunities 2025 holds. This month’s digest highlights key updates, engaging discussions, and upcoming events designed to keep
Hello zoho, please insert an add option (ie +)sign) to pick and multiselect fields so we can add new options while entering or editing records. For example. in my lead module, while adding a new record, I realized I had a new lead source. I went to my
We create Opportunities (Renamed Deals) with associated Quotes (renamed Products and Services). When we close the deal, we want to be able to track the implementation of each product separately. For instance, the client may have ordered Item A, Item B
We ship from several locations, and have a separate warehouse set up for each location in Zoho. I need the warehouse related to each SO to show up on the packing list. How do I make that happen?
Dear Zoho Team, I hope this message finds you well. The ability to view both my tickets and my team’s tickets in the Zoho Corp Help Center is a fantastic feature, especially as the focal point for Zoho in our organization. However, we’ve encountered a
Hello everyone, We’re making important updates to our pricing structure for portal user licenses, effective from the next payment cycle. The new slab-based pricing is as follows: Previously, these portal user licenses were priced at $5/ user/ month. As
I want to receive data coming from hostaway webhook and receive it in zoho crm to create or update record in a module based on conditions. The hostaway webhook sends data every time a reservation is created or modified or cancelled. The hostaway sends
Hi There, Is there a way to create a pop-up prompt when I create a new Deal giving me the option of what layout to use based on a certain requirement? So, if the prompt had two options 1. is a new business Deal 2. is a renewal Deal Thanks in advance
Hello, I would really love to improve the look of our CRM interface using Canvas but we have spent so much time customising the screens already (in standard view) that the thought of starting from scratch and building everything again, field by field,
I'm unable to create custom fields for shipment orders, even though the custom fields are set up correctly. A request to the following endpoint: https://www.zohoapis.com/inventory/v1/settings/preferences/customfields?organization_id=${ZOHO_ORGANIZATION_ID}&entity=shipment_order
It seems the new UI lack of "Records per page" function, it is very handy if you are looking for a data that you don't know the exact search term, but you know it may "between" few entries. without a "page" function, we kind of have to keep page down and page, the autoload is not that fast, and you are dealing with thousands of entries. Could we please have the "records per page" function back to New UI (also it shows total counts of the record) Looking forward to hear from you.
We are using the zet pack command to package our Zoho extension. However, after running the command, the extension gets packed, but the resulting package is empty. We've attached a screenshot for reference. Could you please assist us with resolving this
Hi, I apologize, I can't seem to find a clear explanation or help article on how to parse a CSV file. On validate, I process this deluge script. fileContent = Collection(input.File_upload.content); result = fileContent.values(); info result; What I want to do is create a record (in another form), and map certain fields to fields in the form. I can get values, which is the whole file but no keys. If I use result = fileContent.keys(); I get "0" As you can see from CSV, my first line is my map and
I attempted to create a bill using the Zoho Inventory API, but I received an error: {"code":6,"message":"Invalid data provided"}. However, when I made the same request again, it was successful. Does anyone have insights on why this happened?
Greetings everyone, We're here with some exciting and extensive changes to the availability of free user licenses in CRM Portals. This update provides users with access to all Portal user types for free to help them diversify their user licenses and explore
Currently our client portal only shows items for that specific person that is logged on to the portal, we want the current logged user to see all items for that user's company. An example would be invoices, so the current user would see all invoices for
I'm trying to create a purchase order using this endpoint https://www.zoho.com/inventory/api/v1/purchaseorders/#create-a-purchase-order Unfortunately, I'm getting this error { "code": 4, "message": "Invalid value passed for Customer ID" } The doc doesn't
Hello, I am currently working with the Zoho Inventory API and need to retrieve the serial numbers associated with specific items in our inventory. After reviewing the documentation, I couldn’t find an endpoint dedicated to fetching serial numbers for
previously I was using 5 mail pop mailboxes within VO , 2 of them are becoming obsolete so I was thinking about deleting the obsolete ones and merge the remainders into my main account mailbox within VO , is this possible ? thnx in advance.
We work in multiple tickets at the same time. Currently to do this, we have to open multiple instances of Desk. Is there a way to do this by just opening multiple ticket tabs within 1 instance of Desk?
I have been trying to use the new queries feature, and I can filter the query, but I'm coming unstuck because I don't understand how to make the query dynamically include the filter of the current record. ie if I'm on a deal, to filter all the records
Hi All, I have created a leave type in Zoho People UI. Now I need to fetch the Leave Type ID of it. As per the documentation[1] I used the curl request [2]. But I ended up with the error response from the API. {"response":{"message":"Error occurred","errors":{"message":"Server Error Occured","code":7031},"status":1,"uri":"/api/leave/getLeaveTypes"}} The new API[3] does not tell anything on how to retrieve the Leave Type ID. Have you done any changes to the API recently. If so please let me know
Hello & Greetings! I have been a pro Zoho user since the last 2 years and I would admit that the apps that are being offered are good, however the support we receive has a lot more to achieve. This being a design issue rather than a staff issue. Being
Act as Zoho Inventory Expert. We are a construction company, OVAL Projects Engineering Limited. We started using Zoho Inventory for Stock Management.I have multiple warehouses. I have encountered a problem while generating custom warehouse wise inventory
#CRM25Q1 Hello Everyone, Until now, CRM for Everyone has been available in early access mode exclusively for users who opted to try the new version. We are now transitioning to a phased release, starting with the basic edition. We are thrilled to announce
TouchID works when normally openning app but when called from keyboard while browsing or trying to log to another app it shows only password option to unlock. This behaviour is only on iPad Mini witch latest 18.2OS
Hi Zoho Desk team, First, congratulations again on the excellent Zoho API. But, I’m encountering an issue while attempting to update an email signature via the API. Whenever I make a request to update the signature, the response returns an HTTP 403 Forbidden
We are having issues adding Guest Members to our Cliq account. We have sent out a number of request but it seems that only some people are able to access the platform. Others have received a message stating that they need to be granted access from an
Hello, I use a workflow through make that sends estimate with zoho books (I paid books and sign). -Those estimates when accepted are firing the webhook that I create in zoho sign (photo 1) -However when refused they are not firing the webhook that I created
Hi, there is a new Leave Type: Compensatory off. Can someone tell me how to use it, because it sounds it could work for overtime compensation for our techs. Thanks Andreas
HI guys, I want to write off a couple of outstanding invoices, but when I do this, the status of the invoices shows as "Paid". Clearly this is not the case and I need to be able to see that they are written off in the customer's history. Is there a way
I am needing a script for two buttons, 1. Button will add todays date to a custom field named cf_sent_to_sov 2. Button will mark a checkbox or unmark a checkbox field named cf_parts_ordered I have been trying to figure out deluge but have not got anywhere
I have one form and it has two reports I need to programmatically add records to both reports For example one report is draft and other is processed After the user performs some action on the draft report I want to create a new report in Processed and