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

    • Reports showing 24hr days instead of business hours

      I am not sure what I am missing, I created a report to look at resolution times in business hours but it is displaying hours based on 24hr days. I have business hours set (7am-5pm) and all that functionality is working, the reports are displaying 2 days

    • Skip Pages - Zoho form

      Hi Team, I need help with skipping pages based on the below logic in Zoho form: If field number of borrowers is 1 and field number of dependants is 0 then do not show page borrower 2 and 3 If field number of borrowers is 2 and field number of dependants

    • How to print blank form and also how to use form offline

      I have created a form in PC and want to use the form in the field to gather information. Can I use the form offline in PC - in case I have no internet access? As a fail safe, I'd like to print the blank form ut just in case the PC form doesnt work for

    • Using Marketing Automation Journey to associate lead record with a campaign?

      Hello, I am trying to push people from a Marketing Automation Journey to a CRM campaign so I can track lead journeys and lead conversions however I am hitting a roadblock. When a lead hits particular scores or does specific actions in marketing automation

    • Expose FIFO COGS in Invoice API

      Currently, in the Invoice API, the line_items array contains the purchase_rate field. Unfortunately, this purchase_rate field is the Cost Price of the Item, not the FIFO cost journaled into COGS for that sale. There seems to be no current way to get the

    • Drag-and-Drop Customization Interface for Help Center in Zoho Desk

      Hi Zoho Desk Team, We hope you're doing well. We’d like to submit a feature request regarding the customization of the Help Center in Zoho Desk. 🔧 Current Limitation: At present, Help Center customization options are quite limited through the Zoho Desk

    • hide resolution from help centre

      to my surprise, i just found out that the resolution text is public in the helpcenter, even if 'notify customer' is off. is there a workaround to that? how do others deal with this? How zoho support does this and I don't think its used by Zoho in the first place. the resolution is meant to be private, not public

    • Stop selling out of stock Items.

      Hi I have been using Zohobooks for a around 8 month now. I am not involved in selling process but my staff cant stop selling product which they do not hold in stock, this is a big headache for me as physical count never matches what is shown on the books. 

    • Importing New Items to be Added to Existing Item Group

      How to use the import sheet to import new items to be added to an existing item group. The import gives me an error that the item group name already exists and won't proceed. If it's possible, how should my import spreadsheet should look like?

    • ShipStation and Zoho Inventory

      Hello, I am looking to sync zoho inventory with shipstation ZOHO INVENTORY           SHIP STATION Sales Order  ==>  create ORDERS INVOICE  <==    Shipments What exactly does BETA mean on the Shipstation connector?  This is required for me to sign-on in the next month. Thanks in advance for your efforts

    • Condolences and Prayers Following the Ahmedabad Plane Crash

      Dear Zoho Team, We were heartbroken to learn about the tragic plane crash that occurred today in Ahmedabad, as reported in the news. On behalf of our entire team, we want to extend our deepest condolences to everyone at Zoho and across India who may have

    • Zoho Developer Community Monthly Digest – May 2025

      Hello everyone, Welcome to this month’s Zoho Developer Community Digest! From fresh product insights to hands-on tech sessions and standout community threads, there's plenty here to keep your ideas flowing and your skills sharp. Be sure to explore our

    • Timesheet in project not visible to invited users.

      We are using Zoho Projects and have enabled the client portal so our clients can access both Projects and Timesheets. However, while the client can see the project, no timesheet entries are visible. How can we resolve this issue?

    • Scheduled outbound calls

      How do you mark a scheduled outbound call as complete? I see no way to change the status.

    • How to see exact clicked links in CRM from Zoho Campaigns ?

      Hi, I'm wondering how I can see the clicked links from an email sent from Campaigns when I'm in a campaign in the CRM module. I can see the number of clicks but I need the sales team to be able to see which link has been clicked by a prospect or contact.

    • Email parser rule will only parse emails with an exact match? What madness is this?

      I finally got myhead around deluge and scripting, but wondered why my parser wasn't working. (https://help.zoho.com/portal/en/community/topic/extract-11-digit-number-in-any-position-from-enail-subject) Problem: There are *zero* characters or phrases that

    • How to add a fee based on payment method

      I currently accept both ACH payments and credit card. I want to add a 3% fee to a number of my subscription plans if the customer chooses to use a credit card (and not ACH/checking). How do I do this? Is there an in-built feature, or would i have to create

    • Condolences and Prayers Following the Ahmedabad Plane Crash

      Dear Zoho Team, We were heartbroken to learn about the tragic plane crash that occurred today in Ahmedabad, as reported in the news. On behalf of our entire team, we want to extend our deepest condolences to everyone at Zoho and across India who may have

    • CRM Analytics - Elegant Comparator

      Anyone noticed a wierd thing on the Elegant Comparator on CRM... Compare Among - Time Period - Last 6 Weeks... only 5 weeks show Compare Among - Time Period - Last 5 Weeks... only 4 weeks show Compare Among - Time Period - Last 4 Weeks... only 3 weeks

    • Copy Templetes from one module to another in Zoho Books.

      Hello, I have created a Custom Module in Books for GST Invoice. I can see only 1 Invoice Templete over there. Can we clone or copy Invoices Templetes from Sales Module of Books into Customer Module.

    • Enhancements in Bookings browser extension

      Greetings from Zoho Bookings! We're here with another update to make your scheduling even quicker. We have enhanced our browser extension with three significant features: Copy slots to email Gmail integration LinkedIn integration Copy slots to email This

    • Some notes are shown as Not Synced

      I'm not sure why this happens but it's a weird little bug I noticed. I have two notes I believe that has that weird icon shown in the screenshot that shows that it's not synced even though the notes do sync properly. Manual syncing doesn't remove the

    • Power of Automation :: Auto-Color Tasks in Gantt chart based on values in Picklist field.

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

    • Zoho CRM record in blueprint unable to initiate any form of approval process

      My business case As a penetration testing company, we have engagements that need to follow a set path, from “to be scheduled” to “assigned to tester” to “regulatory documents sent” to “testing in progress” to “report delivered”. On this path, a particular

    • Edit Project Number?

      Hi all: We just signed up for a trial of zoho one, which includes ZoHo Projects. We've noticed there was a 'dummy project' preloaded in projects to help familiarize yourself with the software. We've created a couple of our own projects now but noticed since the dummy project was preloaded, our projects start with number 2 then 3, sequentially. Since it seems we will be keeping zoho past the trial, If we delete the dummy project, how do we get our own projects renumbered, beginning with 1? We'd like

    • Tip of the Week #57– Reply faster with saved response templates!

      Ever find yourself typing out the same email reply over and over again? It's time consuming and eats productive work hours. With shared response templates, you and your team can create pre-composed messages to quickly respond to common queries — saving

    • Connect MySQL database to Zoho sites

      Hi! Is there a way to connect a MySql database with Zoho sites. So the user input are stored in and dinamic data is fetched from the database? Regards, Mihály

    • What’s new in Zoho RPA: Cross-platform automation, OCR, and more!

      Zoho RPA is now included in Zoho One Zoho RPA is now part of the Zoho One suite, bringing unified automation to your entire business ecosystem. You can now automate UI-based tasks across Zoho apps and third-party systems too. From processing sales orders

    • New in CPQ: Create dynamic actions in Product Configurator (PC), clone PCs and Price Rules (PRs)

      Configuring product combinations just got enhanced. Zoho CRM's CPQ system now supports dynamic actions based on multiple base products. Additionally, you can now clone configurations for both Product Configurator (PC) and price rules (PRs). Dynamic actions

    • Beyond Email: #2 Connect better with Contacts

      After successfully creating a 'Welcome & Setup' event using the Calendar, Sarah is eager to invite her team members to participate. For a smoother communication experience and easy access, Sarah wants to store their information, ensuring quick reference

    • Integrate MS Teams with Zoho CRM for faster collaboration

      Availability Editions: Standard and above DCs: All Release status: This feature has been released for all users in all DCs. Help resource: Microsoft Teams integration Hello everyone, We're adding MS Teams to our lineup of CRM chat integrations—Cliq, Slack,

    • What is New in CRM Functions?

      What is New in CRM Functions? Hello everyone! We're delighted to share that Functions in Zoho CRM have had a few upgrades that would happen in phases. Phase 1 An all new built-in editor for better user experience and ease of use. ETA: In a couple of days.

    • Subforms and Reports

      I am trying to do a report that shows various data from subforms. eg I want a report that shows what Bill Status are Approved Required. Or show the status of all bills. It doesn't look like Zoho Reports picks up information within reports. Is there another

    • Pass variables to Zoho Desk via URL to create a fast new ticket landing page

      We are integrating our phone system into Zoho Desk. Currently when a helpdesk agent answers the phone, a soft client opens a new tab with zoho desk at the new case page. https://desk.zoho.com/support/companyname/ShowHomePage.do#Cases/new We would like

    • 【Zoho CRM】アナリティクス機能のアップデート：ウォーターフォールの導入

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中からアナリティクス機能のアップデートをご紹介します。 本記事は、以前紹介された機能に新たに追加された機能です。 以前の記事：https://support.zoho.co.jp/portal/ja/kb/articles/zoho-crm-visualize-your-data-with-a-new-set-of-charts-treemap-butterfly-sankey-and-cluster-charts

    • [Free Webinar] Learning Table Series - Creator for the Finance Industry

      Hello Everyone! The Learning Table Series is a free monthly webinar that runs for around 45 minutes. It's offered to our Community users and aims to provide a dynamic learning experience by demonstrating how Creator can be used as a solution for various

    • Webhook - Configuration failed: 200 response not received for POST request

      Hello, I am trying to set up a webhook to connect with an automation software but I receive the following error from Zoho: Configuration failed: 200 response not received for POST request I have tried testing it on webhook.site as well and receive the

    • Automated Shopify adjustment problem. "An inventory adjustment has been created by the system to set the initial stock from Shopify"

      Has anyone noticed issues since the Shopify Sync has been updated recently? If you sync with Shopify, check to see if there are automated adjustments for old products that keep recurring. We have this problem for 6 SKU's that Zoho is doubling the stock

    • Best website platform to sync to Zoho Inventory

      Anyone like to suggest the best website platform for syncing to Zoho Inventory? We DO NOT want to sync stock, only orders. Shopify - not an option as we have more than one website and Shopify requires 2 accounts and Zoho will not sync with 2 different accounts. Magento and WooCommerce both sync via Kloudconnectors - does anyone have any experience with this? I have trialled it and there are flaws - eg purchase order numbers are not populated. Discussion welcome!

    • Include product images in data sync between Zoho CRM and Zoho Inventory

      Currently the item image does not sync between Zoho CRM and Zoho Inventory when using the internal Zoho sync functionality. This requires users to manually update the item image in Zoho Inventory for products created in CRM and vice versa. Including the

    • Next Page