Kaizen #136 - Zoho CRM Widgets using ReactJS

Kaizen #136 - Zoho CRM Widgets using ReactJS

Hey there! Welcome back to yet another insightful post in our Kaizen series! 

In this post, let's explore how to use ReactJS for Zoho CRM widgets. We will utilize the sample widget from one of our previous posts - Geocoding Leads' Addresses in ZOHO CRM for the demo. 

Prerequisites 

  1. Ensure that you have installed all the necessary components required to use Zoho's CLI. 
  2.  You can use any IDE to code your widget. A few popular suggestions include Visual Studio Code, WebStorm and Atom. Download and install an IDE of your choice to get started. 

Working with ReactJS 

Step 1: Run the following Zoho CLI command to start a new project. 

zet init 

This will display a list of services for creating a project template. Choose Zoho CRM from the list and provide your project name. 

All the files that are necessary for the widget will then be available in the project directory. 

Step 2: To configure this project for ReactJS, install the required dependencies by copying and pasting the following command into your terminal. 

npm install react react-dom react-scripts

These dependencies will be installed only for this project. If you want to develop another ReactJS widget, you should run this command again for that project. 

Step 3: Navigate to the package.json file in the directory and add the following scripts to it. 

"scripts": {
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build && rm -rf app && mv build app"
  }

The start script mentioned here is useful during the development stage. On executing the "npm run start" command, it enables you to start the development server for ReactJS and make real-time changes to it. 

Once you have completed the development, all the files that are required for rendering the widget should reside within the /app folder in the project directory. However, in any ReactJS project, when you execute the build command after development, the build files are created under a new folder named build. The build script in package.json file helps in replacing the existing /app folder contents with the files from the /build folder.

Now, add the below key-value pair as we have multiple build static files under the /app folder.  

"homepage": "./"

During production, this property will dictate the system to search for the other static files within the same (/app) folder rather than looking for them in parallel directories. 



Step 4: Establish the /src folder with the required JavaScript and CSS files of your React components.  

To keep this demo simple, we have used the widget code from our previous post "Geocoding Leads' Addresses in ZOHO CRM", which has been modified to React components in the App.js, index.css and index.js files. 

Step 5: Create a /public folder containing static files like homepage (index.html), images and JavaScript library files that are required for the ReactJS project. 
For our use case, we have created only the index.html file.  

Step 6: After completing development, execute the following command to create the production build of your application: 

npm run build

Since we modified the scripts in the package.json during our earlier steps, the production build will be available in the /app folder instead of the /build folder. 



Step 7: To run the project locally, use the following command: 

zet run

Step 8: Validate your ReactJS widget project with the following command: 

zet validate 

This command checks if the project adheres to file and size limitations.

Use the following command to pack your project for uploading it to Zoho CRM.

zet pack 

The ZIP file can be found under the /dist folder of your project. 



Step 9: When uploading the ZIP file to Zoho CRM, remember that for a typical widget, the index page is usually named /widget.html. However, for ReactJS projects, it must be named /index.html. 



Now, let us go check this widget from the Leads detail page for the results. 



Zoho CRM widgets can be built using any of the client-side frameworks and this sample configuration is almost common to most of them.
We hope you found this post useful and engaging! 

If you have any queries, feel free to drop them in the comments section below or reach out to us directly at support@zohocrm.com. We eagerly await your thoughts and feedback on this!

Keep an eye out for future posts packed with similar content!

Cheers!

----------------------------------------------------------------------------------------------------------------------------------------

Recommended Reads

----------------------------------------------------------------------------------------------------------------------------------------

