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 #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.Kaizen #226: Using ZRC in Client Script
Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In thisKaizen #222 - Client Script Support for Notes Related List
Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore howKaizen #217 - Actions APIs : Tasks
Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.Kaizen #216 - Actions APIs : Email Notifications
Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are
Recent Topics
Suggestion: Associating Assets with Company in Zoho FSM
Hello Team, I would like to share an idea based on practical experience. Currently, all assets in the Zoho FSM Asset module are linked to a specific contact person. I would like to know if it is possible to associate assets with a company instead. ThisZoho Inventory / Finance Suite - Extend Visibility of File Names on Attachment Fields
Hi Inventory / Finance Suite team, I noticed recently that when you add an attachment field to a module in Inventory, only the first 8 characters of the file name are visible on the details view. 8 characters is not a useful amount and there is plentyMany Notes Becoming Unusable
Hello. The Notebook app is becoming unusable. I'm getting odd-looking results from my searches. Some of the notes, after clicking on them, show an update button that does absolutely nothing. Not sure what has happened, but it would be nice to get thisKaizen #218: Actions APIs - Field Updates
Hello all!! Welcome back to a fresh Kaizen week. In the previous weeks, we covered Workflow Rules APIs, Actions APIs - Email Notification APIs, and Tasks Update APIs. This week, we will continue with another Actions API - the Field Update API in ZohoHow Contract Types and Templates Form the Backbone of Zoho Contracts
Every contract in Zoho Contracts starts with two essential elements: Contract Type and Template. These are not just administrative steps. They define how every contract in your organization is created, governed, and managed over time. Let us look at theCRM Related list table in Zoho analytics
In Zoho Analytics, where can I view the tables created from zoho crm related lists? For example, in my Zoho CRM setup, I have added the Product module as a related list in the Lead module, and also the Lead module as a related list in the Product module.Zoho learn Custom portal - networkurl & CustomPortalId
I want to get my individual account’s networkurl and customportalId to use in this API: https://learn.zoho.com/learn/api/v1/portal/<networkurl>/customportal/<customportalId>/manual How can I retrieve the networkurl and customportalId using the API? IConnecting zoho creator to zoho writer to send prefilled documents
i will paste the worflow below // Get user's submitted data from the form userSalary = input.Current_Salary; userCIBIL = input.CIBIL_Score; userEmail = input.Email; userName = input.Name; // You need to get the Document ID from the URL of your Zoho WriterZoho Creator to Zoho Writer for prefilled documents...
In response to the question about connecting Zoho Creator to Zoho Writer for prefilled documents, I wanted to share a working implementation that demonstrates how to use the record_id parameter with the Zoho Writer Merge API. This allows Writer to automaticallyIntroducing our latest privacy enhancement - Hiding email IDs in Zoho Cliq Networks
Hello everyone, Zoho Cliq Networks offers a powerful collaboration platform that allows businesses to create dedicated digital workspaces for external vendors, partners, or individuals you want to communicate with professionally without adding them tozoho performance
OVERALL CONFIGURATION OF ZOHO PERFORMANCE Quarterly performance review Self rating and scoring Manager rating and scoringWhen will it be possible to edit Subform records via either views or tabular reports?
Hey there, data maintenance often requires mass update of quite a lot of records. While this is a piece of cake via either List view or Zoho sheet view, the same cannot be carried out for subform records yet. When one of the two options will be made available?Onboarding
Hello Team, Im yuktha working as HR at Ossisto Technologies. We are currently utilizing zoho for onboarding candidate. right now facing issue with onboarding Attaching the screenshots for your referenceHow do I change a form's name? Why isn't this more intuitive?
Can someone please let me know how to change a form's name?Control Over Zia Generative AI Reply Assistance Behavior
Hello, I would like to request an enhancement to the Zia Generative AI feature, specifically concerning the Reply Assistance within Zoho Desk. Current Issue: When replying to a ticket, the Ticket Properties section is automatically replaced by the ZiaZia now integrated with Open AI in Zoho Desk
The powerful integration of Zia with OpenAI, has empowered Zoho Desk reach a new level of efficiency and performance. With contextual self-service capabilities, Zia enables agents to boost their productivity and delivers superior customer experiences.Employee self-service portal: Onboarding and continuous learning platform for support reps
Hello everyone, In any organization, employees must go through multiple courses to learn about the product, their organization's standards, and how to respond to customer queries using the knowledge base articles available. This typically requires completing2024 Email Authentication Standards: Elevating Security with Google and Yahoo
In contemporary email communication, email authentication plays a pivotal role in mitigating email fraud, spam, and phishing attacks. Brace yourself for a new level of security. Starting February 2024, Gmail and Yahoo will be implementing robust emailContact custom field in layout
Good day, all, I have an "Extension" custom field in contacts, and would like to display the contact extension in the ticket layout, but I don't seem to be able to. What am I missing? Thanks RudyExact match in name when searching workdrive
Hello, I am wondering how to search workdrive files/folders with an exact match in the name. For example, when I search across folder with the url param search[name]=someName, I get multiple results such as "someName", "someNameAndMore", or "someNameaccount in a diferent bas currency
Is it possible to have an account in currency diferente from base currency?, lets say, the bas currency in japase yen but asset accut called cash dollars in dollars?Meeting impossible to use when sharing screen
he Meeting tool in Brazil is practically unusable when sharing anything, whether it’s a presentation or simple navigation. When accessed via Cliq, the situation gets even worse: even basic calls fail to work properly, constantly freezing. And as you areChanging the Default Search Criteria for Finding Duplicates
Hey everyone, is it possible to adjust the default search criteria for finding and merging duplicate records? Right now, CRM uses some (in my opinion nonsensical) fields as search criteria for duplicate records which do nothing except dilute the results.Is there a way to create a desktop shortcut for a website course portal?
Hello everyone, I recently got a laptop and bought an online course from a website, Skillwint.com, which I visit regularly. I open that site many times a day and want to create a desktop shortcut so I can open it directly instead of searching in the browserSalesIQ Tip for Admins: Your Safety Net for Data Recovery
Ever clicked 'Delete' in your SalesIQ and then realized it was the wrong item? Maybe it was a prospect's chat that held important context you needed to refer to later on. Or, maybe you deleted an elaborate Zobot that you were still testing or planningDepreciated mergeAndStore Function Help!
Hello, I have a function designed to create a PDF containing information from the fields in a Deals record. There is a Writer Mail Merge template in WorkDrive that is populated via Deluge code, and a copy of the resulting PDF is then attached to the record.Can I execute two 'functions' when completing a mail merge from CRM?
Hi, I have set up a mail merge from CRM Deals to a template. I want a copy of this to be saved in Workdrive, and then a copy also saved back into the deal record from which the merge occurred. I can do both independent of each other, and managed to getExternal Share > Edit: Cannot Create Zoho Files
Hi Zoho, When we create an external share link with Edit permission, our external users are unable to create a Zoho file (Zoho Writer, Zoho Sheet and Zoho Show). They can only upload files. They can edit the Zoho files if we create them internally andZoho Mail iOS app update - RTL languages support and access emails using permalink and universal link, image upload resolution
Hello everyone! In the most recent version of the Zoho Mail iOS app update, we have brought in support for RTL languages(Arabic and Urudu), providing a seamless reading experience with proper text alignment and layout throughout the app. We have alsoWhy are emails sending with @viazohocrm.com ?
I just sent out mass emails from CRM. They are sending from the email below and people cannot reply, and they are getting this message: Address not found Your message wasn't delivered to sales.XXXXXXXX.com.au@viazohocrm.com because the address couldn'tDuplicating and referencing datasets
I am moving from PowerBI to Zoho Analytics and while I find Zoho easier to use in many ways, there is one function that I use in PowerBI that I have not been able to find in Zoho. I have several data sets that I need to modify in different ways to getZoho Inventory Now Supports VeriFactu for Businesses in Spain
Starting from January 1, 2026, Spain requires real-time invoice reporting for all B2B transactions. From July 2026, this requirement will extend to B2C transactions as well. All reporting must be carried out through the VeriFactu to AEAT (Agencia EstatalEnhancements to Zoho Map integration tasks
Hello everyone, We're excited to announce enhancements to the Zoho Map integration tasks in Deluge, which will boost its performance. This post will walk you through the upcoming changes, explain why we're making them, and detail the steps you need toLet’s Talk Recruit: Meet Zia, your all-in-one AI assistant (Part-3)
Welcome back to the Let’s Talk Recruit series. In the part 2 post, we explored how Zia has evolved with smarter summaries and seamless AI-assisted content creation. This time, we’re diving into the latest upgrades that take productivity even further —Announcing Early Access to "Zoho CRM for Everyone" — A new and exciting update to Zoho CRM
Update : Zoho CRM For Everyone's Nextgen Interface gets an upgrade! Hello everyone, We’ve updated the Zoho CRM for Everyone Nextgen interface based on your feedback. The UI is now simpler with a unified sidebar, a more visible global search and featuresUnable to verify domain for Zoho People
I have added TXT records in my DNS (GoDaddy) [screenshot attached], but unable to verify even after 12 hours after adding. On checking the console, it shows some errors [screenshot attached]. It appears that the verification flow is broken - please provideZoho Invoice Now Supports VeriFactu for Businesses in Spain
Starting from January 1, 2026, Spain requires real-time invoice reporting for all B2B transactions. From July 2026, this requirement will extend to B2C transactions as well. All reporting must be carried out through the VeriFactu to AEAT (Agencia EstatalZoho Billing Now Supports VeriFactu for Businesses in Spain
Starting from January 1, 2026, Spain requires real-time invoice reporting for all B2B transactions. From July 2026, this requirement will extend to B2C transactions as well. All reporting must be carried out through the VeriFactu to AEAT (Agencia EstatalWeekly Tips : Make your email content error free with Spell check in Zoho Mail
As someone who writes multiple emails a day, we are bound to make both grammatical and spelling errors. Most of them we may not even notice, and even if we do, we may not have the time to correct each one individually when we are in a hurry. So how doIntroducing Enhanced Storage Management
We’re excited to roll out two new enhancements in Zoho Recruit, Subscription Information and Storage Management — designed to give admins complete visibility into subscription details, feature limits, and storage consumption — all from one place insideNext Page