Kaizen #174 : Client Script Commands
Client Script Commands feature is a highly anticipated functionality that enables users to trigger Client Scripts anywhere within Zoho CRM, extending the scope of client script beyond standard pages and events. In this Kaizen post, we'll explore how to implement and utilize this feature effectively.
In this post,
What are Client Script Commands?
How to create and use Client Script Commands?
Using Command Palette
Using Keyboard Shortcuts
Scenario - 1
Solution
Scenario - 2
Solution
Summary
Related Links
1. What are Client Script Commands?
Client Script Commands feature is another dimension of Client Script that enables users to trigger them anytime and anywhere in CRM, extending their event-driven functionality beyond just specific modules and pages. This functionality can be accessed through custom keyboard shortcuts or a command palette, making it easier for users to perform repetitive tasks quickly
2. How to create and use Client Script Commands?
Create a command by specifying the Category as Commands (instead of module) while creating a Client Script.
Check this documentation for more details.
To trigger a Command, you can use one of the following ways.
A. Using Command Palette
Click on the Command Palette icon in the footer of CRM and select the name of the Command that you want to trigger.
B. Using Keyboard shortcuts
You can also link each of the Commands to a shortcut key and trigger a Command using that designated shortcut key. Each user can set specific shortcuts based on individual preference and use them to trigger a Command.
Check this documentation for more details.
3. Scenario - 1
At Zylker, a financial company using Zoho CRM, Sales Advisors need a quick way to calculate EMI during customer phone calls. The solution should allow seamless access to an EMI Calculator from any page in Zoho CRM.
4. Solution
To achieve this in Zoho CRM, you need to create a Widget for EMI calculator and create a Client Script Command.
A. Create a Widget for EMI calculator
Install Zoho CLI, and follow the steps given in this document to create the Widget app folder. Then update the html, javascript, and css code as per your requirement.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="loan-calculator">
<div class="top">
<h2>EMI Calculator</h2>
<form action="#">
<div class="group">
<div class="title">Amount</div>
<input type="range" min="1000" value="30000" max="50000" step="500" class="loan-amount" id="loanAmount" />
<div class="slider-label">$<span id="loanAmountValue"></span></div>
</div>
<div class="group">
<div class="title">Interest Rate</div>
<input type="range" min="5" value="6" max="100" step="1" class="interest-rate" id="interesRate" />
<div class="slider-label"><span id="interesRateValue"></span></div>
</div>
<div class="group">
<div class="title">Tenure (in months)</div>
<input type="range" min="6" max="100" step="1" value="12" class="loan-tenure" id="tenureMonth" />
<div class="slider-label"><span id="tenureMonthValue"></span></div>
</div>
</form>
</div>
<div class="result">
<div class="left">
<div class="loan-emi">
<h3>Loan EMI</h3>
<div class="value">123</div>
</div>
<div class="total-interest">
<h3>Total Interest Payable</h3>
<div class="value">1234</div>
</div>
<div class="total-amount">
<h3>Total Amount</h3>
<div class="value">12345</div>
<div class="right">
<canvas id="myChart" width="400" height="400"></canvas>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
<script src="https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js"></script>
<script src="main.js"></script>
</body>
</html>
Click here to view the complete code.
Once you have added the code, upload the zip file by following the below steps.
Go to Setup > Developer Space > Widgets.
Click Create New Widget and Fill in the details.
The Hosting should be "Zoho" and mention the html page of the app folder that you uploaded.
Note:
The widget should be of "button" type in order to render through a Client Script.
B. Create Client Script Commands.
Configure a Client Script Command by specifying the Name and Description The Category should be Commands. Click Next. Click here to know how to configure a Client Script.
Enter the following script and click Save.
ZDK.Client.openPopup({ api_name: 'emi_calculator', type: 'widget', header: 'EMI Calculator', animation_type: 4, height: '750px', width: '500px', top:'100px',left: '500px' }, { data: 'sample data to be passed });
The syntax of openPopup() is as follows.
Here "emi_calculator" is the API name of the Widget,
Type is Widget,
Header is EMI Calculator,
animation type is 4 where the popup slides from the bottom.
The other parameters are optional and has default values as shown in the image.
Here is how the EMI Calculator appears as and when the salesperson needs. The user can either click on the Command Palette Icon at the footer or use a keyboard shortcut as per his convenience to open the calculator.
In the above gif, the keyboard shortcut is cmd O.
To customize the keyboard shortcut,
Go to Setup → General → Personal Settings. Select "Motor" from the Accessibility Tab and Click "View Shortcuts" as shown in the below gif.
4. Scenario - 2
At Zylker, an international wholesale company using Zoho CRM, salespeople need a quick way to check real-time gold rates from different countries while discussing bulk orders with retailers. The solution should provide seamless access to updated, region-specific gold rates directly within the CRM interface to assist with accurate pricing decisions during customer interactions.
5. Solution
To achieve this in Zoho CRM, you need to create a Widget for EMI calculator and create a Client Script Command.
A. Create a Widget for gold rate
Install Zoho CLI, and follow the steps given in this document to create the Widget app folder. Then update the html, javascript, and css code as per your requirement.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js"></script>
<div class="container">
<div style="display: flex;">
<label for="country" style="width: 70%;font-weight: bolder;">Today's Gold rate:</label>
<select id="country" onchange="updateGoldRates()" style="width: 30%;">
<option value="USD" >United States</option>
<option value="INR" selected>India</option>
<option value="GBP">United Kingdom</option>
<option value="AUD">Australia</option>
</select>
</div>
<table id="goldRatesTable">
<thead>
<tr>
<th>Type</th>
<th>Rate (Per Gram)</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
const goldRatesData = {
};
const symbol = ['₹', '$', '£', 'A$'];
async function getLiveData (currency) {
var myHeaders = new Headers();
myHeaders.append("x-access-token", "goldapi-4wvh4nslzb5p0d5-io");
myHeaders.append("Content-Type", "application/json");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
let response = await fetch(`https://www.goldapi.io/api/XAU/${currency}`, requestOptions);
let res = await response.text();
let data = JSON.parse(res);
let desig;
if(data.currency === 'INR'){
desig = symbol[0];
}
else if(data.currency === 'USD'){
desig = symbol[1];
}
else if(data.currency === 'GBP'){
desig = symbol[2];
}
else if(data.currency === 'AUD'){
desig = symbol[3];
}
goldRatesData[`${data.currency}`] = [
{ type: '24K Gold', price: `${desig + " " + data.price_gram_24k}` },
{ type: '22K Gold', price: `${desig + " " + data.price_gram_22k}` },
{ type: '18K Gold', price: `${desig + " " + data.price_gram_18k}` }
];
};
async function updateGoldRates() {
var currency = document.getElementById("country").value;
console.log("Event:: ",currency);
const country = document.getElementById('country').value;
const tableBody = document.querySelector('#goldRatesTable tbody');
tableBody.innerHTML = '';
await getLiveData(currency);
if (country && goldRatesData[country]) {
const rates = goldRatesData[country];
rates.forEach(rate => {
const row = document.createElement('tr');
row.innerHTML = `
<td>${rate.type}</td>
<td>${rate.price}</td>
`;
tableBody.appendChild(row);
});
}
}
updateGoldRates();
ZOHO.embeddedApp.on("PageLoad",function(res){
document.getElementById('msg').innerText = res.data;
});
ZOHO.embeddedApp.init();
</script>
</body>
</html>
Once you have added the code, upload the zip file by following the below steps.
Go to Setup > Developer Space > Widgets.
Click Create New Widget and Fill in the details.
The Hosting should be "Zoho" and mention the html page of the app folder that you uploaded.
B. Create Client Script Commands
Configure a Client Script Command by specifying the Name and Description and click Next. Click here to know how to configure a Client Script.
ZDK.Client.openPopup({ api_name: 'goldrate', type: 'widget',header: undefined, animation_type: 4, height: '350px', width: '300px', top:'100px',left: '500px' }, { data: 'sample data to be passed' }); |
Click here to know more about openPopup().
Consider that the user has created the shortcut CMD G to trigger Client Script.
Here is how the Gold Rate appears as and when the salesperson used the shortcut keys CMD G.
6. Summary
We have seen,
how to use Client Script Commands
how to create keyboard shortcuts for Commands
how to view Widget as a popup using Commands
7. Related Links
Topic Participants
Maadhari M
Sticky Posts
Kaizen #197: Frequently Asked Questions on GraphQL APIs
🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.Kaizen #198: Using Client Script for Custom Validation in Blueprint
Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.Celebrating 200 posts of Kaizen! Share your ideas for the milestone post
Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQsKaizen #193: Creating different fields in Zoho CRM through API
🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands
Recent Topics
UK MTD reports concerning turnover and cerash accounting
Hi I am a sole trader, and I have just started with Zoho Books in order to comply with the new HMRC requirements. I use 'cash basis' - which I understand to mean that income is when the cash comes in (not the invoice date) and expenses are when they areRetainer Invoice.
Why ZOHO not have facilities to deduct partially advance payment from an invoice.IMAP Server not responding.
Trying to connect a phone via IMAP and getting "imap.zoho.com not responding." Is the server down, for maintenance or otherwise? I've tried this on two different devices and got the same error on both.Share saved filters between others
Hi, I am in charge to setup all zoho system in our company. I am preparing saved filters for everybody, but the only one can see its me. How can others see it? ThanksGST Slabs Redefined: Stay Compliant Using Zoho Books!
Hello Everyone! The Government of India is rolling out new GST rates, a major reform aimed at simplifying the current tax structure starting 22 September 2025. GST will move from four slabs (5%, 12%, 18%, 28%) to two main slabs (5% and 18%), plus a specialKanban view on Zoho CRM mobile app!
What is Kanban? The name doesn't sound English, right? Yes, Kanban is a Japanese word which means 'Card you can see'. As per the meaning, Kanban in CRM is a type of list view in which the records will be displayed in cards and categorized under the givenPresenting ABM for Zoho CRM: Expand and retain your customers with precision
Picture this scenario: You're a growing SaaS company ready to launch a powerful business suite, and are looking to gain traction and momentum. But as a business with a tight budget, you know acquiring new customers is slow, expensive, and often deliversNo practical examples of how survey data is analyzed
There are no examples of analysis with analytics of zoho survey data. Only survey meta data is analyzed, such as number of completes, not actual analysis of responses, such as the % in each gender, cross-tabulations of survey responses. One strange characteristicZoho Creator as LMS and Membership Solution
My client is interested in using Zoho One apps to deploy their membership academy offer. Zoho Creator was an option that came up in my research: Here are the components of the program/offer: 1. Membership portal - individual login credentials for eachAdding Chargebee as a Data Connector
Is it possible to get Chargebee added as a Zoho Analytics data connector?Webform & spam
Hi, We set up 2 webform on our website, fowarding the content to Zoho CRM. Since it has been opened up, we are getting lot of spam message (for now about 20 a day). To lower the amount of false new leads we added the captcha field and new enquieries are send to the Approval Leads list. However we still get some spam. Is there any "anti spam" mechanism built in Zoho CRM, or how is the best way to avoid these kind of spam ? ThanksDropbox to Workdrive
Namaste, Trust you all are doing well. Wanted to check how this can be done with Zoho flow. I typically receive dropbox links from my clients. Is there a way where I can provide the link to Zoho flow and it downloads the files from dropbox link to a workDeals by Stages Funnel not showing in correct order
Using the Stage-Probability Mapping for the Deals module we have created a steps our deals will pass through, RFQ, Closed/Lost, Declined/No-Go, Pricing, Submitted, Negotiations, Won. However when I view the Deal By Stages Funnel it does not show in theTurning off the new UI
Tried the new 'enhanced' UI and actively dislike it. Anyone know how to revert back?Confirmation prompt before a custom button action is triggered
Have you ever created a custom button and just hoped that you/your users are prompted first to confirm the action? Well, Zoho knows this concept. For example, in blueprint, whenever we want to advance to the next state by clicking the transition, it isHow to create auto populate field based on custom module in Zoho CRM?
Hello, i'm still new to Zoho CRM and work as administrator in my company. Currently, I'm configuring layout for Quotes Module. So, the idea is, I've created a read-only field in Quotes called "Spec". I want this field automatically filled with SpecificationRich Text For Notes in Zoho CRM
Hello everyone, As you know, notes are essential for recording information and ensuring smooth communication across your records. With our latest update, you can now use Rich Text formatting to organize and structure your notes more efficiently. By usingChange Last Name to not required in Leads
I would like to upload 500 target companies as leads but I don't yet have contact people for them. Can you enable the option for me to turn this requirement off to need a Second Name? Moderation update (10-Jun-23): As we explore potential solutions forOffice 365 and CRM mail integration: permission required
Has anyone run into this weird problem? My email server is Office 365. When I try to configure Zoho CRM to use this server, a Microsoft popup window opens requesting user and password. After entering that, I get a message in the Microsoft window sayingTables improvement ideas / features
Heya, I've been using Zoho Tables for a few months now and wanted to post some features that I think will be greatly beneficial for the tool: 1. Ability to delete a record in automation or move a record in automation. - Usecase: I move a record from oneDeluge - Can't get phone number SalesIQ
Hey folks, I’m building a custom plug for SalesIQ that’s supposed to register leads into Zoho CRM. The SalesIQ chat is being implemented on WhatsApp, and in my plug I’m using this line: mobile_clean = session.get("phone").get("value"); From what I understand,Zoho Desk - Community
As a regular user of Zoho Cares Community I would really love to see the publish date of articles. For example, when I look at Announcements, it would be very beneficial to see which ones were posted recently, over those which have just and a recent comment.access to quartz for my customers
Hi how can I have access to the application quartz you use for us to send you screen rocording, this feature would be immensely useful for our customers support https://quartz.zoho.com/Issue with Inline Images in Email Reply via Zoho Desk API
Hi, I am attempting to send inline images in an email reply using the Zoho Desk API, but the images are not being displayed inline for the recipient. I have followed this documentation: https://desk.zoho.com/DeskAPIDocument#Uploads https://desk.zoho.com/DeskAPIDocument#Threads#Threads_SendEmailReplyHow to search a value stored in a subform?
Hello, We store serial numbers in subforms but now we would like to be able to search the values to be able to easily find the record with the serial number. I saw that it's not possible to search such values through global search but is it possible to do it an other way? Thank you,Field Dependency Not Working on Detail Page in Zoho Desk
Hi Support Team, I’ve created field dependencies between two fields in Zoho Desk, and they are working correctly on the Create and Edit layouts. However, on the Detail page, the fields are not displaying according to the dependencies I’ve set — they appearHow do the keyword critera work?
Hi, I'm working on automated assignment of tickets based on keywords. How does this feature work? Where does this criteria look for keywords - email address, subject, email body? Can you please clarify this as I want to avoid overlapping with criteriaError: Unsupported content type: text/html;charset=UTF-8 after tryeing to get the token for n8n automation
I am working on ZOHO Desk automation and need to get the ZOHO auth token for n8n I have created the app in ZOHO Desk API, got client id and client secret. Added all data required to get a token in n8n. After I sign in with my ZOHO credentials in ZOHOImproving Collaboration Features in Zoho Portal
Hello Zoho Community, I’ve recently started exploring Zoho services and I’m really impressed with the wide range of features. However, I feel there is still room for improvement in the collaboration area. For example, it would be really helpful if weAutomated Shopify Emails Not Being Delivered
I have an ecommerce store with Shopify. I recently set up my email to be served through Zoho. Since doing this, customers are not receiving some of our automated emails from Shopify itself. Our initial email that confirms their purchase goes through but our Shipping Notification that is automatically sent out upon fulfillment is not going through. Sometimes we get a notice that it's been classified as spam, sometimes nothing. I can send/receive email via Outlook on my desktop and I can send/receiveI can't log in to my account on Thunderbird
I've just had to rebuild my PC (calamitous mess from Microsoft with Win10/Win 11 'upgrade' - they confirmed I had to start with a new build). I have used Zoho mail for years via Mozilla Thunderbird, but now I've had to download the latest version of TBird,Send a campaign to one recipient.
Very often I speak to a customer and they say they didn't see my email (maybe it went in Junk, maybe they deleted it). Anyway, I just want to go into the Campaign and send it to one person. You already have a feature very close to this - when sending a Test. While developing a campaign, I can send tests to anyone. Why can't we have this AFTER the campaign has been sent? I know, there's a caveat, and that's in the use of merge tags. Most of the time I only use FNAME, but maybe you could check ifTry FSM again for our business
We already have our customers individual equipment in CRM with serial numbers, install dates, warranty length and importantly next service which is generally 2 years. a month before the service date is due we get get a report and send out service reminders.Use Zoho Books to bill for work done in Zoho Desk??
I'm trying to see if something is possible (and if yes, how). We use Zoho One to manage our business. We have a lot of clients that will put in a ticket (via portal) to have work done. Out techs will pick up the ticket, do the work, and then log the timeGet Cliq Meetings in my O365 calendar
Hi, we are currently evaluating to replace the Teams Messaging and Meetings with Cliq. We currently still have all our email and calendars in O365. What i want to achieve is, to create a (ZOHO) meeting from Cliq and have this meeting added to my Outlook/O365Issue with Zoho Help Portal – Tickets Missing or Not Answered
Hi, How are you? I think there may be an issue with the Zoho Help Portal. I opened a few tickets directly in the help portal a some time ago but never received any response I also opened ticket 148356451 by email. I did receive a reply to it, but theDUNS & Bradstreet and Credit risk monitoring integration with Zoho books
Small businesses not being paid by bigger clients and clients of all sizes is a huge problem. It will be nice if Zoho develops integration with DUNS & Bradstreet(D&B) and Credit risk monitoring integration with Zoho books. That have small businesses canZoho Forms - Form Rules based on attachment fields
Many businesses use forms to collect documents and images from customers. In many cases, you may want to trigger a notification or other automation based on whether or not an attachment was added. I've noticed that attachment fields do not appear in RulesAdd multiple users to a task
When I´m assigning a task it is almost always related to more than one person. Practical situation: When a client request some improvement the related department opens the task with the situation and people related to it as the client itself, the salesmanCan't open draft email for editing
Last night I started composing an email and I let it save in drafts. This morning I want to continue working on the email. It is in my Drafts folder but it will not open. The only option there is to delete it. This is not the first time it has happened. On previous occasions I have just deleted the draft and started afresh, but I really want this one back. Windows 10 with Pale Moon 28.10.0 browser.Next Page