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

    • Getting Project Template List using the REST API

      I am trying to confirm that I can use the REST API to create a project using a project template. The API documentation indicates this is possible by providing the Template ID, but it is not clear at all how to get a list of available Project Templates

    • Where do we manage tags?

      Where is the page where we can view all tags and manage them (like change a tag name to something else or merge tickets under a particular tag with another)?

    • Custom Return Path - Host Name

      Hi there, I've successfully set up SPF/ DKIM for Marketing Automation, but struggling to complete the Custom Return Path. I'm settting up on Wix. What should the host name be for the CNAME record? In Zoho Help it just says: "type your host name (sub-domain

    • Trouble Connecting Zoho Mail via IMAP in n8n – Need Help

      Hi everyone 👋, I'm trying to connect my Zoho Mail account to n8n using the IMAP Email Trigger node, but I'm facing issues getting it to work fully. ✅ Here's what I’ve done so far: ✅ IMAP access is enabled in my Zoho Mail settings ✅ I’m using the correct

    • How to send Messages to Leads/customers

      I’d like to inquire about the process for sending messages or follow-up communications to customers directly from Zoho CRM. Could you please guide me on the best way to do this—whether via email, SMS, or any integrated messaging feature? Additionally,

    • Daily-rate for projects

      I am billing my client through daily billing rates; for Zoho Books projects, only hourly rates can be set up. Please enhance this. Thanks.

    • AI feature in Zoho Desk suggesting answers based on past ticket threads

      Hi I would like to suggest something that would be very useful : instead of suggesting answers based on the Knowledge Base, I think it would be great if Zia could analyze the history of all customer and agents threads, to suggest answers in new tickets.

    • Admin Console Email

      I can't remember the admin console email or password. How do I find that out?

    • help me! the button "remove zoho ad" is not responding

      help me! the button "remove zoho ad" is not responding, kindly advice. please to check the follows : https://sitepreview-643549202.zohositescontent.com/previewsite https://sitebuilder-643549202.zohositescontent.com/builder thanks,best  regards

    • Zoho Forms API

      Is there any way to get all form entry list using API? Looking forward to hear from you

    • Free tier

      Does a completely free tier Zoho email still exists? If so why am I receiving email reminders that my account would expire in 2 days

    • Disable "skip to content" in Help Center

      Our users used to be able to press the tab button to skip between fields when submitting a new ticket in the help center. Now it pulls up the "skip to content" button in the top left corner. I know this is an accessibility feature, but is there any way

    • Mail Data Migration

      Hello Team, I have an issue with my organization mail data migration from Google to Zoho. We used Google Workspace before now but decided to change to Zoho to enjoy your service. I have successfully created an account and 1. Complete Domain verification

    • Prompting email addresses when sending an email

      Hi, I was just wondering if it was possible to disable the prompt / suggestion of email addresses when you begin typing an email address into the TO or CC box? Some of the email addresses that are being suggested are people that no longer require the

    • This is a HTML email and your email client software does not support HTML email!

      I have a small business, recently the email notification is coming like this to me, can anyone please help me? I am not so IT savvy -----=_NextPart_b4583c76c623900f59ad5b420c6da260 Content-Type: multipart/alternative; boundary="----=_NextPart_b4583c76c623900f59ad5b420c6da260_alt"

    • How to insert a ZohoUser in a subform field?

      I am building an new external web app that uses the ZohoCRM REST API (v8) to push data to Zoho. How do I use the ZohoCRM REST API to insert ZohoUsers into a subform field? I've tried several approaches and none of them have worked - inserting the ID as

    • Unable to receive emails

      Hello - I set up an email account for my domain. I can send emails but cannot receive them. I believe the issue might be with incorrect IMAP configuration (?) - but im not sure and cant find where this is on the platform. Im using Zoho hosting for the

    • Zoho Account delete function

      Hello Zoho support team The issue is as follows: Step1: Created an account community@bisonenergy.net Step2: Deleted this account. Step3: Created the new group mail using the same mail address, but the data already exists. So I have to change the name

    • help, 554 5.1.8 blocked

      got this blockade, i don't know why?

    • Not Receiving Emails from Gmail, but Other Providers Work Fine

      Hello, I'm experiencing an issue where my Zoho Mail account does not receive any emails sent from Gmail addresses. However, I can successfully receive emails from other providers such as Hotmail and Yahoo. There are no problems with sending emails—I'm

    • Basic String Search Not Possible in CRM Deluge – Feature Request or Workaround?

      Hi all, I’m trying to solve what should be a very basic automation task in Zoho CRM Deluge: Find the first 11-digit number anywhere in a string (specifically an email subject). In almost any programming language—even 1980s BASIC!—this is a trivial loop:

    • Reencaminhamento de e-mails.

      Boa tarde, gostaria de saber se tem a possibilidade de realizar o reencaminhamento de um e-mail especifico. Ex. Eu recebo alguns e-mails de um remetente e gostaria que o meu amigo de trabalho também recebesse esse e-mail, somente deste destinatário, é

    • Knowledge base articles is now available in the Zoho Desk mobile app!

      Hello all,   As a customer service agent, every day you might have to deal with many questions and issues reported by the users. With Knowledge Base, you can reduce the issue resolution life cycle for your organization.   We are delighted to announce that we have brought in support for 'Knowledge Base articles' in the Zoho Desk iOS mobile app.  This feature is already available for Android users.   KB articles are available to iOS users in the latest version of the app (v2.4.9). You can update the

    • Set Default Payment Method & Default account

      Hi, I would like to know how to set the default payment method and default bank account when recording payments in zoho books. At present we have to change these fields everytime we record a payment, which leads to potential error and as we have a very

    • More than one "Other" response in a Multiple Choice (Many Answers) question type?

      Is there a way to have more than one "Other (Please Specify)" with a short response as an option to a Multiple Choice (Many Answers) question? I understand there may be other ways, but I am looking for this way specifically as it would be best for the

    • Zoho Surveys

      Dear Zoho Support Team, I hope this message finds you well. I am writing to inquire about the availability and documentation for the Zoho Survey API. Background: I am currently working on a project that requires programmatic access to survey data and

    • Help Needed: Jira to Zoho Projects Migration — Tickets Imported as Unassigned & Comments Under Admin Name

      Hi Zoho Team and Community, We recently completed a migration from Jira to Zoho Projects using the official import method outlined in this Zoho Help Article. Issue Summary: We had already added all users to Zoho Projects before the migration, using the

    • Zoho Finance Estimate to Deal Attachment

      Hi, I'm trying to fetch estimate pdf from zoho books and upload it as deal attachment without success. any tips how to achieve this?

    • 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?

    • Next Page