Learn How to Open Email Composer Automatically with Template in Zoho CRM using Client Script

Learn How to Open Email Composer Automatically with Template in Zoho CRM using Client Script

Requirement Overview

A Zoho CRM user wants to automate and simplify the process of sending a repetitive emails to different customers based on user's specific action, instead of manual clicking on Send Email button each time.

Use-case

In a Product Based Company, the sales team regularly engages with potential clients via email after initial discussions. Depending on the deal stage (Won, Lost, or On-Hold), the sales representative needs to send tailored communication:

Deal Won → Send a thank you email with onboarding details.

Deal Lost → Send a polite follow-up or feedback request email.

Deal On-Hold → Send a nurturing email to keep the client engaged.

It is very important for sales representative to communicate as soon as possible to complete the deal effectively. Hence, Company wants a automated process of sending emails based on every deal stage/status. Company also needs to verify the email everytime before it get sends to customer.

  1. Possible ways to achieve it within Zoho CRM

                  => User can use Workflow directly based on record edit trigger and set an action to send Email Notification effectively. However, users cannot verify the email which will be sent to customer before it get sent. Also, we cannot have a dynamic content in this approach.

                  => User can use Custom Function with Send Mail action and dynamic content by associating it as action within Workflow. However, emails will be sent automatically and it cannot be verified by users before it get sent.

                  => Client Script provides a default ZDK method - 'openMailer()' which will be used to invoke the mail composer within a record with predefined configuration. 
Notes
Refer to following Help Link to know more about openMailer() method in Client Script.
Alert
Info
Why It is Important:
  1. Time-Saving
  2. Consistency
  3. Personalization
  4. Error-Free
  5. Improves both User & Customer Experience 
  6. Sales Productivity
  7. Speed up internal process of Business
Info

Permissions & Availability

-> Users with the Manage Extensibility can configure & setup Client Script.
-> Users with the Manage Sandbox permission can manage the sandbox and test this use-case.

Configuration

To have a simple understanding on above explained use-case, we will explore how a client script will be triggered based on each status of a field and open Mailer composer with predefined information.

Now, let us create a Client Script on Detail Page of a 'Sales Order' Module for a Field Event with onBeforeUpdate() (i.e. Status). As an example, whenever the user updates 'Status' to any option in Detail Page, script will be triggered and open mailer composer with specified configuration.

Follow the steps below to configure the Client Script for this use case:

1) Provide the basic information, like Name and Description based on script purpose.

2) In the Category Details section, please choose the following:

* Category as Module.
* Page as Detail.
* Module as Sales Order.
* Choose the required Layout.

3) In the Event Details section, please choose the following:

* Type as a Field Event.
* Choose the required Field from the drop-down.
* Event as onBeforeUpdate.

The Code

  1. //fetching Status field value
  2. var status = value;

  4. //checking if status value is 'Approved'
  5. if (status == 'Approved') {

  7.     //opening Mailer Component
  8.     ZDK.Client.openMailer({
  9.         from: 'harshadjoshi518@gmail.com', to: [{ email: 'harshikajoshi51@gmail.com' }], subject: 'Order Confirmation', body: 'This is to inform you that your order has been approved. Please confirm if you would like to confirm the order' });
  10. }

  12. //checking is status value is 'Confirmed'
  13. if (status == 'Confirmed') {

  15.     //showing confirmation popup in UI
  16.     var resp = ZDK.Client.showConfirmation('Are you sure, you want to confirm the order?', 'Yes!', 'Nope!');

  18.     //if Yes selected by user, then proceed futher
  19.     if (resp == true) {
  20.         templateId = "5113649000017098722";
  21.         recid = $Page.record_id;

  23.         //fetching template data using templateID by invoking CRM_API using Connection Method
  24.         var fetchRec = ZDK.Apps.CRM.Connections.invoke("zohocrm", "https://www.zohoapis.com/crm/v4/settings/email_templates/" + templateId + "/actions/print_preview?record_id=" + recid + "&print_type=html", "GET", 1, {}, {});

  26.         content = fetchRec.details.statusMessage.email_template_preview.body;
  27.         console.log(content);

  29.         //opening Mailer Component
  30.         ZDK.Client.openMailer({ from: $Crm.user.email, to: [{ email: '123@1213.com', label: 'Test' }], cc: [], subject: "Hello", body: content });
  31.     } 
  32. }

  1. Client Script Code Explanation

-> Initially, we will fetch the respective Status field value (due to which the client script triggered).

-> Then, we use IF condition to have different email compose based on each status.

-> As an example, we used direct email body content to "Approved" status.

-> For "Confirmed" status, we are showing up a Confirmation Pop-up and if user clicks on "Yes", then we fetch the required template by ID using default Web API method (i.e., Connections) to get the template content.

-> Then, we use the Mailer Component to open it automatically by passing the template content as the body.
Notes
Refer to Email Templates API to get the more information and required scopes for connection.

Working Demo - Screencast



Idea
-> User can configure the same setup for above explained Use-Case related to Deal Stages for Sales Team.

Different Use-case:
-> A School, where administrator want to send email to all related guardian of student.
-> Here, users can fetch all guardian records (associated via related list using CRM API) and get the email addresses, then pass it onto Mailer Component (To Address - parameter) to send email all guadians.
AlertTo ensure a smooth implementation, we recommend configuring and testing the setup in the sandbox environment before deploying it to production.

TIPS - Avoid Common Errors

-> Ensure to use the correct API Names for both Module & Fields in the script.

-> To ensure you get the intended output, we would suggest you to add logs() || console.log() to each variable to check the output for seamless functionality. i.e., you could view the output in the "Messages" tab within Client Script IDE for each logs() print. To view console logs, you could follow - "Right Click on browser page >> Inspect >> Console".

-> In case the expected functionality does not work, then try the script by verifying each output & loop along with that, cross-verify the syntax of each ZDK Client/CRM API method in the provided sample help document. 

-> Since we have used the Connections within a function script, ensure to have the required scopes added in connection to perform the intended API action. Also, ensure to use the connection link name (i.e., crm_connection ) while passing on to Connection method within Client Script. 

-> As a common practice, we have used US DC API end point. If you are using CRM account in a different DC (i.e., IN, EU, CA, AU, etc.), then we would recommend you to use the API end point URL according to your DC.

For example:

InfoSample Scripts for each ZDK Client/CRM APIs methods - Help Reference
Notes
Notes: Refer to the following Guide - Article to learn the best practices for Optimizing the code and various ways to deploy Client Script across Zoho CRM.


If you need any further clarifications, please don’t hesitate to contact partner-support@zohocorp.com.

Notes
Additionally, we kindly ask all Europe and UK Partners to reach out to partner-support@eu.zohocorp.com.