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
Automation#23: Automate Guided Conversations in Zoho Desk with Business Hours
Hello Everyone, This week's edition introduces a custom function designed to automate Guided Conversations in Zoho Desk, based on your business hours. With this feature, you can align the bot's behavior with your business schedule, ensuring a smooth andAddress changes in quote form
When entering a quote, the first piece of information required is the Account, which properly populates the billing and shipping address fields. Then I use the lookup function to select a contact, and when I do, the billing and shipping addresses areAutomation#24: Auto-Update custom field from Accounts to Tickets
Hello Everyone! Welcome back to the Community Learning Series! This episode dives into how Zylker Techfix streamlines account-related ticket references. Previously, employees had to manually check account details to retrieve specific customer information,Kaizen #227 : Client Script Support for List Page (Canvas)
Hello everyone! Welcome to another week of Kaizen. In today's post lets see how Client Script can be used in Canvas List Page to mask sensitive information from specific roles and add colors to Canvas List Page records based on custom criteria.This useAutomation#25: Move Tickets to Unassigned When the Owner Is Offline
Hello Everyone, Welcome to this week's Community Series! 'Tis the holiday season—a time when work often takes a brief pause. The holiday spirit is in full swing at Zylker Techfix too, with employees taking some well-deserved time off. During this period,Automation#27: Retain Ticket Owner on Moved Tickets
Hello Everyone! This week, we present to you a custom function that retains the ticket owner when a ticket is moved from one department to another. Here’s more to help you understand the custom function: At Zylker Techfix, Alex, the Support Engineer managesAutomation#28 Notify Agents on Article Expiry
Hello Everyone! This week, we’re bringing you a feature that notifies your team when articles in the Knowledge Base are set to expire to keep your content relevant and helpful for customers. The Zoho Desk's Knowledge Base is an asset for customers toAutomation#29 Retain ticket status on moved tickets
Hello Everyone, Hear out Zylker Techfix’s Success Story on Smoother Ticket Transitions! Zylker Techfix, a gadget servicing firm committed to quick repairs and timely deliveries, faced a challenge when ticket statuses changed automatically while movingAutomation#32:Auto Add New Portal Users to the Help Center User Groups
Hello Everyone, Introducing a custom function that automates the process of adding new portal users to Help Center user groups, making user management effortless! By default, Zoho Desk allows you to assign new portal users to groups manually. But withAutomation#34 : Automate Email threading for Ticket notification
Hello Everyone, It's been a while since we've presented an automation. However, our community has been buzzing with ideas, use cases, and discussions with our community experts and Ask the Experts session. So, here we are again, presenting an automationAutomation#35 : Auto-Add Comments under the Owner's Name in Tickets via Macros
Hello Everyone, This week's custom function provides simple steps to configure a Macro for adding comments to tickets with the name of the Comment owner. When managing tickets, you can use the Comment feature to communicate internally with your team andAutomation#36: Auto-create time-entry after performing the Blueprint transition
Hello Everyone, This week’s edition focuses on configuring a custom function within Zoho Desk to streamline time tracking within the Blueprint. In this case, we create a custom field, and request the agent to enter the spending time within the singleAutomation#33: Automate Splitting Names for Existing Contact Records
An organized directory – who doesn't love one? Previously, we explored how to split contact names into First Name and Last Name for new contacts in Zoho Desk. But what about existing contacts already in your database? This week, we bring you a customWorkqueue
I really like the idea of the Workqueue generally - it will be really useful. What it seems to lack however, is the ability to customise it properly. I want to be able to show a custom view rather than just "My Leads" and "Leads Assigned in Last 3 hours".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 areZoho CRM Web form page URL
Hi there, I am getting quite a bit of spam through my Zoho CRM Web form and want to restrict the URLs it is submittable from. I can see that I can add Location URLs but I need to be able to just add a domain so can I enter mydomain.com/* to cover allReceiving too many Spam Leads. Why?
I am receiving so many junk leads from web forms created by zoho's platform. The junk queries are increasing day by day and are affecting our business. I am continuously following up with zoho team from the past one year but not getting any satisfactoryMail Merge is not working properly as far as the AUTOMATE section is concerned
Hi there, I created a Mail Merge template for the Deal module. I would like Deal owners to mail merge their Deal records, download the Mail Merge document as a Word doc and make a few changes before sending it to the customer. Thing is, neither the "MergeCanvas Detail View Related List Sorting
Hello, I am having an issue finding a way to sort a related list within a canvas detail view. I have sorted the related list on the page layout associated with the canvas view, but that does not transfer to the canvas view. What am I missing?project name field issue- n8n
Hey guys, I have a question. I want to create a new product using the workflow. The problem is with the product name field; I don't know how to fill it in. The workflow starts with retrieving information from the leads table, retrieving links to scrapeCritical:- Eneble TDS filing for 26Q from the zoho book
We currently extract TDS data from Zoho Books and manually input it into a separate TDS software to generate the FUV file and file returns. Previously, while using Tally, we benefited from an integrated feature that seamlessly recorded transactions andHow to track repeat customers?
I own a food business and every order is entered into Zoho with: a unique Customer ID total order amount date of order With this information, I want to be able to see a list of my "best" customers. In other words, descending lists arranged according to:Zoho Books - Breaking A Working App
We've been using Zoho for many years now. Across all apps, entering phone numbers in standard formats was enabled in all apps. These formats are: xxx.yyy.zzzz xxx-yyy-zzzz (xxx) yyy-zzzz and we were able also to add extension numbers in these formats:Build data protection into your support
At Zoho, privacy is our principle. Every Zoho product is built with privacy as the foundation and the finishing touch, guiding every decision we make. Security, privacy, and compliance are woven into the software development lifecycle, starting from howConditional formatting: before/after "today" not available
When setting conditional formatting, it only allows me to set a specific calendar date when choosing "Before" or "After" conditions. Typing "today" returns the error "Value must be of type date". Is there a workaround? Thanks for any help!Display Client Name in Zoho Creator Client Portal Dashboard
Hello Zoho Creator Team, We hope you are doing well. Zoho Creator recently introduced the option to set a client’s display name in the Client Portal settings, which is very helpful for providing a personalized portal experience. However, there is currentlyCustomizable UI components in pages | Theme builder
Anyone know when these roadmap items are scheduled for release? They were originally scheduled for Q4 2025. https://www.zoho.com/creator/product-roadmap.htmlAmazon.in FBA multiple warehouse integration with Zoho Inventory
My organisation subscribed to Zoho One looking at the opportunity to integrate Amazon.in with Inventory. But during the configuration, we understood the integration has severe limitations when it involves multiple warehouses in the same Organisation.Feature Request - Set Default Values for Meetings
Hi Zoho CRM Team, It would be very useful if we could set default values for meeting parameters. For example, if you always wanted Reminder 1 Day before. Currently you need to remember to choose it for every meeting. Also being able to use merge tagsAbility for admin to access or make changes in zoho form without asking for ownership
Currently in zoho form only form owner can make the changes in the form and if someone else has to make changes then we have to transfer the ownership to them and even admin also cant access it . So i think admin must have the ability or option to accessIssue with WhatsApp Template Approval and Marketing Message Limit in Zoho Bigin
We are facing issues while creating and using WhatsApp message templates through Zoho Bigin, and we request your clarification and support regarding the same. 1. Utility Template Approval Issue Until December, we were able to create WhatsApp templatesZoho CRM Calendar View
Hello Zoho team, We need desperately a calendar view next to list, kandan and other views. I think it should be easy to implement as you already have the logic from Projects and also from Kanban View in CRM. In calendar view when we set it up - we chooseCamera
I can sign on to a meeting and see the other participants, but my screen is dark. The instructions for Zoho "Camera Settings" say "click on lock icon in address bar," but I don't see that icon! Suggestions?What is Workqueue and how to hide it?
Hi， My CRM suddenly have this "Workqueue", may I ask how to set the permission of this tab?Batch/lot # and Storage bin location
Hi I want to ask for a feature on Zoho inventory I own a warehouse and I've gone through different management software solutions with no luck until I found Zoho, it has been a game changer for my business with up to the minute information, I'm extremely happy with it. It's almost perfect. And I say Almost because the only thing missing for me (and I'm sure I'm not alone) is the need of being able to identify the lot number of my inventory and where it is located in the warehouse. Due to the natureAdding Sender Address with Basic Plan
According to the knowledge base, I should be able to add Sender addresses with the Basic Plan. But whenever I try to add an email, it takes me to a search window and I cannot find any emails in the list. Even mine, which is the admin. email.Conditional Field Visibility in Bigin CRM
I would like to request support for conditional field visibility within Bigin CRM. This feature should allow administrators to configure show/hide rules for fields based on predefined criteria (e.g., field values, picklist selections, stage changes,Bill automation in Zoho Books
Hi I am looking for 3rd-party options for bill automation in zoho which are economical and preferably have accurate scanning. What options do I have? Zoho's native scanning is a bit priceyReporting Tags
We've been using reporting tags for years (before itemizing was available) and now we are finding reporting these tags are impossible to track. Reports have changed in the customization and our columns of reporting tags no longer show up. We do not useConsumption based inventory
I am currently using Zoho Books for my hospitality business, which includes lodging and restaurant services. We purchase many items in bulk for storage and consumption as needed. I'd like these items to be recorded as inventory when purchased and categorizedNext Page