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

    Nederlandse Hulpbronnen


      • Recent Topics

      • Zoho Books | Product updates | April 2026

        Hello users, Welcome to our April 2026 product updates roundup! Highlights include profit margin for sales transactions, insights in reports, recording deposits from undeposited funds in banking, and faster production workflows with improved assembly
      • Sorter View No Longer Works Properly

        Today I realized that sorter view no longer works properly. I believe just yesterday, I was able to drag a slide or a group of slides and move it/them to the place I want to move it/them to. While I was dragging, I got a visual feedback of where I could
      • Ignroe_filtrers and drill through

        I have two charts, where one is connected to the other using drill-through. The issue is with the second chart (the drill-through target). It contains an aggregation formula that uses the ignore_filters function. Under normal conditions, the formula works
      • zoho creator panel add formula

        Hello. I'm using zoho panels which works good for me but i need to add an extra calculation the predefined sum function provided by zoho. not sure if this is possible? The code zoho is generating for the sum is as follows; <text margin='0px' padding='0px'
      • Kaizen #238: Fetching Employee Data from Microsoft SQL Server into Zoho CRM Using Queries

        Hello everyone! Welcome back to the Kaizen series! Many organizations manage workforce data such as employee designations, contact details, salary bands, and joining dates in an HRMS backed by Microsoft SQL Server, while their sales teams work in Zoho
      • Du prompt à la production : comprendre le fonctionnement du MCP

        Le Model Context Protocol (MCP) est un protocole ouvert qui standardise la manière dont les applications se connectent aux modèles de langage (LLM). En termes simples, le MCP est le « USB-C des agents IA » : une interface universelle qui relie l’intelligence
      • Add 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,
      • filter on sheets mobile (iOS, iPadOS) does not work

        re-posting this as a question because reporting as a problem netted zero responses... I have this issue on every spreadsheet, whether imported or created natively in Zoho Sheets. I can use on desktop without issue: but on iOS the filter dropdowns are
      • Inactive License for free account.

        I recently upgraded my Cliq subscription not my team (on the free version), are unable to login to their accounts. The error message received is Inactive License Looks like you have not been covered under the current free plan of users. Please contact
      • Zoho Books recurring invoicing link to a Zoho CRM Deal?

        With the Zoho CRM Finance Integration setup, normally when creating an invoice via Zoho CRM Finance Integration on a Deal, it creates the invoice in Zoho Books with the CRM Deal *Potential link for that invoice. Alternatively, if you create the invoice
      • Data Import

        Hello Latha, Is there any option to enable data import option in Equipment module? Best regards, Chethiya.
      • No background for video recordings, no playback speed, can't even playback longer recordings - have to download…

        Hi. We utilize heavily video messages on Slack, but wanted to migrate to Cliq with Zoho One, however very basic yet very frequently used feature is missing: backgrounds for video recordings and playback speed. We were not happy with Slack's 5 minute limits
      • Introducing PDF conversion in Deluge

        Hello everyone, We're pleased to introduce built-in PDF conversion capabilities in Deluge with the launch of the convertToPDF task. As PDF is one of the most widely used formats in professional environments, this task helps streamline document generation
      • Changing naming convention for Estimates

        Hi there, How do I customise the naming of the filenames for estimates when sending them? Currently they are named literally just ES11.PDF or whatever the number of the estimate is. There is no Company name, description of the work, customer name, date
      • Email templates for estimates

        Hi there, When I send an estimate the option to choose a template appears. However it is common to need to make some minor personalizations and modifications to the email before sending ie. adding a second person to the greeting, or adding a small note
      • How to transfer uploaded files from Zoho Survey to external systems?

        Hi everyone, I'm currently integrating Zoho Survey with an external system and have run into a limitation I haven't been able to solve yet. I'm using webhooks to send submitted survey data (JSON) to my external API, which works perfectly for all standard
      • On Duty Requests - Zoho People Data

        Hello Team, We are currently using the On Duty Form to record Work From Home (WFH) requests in our organization. However, we are facing an issue where pending On Duty requests are not appearing in the Attendance Module. For example, if I submit On Duty
      • Editing Estimates

        Hi team, How do I delete line items in an estimate when editing it? I can't see any option to do this - no X, no trashcan, no drop down... And how do I revert to the original estimate after cloning? I cloned to see if the option to edit were disabled
      • Reading emails sent from Zoho

        Hi there, How do I view an email sent from Zoho, for example an email which contains an estimate? I can see there is a tab in the screen for that estimate which is labelled 'Emails' and I can see a summary of the email sent listed there, but I cannot
      • Feature Request: Mass update selected Contacts to Accounts

        I can't believe this isn't an ability already. It's a quick fix that would save hours of manual entry time. This looks like it had been requested 3-4 years ago with no answers from staff! Please add all contact fields into the "mass update" menu. You
      • Support Bots and Automations in External Channels

        Hello Zoho Cliq Team, How are you? We actively use Zoho Cliq for collaboration, including with our external developers. For this purpose, external channels are a key tool since they work seamlessly within the same interface as all of our other channels
      • How To Implement an Auto-Check-out Feature for Attendance?

        If an employee forgets to check out, the system should automatically check out the employee at 6:30 PM
      • Automate the file import step

        Hello everyone, I have a Sales - 'Account' category, and currently import the file to update it as follows: Import Accounts - From File - Update existing Accounts only - select and match the field the CRM. Since we have been using Microsoft 365 SharePoint.
      • Set Default Status of Assembly to "Assembled" When Entered in UI

        I've just discovered the new "confirmed" status of Assemblies within Inventory. While I understand the intent of this (allowing for manufacturing planning and raw material stock allocation), it was initially confusing to me when manually entering some
      • Sender Email Configuration Error.

        Hello Team, Hope you are all doing well. We are in the process of creating the Zoho FSM environment in the UAE. When we try to add the sender email address “techsupportuae@stryker.com”, we receive the error message: “Error occurred while sending mail
      • Share saved filters between others

        Hi, I am in charge to setup all zoho system in our company. I am preparing saved filters for everybody, but the only one can see its me. How can others see it? Thanks
      • Webinar Alert: Learn how to decode your landing page performance with analytics

        Every click, scroll, and drop-off tells a story. Are you listening? Join our Landing Page Analytics webinar to understand how data can reveal what’s working and what’s costing you conversions. In this session, you'll discover The most important metrics
      • Campaign Status Field in CRM

        I'm wanting to create a custom view in CRM that shows all those who have recently hard bounced in past campaigns so we can clean up the database. An old Zoho article said it was possible, but I don't see the option to push campaign status field to CRM,
      • Zoho Forms for Vertical Studio Subscriber Organizations

        We’re excited to introduce the Zoho Forms integration with Vertical Studio. This allows you to capture data using forms and send it directly to your Vertical Studio modules. With this integration, form submissions can be used to create or update records,
      • Zoho Flow not handling Boolean properly

        Hi, I have a checkbox in one system that I'm trying to sync with a checkbox in Zoho CRM. The value from the source system comes in as blank (unticked) or 1 (ticked). I've written the following custom function to convert the output to either boolean false
      • Printing invoice from creator using writer

        Hello. I have created my invoices using Zoho Writer and i'm sending data to them from Zoho Creator by selecting a row in a report and then clicking a button which has workflow connected to it to send the date to the invoice in writer. This is working
      • How to Initiate WhatsApp Message on SalesIQ?

        I've just activated a Business WhatsApp phone number through SalesIQ because of its touted omnichannel chat approach. Sounds exciting. I understand that when a customer sends me a WA message, I can reply to it on SalesIQ and keep the chat going, perfect.
      • i want to delete organization or tranfer ownership

        I accidentally created a Zoho organisation and now I cannot accept an invite from another organisation. I am the Super Admin and cannot leave. Please either delete my organisation or transfer ownership so I can leave.
      • Bulk upload images and specifications to products

        Hi, Many users have asked this over the years and I am also asking the same. Is there any way in which we can bulk upload product (variant) images and product specifications. The current way to upload/select image for every variant is too cumbersome.
      • Zoho FSM API Delete Record

        Hi FSM Team, It would be great if you could delete a record via API. Thank you,
      • Marketing Tip #26: Optimize product images for SEO

        Product images can do more than make your store look good. They can also help customers discover your products through search. Since search engines can’t "see" images, they rely on text signals to understand what an image is about. Two small actions make
      • Allow rejected records (Approval process) to re-enter Blueprints

        Cannot seem to get my head around the key differences between the Blueprints and the Approval Process. For me it seems like different flavours of more or less the same thing - especially now that we have the option of Record Locking. Have a quote to sales
      • Every time an event is updated, all participants receive an update email. How can I deactivate this?

        Every time an event is updated in Zoho CRM (e.g. change description, link to Lead) every participant of this meeting gets an update email. Another customer noticed this problem years ago in the Japanese community: https://help.zoho.com/portal/ja/community/topic/any-time-an-event-is-updated-on-zohocrm-calendar-it-sends-multiple-invites-to-the-participants-how-do-i-stop-that-from-happening
      • Streamlining E-commerce Photography with AI Background Tools

        Hey Zoho Community, I’ve been messing around with ways to make product images less of a headache for fashion brands on Zoho Commerce. You know how boring generic backdrops can get, and how much time traditional photoshoots eat up, right? I tried out this
      • Add @Mention Notifications in Zoho Cliq for Zoho Project Mentions

        Hello Zoho Projects Team, We hope you are doing well. We would like to submit a feature request regarding "Projects Bot" Cliq bot notifications for @mentions inside Zoho Projects comments (Tasks and Issues). Current Behavior: At the moment, when someone
      • Next Page