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 #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

    • 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 achieved

      • Recent Topics

      • 10GB Email Storage Limits in Zoho CRM

        We’ve had Zoho One for almost 5 years and have always synced our emails from Gmail via IMAP… As of late, we’ve run into issues with our emails not syncing, due to being over the 10GB storage cap… What’s very odd is that we haven’t changed a thing? I know

      • Performance is degrading

        We have used Mail and Cliq for about three years now. I used to use both on the browser. Both have, over the past 6 months, had a severe degradation in performance. I switched to desktop email, which appeared to improve things somewhat, although initial

      • How to set page defaults in zoho writer?

        hi, everytime i open the zoho writer i have to change the default page settings to - A4 from letter, margins to narrow and header and footer to 0. I cannot set this as default as that option is grayed out! so I am unable to click it. I saved the document

      • Unable to Send Different Email Templates for Different Documents in Zoho Sign

        Hello Zoho Community, I am facing a limitation with Zoho Sign regarding email notifications sent to customers when a document is sent for signing. Currently, whenever I send any template/document for signing, the email notification that goes to the customer

      • Enable History Tracking for Picklist Values Not Available

        When I create a custom picklist field in Deals, the "Enable History Tracking for Picklist Values" option is not available in the Edit Properties area of the picklist. When I create a picklist in any other Module, that option is available. Is there a specific reason why this isn't available for fields in the Deals Module?

      • Vault crashes on Android Devices

        Vault is continuously closing after entering the master password on my Android device. After several attempts I get a system message that says there is a bug in the app. I've uninstalled and reinstalled the app, and cleared the app cache, but nothing

      • ¿Cómo puedo configurar las contraseñas creadas bajo una directiva para que nunca caduquen y no aparezcan como caducadas en los informes?

        ¿Cómo puedo configurar las contraseñas creadas bajo una directiva para que nunca caduquen y no aparezcan como caducadas en los informes? La razón por la cual contraseña estas no deben caducar es porque su actualización depende de mi cliente y no de mí.

      • Camera access

        My picture doesn't appear in a group discussion. (The audio is fine.) The guide says "Click the lock icon on address bar," but I can't find it. Advise, please

      • Are static links available

        I'm still using Zoho Meeting in trial mode. My previous webinar software provided a static link, and I made the mistaken assumption that I could send out my link and start a meeting later. Mass confusion, but my fault. With a paid version do you get a

      • Why is Zoho Meeting quality so poor?

        I've just moved from Office 365 to Zoho Workplace and have been generally really positive about the new platform -- nicely integrated, nice GUI, good and easy-to-understand control and customisation, and at a reasonable price. However, what is going on

      • How to print a label from zoho creator app?

        Hello, I would like to print a label from zoho creator app record similar to attached one. Size 74mm x 102mm. I tried record template. It leaves plenty of space around the content and also I couldn't set the height of the page. So it is not printing properly. Could someone please direct me to right direction for this requirement?

      • Integration between "Zoho Sprints Stories" and "Zoho Projects Tasks/Subtasks"

        We have two separate teams in our organization using Zoho for project management: The Development team uses Zoho Sprints and follows Agile/Scrum methodology. The Infrastructure team uses Zoho Projects for traditional task-based project management. In

      • Where can we specify custom CSS in Zoho Forms custom theme ?

        I'm using a form with a dark theme. The OTP popup window is unreadable, because for some reason, the OTP popup background fixes color to white, but still takes the font color specified in the custom theme. This ends up as white on white for me, rendering

      • Team Gamification

        Would love to motivate, engage and encourage our team with our social media posts. Would like to include Gamification features of Social Media in Zoho Social or Marketing Automation. And also bring in Social Advocacy tools/tracking/management to these,

      • Sync Data from MA to CRM

        Currently, it's a one-way sync of data from the CRM to MA. I believe we should have the ability to select fields to sync from MA to the CRM. The lead score is a perfect example of this. In an ideal world we would be able to impact the lead score of a

      • Update CRM record action

        Currently, MA only offers a "Push Data" action to push data to a CRM module. This action is built to cover the need to both create a new record and update an existing record. Because it has been implemented this way all required fields on the CRM module

      • Pro Lite Upgrade - Quick Access Tray

        Hello, I was going to upgrade to Pro Lite but the Quick Access Tray feature isn't available for Windows. Of the four features not available for Windows, the QAT is what I'm most interested in. Are there plans to add this feature for Windows anytime soon?

      • Boost your CRM communication with new font types, sizes, and default reply-to options while composing emails

        Hello Everyone, We’re excited to introduce a series of impactful enhancements to the email composer settings in Zoho CRM. These updates enable you to personalize and optimize your customer interactions with greater efficiency. So what's new? Add custom

      • Feature Enhancement Request – Text Formatting Options in Item Description (Zoho Books/Quotes Module)

        Dear Zoho Development Team, Greetings from Radiant360 Integrated Technical Services LLC. We would like to bring to your attention a functional limitation we've encountered within the Item Table / Quote Description section of Zoho Books (and Zoho CRM Quotes).

      • 3 year sick leave cycle

        How do you set up a sick leave cycle for South Africa? In SA the sick works like this for the first 6 months you get 0.83 paid sick days a month, then after 6 months you sick leave balance is reset to 30 days that can be used over a 36 month cycle.  This

      • WorkDrive and CRM not in sync

        1/ There is a CRM file upload field with WorkDrive file set as the source: 2/ Then the file is renamed in WorkDrive (outside CRM): 3/ The File in CRM is not synced after the change in WorkDrive; the file name (reference) in CRM record is not updated (here

      • Is Zoho Communityspaces now part of Zoho One?

        Is Zoho Communityspaces now part of Zoho One?

      • Bigin’s 2025 Evolution: Highlights from 2025 and What’s Ahead in 2026

        Dear Biginners, Wishing you a very happy New Year! As we stand at the cusp of endless possibilities in 2026, we would like to take a moment to reflect on what we achieved together in 2025. Your continued support, thoughtful feedback, and kind words of

      • Send Supervisor Rule Emails Within Ticket Context in Zoho Desk

        Dear Zoho Desk Team, I hope this message finds you well. Currently, emails sent via Supervisor Rules in Zoho Desk are sent outside of the ticket context. As a result, if a client replies to such emails, their response creates a new ticket instead of appending

      • Zoho Desk - Change Time Zone for all users and set default for new user

        Hi,   Is there a way to set a default time zone so that when user creates an account via the Zoho Desk invitation, they don't need to select the time zone via the hundreds of choice?   And, for already created users, can we edit the incorrect time zone selected by the user at the account creation ?   Thanks ! Fred

      • Allow Manual Popup Canvas Size Control

        Hello Zoho PageSense Team, We hope you're doing well. We would like to request an enhancement to the PageSense popup editor regarding popup sizing. Current Limitation: Currently, the size (width and height) of a popup is strictly controlled by the selected

      • Why does Zoho’s diff viewer highlight parts of unchanged lines?

        Hi everyone, I’ve noticed something odd in the Zoho editor’s diff view. When I delete a single line, the diff doesn’t just mark that line as removed. Instead, it highlights parts of the next line as if they changed, even though they are identical. Example:

      • Automating Employee Birthday Notifications in Zoho Cliq

        Have you ever missed a birthday and felt like the office Grinch? Fear not, the Cliq Developer Platform has got your back! With Zoho Cliq's Schedulers, you can be the office party-cipant who never forgets a single cake, balloon, or awkward rendition of

      • Add deluge function to shorten URLs

        Zoho Social contains a nice feature to shorten URLs using zurl.co. It would be really helpful to have similar functionality in a Deluge call please, either as an inbuilt function or a standard integration. My Creator app sends an email with a personalised

      • form data load issue when saving as duplicate record is made

        Hello. I have a form with a lookup when a value is selected the data from the corresponding record is filled into all of the fields in the form. But the form is loaded in such a state that if any value is changed it will take all of the values pre loaded

      • Invoice template, how to change the text under "Notes" and "Terms and Conditions"

        In "Invoice templates", there are two text/info sections at the bottom:"Notes" and "Terms and Conditions". It is possible to change the names of these two headings, but how is it possible to change/alter the text under it. As a standard it says "Thank you for your business" under Notes - I need to change it into something different- How? Thank you.

      • Recurring Tasks and Reminders in Projects

        Recurring tasks are tasks that are created once, and then recreated automatically after a designated time period. For example, the invoice for your billable tasks is due every week. You can set that task to recreate itself every week. Also, the future

      • Unable to remove the “Automatically Assigned” territory from existing records

        Hello Zoho Community Team, We are currently using Territory Management in Zoho CRM and have encountered an issue with automatically assigned territories on Account records. Once any account is created the territory is assigned automatically, the Automatically

      • Improved Functionality PO Bill SO Invoice

        Hello, I need to enter over 100 items, it's frustrating to scroll a few item rows and wait for more to load, then scroll again. It would be nice to have buttons that scroll to the top or bottom with one click. Furthermore, these items I'm adding are VAT

      • Wishes for 2026

        Hello, and a happy new year 2026! Let's hope it's better for everyone. I'd like to share some thoughts on Zoho One and what could be useful in the short, medium, and long term. Some things are already there, but not applied to Zoho One. Others seem like

      • How to Integrate Zoho Books with Xero (No Native Connection Available)

        Hi everyone, I’m currently facing an issue with integrating Zoho Books invoices with Xero, as I’ve noticed Zoho does not provide a native integration with Xero at this time. I would like to ask: What are the common or recommended solutions for syncing

      • ZohoSalesIQ.Chat cannot send messages

        Chat cannot send messages. Our app implements the customer service chat window functionality by integrating the Mobilisten SDK. Recently, we encountered an issue: after successful SDK initialization and visitor registration, when the `startWithQuestion`

      • Markup instead of discount??

        Is it possible to have the discount field on an invoice or estimate be a markup instead? It's the very same functionality that I am looking for - to be able to markup an individual item by either a $ or a % and have that cost added (instead of subtracted) to the item cost.  Currently, I use the tax feature to accomplish this, but it's very awkward to have "Markup 15%" listed after the subtotal. Plus, if I want to markup items at different rates, I end up with several "markup" lines in the totals

      • Plan switch

        I thought I pressed the Free button, but after they set up the account, I see that I am on a Premium trial. Is this usual? How do I get onto the Free version?

      • 'Tax registration date'?

        The second question in setting up is 'Tax registration date'. My first question: which tax? My second question: why do you need the registration date?

      • Next Page