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

    • Announcing the new SKILL.md for Zoho CRM and the updated OAS repository!

      We are introducing a new zoho-crm skill to make working with Zoho CRM Developer tools (like APIs, functions, widgets, client scripts, queries etc) easier and faster, with the help of AI in your preferred AI harness like Claude Code, Codex, Cursor, VSCode

    • Kaizen #261 : Using Zoho CRM Skill to generate complex COQL queries

      Hello everyone, In the previous Kaizen posts, we introduced the zoho-crm SKILL.md and discussed how it can help you when you are working with Zoho CRM APIs and Client Script. In this Kaizen, we will focus on using the Zoho CRM `SKILL.md` with GitHub Copilot

    • Kaizen #256 - Build an Arrival Readiness Web Tab in Zoho CRM

      Hi everyone! Welcome back to the Kaizen series! In the post, we discuss a use case in hospitality industry: how an Arrival Readiness web tab widget can be used to let reception staff identify and resolve issues before arrival of guests. Use case In the

    • 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

    • Recent Topics

    • UCP: Why We Killed the Multi-Portal Mess and Simplified Customer Self-Service

      Let's talk about the multi-portal mess nobody wants to admit that it exists. Your customer needs an invoice from one app, wants a ticket update from another, and has a project waiting in a third, each behind its own login, its own UI, its own "was it

    • Object-level edit permissions

      Hi, we are currently running into a limitation with permissions inside larger workspaces. Our use case is a central Analytics workspace that contains many tables, Query Tables, reports and dashboards used by different teams. We would like to allow certain

    • inventory removal at packing list or shipment.

      currently our system is set to remove inventory at invoice. This is creating an inventory nightmare? Is it possible to change the settings to remove the item from inventory at either the packing slip stage or shipping the item.

    • Item description is not displayed

      I added the item description while importing the new item through the bulk item Excel sheet, and the import was completed successfully. However, I cannot see the description in the item details under Inventory. Could anyone please advise how to make the

    • Shared inbox unable to see replies

      Hi we are a small company me and someone else, we have a shared inbox for our sale@ and contact@ however we have this issue where by if i reply to an email or the other person reply to the email, it does not show it to them and therefore we end up replying

    • Record Payment - Auto Populate Amount as payments are selected

      When recording payments you have the option of clicking on "Pay in Full" next to the bill which automatically adds the total at the bottom of the page next to "Amount used for payments" but this should also auto populate / update the total at the top

    • Can't set conditional layout rule on lookup field in Zoho CRM

      Namaskaram Zoho CRM team, Usually any fields of module except mandatory fields can be hide using conditional layout rules. But that can't be set on lookup fields event that is not a mandatory fields. Many users are in need of that. Crafted with ❤️ Zoho

    • [Request] Pivot filter date option : from set date to relative value ie from 01Jan to LastMonth

      I don't think I can currently do this... but it's worth asking if it's possible. My use case is concerning annual leave which is calculated from the beginning of the calendar year (01Jan) then each month I want to have details of leave taken etc... In

    • Need to be able to apply layout rules to 'Multi Pick List'

      Currently, we are unable to apply layout rules to fields that are 'Multi Pick List'. This means we have to instead use checkbox fields, but they are inefficient. For example, we use the Multi Pick List to list our products. However, we're unable to apply

    • Announcing the new SKILL.md for Zoho CRM and the updated OAS repository!

      We are introducing a new zoho-crm skill to make working with Zoho CRM Developer tools (like APIs, functions, widgets, client scripts, queries etc) easier and faster, with the help of AI in your preferred AI harness like Claude Code, Codex, Cursor, VSCode

    • My "trigger" panel disappear from my workflow ...

      Hello, I want to add a trigger to an email sequence, but the "trigger" panel has disappeared when I want to modify ...I used a predefined template to create this sequence, is that because of that? Thank you. I have attached a screenshot to you

    • Workflow Automation Not Triggering

      My Zoho CRM workflow sometimes doesn’t trigger when a record is updated, even though the workflow criteria appear to be met. What should I check to find out why the workflow is being skipped?

    • How can I add a Custom Field (or Customer_name) to a picklist?

      Our workflow is Shopify-->SO -->Picklist-->Package-->Shipment. We would like to have the Picklist template to include a custom field "Customer_Notes" (we have created this field already). This way we get alerted when a customer has notes on their account.

    • AI Calling

      Hi, does anyone have experience or any thoughts on AI Calling. Getting AI to make calls on behalf of your company. We are looking into it, but are finding it difficult to get info and providers that can assist.

    • Zoho Sheet as KB Document

      It would be nice if Zia Agents could take Zoho Sheets as part of the knowledge base. The use case here is that it's infinitely easier for humans to maintain a spreadsheet table than any .md / TAML / JSON document. For situations where humans are responsible

    • Ask the Experts: Five-hour live Q&A session with Zoho WorkDrive product experts

      Have questions about WorkDrive 5.0? Let’s talk! We recently launched Zoho WorkDrive 5.0, packed with powerful updates to help your team work smarter, stay secure, and get more value from your business content. From content-centric workflows and AI-powered

    • Automating CRM backup storage?

      Hi there, We've recently set up automatic backups for our Zoho CRM account. We were hoping that the backup functionality would not require any manual work on our end, but it seems that we are always required to download the backups ourselves, store them,

    • Zoho Community Digest - September 2026 | Part 3

      Hi everyone, and welcome back! Zoho CRM launches PRM for partner management, Bigin builds this year's Apple AI updates into the app, and Snapchat is now a connected channel in Zoho Social. There are also three notices worth reading, including WhatsApp

    • Change from OST to PST on Windows 10/11 Using Free Method

      There is an advantage in converting OST files to PST format if you need to access your Outlook data on a different computer, want to keep a local copy, or are trying to recover items from an old Outlook profile. The good point is that users of Windows

    • ERROR: This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details

      I can add new user for mail, i received message error about; This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details Try creating user name; instagram@eficaztecnologia.com.br

    • Support for Custom Fonts in Zoho Recruit Career Site and Candidate Portal

      Dear Zoho Recruit Team, I hope you're doing well. We would like to request the ability to use custom fonts in the Zoho Recruit Career Site and Candidate Portal. Currently only the default fonts (Roboto, Lato, and Montserrat) are available. While these

    • Ability to filter services and parts based on a field in the Work Order

      Hell FSM team, We have a customer with 2 value streams using Zoho FSM. Each value stream uses different products, at different price point. Currently, all of the products are accessible when creating a work order and modifying a service appointment, which

    • SubTotaks for Item Headers in Estimates

      Hi, Apparently, one can add Item Headers in Estimates in Zoho Books. Is this feature like an Estimate section with a SubTotals for each Item Header/Section? Or is the Item Header just a Title and cannot be SubTotalized? Thank You

    • Sync of products and orders between Zoho Inventory, Zoho Books and Shopify

      Good Day I migrated from QuickBooks to Zoho Books and Zoho Inventory at the beginning of this year. The migration team assisted with importing my data, but I am currently experiencing multiple issues affecting syncing between Shopify and Zoho. 1. SKU

    • Best practices for importing phone numbers

      I've recently found a problem with my phone provider, integrated with Zoho CRM, where a phone number that starts with 00 instead of + won't work. The problem has no solution: they tell me to replace all 00 with + I've always preferred using 00 instead

    • Copy + Paste in Notes: Text color and text background are not retained

      I've recently started using Zoho Notebook as an Evernote replacement. When copying and pasting text within Zoho Notes, I notice that the formatting of the text (text color and background color) is not retained when pasting. Only the attributes "Bold"

    • 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

    • MAKING ENTRY TIME MORE USER FRIENDLY AND FASTER O PREVENT TAB TIME

      I AM CURIOUS TO KNOW IF WE CAN MAKE IT MORE USER FRIENDLY WHILE MAKING BILLS , I MAJORLY USE OVER DESKTOP SO I AM SUGGESTING TO REMOVE TAB TIME WHILE ENTERING BILL OR MAKING INVOICE DIRECT JUMP TO ONLY REGULAR PARTS OF THE BILL . YOURS RAKESH 782866

    • Email Forwarding to Zoho Desk Failing After Migration from Gmail to Outlook (Microsoft)

      We recently migrated from Gmail to Microsoft Outlook. Since the migration date, emails sent by our customers are no longer being received by Zoho Desk. I tried setting up the email forwarding rules in Outlook similar to what we had in Gmail, but it still

    • Shopify B2B Integration: Option to Match Customers by Company Name

      It would be great if the Shopify integration could include Company Name as a customer matching option. At the moment customers can only be matched by: Email Name Email and Name Phone For businesses using Shopify B2B, the company is often the customer

    • How does Zoho handle the daylight savings time change in Alberta?

      Alberta has just made the decision to get rid of daylight savings. This means that as of November 1, 2026 we remain on UTC-6 year-round. We have timing errors in meetings scheduled after that For example, we scheduled meetings in late November at 9:00

    • Free Methods to Convert PST to MBOX on Mac & Windows

      Converting PST files to MBOX is often needed when moving Outlook mailbox data to email clients such as Thunderbird, Apple Mail, or other MBOX-supported applications. The process can be different on Windows and macOS, and free methods may involve several

    • Zoho Payroll: Product Updates - Q3, FY2026

      Over the past quarter, Zoho Payroll has added several updates to make payroll easier to process, configure, and manage. The most notable improvements cover bank integrations, reimbursement support, payslip enhancements, employee exit documentation, payroll

    • Print checks for owner's draw

      Hi.  Can I use Zoho check printing for draws to Owner's Equity?  This may be a specific case of the missing Pay expenses via Check feature.  If it's not available, are there plans to add this feature?

    • Deliver exceptional customer experience with Field Service Management in Zoho Service Plus

      The advent of automation and personalization in the AI era has raised customer expectations exponentially for faster resolution of issues with less tolerance to friction in the process. Fast, accurate, and intelligent service that understands customer

    • Zoho Extensions 101: Building extensions for Zoho People

      Hello developers! Welcome to our new video series on building extensions for Zoho People! If you're new to extension development or looking for guidance on building extensions for Zoho People, you're in the right place. We've curated a series of videos

    • Build A Happier Workforce With Zoho People

      The success of an organization depends on its people. Therefore, a comprehensive and cloud-based HRMS software is an integral part of the IT ecosystem for the business. With a wide number of key modules to define the structure of an organization, manage

    • How to import PST files in Office 365?

      You can import PST files into Office 365 using native Outlook applications, the Microsoft Purview network upload method, or specialized third-party migration tools. Choosing the right method depends on whether you are migrating a single mailbox or executing

    • Project Change Orders and Additions

      We are in the process of migrating from QuickBooks Online to Zoho Books. We have Zoho One and like the ability to sync all of our data across everything. And I like that projects work in a way that's less dumb than QuickBooks. I'm trying to figure out

    • Support Recording Payments in a Different Currency Than the Invoice Currency

      We would like to request the implementation of a feature that allows users to record customer payments in a currency different from the currency of the original invoice. Current Limitation in Zoho Books Currently, if an invoice is issued in USD, Zoho

    • Next Page