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

      • How to Open Google Takeout and Thunderbird MBOX Files?

        MBOX files are used by email clients and services, such as Google Takeout and Mozilla Thunderbird, to store email messages. It can, however, be difficult to open such files if you don't have an email programme that is compatible. Google Takeout enables

      • Convert MBOX to PDF Free on Mac and Windows

        MBOX files are widely used for storing email messages in email clients such as Thunderbird, Apple Mail, and other programs that support the MBOX format. Although this format is useful for handling emails, it can at times be inconvenient to access the

      • How to Convert Apple Mac Mail to PST for Outlook for Free?

        Apple Mail is a widely used email program among Mac users, but what do you do if you want to transfer your emails to Microsoft Outlook? In such a situation—for example, when you are moving from a Mac to a Windows computer or when you need to use Outlook

      • Cannot apply tags to multiple items at once

        It is very frustrating needing to apply tags to notes individually. Even worse that it takes multiple clicks to do it. Can there please be an update to: 1.) Allow us to apply tags to batches of notes in one go. 2.) Make it less clicks to add a tag 3.)

      • 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,

      • not able to convert pdf to jpg and other forms and vice versa.

        i want to change my pdf to jpg, word, etc and some times jpg to pdf. i don't know how to do in this.

      • Changing an existing item to different accounts & inventory-tracked

        Hi everyone, I have an item in Zoho Books that was originally set up as a non-inventory item. Over time, I associated it with different sales and purchase accounts, and I now have many invoices, bills, and reports that use this item. My business process

      • Address limits per customer by edition

        I’m on the Standard edition and have reached a limit of 30 addresses under a single customer. Before I move to an annual Professional subscription, I need to confirm the following: What is the maximum number of addresses allowed under one contact, and

      • How to Convert Emails to PDF Format in Batch

        It is helpful to convert emails into PDF format when you want to save important messages, when you need to share business correspondence, or when you wish to keep email records for future reference. PDF files can be readily opened, printed, and shared

      • Months of WooCommerce–Zoho Inventory sync failures and repeated support requests – has anyone experienced this?

        Months of WooCommerce–Zoho Inventory sync failures and repeated support requests – has anyone experienced this? I run a small retail business using WooCommerce and Zoho One. For months, I have been trying to resolve recurring synchronisation failures

      • Function #24: Automatically display deal name from Zoho CRM on quotes in Zoho Books

        Deals allow businesses to organize and visualize their sales pipeline. This provides a clear overview of all potential opportunities and helps in making informed decisions. Zoho CRM empowers you to create deals or potentials for your clients and monitor

      • Lookups and Custom Modules

        I created a Custom Module that I'm calling "Item Purchasing Group". This module will store information for groups of Items that must be purchased together (including minimum overall quantities and/or values, etc.). This will have a one-to-many relationship

      • Zoho Books | Product updates | October 2026

        Hello users, October brings a range of new features and enhancements to Zoho Books, designed to simplify compliance, streamline accounting workflows, and improve inventory management. From the launch of the Nigeria Edition and France’s e-invoicing capabilities

      • Create custom rollup summary fields in Zoho CRM

        Hello everyone, In Zoho CRM, rollup summary fields have been essential tools for summarizing data across related records and enabling users to gain quick insights without having to jump across modules. Previously, only predefined summary functions were

      • Button or Links order

        Is there a way to re-order the buttons or links that are created? Moderation Update: With our recent enhancement to custom button creation from the layout editor, administrators can now reorder custom buttons directly from the layout editor, and this

      • Zoho Books | Product updates | August 2026

        Hello users, July has been an exciting month for Zoho Books! This month, we're excited to introduce HTML PDF Templates, Placeholders as Pills, expanded approval workflows for Sales Returns and Journals, and significant compliance updates across the India,

      • Bulk updating tags

        My organisation handles a number of restricted funds. We previously did this by having a chart of accounts where each restricted fund has its own income and expense accounts. However, our accountant changed this, moving all transactions into accounts

      • Download or Backup Bulk Emails from IMAP Server

        Taking email messages from an IMAP server and saving them is a wise method for ensuring that important emails are kept safe and easy to access. No matter whether you have a business email address or a personal mailbox, keeping a local copy of your emails

      • Zoho Writer Label Template Merge/Print Via API/Webhook/Flow

        Short version of goal: To be able to kick off a Zoho Writer Label Template Document via API or Webhook or even using Zoho Flow. As of right now I have been unable to figure out a way to do that. Long version of goal: We would like to press a button (run

      • Kaizen #263: Using Zoho CRM Skill to Build Widgets

        Hello everyone! Welcome back to another exciting Kaizen post. In the previous Kaizen posts, we introduced the zoho-crm skill.md and explored how it can help with Zoho CRM APIs, Client Scripts, complex COQL queries, and Skill to build Queries. In this

      • Zoho notebook No login

        Hello Team, I recently downloaded and installed the latest version of zoho notebook for windows. But I am not able to login without providing any sso or email address. Did you removed the no login feature for this app? This is just a windows app. can

      • Search is completely broken for PC

        I go to note, try to search for "mtga" and it shows 702 results (it's a big note), highlights all letters "m" and I can't find anything. Same for "gathering" - it thinkgs I think only for "g". Looking for "zoho" shows as if I searched only for "z". Using

      • Losing description after merging tickets

        Hello, We merge tickets when they are about the same topic from the same client. It happens sometimes. We recently noticed that after the merger only the description from the master ticket is left in a thread. And the slave-ticket description is erased.

      • Behind a great customer experience is a team

        Hi everyone, October is here, and the first week marks the Customer service week. Each year, we thank our customer service professionals. Service professionals are all around us, even in our own workplaces: They handle essential administrative work like

      • What's New - August and September 2026 | Zoho Backstage

        Hello everyone, August and September bring a fresh wave of intelligence to Zoho Backstage. AI takes the spotlight with tools that help you create content, support attendees, and manage how AI fits into your events. Alongside AI, we’ve refined email communication,

      • Images Not Displaying Properly in Zoho Desk

        Hi, We are experiencing an issue with image rendering in Zoho Desk, affecting both incoming and outgoing emails. Images embedded in email conversations are not displaying properly. Instead, we see broken image icons or empty placeholders where the images

      • 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

      • Widget Height were destroyed

        All widget heights in the Details Canvas view are broken. Moderation Update: This is a known issue with widget heights in Client Script popups and flyouts. A fix is in progress, and this post will be updated once it's released.

      • Zoho Projects - Has something changed regarding to linking Projects and Deals via the API?

        I am trying to link Zoho Projects to Deals in CRM using the API, but each time, the Deal Contact is added as a Client user and receives an email invite asking them to join the organisation. These are internal projects and the customer should not have

      • How long does it take to review campaigns?

        Hello Zoho, i scheduled my campaigns yesterday afternoon and it has been under review for over how many hours and those campaigns were supposed to be out yesterday so new ones can go out today. Is there something i'm doing wrong?

      • Convert MSG to PDF in Bulk with Attachment Free

        Microsoft Outlook saves each email as an MSG file, keeping with it key information like the sender, the recipient, the subject, the date, the body of the message, and any attachments. It can, however, be quite difficult to access a large number of MSG

      • Using Mail Merge Template to Print Documents with One Subform Record's Fields per Document

        Hello, We have a Mail Merge template created in Zoho Writer which is not able to perform the functionality which is currently required to automate the documentation task portion of our process. The CRM module we are primarily using is based on a "Loans"

      • Convert MBOX to PST File Using Free Methods

        MBOX is a mailbox format that is used by various email clients and services, such as Thunderbird, Apple Mail, Eudora, and Google Takeout. Yet, in order to be able to open your MBOX emails in Microsoft Outlook, you have to convert them from MBOX to PST

      • Zoho Community Digest - September 2026 | Part 4

        Hi everyone, and welcome back! The final week of September brought a revamped Books integration in Zoho CRM and Zoho Key Service for LLM access without API keys, Zoho Creator's audit trail becoming a full enterprise-grade auditing system, and Zoho One

      • Automate weekly reports from Channels | Zoho Cliq AI use case #01

        Scrolling endlessly through numerous threads in a Cliq channel and manually counting how many have been closed, how long people took to reply, and who actually participated can be tedious. After 20 minutes, you might have a number that no one can verify.

      • Apple Mail to Outlook Converter - Export Apple Mac Mail to PST File

        Apple Mail is a well-known email application among people who use Macs, whereas Microsoft Outlook is widely employed for both personal and business use. Should you decide to move from Apple Mail to Outlook, you'll probably need to transfer your mailbox

      • Creator -Dynamic addition of Customer Portal User Licenses

        Hi, We have a Creator App for B2C about to get released. We are experiencing the Portal User license challenge. Unable to predict the number of users who will download and Subscribe. When a User is about Subscribe and the portal licenses does not exists,

      • Zoho Tables is now part of Zoho One!

        Hey everyone! We've got some exciting news to share. Zoho Tables is now included in your Zoho One subscription at no extra cost. If you're already on Zoho One, head to your app list, add Zoho Tables, and get started right away. You don't need a separate

      • 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

      • [Webinar] Zoho CommunitySpaces MCP

        New to MCP, or just exploring what's possible? Join us for a webinar on Zoho MCP and your community. We'll show you how Zoho CommunitySpaces and Zoho MCP work together, what your AI co-host can do inside your community, and how to get started. Register

      • Next Page