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

    • Zoho calendar not working in browser

      Hello, I am new to Zoho. I have two accounts for two separate businesses. In one of them, calendar loads in a browser no problem. However, if I use this account (sairfeetmusic.co.uk) calendar does not load. I also cannot add it to my Thunderbird Lightening

    • Authentication Failure when adding POP3 accounts

      Hi everyone, I am a new user currently migrating from Gmail to Zoho Mail. I decided to make the switch following Google's decision to discontinue POP3 fetching. I previously used Gmail as my primary mail hub, and Zoho seems like the perfect alternative

    • Trident Application Folder

      Hi, How to choose installation folder for Trident, by default it gets installed in C drive. How to change drive?

    • Email disappeared to specific contact

      Good afternoon, this morning I emailed somebody. This email isn’t showing up in my sent folder. They sent me a response which I clicked on and it disappeared immediately. Why could this be?

    • Create an Eye-Catching Announcement Widget for Your Help Center

      Hello Everyone! In this week’s edition, let’s explore how to keep your customers updated with exciting news in the Help Center. See how ZylkerMobile wowed their customers by bringing updates right to their portal. ZylkerMobile, the renowned brand for

    • Enable Free External Collaboration on Notecards in Zoho Notebook

      Hi Zoho Notebook Team, I would like to suggest a feature enhancement regarding external collaboration in Zoho Notebook. Currently, we can share notes with external users, and they are able to view the content without any issue. However, when these external

    • Updating records through Zoho Sheets View doesn't update timeline or trigger workflow rules

      I have noticed that when i update a series of record with the zoho sheets view (see here http://d.pr/i/ahnR) it doesn't update timeline history or trigger workflow rules. I am using it in the Deals module. Looking forward for some more info. Denis

    • How do I change the account bank charges are charged to?

      I want bank charges charged to my Credit Card Fees account. Is there a way to do this?

    • Mail Search should allow grouping by conversation like Gmail.

      Having switched from gmail I have found the search function hard to use. Mostly because mail is not grouped by conversation in search. If I search for a word when looking for a conversation had with someone then sometimes 10 emails will come up from the

    • Ability to CC on a mass email

      Ability to CC someone on a mass email.

    • Updation of Old Browsers Versions for Zoho CRM

      We have upgraded the default browser version for CRM to facilitate features like widgets and scripts that are often implemented aside from advanced functionalities for various business requirements. The latest version is aimed to provide better performance

    • Project-Based Inventory Consumption and Proforma Invoice in Zoho ERP

      While working with customers across different industries, we have identified a few functional questions and gaps that commonly arise—especially for project-based and service-oriented businesses. Many organizations, such as those in shipping, construction,

    • Zoho Desk domain Mapping not Working Showing CNAME Error

      I have created the subdomain and created the Cname as well as its instracted on the Zoho website  but when i try add the domain on help desk its showing error msg : Make sure you've mapped the CNAME entry and linked it to desk.cs.zohohost.com.au on your

    • Founders using Zoho — are you leveraging Zoho Campaigns + Zoho Social for thought leadership… or just sending emails?

      I’ve noticed something interesting in the Zoho ecosystem. Many founders use Zoho Campaigns and Zoho Social for basic marketing—newsletters, scheduled posts, and announcements. But very few are using these tools strategically to: • Position themselves

    • IMAP stopped working after enabling 2 factor authentication

      IMAP stopped working after enabling 2 factor authentication. Is there any solution for this?

    • Rename Service Report

      Some of our customers are requesting the name of the service report PDF to be in a specific format, for example, instead of REP-001.PDF some are requesting to include their name like customername.pdf. is that possible?

    • Outgoing emails rejected due to SpamCop RBL listing (IP 136.143.188.12)

      Hi All, I am writing to report a deliverability issue affecting outgoing emails from my Zoho Mail account. Recently, several messages sent from my domain (example.com) to external recipients have been rejected with the following error message (redacted

    • Share Record Ownership in Zoho Recruit

      We’re introducing User Fields in Zoho Recruit designed to make collaboration easier when multiple team members need to work on the same record. With User Fields, you can extend record ownership beyond a single user and enable smoother teamwork across

    • Recherche d'un développeur

      Bonjour, j'ai un projet de SAAS sur une base de zoho créator et zoho CRM et je recherche un développeur qualifié français pour créer l'application créator (fonctionnel et graphique) et les workflow et blueprint de CRM

    • Display actual mileage on an invoice

      My users are creating expenses in Zoho expense. For example, they expense 10 miles and get paid 7 dollars (10 miles * IRS rate of .70). If I look at the expenses in Zoho Books, it does show them at 10 miles at .70 cent When I add these expense to an invoice

    • Customer Parent Account or Sub-Customer Account

      Some of clients as they have 50 to 300 branches, they required separate account statement with outlet name and number; which means we have to open new account for each branch individually. However, the main issue is that, when they make a payment, they

    • Cloning a Pick List

      I have an existing Pick List in my Contacts that I want to drop into my Leads.  Is there a way to copy or clone the field with it's accompanying Pick List?  Thanks for your time.

    • How do I link my invoice to an estimate?

      There has been instances where I have created estimates, however, invoices for the same estimate were created independently. The status of these estimates hasn't converted to 'invoiced'. 

    • I wish to upload 40000 Resumes in Zoho Recruit Database. Can I do this in batch of 1000 Resumes ?

      I would like to upload thousand or few hundred of resumes in Zoho Recruit in one go. Please let me know how can I do this Or migrate my 40000 resumes from previous ATS to Zoho Recruit.

    • Zoho Writer for Proposals

      Hi, one of the things we've struggled with since moving to Zoho ecosystem is our proposal software Qwilr does not integrate well. It surprises me Zoho doesn't have proposal software but given all the capabilities of Zoho Writer, I'm wonder if anyone is

    • Custom Fonts in Zoho CRM Template Builder

      Hi, I am currently creating a new template for our quotes using the Zoho CRM template builder. However, I noticed that there is no option to add custom fonts to the template builder. It would greatly enhance the flexibility and branding capabilities if

    • Foutmelding bij uitvoering/opslaan functie 'Left expression is of type TEXT and right expression is of type NUMBER'

      Hoi! Ik heb een workflow (zie bijlage) die wordt getriggerd zodra de verwachte weekomzet van een bedrijf wordt aangepast naar een bedrag hoger dan 0. Op dat moment moet een functie (zie bijlage) gaan berekenen wat het benodigde kredietlimiet moet zijn.

    • Hoe kun je Nederlandse loonstroken boek in Zoho Books?

      Beste Community, Heeft er iemand een idee hoe je standaard loonstroken kunt inboeken in Zoho Books? Ik ben benieuwd hoe jullie dit doen en wat de mogelijkheden zijn.

    • Unable to Filter Retail Sales Orders & Need Paid/Unpaid Filter – Zoho Books

      Hi Zoho Team, Recently you introduced Retail – Standard and Retail – Premium templates for Sales Orders. However, in the Sales Order module we still cannot filter or segregate Retail Sales Orders separately from normal B2B sales orders. Because of this,

    • Service op locatie organiseren met Zoho FSM: waar lopen organisaties tegenaan?

      Bij organisaties met service teams op locatie merken we vaak dat de complexiteit niet zozeer in de planning zelf zit, maar in wat er rond die planning gebeurt. Denk aan opvolging na interventies, consistente servicerapporten, en het bijhouden van installaties

    • Possible to delete the "Big Deal Alert" in Zoho CRM?

      Hi, Is it possible to delete the "Big Deal Alert" in Zoho CRM? My company has no need for it and I want to remove it to clean up my email templates list. Thank you. Moderation Update: Currently, the option to delete the "Big Deal Alert" template is in

    • Allow selection of select inactive users in User data fields

      Hello, We sometimes need to select a previous employee that has an inactive account in the User data field. For example, when doing database cleanup and indicating actions are done by a certain employee that weren't filled out when they were part of the

    • [Webinar] Top 10 Most Used Zoho Analytics Features in 2025

      Zoho Analytics has evolved significantly over the past year. Discover the most widely adopted features in Zoho Analytics in 2025, based on real customer usage patterns, best practices, and high-impact use cases. Learn how leading teams are turning data

    • Need advice for product/item search functionality when adding invoices.

      My client uses "Catalog or Vendor" name and Product code to search for his items. But Zoho only allow to search by product name and SKU when adding items to Invoices/Estimates. Clients product codes are not unique as they may overlap from different catalogs/vendors.

    • Super Admin Logging in as another User

      How can a Super Admin login as another user. For example, I have a sales rep that is having issues with their Accounts and I want to view their Zoho Account with out having to do a GTM and sharing screens. Moderation Update (8th Aug 2025): We are working

    • Do buttons and vba msgbox work on mobile, specifially the iPhone zoho sheets app?

      In Zoho sheets on the web, I inserted a button and assigned a VBA macro to it. It pops up a msgbox with some text. When I go onto the iPhone mobile zoho sheets app, the button is there. When I click on that button, the spinning asterisk appears for a

    • [Webinar] Solving business challenges- Handling the challenge of transitioning to Zoho Writer from legacy tools

      Moving to Zoho Writer is a great way to consolidate your business tools and become more agile. With multiple accessibility modes, no-code automation, and extensive integration with business apps and content platforms, Zoho Writer helps solve your organization's

    • How can I effectively manage a website with your help?

      I’m wondering if it’s possible to develop a custom website with specific features using Zoho as an alternative platform. My goal is to create a website similar to https://tmsim.ph, with the same kind of functionality and user experience. I would truly

    • Introducing the Yes/No field: Binary decisions made beautiful

      Greetings, form architects! What would you do when you need a simple yes/no answer on your form? Normally, you add a Radio field. Type Yes. Type No. Until now. The new Yes/No field is purpose-built for binary decisions. It is preconfigured, visually consistent,

    • Move email between inboxes?

      Is it possible to move emails from one team inbox to another? We would like to be able to have a single "catch-all" inbox for incoming requests, and then move the email to the appropriate department inbox. I was hoping we would be able to accomplish this

    • Next Page