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

    • Sending from domain alias

      In the Control Panel/Domains, I have set up some domains as aliases for my main domain. Only my main domain has mail hosting. The other domains are verified as aliases for the main domain, and emails sent to <user>@<alias domain> arrive successfully at

    • Difficult to Purchase More users

      It's surprisingly difficult and un-intuitive to purchase more user licenses in Zoho One under the new UI. It's not actually possible to do it anywhere from the admin interface. You have to leave the admin/directory section, then click your profile icon,

    • How to link web sales payments through Stripe to invoices?

      I have just set up an online shop website which accepts payments through Stripe.  The payment appears in Zoho Books through the Stripe feed as 'Sales without invoices'.  In order to keep Zoho Inventory in step, I manually (for now) create a Sales Invoice

    • Announcing New Features in Trident for macOS (v.1.22.0)

      Hello everyone! Trident for macOS (v.1.22.0) is here with thoughtful updates to improve your daily workflow. Here's a quick look at what's new. Switch email response type easily. You can now switch between Reply, Reply All, and Forward directly in the

    • Layout Rules / Quick create

      Hello, is there a way to create a layout rule for quick create option? Regards, Katarzyna

    • Zoho Notebook Will Not Open After App Install

      I am a new user of Notebook. I was able to successfully import my data from Evernote and the product is working well on a Windows 11 computer and Pixel device. I have also installed Notebook on a Samsung S6 lite tablet however the software freezes on

    • Leads, contacts, deals table view is not sorting

      i am unable to sort the table view of leads, contacts and deals

    • Conditional Layouts On Multi Select Field

      How we can use Conditional Layouts On Multi Select Field field? Please help.

    • Zoho CRM Multi-select values not translated

      Hello! I have some issue with translate custom multi-select fields in zoho CRM in other language. I download export file, but it has all my custom fields and picklist values exept multi-select fields picklist values.  Please, help me to undestand, is

    • Unable to Download Invoices via API – Code 57 Authorization Error

      I’m integrating the Zoho Billing API with the scopes ZohoInvoice.invoices.CREATE,ZohoInvoice.invoices.READ. I’ve completed the OAuth2 flow successfully, including generating the auth code, access token, and refresh token. All tokens are valid and fresh.

    • Weekly Tips : Stay in loop with Conversation View

      You receive a series of emails back and forth with a client regarding a project update. Instead of searching through your inbox for each separate email, you would want to see the entire email conversation in one place to understand the context quickly

    • Introducing Zoho PDF Editor: Your free online PDF editing tool

      Edit your PDFs effortlessly with Zoho PDF Editor, Zoho's new free online PDF editing tool. Add text, insert images, include shapes, embed hyperlinks, and even transform your PDFs into fillable forms to collect data and e-signatures. You can edit PDFs

    • RSC Connectivity Linkedin Recruiter RPS

      It seems there's a bit of a push from Linkedin Talent Solutions to keep integrations moving. My Account Manager confirmed that Zoho Recruit is a Certified Linkedin Linkedin Partner but does not have RSC as of yet., (we knew that :-) She encouraged me

    • Water-Scrum-Fall approach for finance institutions with Zoho Projects Plus

      Finance is a highly regulated sector with strict rules and compliance requirements. Handling sensitive client data and complex transactions like multi-currency deals requires elaborate workflows and precise management. Implementing project management

    • Get instant summaries of your notes with the help of Zia

      Hello all, We've added a simple yet powerful feature to Zoho CRM that we're excited for you to try: Zia Notes Summary. It's designed to make the daily lives of a CRM user a bit easier by giving you quick summaries of your CRM notes. Whether it's a glance

    • Zoho one web page are not available

      Why I am not able to enter to zoho one web page?

    • Zoho People > Onboarding > Candidate do not view all the data field on the Employee Onboarding

      Hello In my onboarding portal I do not see all the fields that i want the candidate to fill in In my Employee Onboarding Form These details i can see In the work information, i have enable the Company View but in the Employee Portal i do not see I have

    • Has anyone implemented a ""switch"" to redirect emails in production for testing?

      Hi everyone, In our production Zoho CRM we have a fairly complex setup with multiple Blueprints and Deluge functions that send emails automatically — to managers and internal staff — triggered by workflows. We’re looking for a way to *test changes safely*,

    • Restrict Access/Shared Access

      Sometimes access to documents that go out from Zoho Sign need to be restricted or shared. For example: 1) HR department send out employment contracts. Any Zoho Sign admin can view them. Access should be restricted to those that HR would allow to view

    • Tip#44: Integrate with Xero to manage your financial operations

      Managing your project finances becomes more efficient with Xero integration in Zoho Sprints. With this integration, you can sync your Zoho Sprints data with Xero. Once you sync them to Xero, you can easily create invoices in Xero. This feature significantly

    • Zoho People Onboarding Unable to Convert to User

      Hello All I need help in this onboarding of candidate Currently at this stage the candidate is just being offered and we are filling in his details however not all information are fill up. The candidate is still using his/her personal email When i try

    • Integration with SharePoint Online

      Is there an integration where we can add a Zoho Sign link to the context menu of a document in the SharePoint document library. Then, we could directly initiate a workflow of sending a document for signature from a document library in SharePoint onl

    • White screen when connecting Zoho Cliq and Zoho People for birthday notifications

      Hi everyone, I'm new to Zoho and I'm trying to set up the employee birthday notifications, following this guide: Automating Employee Birthday Notifications in Zoho Cliq But when I try to connect Zoho Cliq with Zoho People, I just get a white screen and

    • Word file is messed up when i upload it to zoho sign

      Hi. I am trying to upload a word file to zoho sign and when i do that it ruins the file, It adds spaces and images are on top of each other. What can i do? Thanks.

    • Annotate widget?

      Is there something in creator or any zoho app that allows me to have an image markup field item in the form? I need to be able to complete a form that also allows the user to mark up a preloaded image. Other compay's call this an image markup field or

    • Dashboards / Home Page - Logged In User

      Lots of the dashboards that we use reference the Logged In User.  We also set up Home Pages for specific roles, where the Logged In User is referenced within the custom view.  As an admin, that means that these views are often blank when customizing and

    • I'm pissed as fuck

      What the hell Zoho! Always the same goddam problem. It takes time because the simplest things just don't fucking work. Today it just took me 3 hours to complete and send a 1page privacy letter to a client. And you know what 99% of the document was already

    • Configure Notifications for API Limit

      Hello developers, APIs are essential for businesses today as they enable seamless integration between different software systems, automate workflows, and ensure real-time data sync. To ensure that admins are notified well in advance before APIs reach

    • Introducing Blueprints for Custom Modules!

      Hello developers, We've added a new feature called Blueprints in Custom Modules. Blueprints are the online representation of a business process. In Zoho Books, you can use Blueprints to design a process flow using states and transitions. Developers can

    • Campaign Links Blocked as Phishing- Help!

      We sent a Campaign out yesterday. We tested all of the links beforehand. One of the links is to our own website. After the fact, when we open up the Campaign in our browser, the links work fine. The links in the emails received, however, opened in a new

    • Zoho Tables July 2025 Update: Smart Creation, Smarter Automation

      We’re excited to introduce a powerful set of updates across Web, Android and iOS/iPad apps. From AI-assisted base creation to advanced automations and mobile enhancements, this release is packed with features to help you build faster, automate better,

    • Zoho Voice est désormais en France !

      Nous avons des nouveautés très intéressantes qui vont transformer la façon dont vous communiquez avec vos clients. Zoho Voice, la solution de téléphonie d'entreprise et de centre de contact basée sur le cloud est arrivée en France ! Vous pouvez enfin

    • Numbers in MA

      I have an issue rationalising the various numbers around MA2. Not convinced that any are truly accurate. However have a specific problem in that i have a list with 1301 records in the list view. When i come to email there is only 1289 Then have another

    • Android mobile app unable to log in

      When I open the mobile up for zoho mail it asks me to sign in, but when i push the sign in button nothing happens. Tried uninstalling and reinstalling still not working

    • Pie chart in Zoho Analytics shows ridicoulous numer of decimals of a percentage.

      Is there a way to set the number of decimals of a percentage value in the Pie chart? Now it displays 15 decimals instead of a round-off value. The value is a count and percentage calculated in the chart, so there is no number of decimals that can be specified

    • Zoho People > Leave Management > Unable to import balance leave

      Hello Zoho I am unable to import balance leave into the system I have follow the steps It show only 5 fields - the date field i am unable to select from date and to date Error Date in excelsheet

    • Narrative 4: Exploring the support channels

      Behind the scenes of a successful ticketing system - BTS Series Narrative 4 - Exploring the support channels Support channels in a ticketing system refer to the various communication methods that customers use to contact a business for assistance. These

    • Tip of the Week #65– Share email drafts with your team for quick feedback.

      Whether you're replying to a tricky customer question or sharing a campaign update, finding the right words—and the right tone—can be tough. You just wish your teammates could take a quick look and give their suggestions before you send it. Sometimes,

    • How to Initiate WhatsApp Message on SalesIQ?

      I've just activated a Business WhatsApp phone number through SalesIQ because of its touted omnichannel chat approach. Sounds exciting. I understand that when a customer sends me a WA message, I can reply to it on SalesIQ and keep the chat going, perfect.

    • Episode IV:Handling User Inputs in custom functions

      Hi Everyone, We've been exploring custom functions which help in performing advanced automation tasks. Custom functions enable you to achieve possibilities based on your organization's requirements. Custom functions require user inputs that allow the

    • Next Page