Join us for our upcoming Zoho CRM Developer Series: Zoho CRM APIs, where you can explore more about Zoho CRM APIs. Register Now!  



      • Sticky Posts

      • Kaizen #198: Using Client Script for Custom Validation in Blueprint

        Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! 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.

      • Kaizen #226: Using ZRC in Client Script

        Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In this

      • Kaizen #222 - Client Script Support for Notes Related List

        Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore how

      • Kaizen #217 - Actions APIs : Tasks

        Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.

      • Kaizen #216 - Actions APIs : Email Notifications

        Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are

        • Recent Topics

        • Tip of the Week #73– Automate workflow with Make integration.

          Make is a no-code workflow automation platform designed to connect your favorite apps and automate repetitive tasks across services. By integrating Make with Zoho TeamInbox, you can streamline everyday inbox management and save valuable time. With this

        • Viewing attachments

          I'm using a Web Form integrated in my web site to collect Leads several info, including a image upload. In order to to approve each lead, we have to view the image uploaded. Unfortunately, in the Leads view, the Attachments can only be downloaded, not

        • Kaizen #89 - Color Coding using Client Script

          Hello everyone! Welcome back to another exciting Kaizen post. Today let us see how you can apply color codes to the List and Detail Pages of Zoho CRM using Client Script. Need for color code in Zoho CRM When you mark things with different colors as a

        • Instant Sync of Zoho CRM Data?

          With how valuable Zoho Analytics is to actually creating data driven dashboards/reports, we are surprised that there is no instant or near instant sync between Zoho CRM and Zoho Analytics. Waiting 3 hours is okay for most of our reports, but there are

        • Is it possibly to directly set the tax amount on order instead of indirectly via tax rates?

          We own an eCommerce application and want to funnel submitted orders from that system into Zoho. We're already calculating tax in our application and just need a way to set it in Zoho. We tried to use Zoho's tax objects for tax by setting the rates to

        • Zoho account sign in with passkey

          Hello, I am trying to sign in using passkey, but the option doesn't show up in the web and is disabled in Oneauth on mobile, saying the admin has restricted the use. On the Admin page in Security MFA I can find no option for passkey. Help would be greatly

        • Rescheduled US meetups: Zoho Desk user meetups are coming to seven U.S. cities in October and November, 2025

          Hello to our Zoho Desk users in the United States, We're excited to share the revised dates for the upcoming Zoho User Groups happening across the US this summer. Our product experts are heading to seven cities throughout the country, and for the first

        • Checklists as templates

          Is it possible to save checklists as templates to reuse them in other tasks? Example: I have a web project. I maintain individual web URLs as tasks. Within the tasks the same checklist should be used again and again: - Page created in CMS - Properties

        • Send mass email using my secondary email

          Hello, When I send an email to just one person from Zoho CRM, a complete email editor appears, where I can choose which of my email addresses I want to use in the From field. When I send a mass email, there is not such option. I can only select the email

        • ZOHO TEAM INBOX Calendar Integration

          The Problem: Clients send meeting invitations to our TeamInbox address. TeamInbox receives these invites, but we cannot accept them. We do not use individual inboxes for transparency purposes. Ideal Solution: A way to accept calendar invites sent to our

        • Why Can't I add unicode emoji's to my signature?

          Why would Zoho Mail prevent me from adding unicode emojis to my email signature? Every time I try to save the signature, Zoho Mail erases the emoji and any nearby content. Every time I setup something with Zoho, I know I'm going to run into some incredibly

        • Unearned / Deferred Revenue Automatic Calculation for Subscriptions

          As a SaaS business, we have multiple active subscriptions with varying dates and amounts. Is there a way to have a monthly automatic calculation for all of them that debits or credits the unearned revenue and revenue accounts accordingly? Alternatively,

        • Zoho Desk Limit for Comma Separated Queries

          Hi, I have just discovered a limit that I believed is not mentioned in any of Zoho's documentations. My search query looks like so: "query: {"accountId":"786050000091629966,786050000163589273,786050000163589427,786050000162753705,786050000162112971,786050000161987643,786050000160752868,786050000167089504,786050000167089378,786050000167089024,786050000167070005,786050000166295256,786050000128153693,786050000110560021,786050000046594575,786050000039106461,786050000002225356,786050000076889093,786050000047895103,786050000043365354,786050000044765191,786050000041790249,786050000040359116,786050000037945198,786050000024605077,786050000000525015,786050000155333895,786050000157741437,786050000000718125,786050000011574353,","departmentId":"786050000042648070","status":"Finished","sortBy":"createdTime","customField2":"cf_completion_date:2025-01-28T03:00:00.000Z,2025-10-28T03:00:00.000Z","customField3":"cf_billed:false"}"

        • Module Name doesn't exist

          I am trying to create a module named Activity, with plural Activities, but I have an error that module name already exists. This module is doesn't exist, and I don't have a single field called Activity or Activities.

        • Zoho Desk iOS and Android app update: AI powered: Reply Assistance and Refine Messages on IM module.

          Hello everyone! We are excited to introduce new AI powered features on the IM module of the Zoho Desk app. Reply Assistance: Reply Assistance generates suggested responses for incoming chat messages, which you can directly insert into the conversation

        • Is it possible to embed Youtube shorts?

          Hi Zoho desk support, This is Ryan from Accuver America. While I'm trying to create a knowledge base article with embed video, I ran into this issue. "www.youtube.com refuse to connect" A little bit background is that because this video is recorded on

        • Split functionality - Admins need ability to do this

          Admins should be able to split an expense at any point of the process prior to approval. The split is very helpful for our account coding, but to have to go back to a user and ask them to split an invoice that they simply want paid is a bit of an in

        • Delegates - Access to approved reports

          We realized that delegates do not have access to reports after they are approved. Many users ask questions of their delegates about past expense reports and the delegates can't see this information. Please allow delegates see all expense report activity,

        • How to include total km for multiple trips in expense report.

          Whenever I create a mileage report it only shows the total dollar amount to be reimbursed. The mileage for each individual trip is included but I also need to see the total distance for all trips in a report? How do I do this?

        • I didn't receive my domain verification mail

          I didn't receive my domain verification mail 

        • Get logged in user ID in Deluge script

          Hello all, How do I get the id of the logged-in user in a deluge script? the "zoho.loginuserid" function actually returns the users email address or whatever the user id they use to login to zoho with and not the id of the user record, and given that

        • Item Details Field - New Barcode / Document option?

          Is this a new feature??? its in both books and inventory.

        • Shared Mailbox - Mark as read for all users

          Hi all, Maybe someone can help me out. At the moment we have a shared mailbox without streams. When a users reads an mail or marks it as read other users will not see this. How can we resolve this? We now archive the mails when read and followed up. However

        • Staff rules

          Hi! Do you people know what are the default staff rules when a new booking is created? We have two staff members in my team (me as the admin, and my employee). As we share the same services, I'm wondering how Zoho will pick the staff for new apointments.

        • Add Image Upload Field to Zoho Bookings Registration Form

          Hi, We would like to request the addition of an image upload field to the Zoho Bookings registration form. Currently, Zoho Bookings only supports text-based fields (e.g., Single Line, Multi-Line, Email, Checkbox, Dropdown, Radio Button, and Date), but

        • Merge Tags Output Incorrect Placeholder Text After CRM Sync

          Hi everyone, I’m experiencing an issue with merge tags in Zoho Campaigns after last sync of contacts and leads from Zoho CRM (days before everything worked perfectly). Here’s the situation (seems like a default configuration in Campaigns) : My leads have

        • Windows agent 2025_M02 release notes

          Agent Version: 111.0.3.300 Release date: 24 February, 2025 Various Major enhancements to improve overall performance and optimize the user experience. Squashed a few bugs to improve overall product quality.

        • Windows agent 2025_M01 release notes

          Agent Version: 111.0.3.299 Release date: 05 February, 2025 Major Enhancement: Live Monitor feature compatibility released. Major Enhancement: Updated Scaling for multi technician cases with Android and Web based viewers. Various other bug fixes and performance

        • how to record deferred revenue?

          Dear Zoho Team, We issue invoices relating to 12-month web hosting service. When we issue the invoice, we should record the entire amount of the invoice as DEFERRED REVENUE (ie. $10 x 12 mths = $120, balance sheet item). After the particular month of the hosting service, $10 of revenue has been earned and deferred revenue amount will be $110. We must keep adjusting the balance sheet and income statement over the course of the service until the company has fulfilled its obligation of services and

        • Narrative 13: Importing your data

          Behind the scenes of a successful ticketing system: BTS Series Narrative 13: Importing your data When importing data into an application, it is crucial to prevent data loss or duplication. These types of errors can hinder the development of a clean and

        • Blueprint Not Triggering When Lead Status Is Updated by Workflow (IndiaMART Integration)

          I have set up a blueprint that triggers when a lead’s status is “New Lead.” Our CRM is integrated with IndiaMART, and when leads are created from IndiaMART, their Lead Status is initially set to None. To handle this, I created a workflow that automatically

        • Update Subform in specific field(Status) without affecting other fields in Zoho CRM using Deluge?

          Scenario: PRODUCT Module(change name Plot) in any product status change From Available to Booked then on PROJECT Custom Module have Subform So, Subform name is Property Details now in that Subform 1 field is STATUS that update according to  product status

        • YouTube Live #2: Agreement Intelligence with Zoho Sign's eSign AI assistant

          Hi there, We're back again with our YouTube live series and this time, we'll take you through our holistic agreement intelligence powered signature workflows. Struggling to draft an agreement? Need help double-checking clauses and going through complicated

        • Can I Build a POS using ZOHO creator and integrate it with ZOHO Books?

          Hello,  I have a Zoho Books account and I was wondering if I can have a POS system that integrates with it. Primarily with Inventory, Customers and Payment and ofcourse Create invoices and credit notes.   So, would Zoho creator provide me with this solution?  Thank you, 

        • An important update for Zoho Cliq desktop users

          The latest version of the Zoho Cliq desktop app (v1.8.0) will no longer be supported on macOS 10.15 Catalina and earlier versions. This is because the framework we use (Electron) no longer supports some older macOS versions. If you’re using macOS 10.15

        • New Toolbar in Zoho Sheet

          We have revamped our toolbar design in this new version of Zoho Sheet. Below are some screenshots to help you get accustomed to this new interface. Click on the picture below to view the animated image in its original size. Scroll down this post to learn about the changes. Highlight of Changes: The previous format tab is now split into 2 tabs - Home and Format. The Home tab contains the commonly used functions and the Format tab holds formatting related options. Under the Home tab towards the far

        • Zoho inbuilt Telephony made a lot of issues!

          Hi there, I am a user that I am working with zoho inbuilt telephony around 1 month. Non of my colleagues are happy with this app! most of the time customer cannot hear my customer service team, customers say our voice is breaking. whenever Telephony support

        • Sending workflow notifications using popular chat services

          Hello everyone, We have introduced instant and scheduled notifications on some of the most popular chat platforms to facilitate easy collaboration, quick action, and wider reach. Workflow notifications can be sent to the following chat platforms: Zoho

        • Adding Images to a Quote in Zoho CRM

          We are currently preparing to use Quotes in Zoho CRM and we are building out our Quote templates.  We came across an issue of not being to add Images of the products to the Quote - specifically in the body of the Quote templates.   This is a problem,

        • Applications built with Zoho Creator

          Hi, I’m really interested in seeing how others have built their application using Zoho Creator, especially those designed for external users (clients, vendors, or the public). If you’ve developed something along those lines and don’t mind sharing, I’d

        • Next Page