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 #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

    • Kaizen #152 - Client Script Support for the new Canvas Record Forms

      Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved

    • Recent Topics

    • Shift-Centric View for Assigning and Managing Shifts in Zoho People

      Hello Zoho People Product Team, Greetings and hope you are doing well. This feature request is related to Zoho People - please don't move it to zoho one! We would like to submit a feature request regarding the shift assignment and management view in Zoho

    • Zoho Sheet for Desktop

      Does Zoho plans to develop a Desktop version of Sheet that installs on the computer like was done with Writer?

    • Client Script | Update - Client Script Support For Custom Buttons

      Hello everyone! We are excited to announce one of the most requested features - Client Script support for Custom Buttons. This enhancement lets you run custom logic on button actions, giving you greater flexibility and control over your user interactions.

    • Introducing parent-child ticketing in Zoho Desk [Early access]

      Hello Zoho Desk users! We have introduced the parent-child ticketing system to help customer service teams ensure efficient resolution of issues involving multiple, related tickets. You can now combine repetitive and interconnected tickets into parent-child

    • cant upload images in signature- urgent help needed. ta!

      HI, I have been trying to insert the company logo in the signature. i have tried it several times since yesterday, the longest I waited was 1 hour and 12 minutes for the pop up window to upload a 180 KB .jpg file. what am i doing wrong.. an urgent reply

    • What is Resolution Time in Business Hours

      HI, What is the formula used to find the total time spent by an agent on a particular ticket? How is Resolution Time in Business Hours calculated in Zohodesk? As we need to find out the time spent on the ticket's solution by an agent we seek your assistance

    • Add Ticket button in Home view

      When I go to the My Tickets or the Knowledge Base view in our Help Centre, the Add Ticket button is available, but not in the Home view. I would really like for it to be displayed in the Home view as well. Is this possible? Thanks.

    • Problem using Zoho Desk API

      Goodmorning, I am trying to use the Zoho Desk API to create a dashboard in Grafana, but I am having a problem. Following the instructions in the API documentation, I created the API Console application (server-based application). Then I created the string

    • WhatsApp IM in Zoho Desk always routes to Admin instead of assigned agent

      Hello Zoho Experts, I connected WhatsApp IM to my Zoho Desk account. I only assigned my Customer Service (CS) agent to the WhatsApp channel, and I did NOT include Admin in this channel. However, every new WhatsApp conversation automatically gets assigned

    • Add zoho calendar to google calendar

      Hi I keep seeing instructions on how to sync Zoho CRM calendar with google calendar but no instructions on how to view Zoho calendar in my google calendar.

    • City field suggestion in Zoho Books

      Hi team, We are using Customers module in Zoho Books. In the Address section, we want to understand whether the City field can show suggestions while typing using any API or built-in feature. For example, if a user types “Mum”, can the system suggest

    • Resolution Time Report

      From data to decisions: A deep dive into ticketing system reports What are time-based reports? Time-based reports are valuable tools that help us understand how well things are going by breaking down key metrics over specific periods. By tracking, measuring,

    • Non-responsive views in Mobile Browser (iPad)

      Has anyone noticed that the creator applications when viewed in a mobile browser (iPad) lost its responsiveness? It now appears very small font size and need to zoom into to read contents. Obviously this make use by field staff quite difficult. This is not at all a good move, as lots of my users are depending on accessing the app in mobile devices (iPads), and very challenging and frustrating. 

    • How can I check all announce?

      Hiii, May I ask how can I check all the announce based on broadcast date instead of reply date based So that I will not will miss out any new function

    • LESS_THAN_MIN_OCCURANCE - code 2945

      Hi I'm trying to post a customer record to creator API and getting this error message. So cryptic. Can someone please help? Thanks Varun

    • How to apply customized Zoho Crm Home Page to all users?

      I have tried to study manuals and play with Zoho CRM but haven't found a way how to apply customized Zoho CRM Home Page as a (default) home page for other CRM users.. How that can be done, if possible? - kipi Moderation Update: Currently, each user has

    • CRM limit reached: only 2 subforms can be created

      we recently stumbled upon a limit of 2 subforms per module. while we found a workaround on this occasion, only 2 subforms can be quite limiting in an enterprise setting. @Anonymous User I've read about imminent increase of other components (e.

    • What are the create bill API line item requiered fields

      While the following documentation says that the line items array is requiered it doesn't say what if any files are requiered in the array. Does anyone know? API documentation: https://www.zoho.com/inventory/api/v1/bills/#create-a-bill I'm trying to add

    • How to print a label from zoho creator app?

      Hello, I would like to print a label from zoho creator app record similar to attached one. Size 74mm x 102mm. I tried record template. It leaves plenty of space around the content and also I couldn't set the height of the page. So it is not printing properly. Could someone please direct me to right direction for this requirement?

    • Let us view and export the full price books data from CRM

      I quote out of CRM, some of my clients have specialised pricing for specific products - therefore we use Price Books to manage these special prices. I can only see the breakdown of the products listed in the price book and the specialised pricing for

    • Function #53: Transaction Level Profitability for Invoices

      Hello everyone, and welcome back to our series! We have previously provided custom functions for calculating the profitability of a quote and a sales order. There may be instances where the invoice may differ from its corresponding quote or sales order.

    • Remove Powered by Zoho at the footer

      Hi, I've read two past tickets regarding this but it seems that the instructions given are outdated. I assume the layout keeps on changing, which makes it frustrating for me to search high and low. Please let me know how exactly do I do this now? Th

    • local file csv import problem

      The issue occurs when I upload a CSV file via Databridge. In the preview, everything looks correct — the values are in the proper columns. However, after clicking Import, the first column becomes empty, and the values from that column appear in a new

    • Emails are going to notification folder and not in inbox

      emails are going to notification folder and not into inbox

    • Optimising CRM-Projects workflows to manage requests, using Forms as an intermediary

      Is it possible to create a workflow between three apps with traceability between them all? We send information from Zoho CRM Deals over to Zoho Projects for project management and execution. We have used a lookup of sorts to create tasks in the past,

    • This domain is not allowed to add. Please contact support-as@zohocorp.com for further details

      I am trying to setup the free version of Zoho Mail. When I tried to add my domain, theselfreunion.com I got the error message that is the subject of this Topic. I've read your other community forum topics, and this is NOT a free domain. So what is the

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

      Hello, Just signed up to ZOHO on a friend's recommendation. Got the TXT part (verified my domain), but whenever I try to add ANY user, I get the error: This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details I have emailed as well and writing here as well because when I searched, I saw many people faced the same issue and instead of email, they got a faster response here. My domain is: raisingreaderspk . com Hope this can be resolved.  Thank you

    • Cannot connect to imap.zoho.eu on iOS26

      Hey, I recently migrated to another iPhone and since then use iOS26. Every since then, I was not able to connect to "imap.zoho.eu" from Apple Mail. I tried deleting the account and adding it again, did not work. I tried creating an app password, didn't

    • Personalize your booking pages with Custom CSS

      Greetings from the Zoho Bookings team! We’re introducing Custom CSS for Zoho Bookings, designed to give you complete control over the look and feel of your booking pages. With this new feature, you can upload your own CSS file to customize colors, fonts,

    • Customer address in Zoho Bookings

      Hello,  Is it possible to add customer address information to the Zoho bookings appointment screen? Or have it pull that information automatically from the CRM? We are wanting to use this as a field management software but it is difficult to pull the address from multiple sources when it would be ideal to have a clickable address on the appointment screen that opens up the user's maps.  It would also be advantageous for the "list view" to show appointment times instead of just duration and booking

    • Bulk bank rule creatioin

      Hi team, I am exploring Option to create a multiple bank rule. Could please suggest the option to implement this?

    • Marketer's Space: Plan smarter with Zoho Campaigns' Calendar

      Hello Marketers, Welcome to another post! Today, we'll talk about a discreet yet significant feature that's neatly tucked inside Zoho Campaigns: the calendar. It might look like an optional but somewhat unnecessary feature that you can use occasionally,

    • User

      If user is already part of manage engine endpoint central , what hapens when i try to add them to another Zoho org / directory? Are these users added as external users?

    • Add an background image to an email template in CRM

      Hi all, We wants to put an background image behind all our email templates. Is there a way to import this thru html. If i put the option background image in <body style="background-image:...</body> and i look to the preview it shows our background, but

    • Create static subforms in Zoho CRM: streamline data entry with pre-defined values

      Last modified on (9 July, 2025): This feature was available in early access and is currently being rolled out to customers in phases. Currently available for users in the the AU, CA, and SA DCs. It will be enabled for the remaining DCs in the next couple

    • Outlook - Zoho CRM Calendar Integration

      I'm facing an issue integrating Outlook with Zoho CRM. Has anyone successfully connected their Outlook to Zoho, and are all your meetings and emails being captured correctly in the CRM? Any insights or troubleshooting tips would be appreciated

    • Can 1 Zoho CRM instance sync with 2 Zoho Marketing Automation instances?

      Can 1 Zoho CRM instance sync with 2 Zoho Marketing Automation instances?

    • 【Zoho CRM】ポータル機能のアップデート

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中から、ポータル機能のアップデートをご紹介します。 ポータル管理の新機能「自動招待」により、Zoho CRMからポータルへの招待を自動化できるようになりました。これまで必要だった、ユーザーごとの手動設定は不要になります。設定した条件に基づいて、対象ユーザーに自動で招待が送信されます。 ポータルの新機能 条件に基づく自動招待：指定した条件を満たすユーザーに、自動で招待を送信 招待設定：招待メールの言語を選択し、言語ごとに条件を設定可能

    • Zoho email

      I need a list of email addresses of all contacts on my zoho

    • Contact data removes Account data when creating a quote

      Hi, Our customer has address fields in their quote layout which should be the address of the Account. They prefill the information, adding the account name - the address data is populated as per what is in the account - great. However when they then add

    • Next Page