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 #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

    • Kaizen #152 - Client Script Support for the new Canvas Record Forms

      Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved

    • Kaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script

      Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.

    • Kaizen #210 - Answering your Questions | Event Management System using ZDK CLI

      Hello Everyone, Welcome back to yet another post in the Kaizen Series! As you already may know, for the Kaizen #200 milestone, we asked for your feedback and many of you suggested topics for us to discuss. We have been writing on these topics over the

    • Recent Topics

    • Search not working!

      I have items in my notebook tagged but when I search for a tag nothing comes up! Any fix for this?

    • Zoho Analytics Regex Support

      When can we expect full regex support in Zoho Analytics SQL such as REGEXP_REPLACE? Sometimes I need to clean the data and using regex functions is the easiest way to achieve this.

    • How to get Quickbooks Desktop Info into Zoho?

      Our team has used Quickbooks desktop for years and is looking at switching to Zoho books in 2026. I want to bring all old sales history over since we use Zoho CRM. I can export Item sales history and generic sales orders from Quickbooks desktop. How do

    • Zoho CRM Community Digest - October 2025 | Part 1

      Hello Everyone! Here's a quick recap of first two weeks of October! Product Updates: Zoho CRM Android App Update: Surveys, Blueprints, and Smarter Mobile Features! Zoho CRM’s Android app just got a useful upgrade. You can now share records, upload your

    • Add Custom Field Inside Parts Section

      How to Add Custom Field Inside Parts Section in Workorder like Category and Sub- Category

    • Automate onboarding emails with CRM Workflow and Accounts module

      We’re a B2B SaaS company selling to public-sector organisations. Each organisation is stored as an Account in Zoho CRM, and each organisation typically has multiple associated Contacts. Our backend syncs product-usage data (setup status, user activity,

    • Using a CRM Client Script Button to create a Books Invoice

      Hello, I need help handling error messages returned to my client script from a function. The scenario I have setup a client script button which is available from each Deal. This CS executes a crm function, which in turn creates an invoice based on the

    • Important update: Enhanced security measures for account operations in Zoho Cliq

      Greetings from the Zoho Cliq team! We’d like to share an important security update that has an influence on some admin actions such as password reset, MFA reset, and MFA backup code generation. What’s changing? With our latest security enhancements, these

    • Embed CRM record images in email templates

      I have email templates that I want to embed dynamic images in their body - not as an attachment. For the context, the image is a QR code individual to each contact. So there are couple of challenges for which I think there is no solution in CRM: 1/ I

    • Advanced Customization of the Help Center using JavaScript

      Hello everyone, The Help Center in Zoho Desk can be customized by using HTML and CSS to provide structure and enhance the page's appearance—but what if you want to add interactive and dynamic elements? You can add these effects with JavaScript, a programming

    • Boosting efficiency through faster ticket rendering

      This enhancement will provide faster access for support teams and end-users, significantly boosting productivity for everyone. Get ready for a more efficient and satisfying experience! Immediate benefits Faster ticket rendering reduces wait times and

    • PO Based Advance payment to Vendor

      We recommend to introduce a provision at PO to make advance payment to vendors and auto apply that advance paid later at the time of Vendor Bill submission for that PO. This will help us track PO-wise Total Payments.

    • Read webpage - MSXML2.ServerXMLHTTP

      I have the following VBA script, put together from various sources (mainly zoho forum/help/support, so it once worked, I guess): private Sub GetListOfSheets() Dim url As String Dim xmlhttp As Object Dim parameters As String Dim html As String range("B1").value

    • Automated log-out/session end

      I'm concerned about security of our data. Is it possible to set an automatic time-out for user sessions on Zoho CRM, after a certain period of inactivity or when the session reaches a certain duration (12 hours perhaps)? 

    • Sales Receipts Duplicating when I run reports why and how do we rectify this and any other report if this happens

      find attached extract of my report

    • Subform auto populate values

      Hi Team, I’m trying to retrieve values from Zoho People using API functions and dynamically populate them into a subform. For example, I’ve created a form with several fields that users will fill out. Based on their input, I need to fetch records from

    • Can I execute two 'functions' when completing a mail merge from CRM?

      Hi, I have set up a mail merge from CRM Deals to a template. I want a copy of this to be saved in Workdrive, and then a copy also saved back into the deal record from which the merge occurred. I can do both independent of each other, and managed to get

    • Assign multiple departments to multiple helpcenters

      Hi there! I have a reseller company for a software and I'm using Zoho Desk as my helpcenter and ticket management system. The software is great and I would like to make a suggestion! With multi-branding activated, your departments that visible in help

    • No Functional Autosave or Manual Save Button

      Application : Zoho Notebook So I wanted to try Zoho Notebook(On Ubuntu) as an application, I installed the application and went solving my LeetCode problems visually(Drawing mode), at one point the app just stopped saving anything... Every time I tried

    • Enterprise subscription support

      My organization sells subscription services to enterprise customers, which is a different model from the consumer subscription model that Zoho Billing has been designed to support and I beleve this capability should be added. An enterprise subscription

    • Issue with Creator's IF logic

      Hi, I found the following code produces unexpected results: if(-1.0 < 0.0000000) {       info "True"; } else {       info "False"; } if(-1.0 < 0.000000) {       info "True"; } else {       info "False"; } The output returned is: False True However, the

    • Need option to send Package PDF in shipment email (Shipment PDF is missing Lot info)

      Is there any way to automatically attach the Package PDF instead of (or alongside) the Shipment PDF in the notification emails? We really need this feature because the default Shipment PDF creates a blind spot for our customers. It does not display Batch/Lot

    • zoho creator view is not present in the workspace and blank reports

      Hi Support,  Users who have "write" permissions keep getting this error for all of our embedded reports all of a sudden. See screen shot below: Meanwhile, my developer permissions account sees a blank screen in view and edit mode as shown in the screenshots

    • Customize portal email template

      Can i fetch only first name of the user in portal email template instead of the below code Hi ${User.FULL_NAME}

    • Can't we let users decide which options they'd like to add at embed widget?

      It seems embed widget DOES NOT offer a feature, where users can choose options upon subscribing plans. What Zoho has instead, is that admins have to manually create plan with options. How come no one in Zoho dev team never raised issue about usability

    • Reupload and rename from one field to another field (file upload)

      Hi Everyone, Sorry, i have question to use invoke url for rename and reupload attachments file to another field. Tested on development mode. Zoho C6. Refer to https://www.zoho.com/creator/help/api/v2/upload-file.html look my error notification. Does anyone

    • Refund

      My plan expired today, and I updated my payment details with a new credit card. At the same time, I wanted to downgrade, but the system wouldn’t allow the downgrade until the payment details were updated. As a result, I was charged for the same plan before

    • Printing Multi-Page Reports (PDF Export)

      Hi, I am moving a report from Google's Looker Studio to Zoho Analytics and trying to reproduce the Looker page by page dashboard editing experience. With Google, what you see is what you get when you print to PDF. But I can't seem to create the same experience

    • Resume Harvester: New Enhancements for Faster Sourcing

      We’re excited to share a set of enhancements to Resume Harvester that make sourcing faster and more flexible. These updates help you cut down on repetitive steps, manage auto searches more efficiently, and review candidate profiles with ease. Why we built

    • I NEED TO NUMBER TO TEXT NO HERE

      =NUMBERTEXT NEEED

    • Error: View is not present in the workspace

      When saving a dashboard, user receives a popup with the following error. "View is not present in the workspace" What does this mean or refer to? There is no further insight given.

    • Dear Zoho CEO: Business Growth is about how you prioritise!

      All of us in business know that when you get your priorities right, your business grows. Zoho CRM and Zoho Books are excellent products, but sadly, Zoho Inventory continues to lag behind. Just this morning, I received yet another one-sided email about

    • Is there any way to send an Excel received by email to Dataprep?

      Every day I receive an email alert with an Excel file that I want to process through a Dataprep pipeline. To do this, I need to: -Save the file to disk -Open the pipeline -Run the pipeline -Update the source -Several clicks to select and open the saved

    • Bin Locations

      Dear all, I am wondering if someone has the ability to develop the bin locations option for zoho inventory (integrated with zoho books) Regards, Ryan

    • Create and populate a record in an instant: Introducing zero-shot field prompting to Zia's ICR

      A couple of months ago, we upgraded our in-house AI image detection and validation tool, Zia Vision, with intelligent character recognition (ICR). By training Zia with sample images, you could create and enrich CRM records with data extracted from standard

    • How to Prevent Users From Skipping LMS Videos in Zoho People

      How to Prevent Users From Skipping LMS Videos in Zoho People Hello Zoho Developers, In this blog, we will quickly look at how you can stop users from skipping or fast-forwarding videos in Zoho People LMS. Zoho People provides a feature called Disable

    • Sent mail sort by date disappeared

      Hello, We used to be able to sort the emails by date in the sent folder, but this feature has recently disappeared. Can we bring it back?

    • Sync desktop folders instantly with WorkDrive TrueSync (Beta)

      Keeping your important files backed up and accessible has never been easier! With WorkDrive desktop app (TrueSync), you can now automatically sync specific desktop folders to WorkDrive Web, ensuring seamless, real-time updates across devices. Important:

    • [Integration Edition] Deluge Learning Series – Custom API with Deluge | November 2025

      We’re excited to conclude this four-month Integration Edition of the Deluge Learning Series: Session 1 – Integrating Zoho Apps with Deluge Using Built-In Integration Tasks Session 2 – Integrating Zoho Apps with Deluge Using invokeURL and invokeAPI Session

    • Automate Backups

      This is a feature request. Consider adding an auto backup feature. Where when you turn it on, it will auto backup on the 15-day schedule. For additional consideration, allow for the export of module data via API calls. Thank you for your consideration.

    • Next Page