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

    • Zoho CRM Webinar – Automate everything across Customer Journeys in CommandCenter 2.0

      How efficient is your current CRM automation setup? As customer journeys become more dynamic, it's common for data and actions to get scattered across teams and modules. This leads to broken processes and inconsistent customer experiences—especially across

    • Changing employees email address

      How do I change an employee's email address? I am an administrator on the account but it says that I am "not allowed" to do it?

    • MULTI-SELECT LOOKUP - MAIL TEMPLATE

      Dear all how are you? We need to insert data from MULTI-SELECT LOOKUP in a email template, but I can't do that, when I'm creating the template I can't find the field to insert it. is there any solution? PVU

    • Changing the owner of a call

      Am I correct in my conclusion that I cannot change the owner of a call in Zoho? The field does not show up in the screen, nor can I make it show up as the systems does not give me that option. I cannot "mass update" it either. I tried it, but Zoho refuses to change the name of the owner. Please help out: how do I change the owner of a call.

    • Global Fields

      Just like Global Sets for Picklists, we would like to have global fields for any kind of field. Three things that should be saved globally: 1. The Existence of the field 2. The Name and 3. Association with a module should be set up in a respective place

    • Introducing Screen Share with Audio

      Share your entire screen or just the chrome tab with audio for more engaging presentations. Your audience will hear sound just like you do, whether it's a video, demo or any other content. This is ideal for training sessions, team meetings, and client

    • Need Help Preventing Overselling in Zoho Inventory

      Hi fellow Zoho Inventory users, I'm reaching out for advice on managing inventory control in our growing business. We've recently encountered situations where sales orders get confirmed despite insufficient stock, creating operational challenges. Our

    • Tip #53: Populate and search values from tables using Table Lookup

      Qntrl supports tables to store organization-related data and access it easily. Data stored here can be populated and displayed in orchestration using Table Lookups. This helps organizations list sizeable data in dropdown or multiselect dropdown fields

    • Introducing more AES digital signature options in Zoho Sign

      Greetings! Zoho Sign has continually strived to partner with trust service providers across the globe to give you complete security and confidence, so you can e-sign documents no matter where you are. We've recently partnered with IgniSign, a trust service

    • Shuffling between one note to the next

      I usually start all my notes per interaction with a contact with the date and then a little detail. But when I search for it it only see a small portion of the note and can't immediately tell which contact its associated with. can we make the note content

    • Important Update: TRAI Mandates New SMS Header Format

      Hello everyone, We have an announcement regarding a new regulation by the Telephone Regulatory Authority of India (TRAI) that affects all application-to-person (A2P) SMS services. Starting on May 6, 2025, TRAI has mandated that telecom service providers

    • Preview generation in progress for days

      I uploaded a video file to Zoho webinar. The file has been showing Preview generation in progress for days. Pls help, why is not approved?

    • Workdrive Upload Notification

      Is there a way to be notified when someone externally has uploaded files to a folder? The "Unread" tab is really worthless because it shows all files from every directory on the system. I just need an email (or bell at worst) that says "someone has uploaded into <foldername>".

    • Workflow for "Expenses" module?

      Hi there, over the last 2 years, Zoho Expense has seen tremendous growth and we are happy with it. But, sometimes it is frustrating to see things are being implemented halfheartedly, or so it seems. For example, There is the possibility to create workflows

    • Markup instead of discount??

      Is it possible to have the discount field on an invoice or estimate be a markup instead? It's the very same functionality that I am looking for - to be able to markup an individual item by either a $ or a % and have that cost added (instead of subtracted) to the item cost.  Currently, I use the tax feature to accomplish this, but it's very awkward to have "Markup 15%" listed after the subtotal. Plus, if I want to markup items at different rates, I end up with several "markup" lines in the totals

    • Allow Mapping of Zoho Desk Knowledge Base Categories to Multiple Departments in Zoho SalesIQ

      Hello Zoho Team, We hope you're doing well. We would like to request an enhancement to the Zoho SalesIQ integration with Zoho Desk, specifically regarding the way Knowledge Base (KB) articles are mapped and displayed across departments. Current Limitation

    • Announcing new features in Trident for Windows (v.1.27.4.0)

      Hello Community, Trident for Windows is here with exciting new features to elevate your communication and enhance productivity. Let’s dive into what’s new! Smart Sign-in. You can now sign in to Trident with Smart Sign-in. With this new addition, you can

    • Inactive Items - Make Less Prominent by Default

      Currently, when one marks an Item as "Inactive", it really doesn't do much of anything to hide it or get it out of the way. Search and reporting within Finance should, by default, hide inactive Items from standard reports, searches, etc. If one specifically

    • Add Lookup Field in Tasks Module

      Hello, I have a need to add a Lookup field in addition to the ones that are already there in the Tasks module. I've seen this thread and so understand that the reason lookup fields may not be part of it is that there are already links to the tables (

    • Time Entry : Auto fill fields Hours minutes seconds

      Hello world, Do someone know a script (for workflow rules) which fill automatically fields hours spent, minutes spent, seconds spent when we fill Executed time and End time Formula should start from (End time - Executed time) Thx in advance

    • Zoho Forms - edit the settings of the Zoho CRM field to change the integration with CRM

      I've created a Zoho CRM field in my form to pre-populate selected CRM details into the form, following the instructions here https://help.zoho.com/portal/en/kb/crm/integrations/zoho/zoho-forms/articles/zoho-forms-crm-integration#Step_2_-_Add_Zoho_CRM_Field_in_the_form

    • Ability to add notes to an appointment and add notes/attach docs to a consultation

      As an idea for the future, it would be helpful to be able to add notes to an existing appointment--there is a place to add notes for the customer, but I don't see one for the appointment. It would also be helpful to be able to add notes or attach documents

    • Im trying to white list domain dynamically in zoho desk extension

      Im trying to white list domain dynamically in zoho desk extension. But it show error Error: {errMsg: 'No entry found in plugin-manifest whiteListedDomains for requested URL'} syntax "config": [ { "displayName":"Shopify Admin API access token ", "name":

    • Zoho Payroll: Product Updates for India - May 2025

      This May, we are glad to unveil new capabilities in Zoho Payroll that simplify your payroll activities. Here's the list: Let Employees Choose Their Tax Deduction Method for One-Time Payments Calculate variable earnings based on percentage of CTC Carry

    • Bulk Update Tasks/Task Lists/Milestones

      Is there a way to bulk update tasks/task lists/milestones? We have several projects that are in the same template, and our staff complete them tasks at a time - and would like to go in an bulk update all related tasks/task lists/milestones at once. But you can't do this. I remember in an old version you could export your tasks, update the excel doc and reimport. But it doesn't seem like that option is available anymore. Can someone provide a solution/idea? Otherwise we are spending a lot of time

    • Sync failed: Invalid Date value

      Hi, I have a local .sqlite database. After importing one table through the Databridge, and produced my dashboards, I cannot sync. I get an error regarding the date column: [Line: 2 Field: 4] (2018-07-12) -ERROR: Invalid Date value The data found at the

    • Office 365 is marking us as "bulk"

      All of a sudden (like a couple of days ago) all of our customers who are on Office 365 are getting our mails in their junk email. This is not the case with Gmail or other random mail servers, nor between us. We got a 10/10 score on mail-tester.com. Also,

    • Zoho Assist

      Hi, We are using zoho assist unattended access in some windows server 2012 and recently the agent lets you connect but not let you do anything on the remote machine. Sometimes you can click on something but nothing happens. There's a issue with this new

    • Modify workflow from "ON CREATE & EDIT" to "ON CREATE" only

      Salut, Is there a way to easilly change my choice of trigger of workflow from on create & edit to on create only, or do I have to re-do the whole worklow from scratch ? Sylvain

    • Access custom modules via API?

      Is it possible to access a custom module in Zoho Inventory via the API? I can not find any reference to this in the API docs.

    • Welcome to the Zoho Service Plus community

      Hey everyone, We are excited to welcome you to be a part of the Zoho Service Plus community. Here's a quick overview of what Service Plus is all about and how the community can help us work together. What's Zoho Service Plus? Zoho Service Plus is a unified

    • Restrict Zoho Cliq Webinars and Announcements to Admins Only

      Hi Zoho Team, We hope you're doing well. We would like to raise a feature request regarding in-app announcements in Zoho Cliq, such as the recent webinar popup about the Cliq Developer Platform: While these announcements are useful, they are not always

    • Track ZohoForm Conversion using Postmessage event

      Hi, I’ve been using a third-party lead tracking tool to capture leads from my website along with their source. Earlier, with the HubSpot form, the third-party script was able to detect the postMessage event that iframe forms typically send back to the

    • Share Notebook with group created in Zoho One

      I have created a group in Zoho One for a section in my company. Is it possible to share a notebook with that Zoho One Group? Currently, it seems only possible to share to emails. Unfortunately for large teams, this will mean we are constantly having to

    • Create Tasks in arbitrary Zoho Project triggered from CRM [Zoho Flow]

      Community, hello What I'm trying to do is to create a Zoho Project when a Deal is created in CRM and then to be able to add tasks to this Project also from Zoho CRM with the trigger (Blueprint/ Workflow). I succeeded in creating Project using Zoho Flow,

    • Outlook Add-in security times out needs to login 10 times a day

      hi we've just switched the Zoho. We use Azure SSO. All users have stopped using it. Sometimes it asks every 5 minutes. What should I lot at to solve this?

    • Simplify Zoho API integration with Deluge’s invokeAPI task

      Hello all! Happy New Year! As we kick off 2025, we’re excited to share some of the latest updates to enhance your Deluge experience. While Deluge already offered robust API integration capabilities, we’ve taken it to the next level with the introduction

    • Simplify Zoho API integration with Deluge’s invokeAPI task

      Hello all! Happy New Year! As we kick off 2025, we’re excited to share some of the latest updates to enhance your Deluge experience. While Deluge already offered robust API integration capabilities, we’ve taken it to the next level with the introduction

    • Attention: Display Issues on Chromium Browsers with Intel® Core™ Ultra Processors

      Dear Customers, We've recently identified a display-related issue that may affect some of our Zoho Assist users, particularly technicians using devices powered by Intel® Core™ Ultra Processors. What’s Happening? If you're running a Chromium-based browser

    • [WEBINAR] Smooth year-end closure with Zoho Books (KENYA)

      Hello there, This webinar is for all Kenyan businesses looking to wrap up their financial year smoothly! Join our free session to learn how Zoho Books can simplify your year-end process. What to expect from this webinar: - All the latest updates in Zoho

    • Next Page