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

    • Add field "Expected Availability Date" to Purchase Orders

      Hi there. We drop ship and 'make to order' whereby we backorder sales order items directly with factories for manufacturing. One of the leading questions from Customers is "when is the order ready". Currently there is an 'Expected Delivery Date', which

    • Related list view for Assets

      We first set up all our parent assets in FSM and now we are adding child assets which are the parts for the parent assets. When under the customer related list, since it only displays 5 rows of data, I have to click through many assets to locate the parent

    • How To Invoice Immediately for Future Subscription

      Hi, When a new subscription is created that has a future start date, Zoho Subscriptions does not invoice the customer until the start date of the subscription. Is there a way to immediately invoice the customer as soon as the subscription is created,

    • name change of company in same GSTIN registration . how to retain historical company name for past transactions?

      hello I have recently change my company name from BHANU DIAM to BHANUMATI IMPEX in same GSTIN registration number While i have update the company name in profile name that change all my historic data like sale invoices and purchase bill , i would like

    • Problem with the blueprint flow.

      Scenario: 3 departments in a single environment: A-B-C agents from department 1 D-E-F agents from department 2 G-H agents from department 3 Since we've been using Zohodesk (2023), agents can assign tickets to the correct department using the blueprint

    • Spell Check Red Underlines Keep Appearing Even After Disabling

      Hello Zoho Support, I'm facing an issue in Zoho Writer where red spell-check underlines keep appearing even after I disable Spell Check. I have already: Turned OFF Spelling Errors Turned OFF Grammar Turned OFF Writing Quality Turned OFF browser spell

    • iOS Books app shows filtered view after changing to All sales orders

      My boss often checks sales orders on his iPhone. The app is mostly working fine, but there's an ongoing issue: When switching between different filters (also called custom views on the web), going back to All doesn't often work. It typically gets stuck

    • Empowered Custom Views: Cross-Module Criteria Now Supported in Zoho CRM

      Hello everyone, We’re excited to introduce cross-module criteria support in custom views! Custom views provide personalized perspectives on your data and that you can save for future use. You can share these views with all users or specific individuals

    • Recurring Invoices

      I'm looking to set up recurring invoices on a monthly basis, using GoCardless as a payment gateway. I've done this successfully, however there's a big problem with the Invoice Date and Due Date. We prefer to provide sufficient notice of collection (10

    • Recurring Events Not Appearing in "My Events" and therefore not syncing with Google Apps

      We use the Google Sync functionality for our events, and it appears to have been working fine except: I've created a set of recurring events that I noticed were missing from my Google Apps calendar. Upon further research, it appears this is occurring

    • Vorrei disdire l'abbonamento

      Vorrei disdire l'abbonamento, ma non trovo il modo. Mi assistete?

    • Has anyone successfully gotten conditional rendering to work in Zoho Books Sales Order HTML PDF templates?

      I’m trying to hide a custom field box when the custom field is blank. The value placeholder itself works perfectly: ${salesorder.cf_distribution_reference_numb} If the Sales Order has a value, it renders correctly. Example: 45488045. But when I wrap that

    • Latest updates to Zia in Office Integrator

      Hello Zoho Office Integrator users! We’re pleased to share exciting updates to the proofing capabilities of Zia, our AI-driven writing assistant, in Office Integrator. With these updates, you can now get spell and grammar check in Brazilian Portuguese,

    • Implementing Back Button Navigation in Zoho Creator

      Zoho Creator does not currently support a native Back button within forms, so implementing backward navigation requires a workaround. We recently implemented this in an application that was split into 9 modular forms. Since users needed to move between

    • In wiki editor, dragging an image fails

      Expected behavior: Within the WYSIWYG editor, we have been able to select and drag an image (that is already inserted in the page) to move it to a different position on the page. Current behavior: For a few days recently (possibly longer and I didn't

    • Not able to see appointements when the territory permission is activated

      Hello, I created different territories to separate the various departments within the company that will be working on different projects. The issue I am currently experiencing is that when I enable territory-based permissions, I can see the work order

    • Quotes Module - import data

      Hello Zoho, is it possible to import Quotes records? I was trying and i have no results. Raport shows no data imported. Could you help me please how to do it?

    • Introducing the new Zoho Announcements Hub

      Hello, Enterprise Support Community! We are excited to announce a new way to keep up to date with recent product releases and announcements for the Zoho apps you use on a regular basis. Introducing our new centralized location to bring together all Zoho

    • Introducing Custom Columns in Forecasts in Zoho CRM

      Hello all, Forecasts in Zoho CRM help sales representatives, managers, and business stakeholders evaluate performance and plan future sales activities. While standard metrics such as Target, Achieved Amount, and Pipeline Amount provide a baseline view,

    • Can Zoho CRM Emails be used in Zoho Analytics in any capacity?

      We're wanting to display details about Lead Activity in regular reports through Zoho Analytics but we're having difficulty integrating Emails at all. We'd like to be able to note when an email is received and when it is sent somewhere other than just

    • Zoho Books - France

      L’équipe de Zoho France reçoit régulièrement des questions sur la conformité de ses applications de finances (Zoho Books/ Zoho Invoice) pour le marché français. Voici quelques points pour clarifier la question : Zoho Books est un logiciel de comptabilité

    • Composite Services and Account Tracking

      I am looking to garner support/request the ability to make composite services. A quick search in the forums brings up multiple requests for this feature. I fail to see why an item is mandatory while services are optional. I also would like to see the

    • Marketer's Space: Lists vs. segments—what's the difference?

      Hello Marketers, Welcome back to another post in Marketer's Space! In email marketing, reaching the right audience is just as important as crafting the right message. Yet many marketers often confuse lists and segments, using them interchangeably without

    • Building a Multi-Step Form Experience in Zoho Creator Using Standard Forms

      Zoho Creator does not currently provide native multi-step form functionality. For applications with a large number of fields, a common requirement is to split data collection into manageable sections while maintaining a single application record. In this

    • Add Video link to interview record

      Hi Team, we are having team members consistently go to the interview record to find the link for their upcoming meeting and have been confused that they have not been able to find them. When the interview is created can you please upload the link to the

    • Zoho projects dependancies is a joke

      About to cancel our Zoho One subscription because Zoho Projects is a mess. Can't build a proper progream in it because the dependancies doesn't work properly. Can't believe this software is promoter as a project program when one can't even build a proper

    • Wiki Add Attachment upload fails at about 15.3 MB

      I am seeing consistent "Error in uploading file" for files larger than about 15,430 kB. For 15,300 kB or smaller, no problem, but 15,430 kB or larger always fail. This is over numerous trials. My test files, to examine this problem, were generated by

    • Stop Wasting Clicks: Let Us See All Notes in Quick View

      Hi Zoho Recruit team, I would like to suggest an improvement to the candidate/application experience in Zoho Recruit. Today, it is difficult to get a full picture of a candidate when working from the Quick View, since notes are split between: Notes related

    • Zoho Books | Product updates | June 2026

      Hello users, Welcome to this month's roundup of what's new in Zoho Books! We have an exciting line-up this time. The highlight is the launch of the all-new France Edition with full ISCA compliance. We're also introducing features such as Layout Rules

    • issue invoice for future subscription

      Hi, I selected the invoice at the date of subscription from the setting (since the alternative is to pre-set a date of a month) which is not my case. So, my question : Some times I need to create a subscription that will start at a future date but I need

    • Associate emails from both primary and secondary contacts to deal

      We need to associate emails from multiple contacts to a deal. Please advise how this can be achieved. At present, only emails from primary contacts can be associated. Thanks

    • How to set default reply email address depending on receipt email address

      Hi, I have a number of different customer support email addresses (info@XYZ.com, retuns@XYZ.com etc.) and want to set Zoho Desk so that the email address from which an agent replies is automatically defaulted to a predetermined address depending to which

    • Recording Transaction after Gateway charges

      Hi, Requesting assistance in recording a transaction. I had sent an invoice of Rs.3500 to the customer. He used a PG to pay the amount. The PG had deducted 2% fees (Rs.70) and Tax (Rs.9) and sent the balance (Rs. 3421) to my bank account. How shall I

    • Bank charges

      Hello, team zoho I have a difficulty, in the form to register the payment of the customer has a field "bank charges" more when registering an expense or payment to the supplier that field does not appear. And I think that's a mistake because in my account

    • Writer is horrible

      Form filling is about unusable for complex forms! I am so tired of it.

    • How to Migrate from MDaemon to Zoho Mail Account?

      Hi there, Zoho Mail is one of the most popular as well as leading competitor for several cloud email service providers. It is It provide cloud email service as well as desktop based email client. In recent years people are migrating from third party cloud servers to Zoho Mail. The reasons are plenty, i.e. the user interface, security, high performance and many countless amazing features. On the other hand MDaemon Mail (aka WorldClient) is also popular among cloud email servers. But there are some

    • Trigger workflows from SLA escalations in Zoho Desk?

      Hey everyone, I’m currently working with SLA escalation rules in Zoho Desk and ran into a limitation that I’m hoping someone here has solved more elegantly. As far as I can tell, SLA escalations only support fairly limited actions (like changing the ticket

    • CRM Portal Lookup Linkage and Related Fields

      hi, if someone can give me the right path, would be greatly appreciated. we want to do a customer portal for our partners who we issue work orders for our customers, the linkage via lookup fields Partner -> Work Order -> Customer in our portal, the primary

    • HOW TO: Searching a thread (email body/text) with a custom function, allowing filtering and specific actions

      We are still trialing out Zoho at this time, but have found a major expected feature to be missing - the ability to search within the text of an email for automation/workflows. NOTE: You need to create a connection for zohodesk under settings -> Developer

    • Cold emails not allowed?

      I planned to use Zoho Mail to send businesses some cold emails to offer my freelance writing services, but I noticed that the anti-spam policy is very strict -- no commercial emails whatsoever without prior permission from the recipient? I would be very

    • Next Page