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
Introducing a smarter, faster, and more flexible charting experience
Hello Zoho Sheet users, We're delighted to share the latest news about a major update to charts in Zoho Sheet! The new version supports dynamic data ranges, granular styling options, faster loading, and other interesting enhancements that allow you toIntroducing Job Alerts
Keeping candidates engaged beyond their first application is one of the most consistent hiring challenges. Many interested candidates simply do not revisit career sites regularly, which can result in missed opportunities and reduced re-applications. ToTask status - completed - other options
I have a dumb question I know i can make custom statuses for the tasks - but is there anyway to make additional "completed" statuses like for instance if i have a task "call back customer" and i leave a vm for them to call back marking it "completed -Bank feed integration First Abu Dhabi Bank (FAB) to Zoho? (UAE)
Hello everyone, Is First Abu Dhabi Bank in the list of banks available for bank feed integration with Zoho Books? Thank you.How to Export Filtered List of Contacts?
This seems like it should be simple, but I'm stymied. I'm trying to export a filtered list of my Contacts for analysis in a spreadsheet. The use case is that I'm an ecom business based in the US. The bulk of our customers are individuals stored as Contacts.Quick Create needs Client Script support
As per the title. We need client scripts to apply at a Quick Create level. We enforce logic on the form to ensure data quality, automate field values, etc. However, all this is lost when a user attempts a "Quick Create". It is disappointing because, fromcan we add product images in Zoho CRM Quote PDF template?
I want to create a quotation format in Zoho CRM similar to the attached PDF, where each product is displayed in a table with rpoduct image I need the product image to appear inside the line items section of the quote. However, while checking the QuoteDoes Zoho Writer have Dropdowns
I want to add a drop down field in Zoho writer. Is this possible?Facturation électronique 2026 - obligation dès le 1er septembre 2026
Bonjour, Je me permets de réagir à divers posts publiés ici et là concernant le projet de E-Invoicing, dans le cadre de la facturation électronique prévue très prochainement. Dans le cadre du passage à la facturation électronique pour les entreprises,Users Lookup
It would be extremely convenient to have a lookup field whose type is Users. There are many instances where we need to relate certain actions to users. Furthermore, in our company the candidate sourcer might not be the one who's creating the profile (done by an admin). Please do consider adding this essential feature in the future. Thank youConnecting Multiple WooCommerce Stores to a Single Zoho Marketing Automation Account
Is it possible to connect multiple WooCommerce stores to a single Zoho Marketing Automation account?Service Title in Service Report Template Builder
I am currently working on the Service Report Template Builder in Zoho FSM. I have created three separate service report templates for different workflows: Preventive Maintenance Report Requested Service Report Installation Report My issue is that I cannotUpdate: New Security Admin Role
Hello Zoho Directory Admins! This post is to highlight the recent role and permission changes introduced as part of the security enhancements. Previously, Helpdesk Admins had the security permissions and were responsible for managing the security configurationsClient Script | Update #14 - Client Script Support for Quick Create
Hello Everyone! We are back with another exciting and highly awaited update in Client Script! Over the past months, many of you shared your insights and requests, asking for the power to extend Client Script functionality to Quick Create forms. This capabilityI'd like to suggest a feature enhancement for SalesIQ that would greatly improve the user experience across different channels.
Hello Zoho Team, Current Limitation: When I enable the pre-chat form under Brands > Flow Controls to collect the visitor’s name and email, it gets applied globally across all channels, including WhatsApp, Messenger, and Instagram. This doesn't quite alignThe Social Playbook - February edition: Why moment marketing works (and how brands use it)
Imagine the final season of your favorite series is about to drop. Your entire feed is talking about it. Trailers everywhere. Fan theories. Hype at 100%. Now your go-to burger place launches a limited-edition meal box themed around that series—customPDF Attachment Option for Service Reports
Hello Team, I would like to check with you all if there is an option to attach PDF documents to the service reports. When I try to attach a file, the system only allows the following formats: JPEG, JPG, and PNG. Could you please confirm whether PDF attachmentsCliq Bots - Post message to a bot using the command line!
If you had read our post on how to post a message to a channel in a simple one-line command, then this sure is a piece of cake for you guys! For those of you, who are reading this for the first time, don't worry! Just read on. This post is all about how【Zoho CRM】営業日のロジックに関するアップデート
ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 今回は「Zoho CRM アップデート情報」の中から、営業日のロジックに関するアップデートをご紹介します。 本アップデートにより、ワークフローにおける営業日の計算方法が改善されました。 週末などの非営業日にワークフローのトリガーが発生した場合でも、 「+0」「+1」「+2 営業日」といった設定が、意図どおりに正確に動作するようになりました。 営業日に基づくワークフローでは、日付項目を基準に「何営業日後に処理を実行するか」を指定します。Merged cells are unmerging automatically
Hello, I have been using Zoho sheets from last 1 year. But from last week facing a issue in merged cells. While editing all merged cells in a sheet became unmerged. I merged it again, but it again unmerged. In my half an hour work I have to do this 3-4Introducing Built-in Telephony in Zoho Recruit
We’re excited to introduce Built-in Telephony in Zoho Recruit, designed to make recruiter–candidate communication faster, simpler, and fully traceable. These capabilities help you reduce app switching, handle inbound calls efficiently, and keep everyJust want email and office for personal use
I am unclear as how to how I would have just a personal email (already do have it and love it) and get to use docs, notebook, workdrive etc. In other words mostly everything I had a google. I find gocs can be free with 5gb and so can mail with 5gb. AreUnable to change the "credentials of login user" option when creating a connection
I want to create a new Desk connection where the parameter to use 'credentials of login user' is set to YES. I'm able to create a new connection but am never given the option to change this parameter. Is this a restriction of my user profile, and if so,Show backordered items on packing slip
Is it possible to show a column on the Packing Slip that shows number of backordered items when a PO is only partially filled? I would also like to see the Backordered column appear on POs after you receive items if you didn't get ALL of the items or partial amounts of items. And lastly, it would be nice to have the option of turning on the Backordered column for invoices if you only invoice for a partial order. -TomZoho CRM Community Digest - January 2026 | Part 1
The new year is already in motion, and the Zoho CRM Community has been buzzing with steady updates and thoughtful conversations. In this edition, we’ve pulled together the key product enhancements, Kaizen learnings, and helpful discussions from the firstZoho CRM Feature Requests - SMS and Emails to Custom Modules & Time Zone Form Field
TLDR: Add Date/Time/Timezone form field, and be able to turn off auto timezone feature. Allow for Zoho Voices CRM SMS Extension to be able to be added to custom modules, and cases. Create a feature that tracks emails by tracking the email chain, ratherIntroducing Bigin's Add-in for Microsoft Outlook
Hello Everyone, Email is an important way to communicate with customers and prospects. If you use Outlook.com for emails and Bigin as your CRM, the Outlook Add-in helps you connect them easily so you can see your Bigin contact details right inside Outlook.com.Ask the Expert – Zoho One Admin Track : une session dédiée aux administrateurs Zoho One
Vous administrez Zoho One et vous vous posez des questions sur la configuration, la gestion des utilisateurs, la sécurité ou encore l’optimisation de votre back-office ? Bonne nouvelle : une session Ask the Expert – Zoho One Admin Track arrive bientôt,Zoho Commerce
Hi, I have zoho one and use Zoho Books. I am very interested in Zoho Commerce , especially with how all is integrated but have a question. I do not want my store to show prices for customers that are not log in. Is there a way to hide the prices if notHow to Associate Zoho Projects in Zoho CRM
Hi I need script for associating projects in zoho projects to particular Account in zoho CRM side. It can be done manually but I need the automation for this process. There are no api regarding associating a project in zoho crm account. Need assistanceAdd Claude in Zoho Cliq
Let’s add a real AI assistant powered by Claude to your workspace this week, that your team can chat with, ask questions, and act on conversations to run AI actions on. This guide walks you through exactly how to do it, step by step, with all the codeNeed to set workflow or journey wait time (time delay) in minutes, not hours
Minimum wait time for both Campaigns workflows and Marketing Automation journeys is one hour. I need one or the other to be set to several minutes (fraction of the hour). I tried to solve this by entering a fraction but the wait time data type is an integerEditing Item Group to add Image
I did not have the image of the product when the Item Group was created. Now I have the product image, and would like to associate/add to the Item Group. However the Item Group Edit functionality does not show/allow adding/changing image. Please helZoho Books - France
L’équipe de Zoho France reçoit régulièrement des questions sur la conformité de ses applications de finances (Zoho Books/ Zoho Invoice) pour le marché français. Voici quelques points pour clarifier la question : Zoho Books est un logiciel de comptabilitéNew in Office Integrator: Download documents as password-protected PDFs
Hi users, We're excited to introduce password-protected PDF as a download option in Zoho Office Integrator's document editor. This allows you to securely share confidential information from within your web app. Highlights of the password-protected PDFSales IQ - Zobot en multilangue
Bonjour, J'ai un Zobot installé sur mon site depuis longtemps. J'ai ajouté plusieurs langues, dans la configuration et dans le générateur de bot sans code Pourtant, le Chat continue à s'afficher en Francais. Comment enclencher le multilangue en frontStreamlining E-commerce Photography with AI Background Tools
Hey Zoho Community, I’ve been messing around with ways to make product images less of a headache for fashion brands on Zoho Commerce. You know how boring generic backdrops can get, and how much time traditional photoshoots eat up, right? I tried out thisUnable to Assign Multiple Categories to a Single Product in Zoho Commerce
Hello Zoho Commerce Support Team, I am facing an issue while assigning categories to products in Zoho Commerce. I want to assign multiple categories to a single product, but in the Item edit page, the Category field allows selecting only one categoryCollapsing and expanding of lists and paragraphs
hello Would you ever implement Collapsing and expanding of lists and paragraphs in zoho writer ? Best regardsSaving issue
First problem I opened a MS word file in writer. after the work is done, it does not save instantly, I waited for like 10min and it still did not save. second problem When I save a file, then file gets saved as another copy. I just did save, not saveNext Page