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!  

    Access your files securely from anywhere






                    Zoho Campaigns Resources




                          Zoho Developer Community



                              Bootcamp
                              Community
                              Pricing
                              Webinars
                              What's New
                              Integrations
                              Contact Support
                              Contact Sales
                                Zoho Survey Resources
                                  Features
                                  Survey Templates
                                  Integrations
                                  Community
                                  iOS Mobile Surveys
                                  Pricing
                                  Android Mobile Surveys
                                  Insurvey Blogs
                                  Insight Blogs
                                  Tips & Tricks





                                              Latest Feature Updates

                                                • Desk Community Learning Series


                                                • Digest


                                                • Functions


                                                • Meetups


                                                • Kbase


                                                • Resources


                                                • Glossary


                                                • Desk Marketplace


                                                • MVP Corner


                                                • Word of the Day


                                                • Ask the Experts




                                                    Zoho SalesIQ Resources


                                                          Manage your brands on social media
                                                          Access Zoho Social

                                                            Zoho Pagesense Resources


                                                                Zoho TeamInbox Resources

                                                                  Zoho DataPrep Resources


                                                                    Zoho CRM Plus Resources

                                                                      Zoho Books Resources


                                                                        Zoho Subscriptions Resources

                                                                          Zoho Projects Resources


                                                                            Zoho Sprints Resources


                                                                              Qntrl Resources


                                                                                Zoho Creator Resources



                                                                                    Zoho CRM Resources

                                                                                    • CRM Community Learning Series

                                                                                      CRM Community Learning Series


                                                                                    • Kaizen

                                                                                      Kaizen

                                                                                    • Functions

                                                                                      Functions

                                                                                    • Meetups

                                                                                      Meetups

                                                                                    • Kbase

                                                                                      Kbase

                                                                                    • Resources

                                                                                      Resources

                                                                                    • Digest

                                                                                      Digest

                                                                                    • CRM Marketplace

                                                                                      CRM Marketplace

                                                                                    • MVP Corner

                                                                                      MVP Corner







                                                                                        Design. Discuss. Deliver.

                                                                                        Create visually engaging stories with Zoho Show.

                                                                                        Get Started Now


                                                                                          Zoho Show Resources

                                                                                            Zoho Writer

                                                                                            Get Started. Write Away!

                                                                                            Writer is a powerful online word processor, designed for collaborative work.

                                                                                              Zoho CRM コンテンツ






                                                                                                Nederlandse Hulpbronnen


                                                                                                    ご検討中の方




                                                                                                          • Recent Topics

                                                                                                          • SEO on blogs

                                                                                                            Hello, google is not able to find my blogs. Can you advice me if I need to change some settings or anything else to make it retrievable via SEO many thanks, hans

                                                                                                          • Duplicated Notebooks

                                                                                                            Out of the blue, almost all of my notebooks got duplicated and the different copies contain different information. Some seem like older copies than the others. I use the linux desktop app and sometimes the Android app. I assume that the sync failed at some point and was unable to merge the two versions together. But I'm afraid to add anything else to my notebook because if it can't properly sync 5 notebooks with only a handful of notes each, what will happen when I have hundreds of notes and I lose

                                                                                                          • Samsung Keyboard Issues with Notebook

                                                                                                            Dear Users, We're sorry to inform you that some of our users are experiencing certain issues like scrolling, delay/lag, cursor placement especially within the text notes. This occurs mainly due to Samsung Keyboard compatibility with Android 13 and some

                                                                                                          • Mind mapping in Zoho Projects

                                                                                                            Good morning,   I would like to congratulate the Zoho team for building such an inovative and responsive application that fits in the daily challenges of so many work groups. I would like suggest you another functionality that helps a lot in project planning and development: mind mapping. Mind mapping would be of great help for brianstorming, knowledge management and other needs in online collaboration.   Thanks and wish you all the best! George Maha Empresa Júnior Multidisciplinar do Instituto de

                                                                                                          • Trying to show the actual Terms & Conditions on PDF

                                                                                                            Hi, On Zoho forms I am trying to have the actual terms and conditions that the user needs to accept also show on the pdf that they receive after. Right now it only says "Agreed". Please help.

                                                                                                          • Retainer invoice in Zoho Finance modlue

                                                                                                            Hello, Is there a way of creating retainer invoices in the Zoho Finance module? If not can I request this is considered for future updates please.

                                                                                                          • Introducing the revamped What's New page

                                                                                                            Hello everyone! We're happy to announce that Zoho Campaigns' What's New page has undergone a complete revamp. We've bid the old page adieu after a long time and have introduced a new, sleeker-looking page. Without further ado, let's dive into the main

                                                                                                          • What's New in Zoho Inventory | August – October 2025

                                                                                                            Hello customers, The last quarter has been incredibly productive! We've released a powerful slate of new features and enhancements in Zoho Inventory designed to give you better control, greater efficiency, and expanded functionality across your inventory

                                                                                                          • Documents don't sync properly

                                                                                                            Hello, My team recently moved to Zoho workDrive, some of my team, work remotely so we believed Zoho would be the best way to share and edit files as well as access files withing the team. However we are experiencing sync issues, when a file is uploaded in the file explorer and shows sync complete, same file can be seen on the Zoho web app but other team members can't see the said file because it is not syncing properly. i figured out that if i were to go to preferences in settings and resync the

                                                                                                          • We are looking for an experienced Zoho Developer

                                                                                                            Hi Everyone! We’re on the lookout for a skilled Zoho Developer with hands-on experience in the Zoho Developer Platform (The Vertical CRM Platform) and if you don't know what that is, then you are not the person we are looking for. You would also need

                                                                                                          • Initiate approval workflow after "on edit --> on success"

                                                                                                            Dear Community,  currently I am working on a initiative tracker which should handle approval workflows based on different initiative status. As far as I understand, an approval workflow can be triggered (only?) when data is entered for the input form to the database.  Example: A new initiative is created and submitted. --> Approval Workflow triggered Here comes my question: Is it also possible to trigger an approval workflow if the form was "simply" updated? (on edit --> on success) Imagine the initiative

                                                                                                          • Zoho Social/Marketing Plus - Addition to "Monitor" function

                                                                                                            It would be very helpful if the Monitor function would allow us to add a column to monitor hashtags in addition to pages and mentions. This is a common and very valuable function in other social listening tools.

                                                                                                          • Tax Deductible Donations to a Charity Organisation

                                                                                                            For Australia, what's the best/proper method for entering an expense that is a tax deductible donation to a charitable organisation. And thus is appears correctly in Accounts and BAS as a GST payable deduction?

                                                                                                          • Simultaneous use of WhatsApp Account in SalesIQ and ZohoDesk

                                                                                                            Hi, We have only one number registered in Meta, it's possible use same account for two apps? All times here we try is stopping in SalesIQ. Regards,

                                                                                                          • External lookup fields to synchronise with Analytics

                                                                                                            Hello. I suggest adding external lookup custom fields to the Zoho Analytics integration settings. Currently, these types of fields are not available for synchronisation, so they cannot be used to generate reports with related tables in Analytics. Thank

                                                                                                          • We should have an option to Toggle Off KB Article Links in AI Answer Bot Replies

                                                                                                            Hi everyone, I'm creating this topic to share a feature idea that I think would improve the customer experience when using the AI Answer Bot for self-service. The Current Behavior (The Problem) Currently, when the AI Answer Bot generates a summary or

                                                                                                          • Boot Loop After Removing Service from Client via Admin

                                                                                                            We have multiple laptops experiencing a boot loop / unable to login after the Zoho Remote service was removed from their machine remotely via the desktop client. The Windows sign-in screen is not available, and users are unable to login. This seems like

                                                                                                          • Request Backend Correction — Domains Mapped to Same Help Center (Multi-Brand Setup Failure)

                                                                                                            Hello Zoho Desk Support Team, I need assistance correcting a domain-to-brand mapping issue in our Zoho Desk instance (The Blue Ribbon Project). Both of our verified domains currently point to the same Help Center instead of separate brand portals. Current

                                                                                                          • is there any option to enable the participants interact - can write on the screen, while the screen is shared by the host?

                                                                                                            this is most expected features - for teaching children. is there any option to enable the participants interact - can write on the screen, while the screen is shared by the host?

                                                                                                          • How to disable the Login button in Desk Helpcenter

                                                                                                            Hey there, I'm testing out whether the help center within Zoho Desk could replace our existing Customer FAQ. I tried to customize the themes for the public help center frontend, but stumbled across the login button in the navigation bar. Is there any

                                                                                                          • Very long loading times | bad performance [ZOHO DC: EU]

                                                                                                            Hello there, we have recently noticed that the loading times have become extremely long when retrieving tickets and ticket details. For example, I open any ticket and get the following view. The subject and standard information (ticket owner, status etc.)

                                                                                                          • Client Portal ZOHO ONE

                                                                                                            Dear Zoho one is fantastic option for companies but it seems to me that it is still an aggregation of aps let me explain I have zoho books with client portal so client access their invoice then I have zoho project with client portal so they can access their project but not their invoice without another URL another LOGIN Are you planning in creating a beautiful UI portal for client so we can control access to client in one location to multiple aps at least unify project and invoice aps that would

                                                                                                          • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

                                                                                                            Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

                                                                                                          • Subforms in stateless forms

                                                                                                            I think the title says it all. We need to be able to add subforms to stateless forms. Currently the only workaround is to create a Form and delete each record upon submission of the form. I need to build an interface to update our inventory. Basically

                                                                                                          • Standard Payment Term is not pulled from account to quotation

                                                                                                            Hey Team There seems to be something off. I do have "Net 30" as my default payment term in Zoho Books for my customers. If, from the customer overview or quote section, I create a new Quotation, the payment terms field stays blank and doesn't get the

                                                                                                          • Zoho Analytics Export API

                                                                                                            Hi Team, I’m working on some integration tasks and wanted to confirm if it’s possible to retrieve a Zoho Analytics table as JSON data using a Deluge script. I’ve already stored my custom data from multiple sources and combined it into a single source.

                                                                                                          • Best way to display complex Bookings Consultation Descriptions on Zoho Site?

                                                                                                            I am a new user so apologies if this has been asked before. I couldn't find any answers in the forum. We offer 18 complex Consultations to our subscribers. Our current platform lets me put detail on these Consultations thoroughly (200-300 words) during

                                                                                                          • Gmail is ramping up its email sender policy as of November 2025

                                                                                                            Hello marketers, As you may be aware, Gmail introduced a guideline for bulk senders starting February 2024. If not, here's a quick refresher straight from Google: After this policy was announced first in 2023 and soft-implemented in February 2024, we

                                                                                                          • Modifying iframe data of Zoho booking iframe

                                                                                                            Hello, I have integrated a Zoho Bookings embedded iframe into my website. Currently, I am pre-filling the booking form with default values as part of our process flow. However, I want to ensure that if an input field is already populated with a default

                                                                                                          • Zoho CRM Workflow and Function Backup Options

                                                                                                            Hi everyone! I have been able to make several backups of my CRM data and noticed that the Workflows and Functions are not included in these backups. To my knowledge, there is no backup feature for workflows and functions, which is problematic in of itself.

                                                                                                          • Enhance Sign CRM integration

                                                                                                            Hello all, I'm working on a custom Deluge script to enhance the integration between Zoho CRM and Sign by using a writer merge template for additional flexibility. I want to replicate the post-sign document integration that exists between CRM and Sign

                                                                                                          • YouTube Live streaming? how to? Zoom has this feature, built-in. Can't find it on zoho meetings.

                                                                                                            YouTube Live streaming? how to? Zoom has this feature, built-in. Can't find it on zoho meetings.

                                                                                                          • Is or will be possible to associate meeting transcription and summary, made by Zia, to meeting/contact/account record in CRM?

                                                                                                            Would be useful to keep context and track jobs, better if it will be auto

                                                                                                          • Desk Field Not Showing in Analytics

                                                                                                            Hi there, I recently added a field to our Zoho Desk Ticket Information. I went and added the data retrospectively to the tickets. It is also marked as required, so all new tickets cannot be closed off without it being filled in. When I try to run a report

                                                                                                          • Export data using advanced export options and customizable settings

                                                                                                            Hello everyone, The user interface for exporting data has been revamped with updates to make data exports more flexible and efficient for users. These updates not only enhance usability but also bring advanced capabilities to help users extract precise

                                                                                                          • Moving data from one pipeline to another

                                                                                                            Hey all, I've got some complex pipelines to build and I'd like to seperate them into seperate pipelines rather than have one mammoth one. If I create 2 pipelines, is there any easy way to use the output of Pipeline1 to be the input into Pipeline2? Or

                                                                                                          • How to export/find all deluge code.

                                                                                                            Hi, I have a large app wich contains several forms, reports, html views, I need to find thow my application if any contains specific word, I could find it manually by editing app and see on every section(field code, on succes, on load, etc) but I would like to do it faster. Is there a way to at least export it to a file the whole deluge code on my application?

                                                                                                          • Have Some Bugs in Zoho CRM Ask Zia Assistant

                                                                                                            Hi Support Team, I have found some bugs in Zoho CRM Ask Zia Feature Please Check below screenshot, insight option is showing twice i think its in early access that's why its have some bugs .

                                                                                                          • COD with Partial payment

                                                                                                            Two reasons why we need COD with partial payment option. 1) Since we deal heavy weight products our shipping costs are too high. If shipment is rejected by customer we incur huge loss. 2) Some competitors place fake orders with different names and return

                                                                                                          • Slicers are now available in Zoho Sheet—filter your data interactively

                                                                                                            At Zoho Sheet, we diligently track user requests and feedback. In line with this, based on extensive user requests, we've integrated Slicers to pivot tables and are delighted to announce its release. Slicers are interactive visual filters that have add,

                                                                                                          • Next Page