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!  

    • Recent Topics

    • Zoho Sheets saying locked when not locked

      Zoho Sheets won't let me add more rows to sheet because it's saying the sheet is locked, but the sheet is not locked. I tried using a different browser but I still have the same issue.

    • How do I filter contacts by account parameters?

      Need to filter a contact view according to account parameter, eg account type. Without this filter users are overwhelmed with irrelevant contacts. Workaround is to create a custom 'Contact Type' field but this unbearable duplicity as the information already

    • No Zoho Support Response in Months

      I want to say that I love Zoho FSM, Books, and CRM, but the support is scary bad. About 2-3 months ago, I emailed Zoho FSM support with two specific issues I needed help with, and I have still not received one single response. I also submitted a support

    • Has anyone built a custom AI support agent inside Zoho (SalesIQ/Zobot)?

      Hi all, I’ve been experimenting with building my own AI support assistant and wanted to see if anyone here has tackled something similar within Zoho. Right now, I’ve set up a Retrieval-Augmented Generation (RAG) pipeline outside of Zoho using FAISS. It

    • Display Client Name in Zoho Creator Client Portal Dashboard

      Hello Zoho Creator Team, We hope you are doing well. Zoho Creator recently introduced the option to set a client’s display name in the Client Portal settings, which is very helpful for providing a personalized portal experience. However, there is currently

    • Null

      If a result is null how do I make it so that a custom error pops up instead of the default error? Can someone write an example as if I were using the script builder?

    • Error "Invalid client task found corresponding properties" only when triggered from workflow ?

      Hi All, I am facing an error message I never encountered previously: Error in executing On Add - On Load script Error in executing thisapp.get_all_projects_api_call function. Line:(2) Error in executing thisapp.getAccessTokenFromRefreshToken function.

    • Introducing Zoho Creator's 2025 Release Projection 2

      Hello Creators! I'm Prakash, from the Creator product management team, and today I'm delighted to unveil our next set of features as part of Release Projection 2 for 2025. With thoughtful analysis and planning, we've curated powerful new capabilities

    • Zoho Expense and Chase Bank Visa credit cards - Direct Feed?

      Our company uses JP Morgan Chase Visa credit cards. We can't be the first to try and use a combination of Zoho Expense + Chase Bank + Visa Credit Cards --- anyone successful with this combination? 1. The direct feed automation isn't working. When I go

    • Slow uploads of large files

      I'm wanting to use Workdrive for transferring large images and video (we're talking things from 100MB-5GB). I'm running solo on a 500MBit/sec fiber connection. I'm getting upload speeds to Workdrive of no more than about 1-3Mbytes/sec when going through

    • Hiding Pre-defined Views

      You can enhance Zoho with custom views - but you cannot hide the pre-defined views. Most users focus on 4 or 5 views. Right now for EVERY user EVERY time they want to move to one of their 4 or 5 views - they have to scroll down past a long list of pre-defined views - we don't use ANY of the pre-defined views. Adding the feature to allow a predefined view to be hidden completely or only visible to certain users would be a big improvement in usability for Zoho CRM. This feature is already available

    • Feature Request: Tag, Search, and Report on Individual Private Comments

      Zoho Desk Team, First, I want to say that we are extensive users of Zoho Desk and it is a core part of our support operations. We rely heavily on the private comments feature for internal communication, knowledge sharing, and maintaining a clear history

    • Format a "return" message

      Good day, Is there a way to format the message of the "return" function in CRM deluge script?

    • Items Below Reorder Point Report?

      Is there a way to run a report of Items that are below the Reorder Point? I don't see this as a specific report, nor can I figure out how to customize any of the other stock reports to give me this information. Please tell me I'm missing something s

    • Having Trouble Opening The Candidate Portal

      Recently am having trouble opening the Candidate Portal. It keeps loading but cannot display any widgets. Tried Safari, Chrome and Edge. Non of them work. Please solve the problem ASAP.

    • Dynamically catching new file creations

      I have a team folder with many subfolders, and in those folders we add new documents all the time. I'd like to have a workflow or script to notify me (and then take other actions) when a file is added anywhere in that structure that ends in "summary.txt".

    • Tip of the Week - Spot Risky Sales with Conditional Formatting

      In Zoho Analytics, small tweaks can lead to big insights. One such feature is Conditional formatting based on other columns, your key to instantly spotting where sales success is overshadowed by product returns. Our tip this week shows you how to apply

    • How do I duplicate / copy a campaign

      I am evaluation Zoho Campaigns and sent an email to one of my personal email accounts from Zoho Campaigns.  It went into my junk file in Hotmail. I want to duplicate that same (1-page) campaign and send it to another of my personal accounts to try to

    • For a Bill, can "Pay via Check" - Can we also "Pay via Check" when documenting refund for payment?

      We really like when we have a Bill in Zoho Books that we can record payment by selecting "Pay via Check" and that will cut the check for us from Zoho Books. However, when we have to write checks as a result of invoice overpayment, we can not select "Pay

    • Creator Change History: Ways to improve

      Hi Everyone, Recently been working in developing this change history(an idea from Zoho Forms) - unlike forms that you can this with a click but using Creator, we can use "old" keyword. The concept I come up with is to put the result in a table however,

    • Suitability of Zoho One (Single User License) for Multi-State GST Compliance & Cost Analysis

      Hello Zoho Team, I am an e-commerce business owner selling on platforms like Amazon, Flipkart, and Meesho, and I'm currently using their fulfillment warehouses. I have two GSTIN registrations and am planning to register for an additional 2-3 to expand

    • add employees and customiz

      I want a Zoho software to track employees record. I logged in a demo so now I tried adding employee, first thing when I click on add employee it takes me to a page where it says add user maximum 10 users, my first doubt why users I don't want employees

    • Inactive User Auto Response

      We use Zoho One, and we have a couple employees that are no longer with us, but people are still attempting to email them. I'd like an autoresponder to let them no the person is no longer here, and how they can reach us going forward. I saw a similar

    • Zoho People Attendance Module - Split Shifts

      Hello, Our business employs a number of college students who often split their workdays between work hours and class schedules, resulting in split shifts. For example: Employee 1 works 9am to 11:30am and then leaves for class, returning to work at 3pm

    • Zoho One subscription

      we have got Zoho CRM for 3 users and we paid for the app , and we have still 9 months to go , but if we join Zoho one , does it mean the payment for that subscription would be a waste? Please help. Thanks.

    • How Zoho CRM Can Enhance Your Faucets Accessories Business Operations?

      In today's competitive market, having a reliable CRM system is crucial for managing customer relationships and streamlining business operations. For businesses in the faucets accessories niche, Zoho CRM offers powerful tools to help manage everything

    • Dashboard

      I’m currently working on a project using the Zoho IoT Cloud with an ESP32 and MQTT. I’ve successfully connected the ESP32 to Wi-Fi and MQTT, and the data from the ESP32 is displayed in the telemetry section of the cloud. However, when I try to create

    • Can i connect 2 instagram accounts to 1 brand?

      Can i connect 2 instagram accounts to 1 brand? Or Do i need to create 2 brands for that? also under what subscription package will this apply?

    • Assistance Needed: Ticket Status Not Updating and Sorting by Last Customer Reply in Zoho Desk

      Hello, I’m facing two issues in Zoho Desk that I’d like your guidance on: Ticket Status Not Updating: When a customer replies to a ticket, the status does not change to Reopened. Instead, it remains in Waiting on Customer, even after the customer’s response

    • Zoho Forms - Improved Sub-Forms

      Hi Forms team, I'm helping a client move from JotForms to Zoho Forms and I've found another opportunity for improvement. In the below screenshot, JotForm left and Zoho Forms right. The Zoho Forms Sub-Form is quite a poor visually. There is no way to make

    • Round robin

      Hi, I'm trying to set up a round robin to automatically distribute tickets between agents in my team but only those tickets that are not otherwise distributed by other workflows or direct assignments. Is that possible and if so which criteria should I

    • Time Entry Notifications

      Hi All - I have support staff who place notes of their work in the time entry section of Zoho Desk. Is there a specific workflow or setting I need to enable to have the ticket holder updated via email when an entry is saved?

    • Change text in help desk

      Hi, Please let me know how can i change the this text, see screenshot.

    • What's New in Zoho Billing | Q3 2025

      Hello everyone, We are excited to share the latest set of updates and enhancements made to Zoho Billing in Q3 2025. From the latest GST updates to multi-level discounting, Zia-powered report summaries, and customizable web forms, these updates are designed

    • How to Delete Personal Account Linked with My Mobile Number in past or by someone else

      How to Delete Account Created with My Mobile Number in past or by someone else This is creating issues in making or sync with my credentials mobile and email address..

    • WhatsApp Business Calling API

      Dear Zoho SalesIQ Team, I would like to request a feature that allows users to call WhatsApp numbers directly via Zoho SalesIQ. This integration would enable sending and receiving calls to and from WhatsApp numbers over the internet, without the need

    • Does Zoho Learn integrate with Zoho Connect,People,Workdrive,Project,Desk?

      Can we propose Zoho LEarn as a centralised Knowledge Portal tool that can get synched with the other Zoho products and serve as a central Knowledge repository?

    • Enhancing Zia's service with better contextual responses and article generation

      Hello everyone, We are enhancing Zia's Generative AI service to make your support experience smarter. Here's how: Increased accuracy with Qwen One of the key challenges in AI is delivering responses that are both contextually accurate and empathetic while

    • Marketer's Space - Going beyond basics: Smarter ecommerce marketing with Zoho Campaigns

      Hello Marketers, Welcome back to this week's Marketer's Space. In the last post, we discussed the basics of email marketing and how to get started with email marketing in ecommerce. In this part, we'll dive much deeper into some other advanced features

    • Experience effortless record management in CRM For Everyone with the all-new Grid View!

      Hello Everyone, Hope you are well! As part of our ongoing series of feature announcements for Zoho CRM For Everyone, we’re excited to bring you another type of module view : Grid View. In addition to Kanban view, List view, Canvas view, Chart view and

    • Next Page