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

    • Number of Reopn

      Hi Zoho, Is there any appropriate API call for This URL "http://support.zoho.com/api/v1/dashboards/reopenedTickets?...." what I thought is the resulting output of this call has data for number of reopen... "https://desk.zoho.com/api/v1/tickets/" + Ticket_ID

    • 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 ? Regards

    • How to customize the "Placeholder Text" separately from the "Field Label" on the Booking Form?

      Hi, I am currently customizing the Booking Form for one of my Workspaces in Zoho Bookings, and I need some help adjusting a custom text field. Right now, when I create a custom text field, the gray "placeholder text" inside the text box automatically

    • What's New in Zoho Inventory | April & May 2026

      Hello users, We're excited to roll out the latest Zoho Inventory updates for April and May 2026. These enhancements are designed to make your daily operations smoother and more efficient, from advanced inventory management and flexible pricing to automated

    • Introducing Spotlight Forms

      Hey form builders! If someone opens your form, sees the wall of fields ahead, and quietly closes the tab. It may not be because the questions were hard. It could be because the experience felt like too much. Which is why we have now introduced a new form

    • Workflow Assistance in Zoho CRM

      Our client's sales team visits customers on-site and currently fills a physical paper form to capture customer details, and then separately re-enters the same data into Zoho CRM via the mobile app — resulting in double data entry. We want the salesperson

    • Blueprint Not Triggering When Lead Status Is Updated by Workflow (IndiaMART Integration)

      I have set up a blueprint that triggers when a lead’s status is “New Lead.” Our CRM is integrated with IndiaMART, and when leads are created from IndiaMART, their Lead Status is initially set to None. To handle this, I created a workflow that automatically

    • Related products & AI product recommendations through commerce API.

      Hello Zoho team I’m looking to add related products and AI product recommendations to my Zoho Commerce webshop with custom storefront. Is this supported through the API? And if not, is this on your roadmap? Thanks in advance David

    • Why don't Zia agents support file uploads?

      I am trying to build a Zia Agent that allows uploading of a PDF file and uses the GLM5 model to process it and extract information. But agents.zoho.com has no way to enable file uploads on the agent. Additionally, GLM5 based agents keep outputting their

    • Pasting Images in Zoho Desk ignores cursor location

      My team has reported an issue which started recently where when we paste an image into a new or existing reply or comment, the pasted image seems to ignore the current cursor location instead paste itself at the last character present in the reply/comment,

    • 'Pinned' notes feature of a pipeline record

      Hi team, Could you please implement a feature which will allow users to pin different notes so that they will appear at the very top of the notes tab in a pipeline record. Sometimes we have a wide range of notes on a record which means more important

    • Canvas Detail View Related List Sorting

      Hello, I am having an issue finding a way to sort a related list within a canvas detail view. I have sorted the related list on the page layout associated with the canvas view, but that does not transfer to the canvas view. What am I missing?

    • Announcing new features in Trident for Mac (1.37.0)

      Hello everyone! We’re excited to introduce the latest updates to Trident, which are designed to take workplace communication to the next level. Let’s dive into the details. Import EML archives directly into Trident. You can now import EML archives into

    • Zia Agent activation in Zoho Desk forces new Organization creation instead of deploying to existing one

      While attempting to complete the deployment and activation sequence of a new Zia Agent within our existing Zoho Desk environment, the activation process failed on the user interface, throwing a generic error (see print). However, despite the activation

    • #10 Bill While You Sleep

      A consultant is reviewing last month's work. Client meetings? Done. Deliverables? Sent. Support requests? Resolved. Then they realize something. "I have completed the work... but I haven't billed the client yet." The work was completed. The client was

    • Team Module Issues?

      We are testing Team Licenses for use by our Customer Service staff. I created a Teamspace called CSR and only assigned two users to this space: Administrator (me) and “Team License Test.” Team License Test is assigned to the Team User profile, with a

    • Access images from form submission in power automate

      Images from form submission show up as links in power automate. How do I access the image data?

    • Forms cannot be accessed.

      https://forms.zoho.com/ is not available, please help to fix

    • Associate records via the Multi-select lookup RELATED LIST via API

      In the REST API, is there a way to associate records for a multi-select lookup related list other than via the linking module? There are two methods for the lookup: 1. via insert records API 2. via the linking module ...as described in https://help.zoho.com/portal/en/community/topic/kaizen-125-manipulating-multi-select-lookup-fields-mxn-using-zoho-crm-apis

    • Problem with CRM Connection not Refreshing Token

      I've setup a connection with Zoom in the CRM. I'm using this connection to automate some registrations, so my team doesn't have to manually create them in both the CRM and Zoom. Connection works great in my function until the token expires. It does not refresh and I have to manually revoke the connection and connect it again. I've chatted with Zoho about this and after emailing me that it couldn't be done I asked for specifics on why and they responded. "The connection is CRM is not a feature to

    • How do I post a new question in Zoho Community forums?

      Hi everyone, I’m new to the Zoho Community and I’m trying to figure out how to properly create and publish a new topic in the forum. When I visit the community page, I can’t clearly find the option like “Add Topic” or “Post Question.” Could someone guide

    • Kaizen #245 - Real Time Signal Alerts for High-Value Abandoned Checkouts

      Howdy, Tech Wizards! Welcome back to another week of Kaizen. In this post, we will build a real-time abandoned checkout notification system using Stripe, Zoho CRM Functions, Sales Signals, and Widgets. When a customer abandons a high-value purchase, Zoho

    • Unable to attach Fillable File Upload field to Merge Template ever since UI update

      Ever since the new UI update, the field for Attachments for sending document for Signing in Writer has had an issue where trying to add a Fillable item in the Attachment field ends up always becoming a "Choose a File From Drive" option instead. No matter

    • Latest updates in Zoho Meeting | An improved Analytics tab and user interface, an invite pop-up revamp, an enhanced Zoho Meeting iOS app, a recording feature in the Android app, and more

      Hello everyone, We’re excited to share a few updates and enhancements in Zoho Meeting. Here's what we've been working on lately: Improved analytics for meetings, an invite pop-up revamp, a multi-video feed interface in the iOS app, a recording feature

    • Inquiry Regarding Automated Assignment of Zoho TeamInbox Messages using Zoho Flow and Deluge

      Hello, Our company is currently using Zoho TeamInbox, and we are interested in automating the assignment of responsible parties using tools such as ZOHO Flow and Deluge. Is it possible to achieve this? Allow me to provide more details. Currently, when

    • Kaizen #125 Manipulating Multi-Select Lookup fields (MxN) using Zoho CRM APIs

      Hello everyone! Welcome back to another week of Kaizen. In last week's post in the Kaizen series, we discussed how subforms work in Zoho CRM and how to manipulate subform data using Zoho CRM APIs. In this post, we will discuss how to manipulate a multi-select

    • [Bug] WebAuthn passkey registration blocked on rpIds with TLDs longer than 6 characters (.accountant, .technology, etc.) — isValidDomain regex too strict

      Hi, Filing on behalf of an enterprise customer where Zoho Vault is deployed across the company. The Chrome extension blocks WebAuthn passkey registration on legitimate sites whose Relying Party ID (rpId) has a TLD longer than 6 letters. This affects every

    • Celebrating the businesses behind Bigin: Customer Awards 2026

      Hello Biginners, We're excited to announce the very first Bigin Customer Awards! If Bigin has played a role in your organization's journey, we'd love to hear about it. Share your story for a chance to be recognized among the best Bigin users across industries.

    • Client Script Button in Related List become invalid

      Hi, I am the admin of our organization. And I setup a client script button in related list to raise payment refund request While this button become non selectable recently. I believe there is something wrong from zoho as this button had run for a year.

    • Send Email Directly to Channel

      Hi, We are coming from Slack. In Slack each channel has a unique Email address that you can send emails too. I currently forward a specific type of email from my Gmail InBox directly do this channel for Verification Codes so my team doesn't have to ask

    • Zoho Desk: Auto-resizing of the "Description" textarea when creating a ticket.

      I would like to suggest an improvement for Zoho Desk regarding the Auto-Height-Resizing for Description field on the “Create a Ticket” page. It would be highly beneficial if the editor supported auto-resize functionality, allowing it to adjust dynamically

    • [URGENT] Cannot access Functions tab in CRM

      Navigating to /settings/functions/myFunctions gives this error message: "Sorry, something went wrong. Please try again later." I raised this issue with Zoho Support on Monday (3 days ago) but have not heard back. I'm sure it's clear how important it is

    • Not able to see appointements when the territory permission is activated

      Hello, I created different territories to separate the various departments within the company that will be working on different projects. The issue I am currently experiencing is that when I enable territory-based permissions, I can see the work order

    • Accepting Event from Outlook Client

      I've noticed this behavior for a few years now. If an Event is created from CRM and sent to participants and the participant accepts the invitation using Outlook client, Zoho event won't be updated as "Going" it only works if the recipient accepts it

    • Is there an API endpoint to retrieve the remaining email credit balance?

      Hi everyone, Is there any way to retrieve the remaining email credit balance programmatically through the API? I've gone through the full API documentation and it seems like there's no endpoint for this — everything related to credits is only visible

    • Switch between multiple LLMs instantly for tailored Zia experiences

      Availability Editions: Professional , Enterprise, Ultimate , CRMPlus , ZohoOne Release Plan: Available for all DCs Hello everyone, Previously, the multi-LLM feature supported only one LLM at a time for Zia Record Assistant, which restricted users' flexibility

    • Zoho CRM Community Digest - April 2026 | Part 2

      Hello Everyone! We're back with Part 2 of the April Zoho CRM Community Digest to wrap up our monthly roundup. This week, the spotlight is on smart database connections, proactive error tracking, and optimizing subform line items without breaking your

    • 【西日本初開催】「AI and DX Summit 2026」のご案内

      ユーザーの皆さま、こんにちは！ 西日本初開催となるZoho ユーザー / 検討中の方々向けイベントのご紹介です。 AI・DX大型カンファレンス「AI and DX Summit 2026」を、2026年7月16日（木）に開催します。 会場は、ウォルドーフ・アストリア大阪。 グラングリーン大阪直結のラグジュアリーな空間で、AIとDXの最新トレンド、実践事例、 展示、ネットワーキングが集結する、特別な1日をお届けします。 👉イベントページを見る ━━━━━━━━━━━━━━━ AIとDXの“今”を、体感。

    • Zoho Desk MCP doesn't expose all functions

      Hello, I'd like to be able to draft (rather than send) ticket replies using Claude Cowork. However, the Zoho Desk MCP doesn't currently offer that, despite it being available in the API (https://desk.zoho.com/DeskAPIDocument#Threads#Threads_DraftEmailReply).

    • Stop by and explore our six updates in ABM for Zoho CRM

      Dear Customers, We hope you're well! ABM for Zoho CRM is built to sharpen your database so that you engage with the right set of customer accounts. To fine-tune it further, we have six new updates: New access location for ABM Refined account entry criteria

    • Next Page