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

    • Journeys - how do i branch on contact call result

      Hi all. I want to branch based on the Call result field in contacts. Any idea how I can do this? Also what is the best way to have this condition checked at each step? Thanks!

    • The 3.1 biggest problems with Kiosk right now

      I can see a lot of promise in Kiosk, but it currently has limited functionality that makes it a bit of an ugly duckling. It's great at some things, but woeful at others, meaning people must rely on multiple tools within CRM for their business processes.

    • Perform custom actions from the Ticket interface using Buttons

      Hello everyone, We have introduced an option to add Buttons to the tickets, which will facilitate direct access to other applications, websites, allows execution of custom workflows, and more. Accessibility and visibility of buttons The buttons can be

    • Inserting a video from library in microsite

      Hello, We have uploaded videos in our space library. We created a new event and want to use the videos in our main page our microsite. It's possible to selected image from the library, but no videos. Only URL are accepted, but videos in library have no

    • UUIDs

      Has anyone coded a Universal Unique Identifier (UUID) generator in Deluge?

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

      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,

    • Invalid Client - Client ID passed does not exist

      Hi, Daniel here. i try to generate an authorization code by following this page Authorization Request - Web Apps - OAuth | Zoho Accounts https://accounts.zoho.com/oauth/v2/auth?scope=ZohoCRM.users.ALL&client_id=1000.myclientid&response_type=code&access_type=offline&redirect_uri=https://localhost:7195/account/integrations/zoho/tokencallback

    • Generate Token v2 api using c# sdk

      Hello I am trying to generate a access token using c# sdk but fails every time.is there any sample code so that i can implement that code to insertleads in crm.  my use case is i want to insert and update lead in zoho crm. when user signup in my website i insert the detail of that user in crm using API v1. but V2 api is more confusing that API v1 . so please can anyone provide me a sample code of c# sdk to generate token and insert lead in crm. Or is there any way to achieve this without using c#

    • Upsert your missing data without affecting the historic logs

      Dear Customers, We hope you're well! Migrating your data from a legacy system to Zoho CRM is a critical operation as it deals with treasured data. In an unfortunate event, if you have missed to move your historical datasets, you have had to repeat the

    • Dashboard won't save, nor allow me to do a "save as"

      For some reason, one of my dashboards won't let me make any modifications to it and save?  I get the "do you want to save before closing?' and I say yes and the dialogue box just stays there.  I try to do a "save as" right after I open that dashboard and I get the dialogue box that seems to let me name the new dashboard, but it won't let me save.  The dialogue box just stays there unless I hit cancel or no. Can you please help? Jamie

    • Copying Files Between Modules

      Hi, I'm creating a Deluge script and I've hit a roadblock. I'm trying to copy files from one module (let’s call it Module A) into another one (Module B). Here’s what I’m doing: record = zoho.crm.getRecordById("Module_A", record_id); files_toCopy = record.get("Files_From_A");

    • Problem with scheduled report sending in Zoho Analytics

      Problem with scheduled report sending in Zoho Analytics. Reports are not sent due to size. How can I increase it?

    • 【Zohocreator】ログについて

      ワークフローのDelugeスクリプトのinfo関数が出力するログはどこから見れますか？

    • US military addresses

      When we have a client with a US military address having them fill in a form is a problem Zoho forms doesnt acommodate them correctly. It doesn't make sense for me to have to create a secondary data model for military addresses. I have placed some links

    • Introduction of Robotics Process Automation in Zoho products

      It will be great if Zoho can start advancing from automation to robotics process automation. For a start, it can be started with smart document understanding. Provide OCR engines Google cloud, Microsoft Azure Computer vision OCR, Microsoft OCR, Omnipage

    • Automation#34 : Automate Email threading for Ticket notification

      Hello Everyone, It's been a while since we've presented an automation. However, our community has been buzzing with ideas, use cases, and discussions with our community experts and Ask the Experts session. So, here we are again, presenting an automation

    • Zoho Sigma and Catalyst IPs for Whitelist

      Hi there, We are developing a series of integrations between Zoho CRM and Zoho Desk with an on-premises system for a customer and they have firewall rules to access their server, so they are requesting the list of IPs addresses for our backend calls,

    • 【開催報告】大阪 ユーザー交流会 2025/6/5 Zoho サービスを活用して業務をアップデート

      皆さま、こんにちは。コミュニティチームの中野です。 6/5（木）に、大阪 ユーザー交流会 を開催しました。本投稿では、その様子をお届けします。 当日の登壇資料などもこちらに共有しますので、参加できなかった皆さまもご参照ください。 （Zoho社員セッションの登壇資料については、8月に開催する福岡 ユーザー交流会の開催報告で共有予定です。） 今年初の開催となる大阪 ユーザー交流会では、akippa株式会社 内藤さんによるZoho CRM / Forms の事例セッションのほか、 「見込み客・顧客データの管理/活用方法」をテーマに、参加者同士でZohoサービス

    • Moving forward, can we change our reports to send record ID's by default?

      With the new policy of not including record ID's in reports, is there a way to default to including them in my reports as they used to be?

    • WhatsApp integration isn't very useful at all (no workflow support)

      We have set up WhatsApp through Business Messaging. It works, but there appears to be no workflow support for messages that are sent/received! Without being able to trigger a workflow when an inbound message is received, my colleagues would have to manually

    • Zoho CRM 差し込み文書テンプレート if文

      Zoho CRM の差し込み文書のテンプレートを作成しています。 フッターにページが 2ページになる場合は、「次葉へ」と言う文字を表示したいのですが、ページ数による判断はできないのでしょうか？ 現在はサブフォームの行数で判断しているのですが、複数サブフォームを差し込んでいるので、合計何行で2ページ目になるのか把握が難しく、ページ数で判断できればうれしいなと思い、質問させていただきます。 ※行総数はワークフローでレコード保存時にカスタム関数でサブフォームの行数をカウントして数値を保存しています。

    • Record payment: Payment Mode vs. Deposit To and how to "connect" them!?

      How do we set up that when we choose:  "Payment Mode"= Cash, then "Deposit to" is automatically set to Petty Cash, and if we choose  "Payment Mode"= Check, then "Deposit to" is automatically set to Undeposited Checks, and if we choose  "Payment Mode"=

    • Allow split times for business hours feature

      It would be great to be able to set business hours multiple times during the same day. For example: Monday from 9am - 1pm, and then from 2pm - 5pm This would allow calls to be sent straight to voicemail during 1pm-2pm during lunch break.

    • Add Knowledge Base KB Articles to multiple categories

      Greetings, Love you help center system. One item that would be incredibly helpful to many of us would be able to add a single Knowledge Base KB article to multiple categories in our system. It seems it could be quite easy to use a checkbox form, instead

    • Peppol integration zoho invoicefu

      Hi, Belgium will require Peppol invoicing as of 2026. I found that this is being prepared for Zoho books, to be released in Sep 2025. Will Zoho Invoice get this functionality too? I like the Invoice app for my part-time side business as bike mechanic

    • Error in formula

      Can someone PLEASE tell me what is wrong with this formula? Formula return type, I have tried string and decimal fn.Year(fn.Now())-fn.Year(${cf_purchase_date}) I keep getting the following error. Incorrect argument type passed for function Year Thanks

    • Sync “Display Author Info” Setting from Zoho Desk to Zoho SalesIQ

      Dear Zoho SalesIQ Team, We’d like to suggest a refinement to how Zoho SalesIQ displays knowledge base articles that are synced from Zoho Desk. Current Behavior Zoho Desk allows us to control whether author information (name, profile picture, etc.) is

    • Respect Help Center Visibility Settings for Knowledge Base Sync Between Zoho

      Dear Zoho SalesIQ Team, We’d like to suggest an important improvement to the integration between Zoho Desk and Zoho SalesIQ with regard to the knowledge base synchronization. Current Behavior SalesIQ offers excellent functionality by allowing us to sync

    • Enhancing Answer Bot's Capabilities

      Wouldn't it be amazing if the answer bot could directly search for answers in our database, FAQs, articles, etc., without needing to display the entire article? without relying on external tools like ChatGPT This way, it could provide concise and relevant

    • Centralize and Streamline Zobot and Flow Control Settings in Zoho SalesIQ

      Dear Zoho SalesIQ Team, We would like to suggest a crucial improvement to the current setup and configuration experience within SalesIQ. Problem Statement Zoho SalesIQ currently offers three primary mechanisms for handling customer chats: Answer Bot –

    • Client Portal ZOHO ONE

      Dear Zoho one is fantastic option for companies but it seems to me that it is still an aggregation of aps let me explain I have zoho books with client portal so client access their invoice then I have zoho project with client portal so they can access their project but not their invoice without another URL another LOGIN Are you planning in creating a beautiful UI portal for client so we can control access to client in one location to multiple aps at least unify project and invoice aps that would

    • Custom Formula

      Good day, I am trying to create a formula field in Zoho Desk to calculate an age, but I'm having trouble figuring out how to make the formula. This is a formula I found, but it keeps telling me the wrong field name. Can someone please help me? Field name:

    • Click to edit fields with Canvas layout

      Hi, I have integrated new layouts using Canvas and its been going well so far. Although I cant seem to figure out how to change the fields so you can click anywhere on it to select or edit the field. Now a small pencil will appear next to the field you

    • Show Custom CSS Changes in SalesIQ Preview

      Hello Zoho SalesIQ Team, We truly appreciate the ability to customize the chat window using custom CSS via: Settings > Brands > [Select Brand] > Personalization > Appearance > Upload Custom CSS. This flexibility is extremely helpful in aligning the chat

    • Light Agents for External Users

      We are currently on the Zoho One version of desk and cannot create any light agents. We would like to create light agents for external users in order for them to see their tickets and approve changes.

    • Inquiry Regarding Accessing Multi-Select Field in Pivot Chart

      I'm currently working on a project and would appreciate guidance on accessing and utilizing a multi-select field within a pivot chart in Zoho Creator. Could you provide instructions or resources to help me implement this feature efficiently? Your assistance

    • What should I be using Salesinbox or Zoho Mail

      Hi everyone, I again find myself a little confused by the Zoho offering.  I am a long time Zoho CRM and Zoho mail user. About a year and a half ago, Zoho mail had a major update and things like streams were added. We have learned to use the new features, although I am sure not to their fullest.  Now while getting help with an issue that I had with emails associated with Contacts in CRM, I now have just discovered that I have Salesinbox. OK, so it looks pretty cool, but now I find myself again in

    • {"error":"invalid_client"}

      Im sending POST query to https://accounts.zoho.com/oauth/v2/token like this described in https://www.zoho.com/crm/help/api/v2/#generate-access article, but got error {"error":"invalid_client"}. Im first thinking that this my mistake, but after this I

    • Digest Mai - Un résumé de ce qui s'est passé le mois dernier sur Community

      Chers utilisateurs, Encore un mois vient de filer à toute vitesse chez Zoho Community France ! Jetons un œil à ce qu’il s’est passé. Vos données non structurées méritent mieux qu’un simple stockage. Avec WorkDrive 5.0, Zoho vous propose une solution intelligente,

    • Looking to Hire: Zoho Creator Developer for Vendor Dashboard Portal

      We are a Florida-based licensed liquor distributor using Zoho Books, Inventory, CRM, and Analytics. Many of our vendors are also our customers. We’re looking to build a centralized, secure Vendor Dashboard Portal in Zoho Creator that gives access to real-time

    • Next Page