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!  

    Nederlandse Hulpbronnen


      • Recent Topics

      • change subscription within customer portal

        Would be great for the customer to be able to change their own subscription (or restart existing one) within the customer portal. Also, would like to be able to have early termination fee on subscriptions if canceled early.
      • How to make the add-on optional at the time of subscription?

        The scenario is this, we have a service which has optional add-ons. Like the customer who purchased the subscription may or may not want to get the add-on. In our case if the customer choose the addon we have monetary benefit. In case the user does not
      • Unable to add attachments to knowledge base anymore

        I have been adding articles to knowledge base in Zoho Desk (as part of Zoho One). Today suddenly i found that I am unable to upload and attachments to the articles. I get the following error: "Attachment couldn't be added." I have uploaded the screenshot
      • Advanced factors for multiple scoring rules: Now with Zia scoring automations for all modules

        Greetings all, We're happy to offer improved scoring features by adding extra scoring factors, including Zia Scores, in our multiple scoring rules (MSR) feature. These new factors—which empower existing traditional scoring factors—include criteria for
      • Sortie de Zoho TABLE ??

        Bonjour, Depuis bientôt 2 ans l'application zoho table est sortie en dehors de l'UE ? Depuis un an elle est annoncée en Europe Mais en vrai, c'est pour quand exactement ??
      • Restrict Agents from Editing Shared Custom Views in Zoho Desk

        Hello Zoho Desk Team, We hope you're doing well. We’d like to submit a feature request regarding the custom views functionality in Zoho Desk. 🎯 Background We’re actively using custom views to filter and display tickets for different teams based on specific
      • Introduction Dario Schiraldi Deutsche Bank Executive

        Hello Everyone, Dario Schiraldi serves as a key leader at Deutsche Bank, where he plays a crucial role in shaping the bank's strategic direction and driving operational success. With a solid foundation in finance and leadership, Dario is committed to
      • Is Zoho Shifts included in the Zoho One plan?

        In case the answer is no: there's any plan to make it available via One? Thank you
      • Feature Request: API Access for Managing Deluge Functions (with OAuth & Change Tracking)

        Hi everyone, I wanted to share a thoughtful request that came in from one of our Zoho clients this week. I believe many of us as partners and developers might relate to it. “One quick item to flag: we’d love an official way to manage Deluge functions
      • Moving Subscriptions from one Customer to another

        We frequently need to move subscriptions from one Customer to another Customer in Zoho Billing and the only way we have figured out to do this is to cancel it in the old owner's profile and manually recreate in in the new owner's profile. In doing this,
      • how to add new line in Deluge?

        I want to make string with line separation like this: this is the first line second line third line I have tried to use \n <br> or </br> inside the string but I can't achieve the result like the example above. I want to create a task by using custom function
      • How to pause a subscription/recurring order ?

        Hello, I'm evaluating Zoho Subscriptions for a food co-op where members order a box of produce every week. The software that we're currently using allows members to set up a recurring order. Members can pause the recurring order when they don't want a box for a while and then resume it later. Is it possible to pause/resume a subscription ? Thanks John
      • Hosted Payment Pages - how to update the address in zoho billing

        I"m playing around with the muti-page hosted payment pages which have places for customers to enter their addresses when paying. Why does this not update their address in Zoho Billing after payment? What can I do to make this happen?
      • Tracking training certification expirations

        Hi Zoho Community! I'm looking for some input on the best and most efficient ways to track training expirations in Zoho CRM. I have a very specific workflow that I am looking for - my company offers trainings, and the certification expires every 2 to
      • Kaizen #164 : Client Credentials

        Hello everyone, Welcome back to Kaizen. In this post, we will discuss Client Credentials Flow and when it can be used. What is Client Credentials Flow? According to RFC6749, the official specification for the OAuth 2.0 authorization framework, "The client
      • CRM Email Template Align Left Instead of Center

        Is there a way to make a basic template align to the left instead of center? I know I'm likely forced to the 600px wide with the basic templates but I would REALLY like to set the email to the left instead of center. The basic templates make all the emails
      • Client Script - "Click' Button on Purchase Order - Specify "To Contact" or "To Supplier"

        The send email button is unique on the purchase order in that is has an additional submenu to send email "To Contact" or "To Supplier" It appears that the "click" event in Client script doesn't work correctly, probably because the button click didn't
      • Add Client Credentials Flow to Python SDK

        The Zoho CRM API supports a client credentials flow to automatically generate ephemeral access tokens, and this can be done programatically. The Python SDK however requires you to provide a grant token, refresh token, or access token when initializing
      • Conditional display of fields in Zoho Books Custom modules based on another field

        We're currently working with a Custom Module in Zoho Books and have a question about improving data entry efficiency and user experience. Our module includes a "Client Type" dropdown field, which determines the type of information to be collected. Each
      • Background Image for page in Zoho Creator

        Is it possible to use an image as the background in a page in Zoho Creator? I see it is possible to use an image as the background within a panel, but about about the page itself?
      • Zoho IP address blocked by Microsoft

        Today I tried to send emails to Outlook email addresses and all of them failed. The log displays like this: Reporting-MTA: dns; mx.zohomail.jp Arrival-Date: Fri, 27 Jun 2025 12:52:30 +0800 Original-Recipient: rfc822; ######@outlook.com Final-Recipient:
      • Request to Enable Full DNS Management Access for My Domain

        Hello Zoho Support Team, I have purchased the domain "digimarts365.online" through Zoho, and I need to add A and CNAME records to connect it with my Shopify store. However, DNS Toolkit is not allowing me to edit or add any records. Kindly enable full
      • Backup flow, see change log / history

        Hello, I would like to know, how flows can be saved, copied and tracked. If I work on a Flow with multiple other colleagues we need to see the Changes made by others. Is there a history, changelog or something else? Also we need to backup/import flows
      • Problème de validation du domaine spelam.ma

        Bonjour équipe Zoho, J’ai l’honneur de vous contacter car je rencontre un problème technique au niveau de la validation de mon compte ou de mon domaine spelam.ma. En effet, j’ai déjà acheté le domaine, mais la validation ne semble pas être correctement
      • Critical:- Eneble TDS filing for 26Q from the zoho book

        We currently extract TDS data from Zoho Books and manually input it into a separate TDS software to generate the FUV file and file returns. Previously, while using Tally, we benefited from an integrated feature that seamlessly recorded transactions and
      • Add a way of clearing fields values in Flow actions

        It would be great if there was an option to set a field as Null when creating flows. I had an instance today where I just wanted to clear a long integer field in the CRM based on an action in Projects but I had to write a custom function. It would be
      • Writer loads as a blank page.

        Hi, I'm new to zoho but I liked the idea of an online wordprocessor that I can use from multiple computers. I signed up a few hours ago while at work where our computers use Linus Ubuntu and a Firefox browser and the Writer came up fine. Now I'm home and using my Windows machine with Norton Firewall and Firefox and the writer opens as a blank page. I've checked my security options in both Firefox & Norton and I have received all the cookies from Zoho. What gives?
      • Ensure Consistent Service Delivery with Comprehensive Job Sheets

        We are elated to announce that one of the most requested features is now live: Job Sheets. They are customizable, reusable forms that serve as a checklist for the services that technicians need to carry out and as a tool for data collection. While on
      • JOB Sheet can not send PDF as service rapports and more info needed other topic

        Goedendag, - Jullie hebben nu job sheet erin gedaan en dar is echt super goed, enkel kunnen we de werkbon ( JOB sheet) nu niet verzenden als PDF als een service rapport naar onze hoofdaannemer hoe we dat nu doen als bewijs van de levering van het werk
      • Publish a single Sheet stopped working

        I used to have a published sheet on my Zoho Spreadsheet and that stopped working. If I want to publish it again, I only get the message that says "Published externally", but that does nothing, and if I change tabs and come back, the sheet gives me the
      • Does Zoho Contracts support white-labeling?

        As the title says, do you provide us white-labeling solution?
      • Constantly getting error 429 "Too Many Requests" despite not sending many requests.

        I am currently working on developing an integration between our company's app and our zoho books setup using the api. When testing new functionality, I am very often having the calls fail with Error 429 'You have made too many requests continuously. Please
      • Not receiving emails

        I'm able to send emails, but I can't receive any. Please help
      • Capturing knowledge across many channels

        We actively use Cliq for client discussions, product management etc. Often there are great answers to questions or key announcements. We have no way to tag or capture them along the way. Pinning only gets us so far. For example, imagine a product channel
      • Prepayment of a sales order

        How does everyone handle this common (at least it is common for us!) situation? We require all our orders to be fully prepaid before shipment since we manufacture made to order, custom products. Since ZOHO does not allow a sales order to be prepaid, we are forced to create an invoice at the time an order is placed to allow the customer to pay it. Our sales category is therefore skewed, since the sale was actually booked at the time an order was placed, rather then at the time it is shipped, which
      • Zoho Campaigns Account Keeps Shutting Down

        Hey hey, I am completely at a loss here. For months we have been back and forth with Zoho Campaigns Support on Spam Trap hits. Each time they can never provide us with a full list of emails, only 1 here or there. So internally we have setup a integration
      • Need a way to run a client script longet than 10 seconds

        By The Grace of G-D. Hi, Currently, Client Scripts are Timing out at 10 seconds. We have complex logics that needs more time. Can you add a feature request to increase the timeout?
      • What’s New in 2025 (So Far)

        Hey Recruiters, We’ve wrapped up the first half of 2025 with a few focused enhancements in Zoho Recruit—all aimed at simplifying your day-to-day recruitment tasks. Here’s a quick video that walks you through what’s new so far this year: Here’s a brief
      • Multi-Department Approval for a Single Bill in Zoho Books

        Hello everyone, Hope you're all doing well. I’d like to ask if anyone has found a good workaround for the following scenario in Zoho Books: Let’s say a corporate credit card bill or vendor invoice covers multiple purchases across different projects or
      • Zoho Landing Page "Something went wrong" Error

        Hello, Every time I try to create a new landing page, I receive a "Something went wrong" error with no explanation. I cannot create any new pages, which means we cannot use this application. I did create one landing page successfully over a month ago,
      • Next Page