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

    Nederlandse Hulpbronnen


      • Recent Topics

      • Enroll, Script, Win: Hackathon 2025!

        Hello CRM Developers! Are you ready to create some magic with Client Script, Widgets and Functions in Zoho CRM? Let’s make Hackathon 2025 an unforgettable adventure! The Zoho Developer Community Hackathon 2025 is here, and it’s your time to shine! REGISTER
      • Zoho Help Desk - Not receiving emails

        Hello… I am on your trial version of help desk… and I am having trouble getting emails from Zoho Help Desk to my MS Outlook Exchange Server… So when a customer sends ticket request I am not getting an email with a notification? I have read your articles
      • Almost all Flows are being queued

        A few days ago I saw one of my Flows status was Queued. This was the first time this had ever happened. Now, almost every Flow that triggers is Queued for at least a few minutes. If I re-trigger the Flow (which causes separate problems) they sometimes
      • Employment Contract / HRMS Documents - Zoho People

        How do I create customized HR documents for disbursal from Zoho People ? Example, say offer letters ? appointment letters ? Memos ? We want to be able to preset these in one or ther other form and issue them to employees who are in Zoho People.
      • Live webinar: Craft and deliver impactful slides with Show’s desktop apps

        If you love the comfort of working on your desktop and want a setup that keeps you focused and uninterrupted, this session is made for you. We’re excited to invite you to our upcoming live webinar: "Craft and deliver impactful slides with Show's desktop
      • Enhancements to Bigin's forms

        Greetings, I hope all of you are doing well. We're happy to announce a few recent enhancements we've made to Bigin's forms. We'll go over each one in detail. Merge field support in auto-filled forms The auto-fill option in Bigin's forms lets you predefine
      • Direct link to Record Summary

        Hi everyone, In one of my reports, I have built a Record Summary template to display the details of one record. I would like to be able to link directly to this Record Summary once I submit a new record, without having to go to the list of records first and click on View. Is there a possibility to do so ?  Should I use the URL by passing some parameters ? Thank you very much for your help ! Guillaume
      • Amendment effective date

        Hi everyone, I noticed that the amendment effective date mentionned in my amendment is not right. Indeed, when a contract is amended several times, it states the previous amendment and their effective date. However, the effective date stated is always
      • Show both Vendor and Customers in contact statement

        Dear Sir, some companies like us working with companies as Vendor and Customers too !!! it mean we send invoice and also receive bill from them , so we need our all amount in one place , but in contact statement , is separate it as Vendor and Customer, 
      • STOCK history in zohosheets

        is it possible to get historical stock value using stock function in zoho sheets? i could not see from and to period in the helper document.
      • Agent password reset

        Hi Zoho support, I would like to ask if there is a way the admin can reset a password of an agent? Regards
      • Can receive but not send messages in Zoho Mail

        Hello! I was able to configure my email client successfully in that I can receive messages just fine. However, when I send messages out, they seem to go out fine (I don't receive any errors or anything), but the recipient does NOT receive those messages.
      • Mail is sent twice!

        Been using Zoho for a while now. Installed Zoho for someone else and some weird things are happening. Mails are being sent twice. He is using Thunderbird as an email client. I already read about email being duplicated in the sent folder. But in my case
      • Can't login IMAP suddenly

        Since this evening I'm getting the error: You are yet to enable IMAP for your account. Please contact your administrator... IMAP always been enabled in my account and was workign fine for the past 7 years. Already tried turning IMAP off and on again.
      • Sending of username did not succeed: Mail server pop.zoho.com responded: User already specified

        I am having issues receiving emails from Zoho in Thunderbird. I am getting the above error. The first error tells me Authentication failed, and prompts me to enter in my password. Then I get the above error. I can receive emails when I log in online to
      • Bug tracking

        Hi, does anyone know how to track errors during picking or packing? This way I can keep track and see how to improve and prevent errors in this area.
      • Migration of corporate mail environment from Yandex 360 to Zoho mail

        I have to migrate a corporate mail environment with an existing domain from Yandex 360 to Zoho mail. It is vital to migrate all users with all the data. I have read the article on this topic using MacMister Email Backup Software just now and have some
      • I'm unable to send mail pthrough Zoho SMTP programmatically

        This has been working for years, but today it's been offline all day long. I see nothing anywhere on your site about this. I'm not the only one experiencing this. Downdetector has a spike of reports today
      • Can no longer send email via Django site

        This was working fine as of 11/7/25. Now I am unable to send user verification emails from a Django site on a AWS lightsail sever. When a user attempts to register the following error occurs. I have also attempted to send a test email via the shell and
      • unable to send email but able to receive email

        my email address is info@securityforceservices.ca
      • Login to server failing

        When trying to retrieve my mail, I am getting this error message -- Login to server pop.zoho.com with username (my email address) failed. It gives me the option to retry, enter password, or cancel. Then I get this message -- Sending of username did not
      • Configuration failed: 200 response not received for POST request.

        Hello, I am trying to set up a webhook to connect with an Salesforce but I receive the following error from Zoho: Configuration failed: 200 response not received for POST request I have tried testing it on webhook.site as well and receive the same error
      • Zoho Migration Assistant not working

        Hello, I am trying to use you Migration assistant to migrate emails from Rediff to Zoho. I am stuck in the first step. After downloading the migration tool, I copied the link to verify user credentials, however, after pasting the link in the browser,
      • Contacts Missing — PeopleSync/Zoho Mail

        English: In our company we use ManageEngine Mobile Device Manager (MDM), Free edition, to manage corporate mobile devices. Our usage policy does not allow personal Google accounts on these devices; therefore, Google account sync is blocked through MDM.
      • Best way to integrate Zoho with mobile app for managing customer requests with real-time notifications?

        Hello, I'm building a solution for a travel company where customers submit requests through a website, and the sales team manages these requests through a mobile app. The Requirement: Customers fill a form on the website (name, email, number of children,
      • Kaizen #57 - Mass Update API in Zoho CRM

        Hello everyone! Welcome back to yet another post in the Kaizen series. This week, we will discuss the Mass Update API in Zoho CRM. In this post, we will cover the following: 1. Introduction 2. Mass Update Records API  3. Schedule Update and Get Status
      • Getting Attachments in Zoho Desk via API

        Is there a way to get attachments into Zoho Desk via an API?      We have a process by which a zoho survey gets sent to the user as a link in a notification.    The survey has several upload fields where they can upload pdf documents.    I've created
      • Pincode based Product Restriction

        we have different types of products. 1) Very bulky items like plywood. 2) Too delicate items like glass These type of products we want to sell to local customers. Other products we want to supply all over India. There should be an option to restrict products
      • Related Lists filter

        I have Contacts showing in our Accounts module. I customized the Contacts module with an Employment Status field, with the following picklist options: "Primary Contact", "Secondary Contact", "Active Staff(not a main contact)", and "No longer employed".
      • Standalone custom function not generating logs

        Why dont't standalone custom functions generate logs when the're called from another function? I have some functions (workflow, buttons and blueprint) that have common parts, so I put that part in a standalone function which is called from the others.
      • Urgent Security Feature Request – Add MFA to Zoho Projects Client Portal Hello Zoho Projects Team,

        Hello Zoho Projects Team, We hope you are doing well. We would like to submit an urgent security enhancement request regarding the Zoho Projects Client Portal. At this time, as far as we are aware, there is no Multi-Factor Authentication (MFA) available
      • Creator HTML page refresh

        Hi, I have added around 5 different html snippets in single creator page. I understand, I can refresh the entire page from page script using Navigational URLs https://help.zoho.com/portal/en/kb/creator/developer-guide/others/url-patterns/articles/navigational-urls
      • Zoho Desk - Custom Module Related List Columns on Tickets

        I have a custom module in Zoho Desk called Asana Tasks, each task has a lookup to a Ticket. On the Ticket I want to see the columns of the Asana Tasks in the related list . Is there a way to do this? Right now it just has the name of the record and I
      • What is your opinion of the new UI?

        Hi Everyone, I would like to see what everyone thinks of the new Zoho One Dashboard. I don't get it, but perhaps I'm missing something. What are your thoughts?
      • What are the OAuth scopes needed to access the Zoho MCP server?

        I think I'm authenticating with the MCP server endpoint successfully using a bearer token but I can't successfully initialize an MCP session. I'm using the official MCP Python sdk (https://github.com/modelcontextprotocol/python-sdk). I get as far as here
      • "Temporary Error" in Zoho CRM Data Source sync

        I edited my setup for the Zoho CRM to Zoho Analytics Data Source Import configuration to add some new fields. After I saved the changes, I clicked the (Sync Now) link. After a few minutes I got a Sync failure error. The only reason given is "A temporary
      • Account blocked for IMAP use

        Hello, My email client (Evolution) can't sync mail anymore. It gives the error: "Your account is temporarily blocked for IMAP use. This may happen if you exceed the maximum number of simultaneous IMAP connections allowed. Kindly try again after some time."
      • Is SMTP included in the free plan?

        My client has a Zoho Mail Free 14 day trial that ends tomorrow. She has set up a domain email address with SMTP on a third party app and is wondering if it will continue working once her plan downgrades to the free forever plan. Thanks
      • Zoho mail issue.

        I have verified my domain ohhoexpress.online by adding necessary TXT and MX records. But when I am sending email to any external email id, it is showing as zohomail.com. Also while I am sending mail to internal mail id, it is saying user not found whereas
      • My email is blocked from sending

        I get this message when I try to send any message .. > Unable to send message, Reason 554 5.1.8 Email Outgoing Blocked We have urgent emails to send and the issue continues to persist from yesterday. Please help us with this issue as soon as possibl
      • Next Page