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
- Ensure that you have installed all the necessary components required to use Zoho's CLI.
- 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
- Zoho CRM Widgets -Overview, CLI Installation, Creating a Widget, Kaizen #23
- Widgets in Blueprint - Kaizen #95 How is a Widget used in a Blueprint?
- Related List Widget - Kaizen #114 Geocoding Leads' Addresses in ZOHO CRM
----------------------------------------------------------------------------------------------------------------------------------------
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
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Kiruthiga G
Vigneshwaran K
Marco Mogliani
Maxime Bory
Sriram U
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 thisKaizen #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 howKaizen #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
New to Zoho TeamInbox?
Zoho TeamInbox 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
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Able to change project on timelog entries
Ability to move the timesheet entry from one project to another. When a user adds a wrong entry a manager can change/update the timesheet entry to the correct project.Marketing Tip #28: Increase buyer confidence with visible social media links
Your social media pages are often where customers go to “double-check” your brand before buying. When visitors can easily find your Instagram, Facebook, YouTube, or LinkedIn from your store, it builds trust and makes your business feel more real and active.[Webinar] Solving business challenges: One tool for documents, forms, PDFs, e-signatures, and more
Hi Zoho Writer users, Most businesses rely on multiple tools, such as a word processor, form builder, e-signature provider, and PDF editor, for their document workflows. Managing multiple subscriptions, switching between tools, and moving data acrossCustomer Message Edit/Delete Function & Backend Visibility Inquiry
目前客服已发送的对话支持编辑和删除功能，请问在 Zoho 系统后台，是否可以查看客服具体发送了什么内容，以及删除或修改了哪些信息？如果无法查看，这个功能是否可以通过设置关闭客服的编辑和删除权限？如可以，请告知具体设置路径。 Currently, customer service agents are able to edit and delete messages after sending them. In the Zoho system backend, is it possible to viewGoogle Drive API 403 PERMISSION_DENIED from Deluge custom function - OAuth connection not recognised
Hi all, I've built a custom Deluge function to route Zoho CRM Account attachments into specific Google Drive subfolders based on filename prefix. The CRM API steps all work correctly, however our first Google Drive API call (listing subfolders via drive/v3/files)Supercharge Your Zoho Billing Workflows with AI Using Zoho MCP
What is MCP and how does it connect to Zoho Billing? If you've ever wished you could just tell your billing software what to do without clicking through menus, running reports manually, or switching tabs every five minutes, that's exactly what the ZohoWhat's new in Zoho Social - Q1 recap
Hello everyone, We’ve rolled out a bunch of updates in Q1, and we’re excited to walk you through them. To help you explore these features in detail, we’re hosting a Q1 recap webinar where we’ll show you how to make the most of each update. Q1 recap webinarIntroducing Auto-trigger for Screening Bot
Still manually sending screening tests after every application? Not anymore. With Auto-trigger for Screening Bot, screening now begins automatically. When a candidate applies for a job that has an attached assessment, Recruit checks whether the test hasTrying to validate user's age through DoB
We have a form where a user enters their birthdate. We'd like a rule that counts whether the user is over or under 25 years of age. This amounts to 9125 days elapsed between today and an easy way to do this would be to use conditional rule Is Before [x]Automation Series: Notify Admin When User Accepts an Invitation
In Zoho Projects, a portal is an organisational-level workspace where user can manage multiple projects. To join a portal, a user will have to accept the portal invitation. However, it is important for admins to be in the loop when a user accepts theIntroducing SlyteUI : From Idea to a Working Interface in Minutes
Hello everyone! Are you spending hours building basic UIs? Does even the smallest customization feel like a major task? CRM customization should feel intuitive and straightforward, not time consuming or exhausting. SlyteUI makes this possible by simplifyingApi Version 2 Refresh Token invalid_code
While Refresh token i am always getting Error { "error": "invalid_code" } i am trying to pass all parameter as per this https://www.zoho.com/crm/developer/docs/api/refresh.html still non of things working any one have idea whats the reason for same ... please help due to this i stuck since last one weekKnowledgebase SEO
We have a custom-domain mapped help center that is not restricted via login. I have some questions: a) will a robots.txt file still allow us to control indexing? b) do we have the ability to edit the sitemap? c) do category URLs get indexed by searchSuper Admin Logging in as another User
How can a Super Admin login as another user. For example, I have a sales rep that is having issues with their Accounts and I want to view their Zoho Account with out having to do a GTM and sharing screens. Moderation Update (8th Aug 2025): We are workingMail Merge preview won't load
Hello! One of our users has not been able to use mail merge templates in CRM as the preview screen does not load. We have many templates for one of our custom modules and the users are used to this feature and have been using it for years without anymask Customer phone number and agents cant see customer phone number
Is there any way we can integrate Zoom Phone with Zoho CRM while ensuring that customer phone numbers remain masked? We need a solution where agents can make outbound calls but cannot see customer phone numbers. Please let us know if there is any solutionIssue with Zoho Sheets
Edit: Small Error of Opening doc and losing entire formatting while downloading to *.xlsx format. Also my formulas don't work while opening a document downloaded from Zoho sheets, since the colors aren't matched to the correct data. Even though the dataRecord-Level Cliq Conversations Inside Zoho CRM
It would be extremely useful to bring the Zoho Projects + Cliq conversation experience into Zoho CRM records. Today, in Zoho Projects, each project or task can have its own related chat conversation through Cliq, allowing team members to discuss thatIntroducing note actions and dynamic visibility in Kiosk Studio
Hello all, We are introducing enhancements to Kiosk Studio that will improve the product scope and meet your custom needs more precisely. What's new? Add notes as Actions: You can add notes to CRM records as kiosk Actions, as well as insert merge fieldsLogging Calls not working
For some reason, logging calls is not working anymore. Description of problem: On a Lead's record, in the "Open Activities" block, clicked on "Add New" Clicked on "Call", clicked on "Log a call" Nothing happens. If I click on "Schedule a call" nothingsHow 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 alreadyData Import into Zoho Forms
Hi everyone, I am migrating several Google Forms into Zoho Forms. I can recreate the forms, but I also need to bring over historical response data currently stored in Google Sheets. I want to keep using that data inside Zoho for analysis, reporting, andBest practice to handle 50+ invokeurl calls in a loop without hitting the 30-second timeout?
Hi everyone, I am working on a custom Deluge function where I have a Map containing around 50+ key-value pairs. I need to iterate through this Map using a for each loop and make a GET API call (invokeurl) for each item. The Problem: Because of the 50+How Can I Clear Deleted Members and Free Up Their Storage?
Can we remove these deleted members and free up their storage?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 ? RegardsZoho Desk - Event Calendar View
Hi Desk team, Are there any plans to introduce a calendar or timeline view for Events in Zoho Desk? It would be very helpful if we could see Events visually in a calendar and/or timeline. This is very helpful when desk side support activities need toPro rata holiday allowance for variable part time employees
We have some part time staff who work variable hours and their holiday allowance is based on pro rata system. In Zoho people is there any way to calculate their holiday allowance based on actual hours worked? I.e. worker is entitled to a pro-rata amount of 5.6 weeks holiday, which is equivalent to 12.07% of hours worked over a year. So part time staff's holiday is accrued at a rate of 12.07% per hour worked. ThanksZoho Bookings - Provide Appointment System ID in Zoho Flow Variable
Hi Bookings Team, It would be great if you could provide the system record ID for appointments as a variable in Zoho Flow trigger outputs and Fetch Appointments action. This would allow us to create a dymanic URL which can be clicked by a staff user toInvoice date is incorrect
I'm trying to pull a report of Sales Orders and filter by Invoice Date. (ex: all of 2025) Unfortunately, the filter still returns lots of SO's from other years including 2026 which would be impossible to have an invoice in 2025 from a 2026 order. It'sQuery on Tracking Visitor Activity with Zoho Forms & SalesIQ
I have a query regarding Zoho Forms, Zoho SalesIQ, and Zoho CRM. I have embedded a Zoho Forms form on my website, and I’m trying to understand if it’s possible to capture a user’s website activity (such as pages visited, visit count, etc.) when they submitUnderstanding tasks
So we have a module linked to contacts called Equipment and that in turn has a related module called service calls. Often on a service call we want add a task but we are not able. I think it needs a link to the contact. WE therefore tried to add tasksHow to transfer files from Creator file upload fields to CRM file upload fields
This article describes how to transfer files from Zoho Creator file upload fields to Zoho CRM file upload fields. I'm posting it here because the current documentation does not fully and accurately describe how to do this with certain file types (PDF,Add Comprehensive Accessibility Features to Zoho Writer
Hello Zoho Writer Team, We hope you are doing well. We would like to submit a feature request to enhance Zoho Writer with a full set of accessibility tools, similar to the accessibility options already available in the Zoho Desk agent interface. 🚧 Current¿Puedo migrar mi sitio desde WordPress a Zoho? ¿Zoho admite herramientas con código personalizado?
¡Hola comunidad! Estoy evaluando la posibilidad de migrar mi sitio web https://calculadoradenotas.cl/ desde WordPress a una solución Zoho, y tengo algunas dudas técnicas que espero puedan aclararme. Mi sitio no es solo informativo: es una herramientaMake Task ID and Issue ID columns filterable like all other columns
Hello Zoho Projects Team, We hope you are doing well. We would like to submit a feature request regarding the Task ID and Issue ID columns in Zoho Projects list views. Current Limitation: As of now, in both the Tasks and Issues modules, almost every visibleImprove Back Navigation (X Button) Inside Nested Milestones, Task Lists, Tasks, and Issues
Hi Zoho Projects Team, We would like to request an improvement to the X / close button navigation behavior inside milestones. Currently, the milestone area behaves as a nested hierarchy (tree structure): Project → Milestone → Task List → Task So whenAdd a way to connect Log360 Cloud logs with Zoho analytics
Hi, Several month ago Log360 Cloud was added to zoho one - and this is great. But as far as I see there is no prebuilt way to connect Zoho analytics to the logs we have in Log360 Cloud. Please add a prebuilt connection like we have for so many other zohoExtend GitHub Commit Integration to Tasks in Zoho Projects
Hello Zoho Projects Team, We hope you are doing well. We would like to submit a feature request regarding the current GitHub integration in Zoho Projects, specifically the ability to link commit information. Current Limitation: As of now, Zoho ProjectsEnable Screen Recording in Zoho WorkDrive Mobile Apps (Android & iOS)
Hi Zoho WorkDrive Team, How are you? We are enthusiastic Zoho One users and rely heavily on Zoho WorkDrive for internal collaboration and content sharing. The screen-recording feature in the WorkDrive web app (similar to Loom) is extremely useful- however,Zoho Project - Total Forecasted Hours
Does anyone know an easy way to get a total of all the forecasted hours across the portfolio? I'm aware trying to create a custom report that can generate this figure for each task and the total up but the completion percentage doesn't seem to come backNext Page