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

    • Filter by user in Pivot Chart

      I have a Pivot chart where the data should be filtered by user. The user enters the system and should see only the data that correspond to it. Can anyone help me?

    • Is ZeptoMail Still Supported? No Response to API Query in Over a Week

      Is ZeptoMail Still Supported? No Response to API Query in Over a Week I’m posting here to express my growing frustration and concern over the lack of professionalism I’ve experienced with Zoho's ZeptoMail support. On July 21st, I received a response asking

    • Add ID to the recycling bin page

      Feature request to add the ID to the recycling bin page. This would be helpful for reference when trying to recover things. This is the long zoho ID for each item. - ticket ID - contact ID - account ID - etc.

    • Remove System Defined Ticket Layout

      Hi ZohoDesk, I have created a new Ticket Layout and made it the default and I want to remove the original default one so there is only one to choose from. It won't allow me to do this, or go into the options and take the tick out of the show in Help Center.

    • ZOHOLICS Japan 2025 開催のお知らせ

      ユーザーの皆さま こんにちは、Zoho コミュニティチームの中野です。 年に一度の自社最大イベント、「ZOHOLICS Japan 2025」（ゾーホリクス）の開催が決定しましたので、こちらでお知らせします。 今年の開催回は、特別ゲストやZoho のエキスパートが、 最新のDX事情や皆さまのビジネスプロセス改善、業績アップのヒントとなる情報をお届けします。 Zoho コミュニティからは、Zoho Championの西尾さん（@西尾　真言）、 コミュニティアンバサダープログラム（ZCAP）メンバーの箕輪さんにご登壇いただき、

    • Unable to connect Zoho Learn to other Zoho Tools

      Hello Zoho, Can you work on Zoho Learn. I am unable to connect it with other Zoho tools like Zoho people or even Zoho SalesiQ. This is needed, especially if I am connect Ai to my systems. Please work on connecting your applications better, especially

    • Chatbot for Urdu language

      Hello, I have successfully set up Zoho Desk and integrated it with Moodle using ASAP. I am now looking for a chatbot that supports the Urdu language to enhance student support. My goal is to enable the chatbot within ASAP so that students can ask questions,

    • Multi Level Hierarchical Query

      Hi guys I have a situation where i am trying to extract the descendants of a particular entry. So long story short, i have the Account table with Agency (A) id = 1, and that has child Agency (B) id = 2. This child agency (B) has a child agency (C) id

    • AI-Powered Grouping and Tagging of Related Issues and Tasks in Zoho Projects

      Dear Zoho Projects Team, Greetings, We would like to suggest a feature that would greatly enhance how we manage feature requests and bug reports submitted through the Zoho Desk to Zoho Projects integration. Use Case: Our support agents handle customer

    • How to change side bar from dark mode to light mode?

      The side bar on the left side in workdrive doesn't appear to have a way to fix it from dark mode - is there a way to? I can't read in dark mode without excessive headaches, and I would really like to be able to see while I have workdrive open, as workdrive

    • How to see history on Bulk send of Customer Statements

      Hi, We bulk send statements to customers every month via Books - every month we have customers emailing requesting a statement. Currently I have no visibility on if a customer was sent the statement or not and if our process is being followed or overlooked

    • Guided Conversations - Ticket Creation

      Hi there, Using Guided Conversations to Take Customer Data and apply it into a Support Ticket for internal use, Is there a way to take multiple Textual Variables Inputs (A series of questions), and have the answers all appear in the Description of the

    • How to add buttons elements in the Header

      I am trying to add CTA (Call to Action) buttons in the right side of the main navigation menu. This is a common practice for sites but I can't seem to figure this out for Zoho Sites. Is there a custom workflow that could be shared with me? 

    • Automatic back up - Zoho Recruit, books, people,crm, analytics

      Hello, Has anyone found a good way of automatically backing up Zoho (CRM, expense, recruit, people, books, analytics).? I have found with tool that does, but it doesn't include recruit or analytics It's a bit annoying and time consuming having to go to

    • delete departments on zoho desk

      I created test departments on zoho desk. how can i delete them now?

    • Validation, checking if a file has been attached to the ticket

      A very useful option would be to allow checking, under specific conditions, whether the user has attached a file to the application, e.g., a bug report. Some applications require files to be attached, and the system could enforce this after the system

    • AI & Zoho Recruit

      Hello, I guess we all are using AI in our personal and professional lives. Now, let's imagine. Recruitment is just a succession of stages and steps. For which step would you like to see AI implemented into Zoho Recruit ? I'll start : - Automatic translation

    • Zoho Flow not handling Boolean properly

      Hi, I have a checkbox in one system that I'm trying to sync with a checkbox in Zoho CRM. The value from the source system comes in as blank (unticked) or 1 (ticked). I've written the following custom function to convert the output to either boolean false

    • Quotes Module - import data

      Hello Zoho, is it possible to import Quotes records? I was trying and i have no results. Raport shows no data imported. Could you help me please how to do it?

    • Balance Sheet - Zoho Analytics

      Hi Team, I’m looking to implement a feature that captures the conversion rate based on the filters applied. By default, it should fetch the most recent conversion rate, and when a filter (such as a timeline filter) is applied, it should return the conversion

    • files sent will not open for recipient

      work files (done in writer) which previously opened will not open for the recipient

    • How to Print the Data Model Zoho CRM

      I have created the data model in Zoho CRM and I want the ability to Print this. How do we do this please? I want the diagram exported to a PDF. There doesnt appear to be an option to do this. Thanks Andrew

    • Cisco Webex Calling Intergration

      Hi Guys, Our organisation is looking at a move from Salesforce to Zoho. We have found there is no support for Cisco Webex Calling however? Is there a way to enable this or are there any apps which can provide this? Thanks!

    • Migration of Mails from Pipedrive

      Hi, so far the migration from Pipedrive to ZOHO works pretty good. For full completeness of the migration we miss all the mails linked to Deals, Contacts, Customers, ... What possibilities do we have to have Pipedrive fully migrated to ZOHO? Best Regards,

    • Published sheets don't work anymore

      Hi, Published sheets don't work anymore. The display of values is very very slow and calculations are not displayed at all. Thanks!

    • WorkDrive TrueSync for macOS 26 (Tahoe) Beta

      Hello everyone, With Apple unveiling the macOS 26 (Tahoe) Beta, we know many of you are eager to explore the latest features and enhancements. We’re excited to support your enthusiasm! As part of our commitment to delivering seamless cross-platform experiences,

    • Limited layout rules in a module

      There is a limit of 10 layout rules per module. Is there a way to get that functionality through different customization or workflow + custom function (easily accessible), etc. Having just 10 is limiting especially if module contains a lot of data. Are

    • #1 Zoho Billing vs. Zoho Books: Which one should I choose?

      Managing your business finances isn't just about sending invoices. It's about keeping everything organized, accurate, and moving towards your organization's goals. At Zoho, we understand the complexity, which is why we offer two powerful yet distinct

    • Is Zoho tables still being developed?

      Has this product been abandoned? I haven't seen any useful new features or stability improvements over the past six months or more. I think Tables is a great concept, filling a niche between spreadsheets and full database tools, but the current implementation

    • How to connect oracle ADW with Analytics

      I want to add Oracle ADW as a data source in Zoho Analytics, but I couldn't find any relevant documentation. Can anyone suggest how to do it, or let me know if it's even possible? Thanks!!

    • RAG (Retrieval Augmented Generation) Type Q+A Environment with Zoho Learn

      Hi All, Given the ability of Zoho Learn to function as a knowledge base / document repository type solution and given the rapid advancements that Zoho is making with Zia LLM, agentic capabilities etc. (not to mention the rapid progress in the broader

    • add attachments to automated emails?

      Hi, I'm looking for a way to have documents saved under an account, be grabbed and sent to an email address once a specific status has been updated.  For example we have a tab we've labeled as sales orders, when the status is changed to shipped, it emails the customer the tracking number and estimated delivery date.  I'd like it to also grab pdf docs (COA, BOL, etc) from that order and send in that email.   Currently we have to go into zoho change the status to shipped, then email all the docs to

    • [Action Required] Zendesk - Zoho Analytics integration requires re-authentication

      Dear Zendesk integration users, Zendesk is transitioning to a new OAuth model that uses refresh tokens for improved security and stability (read more). As a result, all Zendesk users in Zoho Analytics must re-authenticate their Zendesk connections on

    • Rerun Migration?

      I migrated a mailbox a few days ago, but didn't do the cutover on the MX records until today.  How can I rerun the migration to sync the mailboxes?  The old account has had a fair amount of activity since the first migration. I am used to other systems

    • طلب حذف الدومين والمؤسسة من حساب zoho

      السلام عليكم، أود طلب حذف الدومين التالي من حسابي في Zoho، حيث لا يظهر لي خيار الحذف في لوحة التحكم: اسم الدومين: hudajstore.com البريد المرتبط: [contact@hudajstore.com] علمًا بأنني المسؤول عن المؤسسة، ولا أستخدم الدومين حاليًا، وأرغب في إلغاء ربطه وحذف

    • Microsoft Outlook Add-in Update: Enhancing Efficiency for Recruiters

      We've released an update to the Zoho Recruit Microsoft Outlook Add-in, which brings a host of features designed to streamline your recruiting process and boost productivity. Let's delve into the details: Associate Emails with records in Zoho Recruit You

    • New integration: Zoho Books + Zoho Forms

      Hello Zoho Forms community! We are thrilled to announce the addition of another integration that brings speed and efficiency to your financial workflows. Zoho Forms can now be integrated with Zoho Books! Here’s a quick rundown on Zoho Books! For anyone

    • Witness Sign - Automation with Zoho Creator

      Hi there, I used to be able do automatically send a Zoho Sign document from Zoho Creator where each signer had one witness. The action code was as follows for each signer and witness:       // CLIENT eachActionMap1 = Map(); eachActionMap1.put("signing_order","1");

    • Announcing: custom color palette + free workshop

      Hello everyone, We're excited to share new feature in Zoho Bookings—a color palette within booking page themes. You'll find this option under Manage Bookings > Workspaces > Booking Page Themes. You can customize the color of every element in your booking page and even alter the transparency of your background image. Please note that this is a paid feature included in the Basic and Premium plans. At the moment, it's available only under the Modern Web theme. This means you can create billions (7,

    • Removing To or CC Addresses from Desk Ticket

      I was hoping i could find a way to remove unnecessary email addresses from tickets submitted via email. For example, a customer may email the support address AND others who are in the helpdesk notification group, in either the TO or CC address. This results

    • Next Page