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
Announcing the new SKILL.md for Zoho CRM and the updated OAS repository!
We are introducing a new zoho-crm skill to make working with Zoho CRM Developer tools (like APIs, functions, widgets, client scripts, queries etc) easier and faster, with the help of AI in your preferred AI harness like Claude Code, Codex, Cursor, VSCodeKaizen #261 : Using Zoho CRM Skill to generate complex COQL queries
Hello everyone, In the previous Kaizen posts, we introduced the zoho-crm SKILL.md and discussed how it can help you when you are working with Zoho CRM APIs and Client Script. In this Kaizen, we will focus on using the Zoho CRM `SKILL.md` with GitHub CopilotKaizen #256 - Build an Arrival Readiness Web Tab in Zoho CRM
Hi everyone! Welcome back to the Kaizen series! In the post, we discuss a use case in hospitality industry: how an Arrival Readiness web tab widget can be used to let reception staff identify and resolve issues before arrival of guests. Use case In theKaizen #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 this
Recent Topics
Problem in Mannual journal in Zoho Books
When I Put Manual Journal in Zoho Books Software not allow me to select VAT Rate what is the solution United kindgom versionZoho CRM's WhatsApp integration now supports multiple accounts, multiple numbers, and custom modules
Hello all, WhatsApp Business now comes with a few exciting enhancements. So far, WhatsApp integration has worked with a single account and a single mobile number. As reliance on the WhatsApp integration has grown, along with the need for multiple accountsE-Mail Blacklist via GUI
Hello, It would be helpful if the GUI included an option to block specific email addresses (both incoming and outgoing). I want a setting where I can completely block certain email addresses. This means that no tickets can be opened from those addresses,【開催報告】Zoho Championに学ぶ！Zoho Campaigns メール配信の基礎・活用勉強会
Zoho ユーザーの皆さま、こんにちは。 コミュニティグループの中野です。 10月15日（木）、Zoho ユーザーコミュニティ初となる「Zoho Campaigns メール配信の基礎・活用勉強会」をオンラインで開催しました。 今回は、Zoho Campaignsの導入を検討している方から、一斉メールを配信しているものの 現在の設定や運用にを見直したい方まで、28名のユーザーさまにご参加いただきました。 本投稿では、当日のセッション内容をご紹介します。 （セッション資料については登録者限定公開となります）Integration
Can Zoho noted about to get an integration with Dext? I believe will be helpful at least in UK. thanksDeleted Module
I accidentally deleted a module and its fields. Im trying to get it back. Thanks to Youtubers flooding the internet with out of date videos I can't find how to get deleted modules back. The Recycle Bin doesn't have modules. Anyone know how to do thiCreating packages according to actual shipping processes
Hi community. I would like to ask a question to see if there's a better method or workflow for the creation of packages in Zoho Inventory. There is a little confusion in some of Zoho's language relating to the use of term Packing Slip when connected toE-invoicing setup not completed in Zoho Books
My status on the EmaraTax portal appears as linked with Zoho. However, when I try to complete the setup on the E-invoicing tab in Zoho Books settings, I receive an error saying: "E-Invoicing could not be enabled as the FTA portal is currently unreachable.Bank Feeds - Again
Bank feeds broken again for me. I don't see other recent posts on this, so maybe it's just us? Tried: refresh update cred/ deact./react. feeds chat support Nothing. On day 2 without zoho as a result, which is crippling for us. We've used zoho for a yearWidget Height were destroyed
All widget heights in the Details Canvas view are broken.Set same ticket Threshold for Agent-Level Thresholds
I am creating Agent-Level Thresholds for agents to auto-assign tickets in a Load-based Round Robin rule. I am unable to set the same number of Open tickets for agents when setting their Thresholds. For exampel: Agent 1 = 10 Agent 2 = 25 Agent 3 = SHOULDGrouping by Stage *type* in widgets
Hi Can I ask for a new feature? I'd like to be able to group by stage type in a Deal widget. That is by whether the Deal is in an Open Stage, a Closed Won Stage, or a Lost stage. Currently I can group by Stage, but if we have 10 open stages and one ClosedSharing View Only Portal
Im looking at Youtube videos on how to share a view only link to my projects. Everyone has the screen with Manage Users. I don't have it. Is that an old version or new version? I can't see how to send a view only link to clients. There is a Profiles andIssue with QES via Smart-ID/eParaksts
Zoho Sign support is completely unresponsive, so I will try to post the problem here. Our account settings have LTA disabled, but when processing QES via Smart-ID/eParaksts, the engine forces a PAdES-BASELINE-LTA format using a full PDF Uanataca timestamp.Zoho Mail MCP connector
Issue: Zoho Mail MCP connector (https://mail-organization-930963415.zohomcp.com/mcp/.../message) — OAuth authorization completes successfully in-browser ("Authentication successful"), but the issued token is rejected when the MCP client reconnects toSales Returns - Repairand Return
Hi Inventory Team, I'm working with a client on an Inventory implementation project and they have shared this use case with me. Some items may be returned by the customer, then returned to the vendor for repairs, received from the vendor and shipped backMultiple criteria in searchRecords
Hi, is it possible to search with multiple criteria in zoho.crm.searchRecords? I have tried several variations of the following without much success. CustomerRecord = zoho.crm.searchRecords("Contacts", "(First Name|=| lee)" && "(Last Name|=| spencer)"); Thanks. ChrisPlans to make "Generate Presentation with Zia AI" available as API endpoint?
This 'Generate Presentation with Zia' feature has great potential, and we would like to be able to trigger it automatically from a workflow. https://show.zoho.com/home/ziaai/generate Is there already a way to trigger this via API? If not, is there anyHow to setup noreply@ example.com
How do I setup noreply@example.com so the mail never gets delivered. I currently have a catchall setup aswell.Pleas unblock E-Mail-Adress service@montana-energie.de / kontakt@montana-energie.de
Dear Zoho Support, Could you please unblock service@montana-energie.de / kontakt@montana-energie.de which belongs to a regular customer with whom we are having frequent business-related conversations. Thank you very much in advance, Erdem Kar homewiseUnable to change alias in the from field on the ZOHO mac app
I have 1 main mail address, and 3 alias's. on the web mailbox when I create a new email, I can select the alias's from the dropdown in the from field. On the app no dropdown is available.Zmail mobile application
ho do i remove people from this appMy allies email (info@xxxx.com) was been deleted by system, and I can not build the same info allies email now
Dear Zoho Mail Support Team, I am the super administrator of the Zoho organization 【Organization Name, as shown in Admin Console】. I am writing to report an urgent issue with two of our custom-domain email addresses and to request your help restoringCannot create mail account
Hi, i have a problem, i can't create a mail account every time i try the error massage like this Oops! Something went wrong during mailbox creation. Please try again please helpAmazon.it always ends up in spam
Emails from amazon.it always end up in the spam folder, even though I have added the domain and the various individual Amazon addresses for shipping, payments, and other matters to the trusted lists at the user administrator level. What should I cheYour Authenticate email domain (SPF, DKIM, DMARC) is bad to say the least
How about actual instructions rather than vague generalities? There is no way to complete this with what is provided. Please provide specific verifiable steps.Generate a Zoho Sign link
From time to time I get a response "I never received your you e-document for electronic signature" is there a way to generate a Zoho Sign link to share.ChatGPT Plugin / MCP Server auth error
Hi all I'm trying to connect the ChatGPT plugin for Zoho CRM but after username stage of the auth process, I get this error from the URL https://mcp.zoho.eu/mcp-client/ {"error_description":"Invalid request url, Request is not as per defined in oauthZeptomail in the blacklists
Hello, I noticed some hard bounces while sending emails, and upon checking the details, I see that we have been added to the blacklists of certain spam lists: Bounce category: Policy failure Reason: ip-issues Message: 5.7.1 Service unavailable; clientPossible to reorder Pipelines position?
I have multiple Pipelines and want to reorder their positions, so that in the Deals module record for the Pipeline field, I have them ordered in a certain way. Is there a way to reorder the position of the Pipelines without deleting existing PipelinesCategorize Items with Item Headers
Hello customers, Did you ever want to classify items based on specific categories to help your customers understand your invoice better? With the new Item Header feature, you can easily categorize items in your invoices and estimates and give them a common title. Item Headers are available in the Invoices, the Recurring Invoices and the Estimates module. It can be carried forward from estimates to invoices at the time of converting the estimates. To add an item header: Go to the Estimates, InvoicesGettting "You are Offline" Messages all the time
Al of a sudden, a few days ago, I suddenly began getting a message on the bottom left side of the Mail App saying "You are Offline". Why? Does it mean I'm not getting incoming mails now? why is has started?Zoho CRM Quotes – Subform and PDF/Writer Limitations
Hello, I am encountering the following limitations in Zoho CRM Quotes: Custom product images cannot be uploaded in the subform – the image upload field cannot be added; only the file upload field is available. File upload placeholders cannot be used inInvoice Only Shipped Items
Dear Zoho, We are a company that deals with sales orders with 600-1000 lines We need to be able to do partial invoicing based on shipped items Right now when we click convert to invoice we can not only select items that have een shipped It takes hoursAlias Email Id already exists
Hi, I just verified my domain sesque (dot) com and now I am trying to create the admin account using admin (at) sesque (dot) com, but I am getting an error saying "Alias Email Id already exists". I used to have another Zoho account with this email address,Show backordered items on packing slip
We send out a lot of large orders, and often there are one or two things backordered. How can I fix the packing slips to show quantity ordered & quantity packed There should also be the ability to "ship" 0 of an item so the receiver knows that thingsMake better hiring decisions with Compare Applications and Zia Insights (Beta)
When multiple candidates apply for different job openings, evaluating each application against the right job requirements can take time. Reviewing resumes, candidate details, and interview feedback separately can make it harder to assess role fit andAd-hoc approvals are now available in CRM approval processes
Released for all DCs. Hello everyone, We've introduced ad-hoc approvals in CRM approval processes. This enhancement lets approvers add additional approvers when needed, without changing the configured approval workflow. How the approval process worksIntroducing PRM: Build, manage, and scale your partner ecosystem
Growing a partner ecosystem is a good problem to have. What starts as a handful of partners can quickly turn into a maze of spreadsheets, emails, and disconnected processes. More partners mean more opportunities, greater reach, and new ways to growData Subject Requests in Zoho Mail: Retrieve and export email data for legal and compliance needs
Organizations are often required to retrieve specific email communication data in response to legal investigations or compliance audits. The Data Subject Requests (DSR) feature in the Zoho Mail Admin Console allows administrators to search for all emailNext Page