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

    • Automatic Email Alerts for Errors in Zoho Creator Logs

      Hello, We would like to request a feature enhancement in Zoho Creator regarding error notifications. Currently, Zoho Creator allows users to view logs and errors for each application by navigating to Zoho Creator > Operations > Logs. However, there is

    • [Webinar] Agentic AI and its influence on analytics and autonomous decision-making

      Analytics is evolving from passive reporting to proactive, intelligent systems. Agentic AI is at the center of this shift, bringing context-aware reasoning, continuous learning, and the ability to act on data in real time. Join this webinar with Michael

    • Zoho One: books and inventory working together

      Hi, I was very pleased when I saw that in Zoho Inventory can now pull the orders from Woocommerce. They are now fed in Inventory as Sales order and with choosing convert invoice as Instant Invoice I am getting the exact data as they appear in Woocommerce.

    • Zoho Forms - Form Availability Redirect Option

      Hi Forms Team, It would be great if there was a redirect URL option on the Form Availability settings. For example, I would like to create a support form which is only available outside business hours and if the current data and time is not Mon-Fri 9-5

    • VAT and Taxes option not available

      Dear ZOHO Team , The VAT and Taxes options in my ZOHO books account not available,I tried to find how to enable or check the way to use this option but unfortunately couldn't find it anywhere ,I'm in UAE ,kindly let me know what to do to solve this issue

    • Syncing zoho books into zoho crm

      I was wondering how I can use zoho books in crm as I have been using them separately and would like to sync the two. Is this possible and if so, how? Thanks

    • Client requests I submit invoices using bill.com

      The title states it all. I have a reoccurring invoice setup for this client who has been manually paying by credit card. We are both experiencing merchant costs/fees. The use of bill.com's direct deposit is not far removed from Zoho's, only the client

    • Zoho Inventory Feature Roadmap Visible To All

      Hello, please consider making your feature roadmap visible to us users so that we know what to expect in future. This may appease current users who are seeking clarification on feature implementation dates, so that they can make an informed decision whether

    • Can't Remove Payment Gateway

      I am getting the error "Settings cannot be cleared as some of the transactions are still in progress." when trying to remove the PayGate payment gateway which I was unable to get working. I am now using paystack and I want to remove Paygate.

    • Improve Zoho Vault search

      Hello, we started using Zoho Vault and we really appreciate the app. At the moment, when searching passwords, the search query only targets the password name. I think having the query search among Name, User name, URL, Notes and Tag would be a better

    • New in WorkDrive: Personalize your file system with Labels

      Data is the driving force behind every decision made by businesses today. We at WorkDrive know every employee needs reliable access to their information and be able to locate the data they need at the right time.  Introducing Labels: organize your files in a way that's personal to you.  While WorkDrive's Data Templates feature focuses on adding structure to your organization's data, Labels help your team members classify files based on their preference. The Labels created will appear only to the

    • Custom Buttons & Links Now Supported in Portals

      We’ve just made portals in Zoho Recruit more powerful and customizable than ever! You can now bring the power of Custom Buttons and Links to your Candidate, Client, Vendor, and Custom Portals, enabling portal users to take direct action without recruiter

    • Work Type Section in Field Service Settings

      Hello Team, We are trying to understand how skills are managed in the system. During our review, we found an article mentioning a section called Work Type, which is used to manage skill assignment. According to the documentation, this section should be

    • Mirror Component in Zoho CRM: Access real-time related data without leaving your record

      Hi everyone, This feature is now available for the JP, CA, SA, UAE, and AU DCs. We're excited to bring to you Zoho CRM's mirror component, which presents relevant data on a record's details page and keeps everything users need in one place without having

    • Clone a Module??

      I am giong to repurpose the Vendors module but would like to have a separate but very similar module for another group of contacts called Buyers. I have already repurposed Contacts to Sellers. Is it possible to clone (make a duplicate) module of Vendors

    • Is there lead tracking in Bigin? There should be.

      Is there a way to track leads before they are ready to be added to Pipelines? I'm afraid we're going to lose opportunities. Example: We're sending out small batches of 25 emails to those we collected at tradeshows. They are all qualified leads. Out of

    • How to get static reports via Desk API

      Hello, we are hoping to use the Desk API to automatically export the default static reports in Zoho Desk, or reconstruct them via other API calls. What's the best way to do this? For example, if I want to recreate the Response Time static report via the

    • Product updates in Zoho Workplace applications | April 2026

      Hello Workplace Community, Let’s take a look at the new features and enhancements that went live across all Workplace applications for the month of April. Zoho Mail Enhance group member exports with additional data fields Customize your group member exports

    • Billing Status Update

      Hello Latha, I’m working on a new automation (deluge) to fulfill one of our requirements. In this automation, there is a step to update the Work Order billing status from “Not Yet Invoiced” to “Non-Billable.” I tried to find the API information relevant

    • Zoho Projects Coming to CRM Teamspaces

      Availability: The US DC Standard Edition is now available. It will be rolled out to customer accounts in all DCs in phased manner. Hello all, You are probably already familiar with Teamspaces, the dedicated workspaces where teams organize the CRM modules

    • Customise Lead Source and Sub Lead Source per webinar

      We have an integration between Zoho Meeting and Zoho CRM. New leads are imported into CRM but now they all have the source "Zoho Webinar". Can I change this source? Can I add a sub source? And can I customize these fields per webinar? (So different webinars

    • Zoho Projects Roadshows 2026 - APAC

      Dear Users, Building on the amazing response to our roadshows in 2025, we are excited to announce our next set of roadshows in the APAC region. To start with, our team of experts will conduct these events in Singapore and Manila. They will walk you through

    • how do i add more than one google my business location?

      they are connected to one account, but while connecting social channels it makes me pick one location. I have 3 and growing.

    • Notes - Reaction Buttons

      Using the native notes option within CRM is fine, it works and the RTF features are great, however, would it be possible - if there isnt already something in place, where we can add a reactions button, similar to teams/whatsapp to show that its been read

    • Zoho Analytics: Clarification on Email Schedule Limits in Basic Plan

      Hi Team, I have a question regarding the email scheduling limits in the Zoho Analytics Basic Plan. The plan shows that I can create 4 email schedules. However, I understand that schedule consumption is calculated based on recipients (i.e., 1 schedule

    • Zoho → ShipStation Integration – Sales Order–Driven Fulfilment Workflow

      Hello All, I’m reaching out to explore the best way to integrate a shipping tool into our inventory which will speed our process up. We are looking to integrate ShipStation into our existing order-to-fulfilment workflow, as we’re keen to standardise on

    • Updating Sales orders on hold

      Surely updating irrelevant fields such as shipping date should be allowed when sales orders are awaiting back orders? Maybe the PO is going to be late arriving so we have to change the shipment date of the Sales order ! Not even allowed through the api - {"code":36014,"message":"Sales orders that have been shipped or on hold cannot be updated."}

    • Custom button for list page

      Why is my 'List Page - Bulk Action Menu' button in the Packages module not autopopulating the List argument with selected record IDs?

    • Exclude Email or Domain From New Ticket Notification

      Hi, we utilize the new ticket notification feature in Zoho Desk. However, it would be great if there was a way to exclude certain email addresses or domains from receiving the automatic notification. This would be particularly helpful for automated alerts

    • Anyone have a working connection with CRM and shipstation via Flow

      Just wondering if anyone has successfully integrated shipstation and Zoho CRM.  I know there’s code to do it but am hoping to find out all the pitfalls before I jump on!! Scenario: SalesOrder gets created in CRM with multiple line items. I want this pushed to shipstation. On shipping via shipstation I want to push the tracking # back to CRM.  Many thanks in advance

    • ShipStation and Zoho Inventory

      Hello, I am looking to sync zoho inventory with shipstation ZOHO INVENTORY           SHIP STATION Sales Order  ==>  create ORDERS INVOICE  <==    Shipments What exactly does BETA mean on the Shipstation connector?  This is required for me to sign-on in the next month. Thanks in advance for your efforts

    • Connect to Shipstation's API

      Shipstation is a very big service, with lots of users, tons of order data.....and poor un-customizable reporting. This is perfect for Zoho analytics.  The Shipstation API is modern and efficient.  Today I think many people pay Zapier to get Shipstation data into Reports/CRM/Books - why not have  a direct connection?  -can pull in shipments via webhook or polling.  -also nice to pull in order data along with shipment data

    • What’s the Correct Integration Flow Between Zoho Inventory, ShipStation, and Multi-Channel Sales Platforms?

      Hi Zoho Community, I’m currently implementing Zoho One to manage all of my business processes, and I’d appreciate some guidance on the correct integration flow for the tools I’m using. Here’s my current setup: Zoho Inventory is my central system for managing

    • Remove Zoho Header from Portals

      I have a portal page with custom domain. But when I print directly from a webpage, the Zoho CRM header shows. It kind of kills the branding aspect. Is there a way to get rid of this?

    • Setting defaults for "Find and Merge Duplicate for..."

      To remove some of the extreme tedium from Zoho's poorly implemented merge function, I would like to set defaults.  Currently I am defaulted to match "ANY" when I would never do that, so I always have to click "ALL". Then it makes me click on several totally irrelevant drop boxes to turn off phone, mobile and other useless match criteria. Is there a way I can set: Match to default as "ALL" Firstname to default to "IS" Lastname to default to "IS" every other match field default to "-NONE-" This will

    • Let's bring Manufacturing Resource Planning (MRP), Material Requirement Planning (MRP), and Production Planning/Management module / feature in Zohobooks

      Let's bring Manufacturing Resource Planning (MRP), Material Requirement Planning (MRP), and Production Planning/Management module / feature in Zohobooks

    • CLIENT PORTAL (If clients can place orders directly on the portal)

      Zoho client portal is excellent. Everything is there except one thing. Client should be able to place orders directly on the portal. This would enhance the portal and end users will be extremely happy. This suggestion infact came from one of our client.

    • アナリティクスで商談中のパイプライン(ステージ）の件数比較

      アナリティクスで商談中のパイプライン(ステージ）の件数を前週と前々週で比較したい。前々週の件数が更新することで変動してしまう。対象方法をご教授ください。

    • How do I remove a data source from Zoho Analytics?

      I am unable to find a delte option on a datasource that i put in the system as an error. On teh web it refers to a setup icon but I do not see that on my interface?

    • Enhanced Sign-in UI and OTP-Based Password Reset for Portals

      As of 5th December, 2024, we are introducing enhanced sign-in interfaces and One-Time Password (OTP) based verification for password reset in an effort to improve security and stream the user journey across all portals. What's changing New Interface for

    • Next Page