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

    • Unable to Download CRM Contact Data: WorkDrive Integration Issues

      ## Problem Description We need to let users download contact information from CRM as CSV files to their local computers. Since we couldn't implement a direct download option, we're trying to use WorkDrive as a workaround - but we're encountering issues

    • App Spotlight : PagerDuty for Zoho Cliq

      App Spotlight brings you hand-picked apps to enhance the power of your Zoho apps and tools. Visit the Zoho Marketplace to explore all of our apps, integrations, and extensions. In today's fast-paced world, seizing every moment is essential for operational

    • Campaigns going to spam folder, how to build so that it goes to inbox

      Hello, New to campaigns, now have it functioning correctly. In my test group of 10 email addresses 100% of the emails went to spam/junk folder and/or were blocked/captured by spam filters. What is the process to building a message or format that does

    • Integrate QuickBooks with Bigin and streamline your sales and accounting!

      If your business relies on Bigin for customer management and QuickBooks for accounting and invoicing, this new integration is here to make your operations more efficient. By connecting these two platforms, you can now manage your CRM and financial processes

    • When a ticket is merged, the merged ticket's link should redirect to the remaining ticket.

      Zoho Desk deletes merged tickets. Which is not ideal. The issue is if you have a link bookmarked, or even in your inbox from a ticket that was merged, when you visit you receive an error because merging tickets actually deletes the ticket that was merged.

    • Pass data from a Zoho Desk ticket to a Zoho Form as pre-fill data?

      Hello, I'm trying to pre-fill a Zoho form with client data based on the Zoho Desk ticket data that would be associated. Work flow i'm trying to create: 1. Ticket created for a sales order 2. order requires a site survey 3. link inside ticket links to

    • Goods total weight in Sales Orders

      Hello everyone, We want to automatically calculate the total weight in Sales Orders based on the weight data specified in the Items. Could you please suggest the simplest way to achieve this in Zoho Inventory? I would greatly appreciate any advice and

    • Problem with pagination in Zoho Inventory API

      Hello, I'm having an issue with the  Zoho Inventory API when I try to use the pagination. When I send a request to https://inventory.zoho.com/api/v1/items?authtoken=XXXXXXXXXX&organization_id=YYYYYY&page=1&per_page=50, I get back 200 items. And when I send the same request for the second page, https://inventory.zoho.com/api/v1/items?authtoken=XXXXXXXXXX&organization_id=YYYYYY&page=2&per_page=50 I'm getting back the same 200 items I get with the first request.  So I think neither the page parameter

    • Can a user be assigned to an Account based on email domain?

      Hi ZohoDesk, If I have a customer Account already configured is there any way I can use a domain matching rule to assign a new user to the correct account when logging a ticket by email? Many thanks Rich

    • Can't track conversions using GTM

      We had to move the installation of the SalesIQ widget from GTM to directly do it in our wordpress site. The SalesIQ widget was being blocked by Adblockers which caused a lot of our visitors to not be able to see it. This issue was fixed from deleting

    • WhatsApp Message Pricing Changes (Effective July 1, 2025)

      Starting July 1, 2025, Meta will introduce a per-message pricing model on the WhatsApp Business Platform, replacing the current conversation-based billing. This update affects all WhatsApp messages sent through Zoho Marketing Automation. We’ve broken

    • Parent-Child Tickets using API or Deluge

      Hi Everyone, We are looking at the parent-child ticketing features in Zoho Desk. We want to be able to create a parent ticket at customer level and nest child tickets underneath. The issue we are facing is to be able to automate this. I'm checking the

    • Blueprint transitions on locked records

      We use the ability to automatically lock records (quotes, sales orders, etc.) based on criteria, such as stage. For instance, if a quote has been sent to a client, the quote is then locked for further edits. Our ideal quote stage process is: Draft>Sent>Won.

    • CC from mail client to Zoho CRM

      Hi,  Is it possible to have emails sent outside of CRM use a CC that sends them into the CRM and attaches to the record?  Thanks

    • Department e-mail signatures

      Hello everyone, We're just in the process of evaluating various help desk software alternatives and Zoho is looking pretty good to us at the moment. Our set up is a bit strange and I was wondering if this is possible. We have one tech who looks after

    • How can I hide "My Requests" and "Marketplace" icon from the side menu

      Hello everybody, We recently started using the new Zoho CRM for Everyone. How can I hide "My Requests" and "Marketplace" from the side menu? We don't use these features at the moment, and I couldn't find a way to disable or remove them. Best regards,

    • WhatsApp Calling Integration via Zoho Desk

      Dear Zoho Desk Team, I would like to request a feature that allows users to call WhatsApp numbers directly via Zoho Desk. This integration would enable sending and receiving calls to and from WhatsApp numbers over the internet, without the need for traditional

    • Sites Speed and Performance Grades

      I noticed that there are no recent inquiries or complaints about load speed or performance issues with Zoho Sites websites. However, I wanted to understand what Zoho has done to ensure that speed remains optimized, images are compressed and lazy loaded,

    • Include Audio in Zoho Assist Session Recordings

      Hello Zoho Assist Team, We hope you're doing well. We’d like to formally submit a feature request regarding session recordings in Zoho Assist. 🎯 Current Limitation When conducting a Zoho Assist session that includes voice and/or video chatting, the recording

    • Unable to update Created Date/Time even via upsert

      hi all --- running a demo version and "recreating" some data from hubspot. I had tried the method to automatically move data over but it missed A TON of fields and some stuff wouldn't even map correctly so i am simply creating new Deal records to test

    • Blockchain Feature?

      Since I'm not an expert in this technology, is there any reason why you would not want to add this option to your Zoho SIgn documents? Is there a downside?

    • Kaizen #196 - Zoho CRM Queries - Best Practices

      Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone. Got

    • Best way to account for shipping charges to customer

      I have been allocating all our shipping expenses to the "postage" account, but I realise that is probably incorrect, as for the most part, we pass on shipping charges to our customers. So I should probably add the shipping charges into the "shipping charges"

    • Zoho Flow s’enrichit avec les subflows et les actions Webhook

      Nous sommes ravis d’annoncer deux ajouts importantsà Zoho Flow : les subflows et les webhooks sortants. Ces nouvelles fonctionnalités ont été conçues pour vous aider à créer des workflows plus facilement et à automatiser davantage de tâches répétitives.

    • How to assign canvas view for portal user

      Hi , as a portal user, I can switch to another canvas view, however, I cannot find any field to configure a default canvas view for portal user. May I ask how to set it up in CRM? And if I can view list by sheet view as a portal user?

    • Restrict Leave Application Based on Attendance Cycle (24th to 23rd)

      Hi Zoho Team, Our organization follows a custom attendance cycle from 24th of the current month to 23rd of the next month. I would like to configure the system so that: Employees should not be able to apply backdated leave for any date after the attendance

    • How do I assign a parent to an existing campaign?

      I created a campaign but now I'd like to make that existing campaign a child of another.  How can I do this?

    • Categorize Tickets Through The App

      I used to be able to categorize and assign tickets through the app without any issues. However, for the past year, whenever I try to edit a ticket, select a category, and click save, it doesn’t actually save the changes. As a result, I haven’t been able

    • Can't add picture to email template. Says I'm over the character limit.

      I tried creating an email template with a picture and it says I'm over the character limit. The picture is pretty small. What can I do?

    • Allow breakdown of per diem for meals provided

      Would it be possible to break the per diem down into what you get for each meal. The reason for this is we want to offer per diem but if a meal is provided by a customer or sales we need to remove this from the per diem bucket for that day. We break down

    • Automatically moving Leads into their corresponding buckets

      Hi, I have developed a lead pipeline and created different cadences for various lead segments. After enrolling leads into their respective cadences, each lead goes through a series of follow-ups (in my case, three emails). If a lead does not respond after

    • Tracking Email Template usage

      I'd like to be able to track how many times agents/users send an email from Templates. This is so we can track their activity in relation to Campaigns in CRM. Thanks

    • Get employee id of authenticated user via API

      Hi, For adding timetracking records an employee id is required. Is there an API Route available to get the employee ID of the current authenticated user? or something like /users/me Currently using https://people.zoho.com/people/api/forms/employee/getRecords

    • Zoho Social API for generating draft posts from a third-party app ?

      Hello everyone, I hope you are all well. I have a question regarding Zoho Social. I am developing an application that generates social media posts, and I would like to be able to incorporate a feature that allows saving these posts as drafts in Zoho Social.

    • Collect in-app feedback with richer context and granular insights

      Hello, Apptics community! From GenAI chatbots to one-tap checkouts, user experience standards keep rising—yet 96% of unhappy users never explain what went wrong; they simply leave. Introducing in-app feedback 2.0 banner In-app feedback 2.0 is here to

    • Temporary restiction

      My account says You have been temporarily restricted from publishing jobs from Zoho Recruit.Click here to request a one-time approval to publish your jobs and when I go to click it shows error. Kindly assist.

    • Help with Quote template for peer review

      We are wanting to do peer review of quotes/proposals, however the quote templates dont have product cost, profit margins, etc. It is difficult for a manager to approve a quote without ensuring nothing is going out at improper margins, etc. I have not

    • How many AR fields We can add in a form?

      I want to add at least 10-15 AR fields in a form. I just want to know is there any limit on the AR fields or do I need to pay extra money for using 10-15 AR fields. Thanks in advance.

    • Agent working hours

      Hi, I know it is possible to set company business hours but is it possible so that agents can have different ones? I.e. some agents cover later hours on specific weeks - can these be set so those agents that are "working" get notified about tickets etc. 

    • Disallow CLOSE if tags field is empty

      I want to introduce a mandatory condition that NEW tickets (not prior closed tickets) cannot enter the CLOSED state without first having an entry in the tags field. Is there a way I can do this?

    • Next Page