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

    • test environment

      Hello, we want to know if Zho expense has test environment to set up new rules etc.

    • Bank Feeds

      Since Friday my bank feeds wont work. I have refreshed feeds, deactivate and reactivate and nothing is working

    • Using Email Triggers on Zoho Flow

      Hello, I'm sending the email to create the variables as this article says: https://help.zoho.com/portal/en/kb/flow/user-guide/create-a-flow/articles/email-trigger#How_email_trigger_works But the collection of the variables only seems to work when the

    • How can I transfer data from Production to Development environment?

      Hi, I am using Creator V6 and would like to bring all the data in production to the Development and Testing environments? Is there an easy way of doing that or I have to export and import each table?

    • Zoho Analytics: Clarification on Email Schedule Limits in Basic Plan

      Hi Team, I have a question regarding the email scheduling limits in the Zoho Analytics Basic Plan. The plan shows that I can create 4 email schedules. However, I understand that schedule consumption is calculated based on recipients (i.e., 1 schedule

    • Exporting All Custom Functions in ZohoCRM

      Hello, All I've been looking for a way to keep about 30 functions that I have written in Zoho CRM updated in my own repository to use elsewhere in other instances. A github integration would be great, but a way to export all custom functions or any way

    • Printing invoices using templates

      Hello. I have a sales application and i need to print invoices, delivery ntoes etc and i'm trying to use the record template feature which allow you to use all of the fields from a report. My question is how do i make calculated fields which are not in

    • Zoho 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 to

    • 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

    • Plug Sample #15 - Enable Human-Like, Contextual Interactions in SalesIQ with Zia Agents

      Zia Agents are conversational AI assistants designed to understand user intent and respond intelligently, helping businesses automate conversations and offer personalized support at scale. While Zia Agents are yet to be publicly released, access is currently

    • 【Zoho CRM】キオスク機能のアップデート

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 Zoho CRMのキオスク機能のアップデートを紹介します。これまで以上に柔軟性が増し、データ処理が高速化されたことで、リアルタイムのデータ取得が可能になりました。 目次 クライアントスクリプトで、キオスクをどこからでも起動が可能に 新規データ作成処理を使用してキオスク実行中にデータをリアルタイムで取得 データ取得画面における新しい機能強化 1. クライアントスクリプトで、キオスクをどこからでも起動が可能に キオスク向けクライアントスクリプトのサポート（第一段階）がリリースされました。これにより、Zoho

    • Re: Application Architecture in Zoho Creator — A Platform-Specific Deep Dive

      A recent community post on application architecture made some excellent points about planning architecture early in Zoho Creator projects. The core message is right — Creator applications have a habit of growing organically into maintenance nightmares,

    • Introducing 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 simplifying

    • Standard view for every agent

      Hello there, I am facing the following challenge. I would like to provide a standardised view for all agents. This view should not be editable by the user. It would be nice for the users if the tickets were divided into columns (like prio work mode).

    • Mapping a new Ticket in Zoho Desk to an Account or Deal in Zoho CRM manually

      Is there any way for me to map an existing ticket in Zoho desk to an account or Deal within Zoho CRM? Sometimes people use different email to put in a ticket than the one that we have in the CRM, but it's still the same person. We would like to be able

    • Create a Custom view that displays the current signed on support reps Tickets

      Is there a way to create a custom view that has criteria that says Ticket Owner = [Current Signed on Support rep]?

    • Trying 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]

    • Zoho Desk - Trial Extension Error - Insufficient Privileges to perform this operation. Contact your Administrator.

      Zoho Desk - Trial Extension Error - "Insufficient Privileges to perform this operation. Contact your Administrator." I am receiving this error above when trying to extend my trial, and I am the Administrator. Please advise on how to bypass.

    • filter on sheets mobile (iOS, iPadOS) does not work

      re-posting this as a question because reporting as a problem netted zero responses... I have this issue on every spreadsheet, whether imported or created natively in Zoho Sheets. I can use on desktop without issue: but on iOS the filter dropdowns are

    • Creating packages according to actual shipping processes

      Hi community. I would like to ask a question to see if there's a better method or workflow for the creation of packages in Zoho Inventory. There is a little confusion in some of Zoho's language relating to the use of term Packing Slip when connected to

    • Announcing Zoho Sheet desktop app for macOS and Windows (Beta)

      Hello Sheet users, We know you’ve been waiting for this one. It has always been the top priority on our roadmap to provide a single native desktop app for macOS and Windows that works both online and offline. Today, we are excited to announce that the

    • Business Day Logic Update: More Accurate Scheduling for Your Workflows

      Hello everyone, We’re improving how business-day calculations work in workflows, especially when triggers happen on weekends. This update ensures that offsets like +0, +1, and +2 business days behave exactly as intended, giving you clearer and more predictable

    • Territories as filters

      The territory function within the CRM is great for controlling record access and managing a sales organization however, territories are not available as a filter options within the CRM when creating reports or dashboard components. Adding the ability

    • What'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 webinar

    • Payment Card or Identity form-fill from Vault?

      Hello! I'm working on replacing Bitwarden with Vault and one issue I've run into is that I can't find any option to fill address and payment forms from Payment Card or Identity info that has been saved in Vault. Is there a way to do this? Is it a planned

    • Query 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 submit

    • Merging Photos from Subforms into Writer

      I've got a subform that contains uploadable photos. Im trying to merge them into a template but there is no option to pull them in. Is this possible? We are creating an inspection module where we can take photos and make notes and export to a report.

    • Add Unified Project-Wide Development & Release GitHub Dashboard

      Hi Zoho Projects Team, I am writing to submit a feature request for a Unified Development & Release GitHub Dashboard that provides centralized GitHub visibility at both the Project and Milestone levels. The Vision: We need a single "Command Center" that

    • RouteIQ user Licensefor Non–Zoho One User

      Zoho RouteIQ needs to be purchased for Zoho CRM. The current setup uses the Zoho One plan, but RouteIQ is required for a different user who is not part of Zoho One. However, they need access to routes and customer details within RouteIQ for planning their

    • Private Contacts & Tasks

      What is the timeframe for being able to filter Activities and Contacts from being viewed by the rest of my team? I sync with Outlook and the ability to create a task that is private would be of great help. I have to take my dog to the vet this morning and because I put it in my Outlook calendar, now my whole team is aware of it because I had no way to mark it "private" in zoho. A simple checkbox would be great! I would be more than happy to provide examples of how ACT does this. For each event or

    • Cross Module Filtering – Use Fields from Lookup modules in Custom Views criteria and Advanced Filters

      Hello everyone, Zoho CRM now enables you to achieve deeper filtering of records in a module, using fields of a lookup, thereby enhancing your data management experience manifold. This filtering based on lookup module fields is now available in advanced

    • Super 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 working

    • WhatsApp Calling Integration via Zoho Desk

      Dear Zoho Desk Team, I would like to request a feature that allows users to call WhatsApp numbers directly via Zoho Desk. This integration would enable sending and receiving calls to and from WhatsApp numbers over the internet, without the need for traditional

    • Update to CRM Custom Buttons: Collect Users' Location

      Hello everyone! Buttons in Zoho CRM allow you to extend the default CRM capabilities for your bespoke business needs. It provides the flexibility to connect to any third-party application to perform necessary actions. Wouldn't it be better, if those buttons

    • Sum over

      Hi, Is there an equivalent in Zoho (Aggregated Formula) to SQL’s SUM() OVER (PARTITION BY ...)? I’m looking for a way to calculate a sum within a group (partition) without collapsing the data, so that the result is still available at the row level. Has

    • Api 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 week

    • Is it possible to clone my Lead module layout to Customer and Potential layouts?

      I've customized all fields and their order for Leads module and I would like to know if I'm able to clone those fields into another modules, only to avoid repeated work. Awaiting.

    • Invoice 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's

    • DYK 2 - Filter Columns in List View

      Did You Know you could filter columns across lists in Zoho Projects ? This allows you to quickly narrow down large datasets without navigating to the filter panel from time to time, making it easier to focus on what matters right from where you are working.

    • Sync Enable issue Between Zoho FSM and Invoice

      Hello Latha, I hope you are doing well. I am trying to enable synchronization between Zoho FSM (Org ID: 170000078905) and Zoho Invoice (Org ID: 170000079301). However, when I attempt to do so, I receive an “Internal error” message. Could you please assist

    • Next Page