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

        • Is it posssible to add Asap Widget on Wordpress?

          I have tried to add the ASAP widget so users could iniciate chats and see the KB information but nothings seems to work. I have tried to add the script using a php snippet that adds the to the footers and also tried one for the header in the functio

        • Require ticket resolution

          Hi Zoho team, Is there a way to require resolution even if an agent did not use a blueprint? for example, our blueprint has a "resolve" transition but what if agent revoked blueprint and manually set the status of ticket to closed? Is there a way where

        • Tables from ZohoSheets remove images when updated from source

          I have a few tables from a ZohoSheet in a ZohoWriter document that will remove the images in the cells when I refresh from the source. The source still has the images in the table when I go to refresh. After updating from the source, as you can see the

        • API Pagination Error: 'from' Parameter Limit

          Hello, I am encountering an error while paging through the Zoho Desk API results: Status code: 422 - {"errorCode":"UNPROCESSABLE_ENTITY","message":"The value passed for field 'from' exceeds the range of '0-4999'."} Is 5000 the maximum number of records

        • How to go to the next open ticket in the queue when agents closes ticket

          Zoho Desk When agent closes a ticket - eg when they choose 'Send and Close" - where is the setting that automatically redirects them to the next open ticket in the queue?

        • Custom templates for calendar report

          What about being able to design custom templates for the calendar report, as well as for other types of reports? I think more users are waiting for this.

        • Maximum tags possible in Contacts Records

          I read in some documentation that Zoho allows a total of 200 tags across all records. Is this correct? So is it not possible to have one tag per record for 500 records?

        • Any way to "Pay with Check" or "Refund with Check" for Credit Notes?

          When we have a Bill in Zoho Books, we can select the "Pay with Check" option which then allows us to print/cut the check directly out of Zoho Books. When we created a Credit Note and want to refund the customer, is there any way to Refund with Check,

        • CRM Mobile reports

          When our engineers finish a job they like to email the customer a job report. This is best done todate as an email template but we can find no way to include an image field from that module. Is there any other options?

        • ¿How to integrate Zoho Inventory to Zoho SalesIQ?

          Is it possible to integrate Zoho Inventory with SalesIQ? I want to integrate it because I have a bot in Zoobot that uses a ChatGPT assistant. I need it to check the inventory of our items so it can determine whether or not our items are available.

        • When Zoho Tables Beta will be open to EU data center

          Hello all, We in EU are looking at you all using and testing and are getting jealous :) When we will be able to get into the beta also? We don't mind testing and playing with beta software. Thank you!

        • Start Form on a different page (i.e., hide form pages)?

          I have a Zoho form that uses the `Field Alias - Prefill URL` feature. My goal is to have a pre-filled field that directs the user to a specific starting page in the form. For example: The URL will have a field alias that will auto-populate a field with

        • How can we disable "My Requests"?

          We are not using this functionality in our system at all and our users get confused.

        • PayPal payment received recording problem

          Hi, A little while back one of our customers used the PayPal payment option to pay an invoice For some reason though the payment is showing up twice within the Payments section of the invoice! Instead of setting the invoice value to ZERO, it now shows a negative value Anyone else face this problem? I've checked PayPal and there is only 1 payment in reality... A bug? Actonia ps: for anyone from Zoho Customer Service or tech team,  its Invoice 785 in our account

        • server response: 451.4.7.1

          Good day.  Some email clients of our domain receive an error about sending and receiving letters. while for the rest everything works fine. access to the mail made by pop protocol. Bless the mistakes: "server response: 451.4.7.1 System error". 

        • string(87) "{"code":"INVALID_TOKEN","details":{},"message":"invalid oauth token","status":"error"} " grtting this error

          Using access token i am trying to add sales orders through api but it is throwing errors like the above i have mentioned. Please help me for that

        • How to mute chat notification sound by default in Zoho SalesIQ?

          We’ve recently embedded the Zoho SalesIQ chatbot on our website, and we’ve noticed that notification sounds sometimes play even when the visitor hasn’t interacted with the chat widget yet. We’re trying to understand two things: Why do these sounds occur

        • How to Hide Article Links in SalesIQ Answer Bot Responses

          I have published an article in SalesIQ, and the Answer Bot is fetching the data and responding correctly. However, it is also displaying the article link, which I don’t want. How can I remove the link so that only the message is shown?

        • Currency limitation when integrating Zoho CRM & Zoho Books

          Brief Video of Problem: https://www.loom.com/share/d61d1d07d0904e149d80c1901a22418e. Background ·       Our business is based in Australia and we have to have Zoho Books in AUD to comply with tax and reporting regulations in Australia. ·       We sell

        • Add RECURRING option when adding email to calendar events

          When you add an email to a calendar event, there is no option to make that new calendar event into a recurring event.  It is counterproductive to make an event from your email to then have to go to your calendar, find the event, and make it recurring. 

        • LINE Auto Message Connect to Zoho

          When I integrated LINE into the CRM, I was prompted to disable “Chat,” “Auto Response,” and “Greeting Messages,” and to enable the webhook. However, since I have already set up some auto-reply features in LINE, including Rich Messages and greeting automation,

        • Option to block bookings from specific email address or ip adresss in zoho booking

          Sometime few of our client keep booking irrelevant booking service just to resolve their queries and they keep booking it again and again whenever they have queries. Currently its disturbing our current communication process and hierarchy which we have

        • Threaded conversations for emails sent via automation

          Hi Guys, I hope you are doing well. Don't you guys think we should have an option in a workflow to notify users either as a new email or the previous email thread. For example, if you have one deal in the process and there are 10 different stages during

        • Create folder is fetch fails

          coming from zapier... zapier has a google drive task that searches for a specific folder in google drive, and if it fails to find the folder it will create a folder based on the search criteria, and contine along the singluar path of the flow. Trying

        • Meetups de Usuarios de Zoho - Noviembre 2025

          ¡Hola, Comunidad! Durante el mes de noviembre celebraremos los Meetups de usuarios de Zoho, encuentros presenciales pensados para quienes queráis mejorar vuestras estrategias de lead nurturing y aprender a sacar el máximo partido a herramientas como Zoho

        • Introducing 8 New Connectors in Zoho DataPrep!

          We’ve just made data management even easier - Zoho DataPrep now supports 8 new external connectors to help you build more robust, scalable ETL pipelines. Why it matters: ✅ Broader data access ✅ More automation, less manual work ✅ Smarter pipelines, better

        • First day of trying FSM in the field.

          What we found. 1. with out a network connection we were unable to start a service call? 2. if you go to an appointment and then want to add an asset it does not seem possible. 3. disappointed not to be able to actually take a payment from within the app

        • How to Automate Email Sequence

          I'm having trouble trying to set up a workflow to automate an email sequence. Once a group of emails in a Task has been tagged by a certain tag, I want an instant email template to be sent. After 7 days with no response, another email template would be

        • Zoho Sprints Android v2.0.4 app update: Item reminders, archive Epics, Kanban projects, Epic progress

          Hello everyone! In the latest version(v2.0.4) of the Zoho Sprints Android app update, we have introduced various new features. Let's take a look at what's new! Item Reminder Stay organized and never miss an important date with the all-new Item Reminder

        • Credit Management: #3 Setting Credit Limit for Customers

          Think about that one familiar customer of yours who always buys on credit. They usually pay on time, maybe a little late here and there, but not alarming. So, you are fine saying, "Sure, pay later." Then, one day, they place a significantly bigger order

        • Update on the client portal URL for Guest users

          We’re updating the way Guest users access their Connect network. As part of this change, all client organization portals used by Guest users will now be accessible through a dedicated domain specific to each data center. The access URLs mentioned here

        • Unable to see Zoho contacts in Zoho app on ios

          Hi Support Team, I am a new user, I have created my account and installed zohomail app on iOS 16 which works. I was also able to import my Gmail contacts into Zoho Contacts, which I can see. The problem is that I can’t see these imported cobalts in Zohomail

        • Task Due Date greater than 10 years.

          We use recurring tasks in Projects where every week, month, year etc Some of our projects are greater than 10 years and we are unable to set a new due date because the difference between start date and due date is greater than 10 years. As an example

        • Hosting external websites on Zoho?

          How can I host my external website on zoho? Do we have that option? I am currently with hostinger and am looking to switch to zoho. Kindly help. Thanks.

        • How to Add Time Formula Duration (hh:mm)

          Hi everyone — I’m trying to create a formula field in Zoho CRM that calculates the difference between a “Call Start Time” and “Call End Time” and displays the duration in HH:MM format (for example: 1:04 for one hour and four minutes). My current setup

        • How can I calculate the physical stock available for sale?

          Hey Zoho Team,  I've tried to calculate the physical stock on hand in various ways - but always receive a mismatch between what's displayed in Zoho Inventory & analytics.  Can you please let me know how the physical stock available for sale is calculated?

        • Marketing Tip #4: Build your email list early

          Email marketing has one of the highest returns on investment. Don’t wait until later; start collecting subscribers now. When you've got their attention, you can send them emails about offers, new product launches, seasonal greetings, and more. Try this

        • Is anyone else having trouble saving a custom image in their email signature, or is it just me?

          When I try to save the image I get an error that says "Operation Failed" I opened a support ticket two weeks ago and received a response that it would be debugged, but it still isn’t working

        • Zoho Desk Domain mapping / Cloudflare CNAME not recognized

          Hello, my website is behind Cloudflare and SSL. From the Cloudflare control panel I added a CNAME record such as support.mydomain.com pointing to desk.cs.zohohost.com but I'm stuck with the message "Make sure you've mapped the CNAME entry..."

        • I want to add my other zoho account in same pc

          why does zoho restrict me doing many things as i also want to add my second mail account bit its not allowing me to do that

        • Next Page