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

    • Introducing Zoho Commerce 2.0 — It's more than just selling!

      Hello! We are proud to launch Zoho Commerce 2.0, a reimagination of how online businesses look, feel, and function. This launch is both timely and symbolic, as we reaffirm our commitment to empowering small and medium enterprises with powerful, yet simple-to-use

    • Introducing prompt builder in Zoho CRM

      We’ve introduced a new way to put Zia’s generative AI to work—right where your teams need it most. With the all new prompt builder for custom buttons, you can create your own AI instructions to generate tailored content, suggestions, or summaries across

    • Item Batch Creation/Updation

      I have a requirement to integrate a local system with Zoho Books. I need to create items in Zoho Books with batch tracking enabled, but I couldn't find a specific API for that in the Zoho Books API documentation. Is there a dedicated API endpoint to create

    • Education Zoho User Group (ZUG) virtual meetup featuring Zoho Sign

      Hi there! The educational sector often faces the hassle of handling extensive paperwork, which leads to increased operational costs. A digital signature solution like Zoho Sign can help you modernize your processes, go fully digital, and seamlessly collect

    • Troubleshooting Delays in Zoho CRM Automation Workflows for Lead Status Updates

      Dear Zoho Community, I am refining a sales pipeline in Zoho CRM, implemented in May 2025, to enhance efficiency for a small business managing client leads. While the CRM effectively tracks leads, I am encountering delays in automation workflows that update

    • 📣 [Webinar] Spikra shows how businesses leverage Zoho Bookings to increase revenue

      [Webinar] Spikra shows how businesses leverage Zoho Bookings to increase revenue Hi all, Service-based businesses need to be on top of their client experience game to stay ahead. Spikra, one of our Advanced Zoho Partners, has been helping businesses deliver

    • Kaizen #172 - Leveraging the 'crmAPIResponse' Object in Queries

      Hello everyone! Welcome back to another week of Kaizen! We released the Queries feature sometime back and hope you have tried it out. A little gist about this feature before we move on to our post. Zoho CRM's Queries feature enables dynamic data retrieval

    • transforming 1D tables to 2D and the other way round

      Does Dataprep have tools to convert 1D tables to 2D tables and the other way round? The actions that are commonly called "pivot" and "melt". What I mean is transitioning between these two kinds of table: 2D id ____ name ____ surname ____ age 00 ____ Matt

    • How I Migrate data from one SharePoint Tenant to another

      I want to perform SharePoint tenant to tenant migration, but the problem is I don't know how to do so. I’ve heard about different SharePoint Migrator, but I’m not sure which one is the best for this type of migration. Any guidance would be really he

    • Rebrand your CRM with the all-new custom domain mapping setup

      UPDATES TO THIS FEATURE! 19th Jan, 2024 — Custom domain mapping has been made available for portal users in Zoho One and CRM Plus. 23rd June, 2023 — Custom domain mapping has been made available for all users, in all DCs. Hello everyone! We are elated

    • authentication

      We cannot connect via IMAP. We are receiving the following error: Error: You are yet to enable IMAP for your account. Please contact your administrator (Failure)

    • Bad User: Authenticated but not connected

      Zoho CRM cannot send/receive emails and it appears as if it may be an api configuration change either via Zoho or MS. Does anyone have information on how to fix this error message? I am admin on all my accounts. Zoho and MS are blaming each other.

    • Edit email address that appears on invoice

      Hi How do I change the email address that appears on invoices, it is showing the email address that i used to sign up to zoho with but I want to change it to another email address that we use for accounts. also is there a way to edit the position of a

    • Zoho Tasks - Add Sorting by Priority

      We are able to Group by and Filter by Priority but for some reason we can't Sort by Priority on the Task lists. Please allow for sorting by priority if the current view is not grouped by priority.

    • customize payment page

      Is there a way to customize, other than the theme colour, the payment page that customers are taken to from invoices? I can't seem to find a way. I just don't like the formatting of the current page and would like to make it look better. I've looked at

    • Zoho People > Candidate Form > error Editable Primary Lookup is needed to set add permission

      Hello All I have try to turn on the add feature in the candidate form It show the error Editable Primary Lookup is needed to set add permission What is missing from my side?

    • 6 time-saving tips for working with tables in Zoho Writer

      Tables have always been the best way to represent data. They help you structure and categorize information systematically and present them in a simpler way. While tables in Zoho Writer are easy to implement, some tasks might not be that obvious.  Here are some time-saving tips to help you work better with tables in Zoho Writer:    1. Insert Multiple Rows / Columns in a Table Adding more rows and columns is the most common action performed while working with tables. Instead of using the Table tab,

    • Add Built-in "Partner Finder" / "Contractor Directory" Tab to Zoho Desk Help

      Hi Zoho Team, We hope you're doing well. We would like to request a new feature for the Zoho Desk Help Center: A built-in, configurable "Partner Finder" / "Contractor Directory" tab or section, similar in concept to your own Zoho Partner Finder at: 🔗

    • Can't get sender adress to work

      Hi, I am having some trouble getting the sender adress to work for responses on tickets. I would like to configure a sender adress that is different from the zohodesk emailadress that is normally used. These are the steps I have followed: 1. Add a new

    • Question Regarding Deleted Reports in Zoho Desk Analytics

      Dear Zoho Desk Support Team, I hope this message finds you well. We have a question regarding the Analytics module in Zoho Desk, specifically related to deleted reports/dashboards. We would like to understand the following: Is there a recycle bin, recovery

    • Add an option to start zobot when user clicks the Chat with Us button

      I would like to have an option to start the zobot when user clicks on "Chat with us" button when chat widget is maximized that way visitors could see first the homepage and decide which channel they would like to use to connect, or to see the quicke help

    • Zoho Books - Feature Request - Provide "Show PDF View" toggle on Invoice records

      I have noticed it is possible to activate or deactivate the PDF preview on some records but not all. This would be very helpful on Invoices when a custom template is being used and the PDF preview does not represent the output file. Not available on:

    • Incorrect Handling of XLSX data

      Trying to import an XLSX schedule of bills into Zoho Books I ran across the problem of date formatting. To replicate: Build a CSV file with bill dates in whatever format you like and import it - this should work if you match the "dd/MM/yyy" etc. format

    • Disable Smart Filters By Default

      The smart filters "feature" is causing confusion for Zoho Mail users. New emails should be delivered to the inbox unless they have specifically opted to redirect them somewhere else. People don't understand that new emails might be waiting in a random

    • Adding Columns to Reports

      Hi, Is it possible to choose fields to be added as columns in the reports? Thank you.

    • How do I automatically assign the project owner for all tasks in Zoho Projects?

      I have been researching for days on how to automatically assign all the tasks to the project owner on creation of the project in Zoho Projects. I have been having to go in and manually change all the task owner from 'unassigned' to the owner of the project

    • CRM Kiosk - Action for GetRecords

      I have a Kiosk screen with GetRecords and want to use the selected records in a custom function. My particular case is to set a lookup value on the selected records. Generally speaking though, I want to work with the selected records in a function. I

    • Extract Archived Projects using Zoho Projects API

      In my organization we archive the projects when they are already completed, charged, invoiced, so that only those that are still pending process remain active. I need to access all projects (active and archived) from an external system, but the API v3

    • Email for customer to provide payment information

      Is there a way for customers when you set up a subscription to get an email that prompts them to put in their billing information to start their subscription? Also, can you show the subscription in their portal?

    • Unable to display field label from a hidden Single Line Textbox in Description

      Hi folks, I'm unable to display my hidden field, e.g. ${zf:SingleLine4} , in my description. I'm pre-filling this hidden Single Line Text box via "Field Alias - Pre-fill URL" settings. I noticed that my decimal form fields work, e.g. ${zf:Decimal}, and

    • Lookup fields

      Is there any way to add Lookup fields to Zoho FSM -- I do not see the option but I see default lookup fields in different modules

    • Zoho Analytics - Bill Table

      Hi I am new to Zoho and mainly work in Books. Recently learned of Zoho Analytics and am exploring it to create reports that would be useful for me. For example, I want to create a bills cash forecast by week for cash flow planning. When I start to create

    • Creating a tax - amount table in Analytics

      Hi everyone, I would like to create a report in Zoho Anayltics that creates the tax and amounts in a table. I have been able to create a report that shows me all the tax accounts, but I can't get it combined with the amounts of the accounts. Is there

    • Is it possible to do custom domains on test accounts that use saml setups?

      In Zoho Billing, Is it possible to do custom domains on test accounts that use saml setups for the customer portal?

    • I’m facing an issue while trying to upload a PDF file to a custom file upload field within the Leads module via the Zoho CRM API.

      Hi Zoho Team, I’m facing an issue while trying to upload a PDF file to a custom file upload field within the Leads module via the Zoho CRM API. I am able to manually upload a PDF into this field through the UI. I am also able to upload files as attachments

    • No chat option

      Chat option is not available in Android app.

    • How to add custom templates in zoho sheets mobile

      How can I add custom templates in Zoho spreadsheet mobile?

    • Order Items

      Hi .. We have to implement orders with line but each line should have a separate record and not as a subform, does anyone have experience with that kind of solution what is the best practice for that kind of thing Thanks

    • Trello: Invalid Client - Client ID passed does not exist

      Hello, I am trying to authorize the Zoho CRM power-up in Trello but always land on the following page: I tried adding a trello client to the Zoho API console but this generated a different client ID to the one in the link of the page in the above picture.

    • Zoho Sprints - Q2 updates for 2025

      Hello everyone! We’re excited to share the latest updates from Zoho Sprints for Q2 2025! This quarter, we rolled out a few highly-requested features designed to enhance collaboration and time management across your projects. Here's a look back at the

    • Next Page