Kaizen #174 : Client Script Commands

Kaizen #174 : Client Script Commands

​

Hello everyone!

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,

 

  1. What are Client Script Commands?

  2. How to create and use Client Script Commands?

    1. Using Command Palette

    2. Using Keyboard Shortcuts

  3. Scenario - 1

  4. Solution

  5. Scenario - 2

  6. Solution

  7. Summary

  8. 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.

 




Notes

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 });



 

  • 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.

 


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

    • Recent Topics

    • Make record entry more organized with the Sections component in Wizards

      Hello everyone! Wizards in Zoho CRM have always helped you break long record-detail pages or large sets of fields into multiple screens, making data entry smoother and more user-friendly. Now, we’re taking a major step forward with a new Sections component—giving

    • GSTIN Public Search API

      Does zohobooks have an api using which i can search GST numbers and get their details?

    • External @zoho.com mail stopped working today, yesterday no issues

      Hello, Over a sudden mail stopped being delivered to inbox. Domain is standard zoho.com worked no problem yesterday, today nothing in inbox. Sent several test emails from corporate account & from gmail.com, logs show acceptance by zoho mail server, but

    • Suggestion: Smart Purchasing Module for Zoho Inventory and Zoho Books

      Suggestion: Smart Purchasing Module for Zoho Inventory and Zoho Books As an active user of Zoho Inventory and Zoho Books, I’ve noticed that the suite already provides valuable tools for managing inventory, analyzing trends, and processing purchase orders.

    • Adding bank details to the contact through API

      How to add bank-related information to the contact while creating it using API? The account number needs to be encrypted before sending it through API but not sure how to encrypt and get those values. Please guide me in this.

    • average cost display

      Hello there, I'm using the average cost valuation method, and the cost price shown in the Items menu should reflect the latest WAC (Weighted Average Cost). However, it doesn't update automatically. Is there a way to display the current average cost without

    • Apple Mail issues

      Dear Sir or Madam, I am trying to configure my Zoho mail account to Apple Mail. It is not working. It seems to need more information (perhaps a path prefix?) than is shown in your tutorial (<www.zoho.com/mail/help/apple-mac-imap.html>). After plugging

    • Assistance Required for Migrating Data from Odoo Inventory to Zoho Inventory

      Hi Team, I previously used Odoo Inventory to manage my stock and transactions, and I’ve now moved to Zoho Inventory. I’d like to migrate my data from Odoo—including product details, stock, purchase, and vendor information- into Zoho Inventory for continuity

    • I need my entire Zoho Account (mail/organization) deleted!

      Hey! I used zoho for my email aaron@aaronglass.me with domain forwarding/mx all that. I got rid of the mx info on my godaddy account and still Google won't let me sign up with my aaron@aaronglass.me email. (I'm moving to Google for business) SO! I was

    • Error: "Invalid Element warehouse_id" when sending order to Zoho

      i'm getting the error "Invalid Element warehouse_id" when trying to send an order to Zoho via API. Has anyone faced this issue before? How can I fix it?

    • No way to sell individual and case units smoothly in Zoho

      Currently, Zoho Inventory handles inventory primarily at the case level, which can be challenging for businesses that frequently need to break down cases into individual units for retail sales or smaller shipments. Although Zoho Inventory currently supports

    • How to handle multiple languages (Resume parser, Job opening, job board, career site) ?

      We are looking to bring Zoho Recruit to a market that needs to support 2 languages. The first thing we need to make sure is that the Candidate be flag with the language they speak. This is easy enough make a custom field that as the desire languages.

    • Shipping Labels

      Hi, Can we generate Packing Labels for manual shipping same as the format as Airway Bill in zoho books or inventory?

    • Unit Measurement Sign,

      Dear Zoho Support Team, I hope you are doing well. We recently purchased Zoho Inventory based on recommendations of your team that “it would be a great fit for our Shopify operations”. However, we are currently facing several urgent issues that require

    • Leadchain into a custom module

      Hello ZOHO Community ! is it possible to put the leads collected by leadchain into a custom module instaed of leads module ? Best wishes Niels

    • Urgent: How to Bulk Upload Images in Zoho Inventory? Any Workarounds?

      We are currently onboarding 5,000+ items from Shopify into Zoho Inventory, but we’re struggling with the lack of a bulk image upload feature. Right now, we have to manually upload and assign images one by one, which is extremely time-consuming and inefficient.

    • Can I automatically update COGS and Inventory account when creating an item?

      I have been trying to get Zoho to update the other two fields when I update one (Sales Account, COGS account, and Inventory Account). I know this seems like not a huge time saver, but I am all about efficiency and being an independent taproom, I create

    • I'm looking for a Microsoft List alternative in Zoho One to manage large lists of repetitive tasks

      I've used Microsoft Lists to manage lots of tasks that need to be completed several times for different users. We started with a large spreadsheet and then discovered lists, which worked pretty well. I was wondering if there is a similar products in Zoho,

    • Zoholics Europe and UK Awards 2025: Honouring our loyal customers!

      We're excited to announce that at this year's Zoholics events across Europe, we're holding customer awards for the first time ever! This is your chance to shout about the amazing things you've created, connected, or achieved with Bigin! And if you win,

    • Fillable template with dynamic tables?

      Is there a way to build a fillable template so that users can add rows to a table? To describe what I'm trying to accomplish the table has 3 sections; a header row, some number of rows with custom information, and a summary row with totals. I can't figure

    • How to store API keys in zoho?

      Hi everyone, I'm currently building an integration using Zoho Flow and I need to securely store several API keys that will be used to make external service calls from my flows. I would not like to hardcode the values in the code of custom function. What's

    • Zoho RPA is now available in your Zoho One bundle!

      Hello All! Of late, it's been quite a stint of new app integrations in Zoho One. This announcement pertains to the addition of another Zoho application, the most sought-after Zoho RPA - Robotic Process Automation, to the bundle. What is Zoho RPA? Zoho

    • is there an easy way to embed a zoho analytics report into a widget (or inside the "account" page) of Zoho CRM

      Hi, I have built a report that is specific to an account in Zoho CRM but I would like this to be built into the Zoho CRM front-end. I have looked at the widget concept but it seems quite complicated (see attached screenshot but I need to filter this view

    • Bigin iOS app update - Introducing Card Scanner and initiating WhatsApp conversations using pre-approved templates.

      Hello everyone! In the latest iOS (v1.11.3) version of the Bigin app, we have introduced the following features: Card Scanner Initiating WhatsApp conversations. Card Scanner: Our new Card Scanner feature extracts contact information from business cards.

    • Introducing card scanner in Bigin Android app

      Hello everyone! We are excited to introduce the card scanner feature on the latest Android version(1.7.26) of the Bigin app as well. Card scanner extracts contact information from business cards and allows you to save them as contacts in Bigin. You can

    • Full RTL and Hebrew Translation Support for Zoho Creator User Portal (Including All System Pages, Templates, and MFA Screens)

      Dear Zoho Creator Team, We kindly request comprehensive support for right-to-left (RTL) languages, particularly Hebrew, across the entire Zoho Creator user portal. This includes system-generated pages, templates, and multi-factor authentication (MFA)

    • ZUG real estate virtual meetup 2025: Sign documents, collect payments, and automate workflows with Zoho Sign

      Hi there! Are you in real estate and looking for a secure, compliant way to manage all your paperwork? In such a fast-paced industry, timing, compliance, and client trust are everything. Handling paperwork has always been a challenge, whether you're finalizing

    • OCR (Optical Character Recognition), automatisation des PDF et autres améliorations de Zoho RPA

      Zoho RPA est une plateforme d'automatisation des processus robotiques conçue pour accélérer et simplifier vos workflows. Elle permet de connecter facilement vos applications cloud à vos systèmes existants, même ceux qui ne disposent pas d’API, afin d’automatiser

    • 📞 Call + 💬 WhatsApp + 📲 SMS in Zoho CRM – All in One Place!

      We’re excited to introduce HelloSend, a powerful communication extension for Zoho CRM that brings SMS, WhatsApp, and Voice Calling directly into your CRM workspace. Whether you're in sales, support, or service delivery, HelloSend helps you connect with

    • Automation#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,

    • Product Updates in Zoho Workplace applications | May 2025

      Hello Workplace Community, Let’s take a look at the new features and enhancements that went live across all Workplace applications this May. Zoho Mail Increased Preset Limit for Reminder and Snooze Options Preset limits for the Reminder and Snooze options

    • Outlook 365 ('classic') won't connect to Zoho email

      New computer, fresh install of Office desktop. On the old computer Outlook was working fine with Zoho, retrieving/sending mail, etc. On the new one I can't connect the accounts in Outlook--Outlook just keeps popping up the box asking for a password. All

    • login email

      Never logged into email says last log in never loged into

    • Installment plans

      Hi I am looking for a way to allow my customer to make equal monthly payments. For instance if I create an invoice for customer Y for $1000 I want to allow them to make equal monthly payments for the next 6 months. I need those payments to be auto charged

    • Search Mail with URL parameters

      Is it possible to search Zoho Mail by passing URL params like we can in Gmail? eg. mail.google.com/mail/u/0/#search/from:(jane@doe.com)

    • Need Help Fetching Latest Conversion Rate by Date

      Hi Team, I’m currently working on building a Balance Sheet in Zoho Analytics across different entities, with a common base currency of USD. I receive USD conversion values on a daily basis, and my requirement is to always capture the most recent available

    • Enhance Zoho One Conditional Assignment to Fully Reassign App Settings When Changing Departments

      Hi Zoho Team, We’d like to submit a feature request regarding the current behavior of Zoho One’s conditional assignment logic when moving a user between departments. 🔧 Current Limitation As it stands, Zoho One’s conditional assignment does not remove

    • Category to Alert

      Hi I am looking for help on how to solve an issue. We use the Category field for all items. We also use Composite Items. We would like to create an email alert when a Sales Order is created, however it would need to look at the Item to identify the category

    • Validation Rule (Date)

      Hi There,  Can any anyone help me with the validation rule? I'm trying to fire a rule whereby the End Date cannot be before Start Date.  Any takers?  Manoj Nair

    • Beyond Email: #3 Organize effortlessly with Bookmarks

      With her team’s details now neatly saved under Contacts, Sarah is feeling more settled in Zoho Mail. As she begins exploring her new workspace, she remembers the collection of useful links she has saved on her browser—project trackers, client portals,

    • Next Page