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
- Ensure that you have installed all the necessary components required to use Zoho's CLI.
- 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
- Zoho CRM Widgets -Overview, CLI Installation, Creating a Widget, Kaizen #23
- Widgets in Blueprint - Kaizen #95 How is a Widget used in a Blueprint?
- Related List Widget - Kaizen #114 Geocoding Leads' Addresses in ZOHO CRM
----------------------------------------------------------------------------------------------------------------------------------------
Join us for our upcoming Zoho CRM Developer Series: Zoho CRM APIs, where you can explore more about Zoho CRM APIs. Register Now!
Access your files securely from anywhere
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Kiruthiga G
Vigneshwaran K
Marco Mogliani
Maxime Bory
Sriram U
Sticky Posts
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 achievedKaizen #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 theKaizen #197: Frequently Asked Questions on GraphQL APIs
🎊 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.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.
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Export your notes from Notebook!
Dear users, The long awaited feature is now live. Yes, you can now export your notes from Notebook app in bulk. But the feature has just started with web app alone for now. You can try the export feature as mentioned below: Go to our web app, https://notebook.zoho.com Go to 'Settings' > 'Export' Now, select the format: You can select either ZNote or HTML Once done, you can use the same to import or can have this a local backup of your notes. Note: Export for other platforms are in development andDissociate account from contact
Hello, When I make the call through the API to "Dissociate account from contact" using, /api/v1/contacts/**integer**/accounts/**integer**/dissociate I get this response back, 422Unprocessable Entity (WebDAV) (RFC 4918) { "errorCode": "INVALID_DATA", "message":Zoho Desk and Zoho People Integration - is it possible in order to alert whether an agent is available
Hi, We use Zoho People for our employees to log absence (Paid Time Off etc). I was wondering if it was possible that this information can be shared in to Zoho Desk, so that when allocating a ticket to an agent, if they are on leave there is an onscreenAdd Save button to Expense form
A save button would be very helpful on the expense form. Currently there is a Save and Close button. When we want to itemize an expense, this option would be very helpful. For example, if we have a hotel expense that also has room service, which is aCall transcrition working for ringcentral?
I don't see anything about what telephony providers can be used. The Zoho support person A said that RingCentral isn't supported. Zoho support person B said that it works, just make sure the call recording link works. Excellent instructions here: CallIssue with Booking Confirmation Page Not Displaying, Leading to Customer Anxiety and Unnecessary Support Calls
I am writing to express my growing concern regarding the confirmation process in Zoho Bookings, particularly the inconsistent display of the confirmation page after a successful payment. As a mobile service provider, I rely on Zoho Bookings platform forHow to Send Email from within a custom module (with or without an email template)
It is possible to send an email from the Deals module. However, I can't find a way to send an email from any of our custom modules. I have tried adding an email field to the modules (even though we don't really want one or need it there). That doesn'tZoho Inventory - Managing Items With Multiple Suppliers
Hi community, I'm working on a project at the moment for a car parts wholesale business. Each Item (part) has its own original manufacturer part number (sometimes more than one part number for the same item). When purchasing parts from 3rd party suppliers,How do I see the total leads during a certain period?
I understand I can get the count of leads and potentials but the total number of leads in a certain period should be equal to Leads+potentials because when we convert a lead it gets moved to potentials and no longer exists there. is there a way i couldWhere is the Global Search field?
I am looking for an alternative to SF.com. Zoho CRM seems to be work fine, and be customizable in terms of the fields and reports. But there's one big thing missing and it's going to prevent us from using it: there's no global search box at the top ofAPI 500 Error
Hello amazing ZOHO Projects Community, I get this message. How can we solve this? { "error": { "status_code": "500", "method": "GET", "instance": "/api/v3/portal/2010147XXXX/projects/2679160000003XXXX/timesheet", "title": "INTERNAL_SERVER_ERROR", "error_type":In place field editing for candidates
Wondering about any insight/best practices for efficiently updating candidate records while reviewing them in a Job Opening pipeline. We can do in-field editing (e.g. update job title or City) only when we have the full candidate record open, howeverDefault tax type for mileage?
Where we are, mileage includes a government tax. Is there any way to set a default tax for the Personal Car Mileage category of expense? (Or any other way?)Show price book list price
When using price books, once you add products to the price book in the Products related list you can display the Unit price which is the default list price; however, there is no option to show the price book list price. To see the price book list priceCliq File Upload
While uploading large file like 500MB, it takes time, that fines. But if you resize window or move window in other screen, that uploading disappears. After upload complete & sent it will be visibleZia Actions: AI-powered Workflow Automation for Faster and Smarter Execution
Hello everyone, Workflows got a notch better with AI-based actions. Actions such as field extraction, prediction, auto reply, and content generation facilitate quick execution with improved speed and accuracy. Zia can intercept useful details in newlyConstant color of a legend value
It would be nice if we can set a constant color/pattern to a value when creating a chart. We would often use the same value in different graph options and I always have to copy the color that we've set to a certain value from a previous graph to makeWhat's New in Zoho POS - October 2025
Hello everyone, Welcome to Zoho POS's monthly updates, where we share our latest feature updates, releases, changes, and more. Let’s take a look at how October went. Process returns for refunds, exchanges, or offer store credit Returns and exchanges canLoan and purchase
My husband is lending me mobey to buy a vehicle intersst free ... I need to know how to record the cash receipt and how I pay it back... the money is for a vehicle do I just post the invoice for that as I normally would usung the loan money to pay forZoho Connect Module in Zoho Trident
Hi I really like where Zoho Trident is going. Having Mail and Cliq in one place is especially powerful. However, Zoho Connect really needs to be included to make this a true communication and collaboration hub. I would like to request that Zoho ConnectZoho FSM API Delete Record
Hi FSM Team, It would be great if you could delete a record via API. Thank you,File Field Validation
Hello all, We are tracking our customer NDA agreements in our CRM and have created 2 fields to do so, an execution date field and a file upload field. I want to create a validation rule to ensure that when the execution date field is populated that the100 record view limitation
I have just migrated from another CRM and am starting in ZOHOcrm with over 5000 contacts. It seems that my searches and sorts are limited to 100 live records....or am I missing something. This seems to be very limiting...in a lot of scenarios (mass email,ZUG Meet-ups are back - Across India (December 2025)
The Zoho User Group (ZUG) meet-ups are back, and this time, we’re travelling across India to reconnect with our amazing community! From Chennai to Delhi, Bengaluru to Mumbai, we can’t wait to meet you all in person and talk everything Zoho SalesIQ, automation,Categorise Attachments
We take ID, proof of address, right to work documentation and more. I can upload a single file in to field, but we often receive multiple files for each category e.g. someone may send a separate file for the front and back of their national ID card. My team don't have time to manipulate the files in order to upload them as a single file. The options, as far as I can tell, would be to create additional fields on attachments in order to categorise what the file is, or to be able to upload singleScheduling a meeting for just a 1:1 phone call
My business is B2C and many of my customer's don't want to engage in an online meeting for what can be handled in a regular phone call. I am trying to create a new meeting invitation, but there is no venue optoin for "phone call". How are other's handlingNeed more details on API Usage Dashboard
Hi Team, We have implemented Zoho Expense for a client and has done some integrations with well known third party ERP via api. Recently we have noticed a huge spike in the API consumption. But we couldn't get the root cause for the same. I accept therePower of Automation:: Automating SLA Timelines for First Response & Resolution for Issues module.
Hello Everyone, Ever wished SLAs could update automatically based on issue severity i.e no manual tracking, no missed timelines? That is exactly what one of our customers, Alex, wanted to achieve in the Issues module. So, we have setup a simple automationFinding missing records
I have a challenge and I am not really sure where to start with it. I can't find any similar threads on here, can anyone help: I have two forms, FormA and FormB. Both forms have records that contain a field called Job_Number. What I am trying to achievePower of Automation :: Quick way to associate your Projects with Zoho CRM
A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate complex tasks andFree webinar! Build smarter apps with Zoho Sign and Zoho Creator
Hello, Bring the power of digital signatures to the apps you build in Zoho Creator! Connect Zoho Sign as a microservice and enable seamless e-signature workflows in your applications. This integration allows you to automate signing tasks using Deluge.Move orders scan ISBN
Hi We have ISBN setup to be searched in items zoho but move orders dissent recognize the ISBN is there q missing configuration? regards, JSWhat's New - October 2025 | Zoho Backstage
Hey everyone! We’ve been busy rolling out a host of upgrades for Zoho Backstage. While some major features are still going through final rounds of testing to make your event experience smooth as butter, here’s what was new and improved in October 2025.Zoho Analytics - Feature Request For Time Based Data Source Fetch
Hi Analytics Team, I have a client using Zoho CRM and they want a weekly report at 4:30pm every Friday, emailed to the sales team showing a pie chart of Closed Won Deals for that week. This is easy to achieve in Analytics but not so easy to ensure theZoho People Attendance Regularization – Wrong Total Hours Displayed
While using Zoho People, I observed that the attendance regularization is showing wrong total hours when applied to past dates. For example, if a check-in is added at 10:00 AM and check-out at 6:00 PM for a previous date, the system sometimes calculatesAdd Flexible Recurrence Options for Meeting Scheduling in Zoho Cliq (e.g., Every 2 Weeks)
Hello Zoho Cliq Team, We hope you are doing well. Currently, when scheduling a meeting inside Zoho Cliq, the recurrence options are limited to Daily, Weekly, Monthly, and Yearly. There is no ability to set a meeting to occur every X weeks — for example,AI generated meeting notes associated to Account or Deal
As our organization works to improve efficiency we are looking for a solution to leverage AI to generate meeting notes and then add those notes to a CRM record such as an Account or Deal. I see Zoho has a Notebook AI offering that talks about the abilitySubform Disabled Fields Should Remain Disabled on Edit/View
Currently, when we disable a subform field using on user input or on add new row, it works perfectly during the initial data entry. However, when the record is saved and reopened for viewing or editing, these disabled fields become editable again. ThisHow do you print a refund check to customer?
Maybe this is a dumb question, but how does anyone print a refund check to a customer? We cant find anywhere to either just print a check and pick a customer, or where to do so from a credit note.What is Resolution Time in Business Hours
HI, What is the formula used to find the total time spent by an agent on a particular ticket? How is Resolution Time in Business Hours calculated in Zohodesk? As we need to find out the time spent on the ticket's solution by an agent we seek your assistanceNext Page