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

    • What is Zoho Marketing Plus?

      As if there wasn't enough confusion with SalesIQ, CRM, Campaigns and Marketing Automation, now we have Marketing Plus too. Can somebody from Zoho please give us a comparative list of features that are in Marketing Plus compared to what's in Marketing

    • I didn't receive my domain verification mail

      I didn't receive my domain verification mail 

    • Creating a new deal with specific layout and pipeline

      I am trying to create a button which creates a new deal for a particular account. It needs to be assigned a specific layout and pipeline. It seems like it should be really simple but I've been struggling to get this to work all day, can anyone help?!

    • Announcing New Features in Trident for macOS (v.1.21.0)

      Hello everyone! Trident for macOS is here with interesting features to elevate your workplace communication and productivity. Let's take a quick look at them. Get better visibility for concurrent events. Quickly compare and manage simultaneous events

    • Modifying Product Details

      I am in the process of setting up new products in Zoho Commerce and have encountered a few problems: 1) Tabs It seems that Product Details pages do not have the ability to create Tabs. eg:  https://www.thedebugstore.com/tp240141-aardvark-usb-i2c-spi-host-adapter-total-phase.html

    • Zoho Commerce B2B

      Hello, I have signed up for a Zoho Commerce B2B product demo but it's not clear to me how the B2B experience would look for my customers, in a couple of ways. 1) Some of my customers are on terms and some pay upfront with credit card. How do I hide/show

    • Creating a custom CSV file using deluge script/

      I have an application I have developed and the client wants us to place an export file in csv onto an ftp server daily. Now I don't see au options in creator to change the separator to anything else. The client wants the separator to be the pipe symbol "|"  I think i would be able to create schedule with some code to create the appropriate data in a string using deluge script but I haven't seen any functionality that would allow me to deposit that data as a file anywhere or attach it to an email

    • How can I get a nested value attributes inside a key par?

      Hello! Im getting the following output when reviewing a record I am after. I am trying to put some conditions based on a data value that is inside another data. For example, lets grab the below output. Info {"Account_Name":{"name":"Liberty Construction

    • Invoices not arriving and mail server settings

      I am having an issue where some clients are not receiving invoices. I have configured Zoho Books to send on my behalf and configured the appropriate SPF, DKIM and DMARC settings on my mail server and tested these as working. I get the CC'd copies so I

    • Multi Line Text Character Limit

      I want to export my Help Center articles but I realized that the text in the Answer column is being cut off. I'm guessing there is a character limit for multi line text fields. How can I get around this?

    • Emails bouncing to Hotmail / Outlook.com

      Today I have seen multiple emails bouncing all to Hotmail and outlook.com mailboxes, all other emails are being delivered. Is it just me or is this a widespread issue with Zoho Books ? Bounce Reason : uncategorized-bounce

    • Be careful if you want to purchase zoho one

      Hi, just to add one more complain to the other similar complains. When I purchased zoho one, Divith, my account manager told me (by email) that I would be able to keep different emails that I have inside the company (contact, privacy, etc.). During the

    • Schedule Timeout 5 minutes vs. stated 15 minutes

      I am running into a function run timeout error after 5 minutes for my schedules. The Functions - Limits documents states it should be 15 minutes: Functions - Limits | Online Help - Zoho CRM. What should it actually be? Due to the 5 minute timeout, I'm

    • Importing invoices in bulk using the xls file template - still posting as draft - Is there a way to skip "mark as sent" and post it directly?

      Hello everyone, as the title say, is there a way that when I upload from the template file, it will post automatically? I tried changing the "Invoice Status" from draft to approved but it is still appearing as draft and is making me go to invoices so

    • How to set Sales Order Payment Terms when creating a Sales Order via the Zoho Books API

      I am creating Sales Orders via the Zoho Books API. I would like to set the Payment Terms to a particular value from the list of allowed values. Is that possible? I was able to get the list of payment terms via this API call: https://books.zoho.com/api/v3/settings/paymentterms?organization_id=XXXX"

    • Function and workflow to create customer payment and send receipt

       I am attempting to set up a workflow/custom function for the automatic creation of a customer payment and sending the email receipt, but am receiving the error "Improper Statement Error might be due to missing ';' at end of the line or incomplete expression" I've been over everything several times and cannot see where the error is (code is copied into the attached document).  I haven't used custom functions before with Deluge, so it's very likely something very simple, or I've completely mucked

    • How to rename the Submit Button by using deluge script

      Hi everyone, As we know, the Submit button can be renamed in the form builder setting. But I have scenario where I need the Submit Button to be renamed differently according to condition. Anyone knows how to do it? Thank You

    • Banking: Transfer from another account without base currency

      Scenario: A banking line item shall be categorised as an "internal transfer" from another bank account. This is a USD to EUR transfer. Our base currency is CHF. What we tried: Category: "Transfer from another account" From: Our USD account To: Our EUR

    • Item cost price - How to accomodate changing cost prices

      I am in urgent need of assistance with how to accommodate changing cost prices for items, not manually. We import items so their landed cost is always changing. This cost is NOT reflected however in the item cost price. This is going to cause us some

    • Marketer's Space: Targeted messaging : Leveraging Zoho Campaigns for Effective Communication

      Hello Marketers, Welcome back to Marketers’ Space! Targeted messaging ensures your communication reaches the right audience - boosting engagement, conversions, and overall campaign success. In this post, we’ll be looking at targeted messaging to create

    • :between: conditions in search?criteria

      Hello, please help solve problem I try to select deals by Creater_Time between dates i send this GET request /crm/v4/deals/search?criteria=(Created_Time:between:(2024-02-01T18:52:56,24-02-17T18:52:56)) encoded to /crm/v4/deals/search?criteria=%28Created_Time%3Abetween%3A%282024-02-01T18%3A52%3A56%2C24-02-17T18%3A52%3A56%29%29

    • Zoho Creator : Updating Records via Import. Can't use Autonumber or ZohoRecordID ?

      Hi, I am trying to use the function to update a report with an import. I'm running in to the error : "unable to update because the form has no column with unique values" In the release notes it says Only field with unique values can be used to compare

    • 💡 Feature Request: Custom App Bundle Plan (Pick Only the Apps You Need)

      Request: Allow Users to Build a Custom App Bundle (Choose Only the Apps They Need) Hi Zoho Team, I appreciate the value that Zoho One and the Plus Bundles (CRM Plus, Finance Plus, etc.) offer. However, I’m finding it difficult to get the best fit for

    • Search Feature Now Broken

      I have many hundreds of notes on Zoho Notebook but now when I search for a keyword, I only get 30 results maximum. This is unacceptable and yet another feature that has become broken on this quickly deteriorating software. Please fix immediately.

    • Restrict Zoho One Account Notifications to Admins

      Hi Zoho One Team, I hope you're doing well. We recently noticed that end users are receiving administrative pop-ups in Zoho One, such as the DKIM configuration notice (screenshot attached). This type of notification is only relevant to administrators

    • Automated Checkout

      Hi Team, I’m trying to create an automated checkout function in Zoho People. My requirement is that if an employee forgets to check out, the system should automatically check them out after 10 hours. However, I'm encountering an error while updating the

    • Zoho CRM Community Digest - June 2025 | Part 1

      **We offer both video and written formats, take your pick and jump in.** CRM FOMO is real. You could be doing everything right and still miss the beat. That’s where we come in. Zoho CRM Community Digest! Every two weeks, we bring you the insider scoop

    • Introducing Video Tutorials for the Zoho FSM Mobile App

      We’re excited to announce the launch of our brand-new video tutorials for the Zoho FSM Mobile App—designed painstakingly to help your field agents get up to speed in no time! Whether you're brand new to the Zoho FSM mobile app or just need a quick refresher,

    • Zoho People > Managed People > User Access Control

      Hello All I need your recommendation on how should i go about setting the User Access Control in my Zoho People

    • What happened to the tabs in the ribbon on the top in my CRM?

      Hi, This morning all of the tabs (modules) in the ribbon on top are no longer showing up. I had the modules in the ribbon in a specific order for easy, one-click access. Now it's only showing the active tab and the rest are hiding under the three dots

    • Connect to Australian bank

      How do I connect to an Australian bank. No Australian bank shows up in my list. I think its because the service provider is Token and not Yodlee. How do I change this?

    • Searching for content within courses

      Hello, I have been testing out Zoho One for my company have been exploring Learn. I've noticed that you cannot search for content within a course. You can only locate the title of the course. Example: Course: How to Make Your Bed Chapter: Pillows Lesson:

    • Citations Problem

      I'm having an odd problem with the "Add Citations" feature of Zoho Writer. When I add a citation using the "Fetch website details online" feature it works the first time I use it but if I try it a second time by clicking that link nothing at all happens

    • Zoho People Leave Balance Show as Negative

      Hi All I have the Portugal material Leave that policy allows up to 120 days or 150days for employee to apply within 365 days and employees is able to take minimum of 1 days or up to 120 days In my Leave Grant I have set as the setting.

    • Zoho People > Performance > Appraisal > Mismatch between the template-configured module and the currently enabled module.

      Hello There When we enable the performance module there a prompt Mismatch between the template-configured module and the currently enabled module. How do we resolve this

    • Introducing WhatsApp integration in Bigin

      Greetings! In today's business landscape, messaging apps play a significant role in customer operations. Customers can engage with businesses, seek support, ask questions, receive personalized recommendations, read reviews, and even make purchases—all

    • Zoho People Leave Application Module Error: Leave balance has exceeded as on 09-07-2025.

      Dear All I need to check how do i resolve the issue of Error: Leave balance has exceeded as on 09-07-2025. All my leave have this issue

    • Power of Automation:: Daily Time log summary broadcast to Zoho Cliq using Schedule Custom Functions

      Hello Everyone, A Custom function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. Requirement:

    • When Calls Ends, Creating Note with the call description by deluge code

      Hi, i need help with writing deluge code function, to scenario is like this - i want to create a workflow thats after 10 that the call ends the deluge function will create a new note in module calls that link the note in module calls to the his lead ticket

    • Default Memo from Custom Field (from Bill) when Paying with Check

      Hi, we are using "Pay via Check" option to pay for our Bills in Zoho Books. I would like the memo on the check to pull directly from one of the custom field values within the Bill. Is there any way I can do this? The memo that I need is already on the

    • Next Page