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

    • Cliq iOS can't see shared screen

      Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? Regards

    • 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

    • Enhancement in Zoho CRM: Introducing New Return Types for String Fields Based on Character Length

      Dear Customers, We hope you’re well! In Zoho CRM, formula field with string return type is used in various scenarios where text is involved like concatenating customers’ first and last names, trimming characters from texts, performing find and replace

    • GLM 5 not available

      Hello, I am trying to setup a Zia Agent using agents.zoho.com. The settings says that GLM5 is among the list of free zoho hosted models available. However, when I try to setup an agent and pick a model from the list only GLM 4.7 Flash is available. How

    • Zoho Forms - Failed CRM Sync Improvement

      I'd like to suggest an enhancement to the Zoho Forms and Zoho CRM integration. Currently, once a form entry has been submitted, there is no simple way to push that individual entry to CRM again if needed. Before anyone mentions it, I am aware that the

    • Canvases Auto-Skewing/Adding Scroll Bars When They Were Not There Prior

      Is anyone else noticing rendering issues in their canvases today? It seems to be mainly icons which now have scroll bars added which makes them all look off, though some fields seemed to revert to squished length as well. Were the icons replaced with

    • Supervisor Rules --> Custom Function

      Hello, currently I can't add a custom function to a supervise rule. Is there a reason for this? Background: We have BluePrint managed tickets and actually we have a Supervise rule which should set the ticket to "closed" after 168 hours since the last

    • Vault Chrome Extension Asks for Master Password every single time

      Is this supposed to be a feature, or is this a bug?  My assumption is that it's a bug, because every time I click on the Extension, there is a red exclamation mark/notification on the Zoho Vault extension.  Is the idea with the Extension that I have to

    • What's New in Zoho Inventory | April & May 2026

      Hello users, We're excited to roll out the latest Zoho Inventory updates for April and May 2026. These enhancements are designed to make your daily operations smoother and more efficient, from advanced inventory management and flexible pricing to automated

    • Ability to Use Both AND and OR When Creating Rules (Advanced Conditions)

      I'd like to be able to use more complicated logic when setting up rules. E.g. in Zoho Mail, I can choose "Advanced conditions (AND/OR) to create a rule that can be applied to multiple subject lines from the same sender. But in Zoho TeamInbox, I will have

    • "Make online" not clearing previously downloaded files from disk

      I downloaded a large folder via "Make offline" so I could copy it to another location. This worked. When I was done I hoped that "Make online" would restore it to the previous state where those files are not stored locally in TrueSync. This did not work—Finder

    • Permission Denied for Worklogs URL

      We're attempting to pull worklogs data from service desk plus and when using the below URL we are met with a message stating we do not have permission. https://sdpondemand.manageengine.com/api/v3/requests/xxxxxx/worklogs/ We used SDPOnDemand.requests.ALL

    • Anyone in Australia using Zoho Books AND has their account with NAB?

      Hi I have an account with both NAB and Suncorp. Suncorp transaction come in the next day however NAB transactions take 4-5 business days to appear. eg: A deposit made today in my Suncorp will be imported into Zoho tomorrow. A deposit made today to the NAB account will be imported maybe Saturday (Friday overnight). I have contacted both Zoho and NAB but noone seems to know why. I was just wondering if anyone else in Australia uses NAB and has this issue (or doesn't) maybe we could compare notes and

    • Partner with HDFC And Sbi Bank.

      Hdfc and sbi both are very popular bank if zoho books become partner with this banks then many of the zoho books users will benefit premium features of partnered banks.

    • #12 Never Leave a Billable Hour Behind

      A client approves a website redesign project. The estimated effort? 40 hours. The project is going well. A few additional review meetings are scheduled. Several rounds of content changes are requested. A few "quick fixes" get added along the way. The

    • Close task on Completion Date entry

      This discussion is similar to my issue: "backdated-task-completion-date" discussion Scenario: A bunch of tasks have been completed. But, they have not been closed. Time goes by You finally get around to closing those tasks Projects assigns the date the

    • Can I add Conditional merge tags on my Templates?

      Hi I was wondering if I can use Conditional Mail Merge tags inside my Email templates/Quotes etc within the CRM? In spanish and in our business we use gender and academic degree salutations , ie: Dr., Dra., Sr., Srta., so the beginning of an email / letter

    • Records from ATE 29: Knowledge Base, Community, and AI for smarter User Education

      Hi Everyone, "Ask the Experts 29" was an engaging session, where we explored how to utilize the Knowledge Base for customers and internal teams, as well as emphasizing the importance of our Community. This post highlights the questions and use cases discussed,

    • Deleted User Emails

      I need to delete a user as I need to re-use their license, but I'd like to keep all their emails that are attached to various contacts in the CRM. Their emails are hosted externally on an M365 license. Anyone any idea how best to engineer this? TIA

    • Its 2022, can our customers log into CRM on their mobiles? Zoho Response: Maybe Later

      I am a long time Zoho CRM user. I have just started using the client portal feature. On the plus side I have found it very fast and very easy (for someone used to the CRM config) to set up a subset of module views that make a potentially extremely useful

    • Zoho CRM upload files error

      Since today, we have been experiencing issues with uploading photos to opportunities. The message indicates that the storage is full, but as far as I can see, there is still plenty of space available. Could there be an issue or a bug?

    • Kaizen #246 - Incoming Lead Email Intent Detection using Zia Assistant API in Zoho CRM

      Hello all! Welcome back to a fresh Kaizen week. In this post, we will explore how Zia detects positive intent from incoming emails in the Leads module using the Zia Assistant API along with Workflow Rules and Custom Functions in Zoho CRM. Use Case Problem

    • Smart URL Determination

      I would like to see Vault implement some sort of "smart" URL determination. When one starts to add a new username-password combination from a new site, Vault brings in the exact URL of the page from which this is happening. All too often, it looks something

    • Removing To or CC Addresses from Desk Ticket

      I was hoping i could find a way to remove unnecessary email addresses from tickets submitted via email. For example, a customer may email the support address AND others who are in the helpdesk notification group, in either the TO or CC address. This results

    • Tip #76- Exploring Technician Console: Quick Launch- 'Insider Insights'

      Hello Zoho Assist Community! Welcome back to our Technician Console series. Last time we explored Power Options, and this time we are turning the spotlight on a feature that quietly saves you dozens of clicks in every session by getting you exactly where

    • Multi-Book Accounting Support in Zoho Books

      Currently, businesses that operate multiple entities, regions, or divisions need to maintain separate Zoho Books instances or resort to manual consolidation processes. This creates significant operational friction and increases the risk of errors. PROBLEM:

    • Automated Multi-Subsidiary Consolidation Engine in Zoho Books

      For organizations managing multiple subsidiaries across different geographies or business units, consolidation is a quarterly/annual nightmare. Zoho Books lacks native consolidation tools, forcing companies to export data, manipulate it in Excel, and

    • 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

    • Unable to charge GST on shipping/packing & Forwarding charges in INDIA

      Currently, tax rates only apply to items. It does not apply tax to any shipping or packing & forwarding charges that may be on the order as well. However, these charges are taxable under GST in India. Please add the ability to apply tax to these charges.

    • How to add packing & forwarding charge in purchase order & quotation???

      Hello Zoho Team I have just started using Zoho for my company and I wanted to make purchase order. My supplier charges fix 2% as packing & forwarding on Total amount of material and then they charge me tax. For example, Material 1 = 100 Rs Material 2

    • How to book GST paid in zoho books

      hi, i am a new user to Zoho books and not able to book GST paid in books, kindly suggest how i can book it in books. thanks, siddharth

    • [Bug] WebAuthn passkey registration blocked on rpIds with TLDs longer than 6 characters (.accountant, .technology, etc.) — isValidDomain regex too strict

      Hi, Filing on behalf of an enterprise customer where Zoho Vault is deployed across the company. The Chrome extension blocks WebAuthn passkey registration on legitimate sites whose Relying Party ID (rpId) has a TLD longer than 6 letters. This affects every

    • Zoho Payroll: Product Updates - H1, 2026

      Over the last few months, Zoho Payroll has added updates that make payroll easier to process, review, explain, and manage for businesses. The most important improvements focus on payroll flexibility, gratuity tracking, employee self-service, reporting,

    • Pushover Notification Module

      Hello, it would be good if there would be a "Pushover" (https://pushover.net/) module besides the standard SMS module. Pushover is now very well known, especially in IT, and is becoming more and more popular. The biggest advantage are the customizable

    • E-Mail Blacklist via GUI

      Hello, It would be helpful if the GUI included an option to block specific email addresses (both incoming and outgoing). I want a setting where I can completely block certain email addresses. This means that no tickets can be opened from those addresses,

    • How to migrate cpanel mail to new zoho mail?

      Hi, I have a client whose email (for his website domain) is currently on "cpanel mail". Now client wants to move to Zoho Mail. I checked migration docs and its mentioned that I can migrate using IMAP or POP but I am not getting exactly what steps should I follow in order to achieve this. As soon I will add clients domain and setup MX Records and SPF for that, I will lose access to currently setup email (cpanel mail) and without adding domain in zoho mail, I can't setup email for that. Sorry if I

    • SalesIQ Integration with LINE: API Rate Limit Issue and Pre-Chat Flow Concerns

      Hello SalesIQ Developer Team. I have investigated the issue and found that the LINE Rate Limit is being consumed unusually quickly. LINE API free usage limit: 300 messages per month per brand. This limit will be reached within the first few days. 1. LINE

    • How to Backup Zoho to PST?

      I'm looking for a simple way to backup Zoho Mail emails to PST format. I tried the IMAP method with Outlook, but it seems slow and complicated for large mailboxes. I need a solution that can: Export Zoho emails to PST Preserve attachments and folder hierarchy

    • Warehouse -> Locations Transition Causing Errors

      After saying "okay" to the transition from 'warehouses' to 'locations', I've now got shipped Sales Orders that I cannot invoice. How does one proceed?

    • Zoho CRM Community Digest - May 2026 | Part 1

      Hello Everyone! This edition introduces the new centralized Zoho Announcements Hub, a single dashboard designed to let you track and filter live product roll-outs from across the Zoho ecosystem. Alongside the Announcements Hub, this month also features

    • Next Page