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

      • Incorrect Handling of XLSX data

        Trying to import an XLSX schedule of bills into Zoho Books I ran across the problem of date formatting. To replicate: Build a CSV file with bill dates in whatever format you like and import it - this should work if you match the "dd/MM/yyy" etc. format
      • Disable Smart Filters By Default

        The smart filters "feature" is causing confusion for Zoho Mail users. New emails should be delivered to the inbox unless they have specifically opted to redirect them somewhere else. People don't understand that new emails might be waiting in a random
      • Adding Columns to Reports

        Hi, Is it possible to choose fields to be added as columns in the reports? Thank you.
      • How do I automatically assign the project owner for all tasks in Zoho Projects?

        I have been researching for days on how to automatically assign all the tasks to the project owner on creation of the project in Zoho Projects. I have been having to go in and manually change all the task owner from 'unassigned' to the owner of the project
      • CRM Kiosk - Action for GetRecords

        I have a Kiosk screen with GetRecords and want to use the selected records in a custom function. My particular case is to set a lookup value on the selected records. Generally speaking though, I want to work with the selected records in a function. I
      • Email for customer to provide payment information

        Is there a way for customers when you set up a subscription to get an email that prompts them to put in their billing information to start their subscription? Also, can you show the subscription in their portal?
      • Unable to display field label from a hidden Single Line Textbox in Description

        Hi folks, I'm unable to display my hidden field, e.g. ${zf:SingleLine4} , in my description. I'm pre-filling this hidden Single Line Text box via "Field Alias - Pre-fill URL" settings. I noticed that my decimal form fields work, e.g. ${zf:Decimal}, and
      • Lookup fields

        Is there any way to add Lookup fields to Zoho FSM -- I do not see the option but I see default lookup fields in different modules
      • Zoho Analytics - Bill Table

        Hi I am new to Zoho and mainly work in Books. Recently learned of Zoho Analytics and am exploring it to create reports that would be useful for me. For example, I want to create a bills cash forecast by week for cash flow planning. When I start to create
      • Creating a tax - amount table in Analytics

        Hi everyone, I would like to create a report in Zoho Anayltics that creates the tax and amounts in a table. I have been able to create a report that shows me all the tax accounts, but I can't get it combined with the amounts of the accounts. Is there
      • Is it possible to do custom domains on test accounts that use saml setups?

        In Zoho Billing, Is it possible to do custom domains on test accounts that use saml setups for the customer portal?
      • I’m facing an issue while trying to upload a PDF file to a custom file upload field within the Leads module via the Zoho CRM API.

        Hi Zoho Team, I’m facing an issue while trying to upload a PDF file to a custom file upload field within the Leads module via the Zoho CRM API. I am able to manually upload a PDF into this field through the UI. I am also able to upload files as attachments
      • No chat option

        Chat option is not available in Android app.
      • How to add custom templates in zoho sheets mobile

        How can I add custom templates in Zoho spreadsheet mobile?
      • Order Items

        Hi .. We have to implement orders with line but each line should have a separate record and not as a subform, does anyone have experience with that kind of solution what is the best practice for that kind of thing Thanks
      • Trello: Invalid Client - Client ID passed does not exist

        Hello, I am trying to authorize the Zoho CRM power-up in Trello but always land on the following page: I tried adding a trello client to the Zoho API console but this generated a different client ID to the one in the link of the page in the above picture.
      • Zoho Sprints - Q2 updates for 2025

        Hello everyone! We’re excited to share the latest updates from Zoho Sprints for Q2 2025! This quarter, we rolled out a few highly-requested features designed to enhance collaboration and time management across your projects. Here's a look back at the
      • CRM Email Insights Not Working - Status not Changing

        I used to be able to see if a customer opened/read an email in CRM, but I no longer get those status changes inside their record. I have everything enabled and I am sending the email from CRM. The experience center has the status' enabled as well. Any
      • The use of Ticket statuses

        When your support team mark a ticket "Closed" before I had a time to check what your team has done on the ticket - I have to consider this as you consider the ticket closed even if I dont consider it closed. Which automatically produce a negative sentiment.
      • "Replace" an existing version of CRM

        Hi all, I have a question, I saw an article about this once, but I now cannot find it. I am working with a client who has had their CRM in Zoho One built and extensively modified. But it is non-functional now, and rather than try and unpick the system,
      • Data Import From a private PostgreSQL RDS Instance

        Hello All, I feel like the problem I am experiencing has been seen before; however, I am having a difficult time finding any solutions. Hoping the community has some insights. I am trying to import data from a PostgreSQL RDS instance that is behind an
      • Assistance Required: Authentication Error When Sending Credit Application Form

        Hi, I'm encountering an error message that states: "Authentication unsuccessful – the user credentials were incorrect." This occurs when I attempt to send the credit application form to our customers. I've attached the form I’m trying to send for your
      • Missing Fields in Lead Conversion Mapping

        I’ve been using Zoho CRM since 2013 to manage leads and convert them into contacts and jobs. When I convert a lead to a customer, I create a new contact and a job. Previously, this process automatically transferred key information from the lead to the
      • Allow selection of select inactive users in User data fields

        Hello, We sometimes need to select a previous employee that has an inactive account in the User data field. For example, when doing database cleanup and indicating actions are done by a certain employee that weren't filled out when they were part of the
      • Connection to Zoho One

        My org has a Zoho One account, which includes Zoho Social. We are wanting to try linkthread. However, I want to make sure it is set up properly from an account perspective, as I have accidentally created Zoho accounts separate from Zoho One when I didn't
      • Ticket Automatically Created from Closed Chat

        Is there a way to prevent a ticket being create for every chat.... or at the very least have it automatically closed.
      • IMPORT INVOICES CSV

        Hi, Impossible to import invoices in Zoho books with a csv file. I have also tried with the template. My topic keeps getting closed but I did not get any answer Is there an issue with this fonctionnality ?
      • Related Lists in Email Templates

        Hi Zoho team, I would love to see a feature where related list information can easily be added to an email template (instead of mail merge). I have a client who books flights for their customers. They do this through a Flights module so all booked flights
      • Outlook plugin funktioniert nicht.

        DAs Outlook Plugin funktioniert nicht mehr. Ich werde aufgefordert, mich mit der App "OneAuth" anzumelden Intelligente Anmeldung per OneAuth funktioniert nicht zufreidenstellend. Nach erfolgreicher Anmeldungung mittels QR Code lande ich wieder beim QR
      • iOS App Version 3.0 - Customer list gone?

        Not sure when this changed, but I seem to have been updated to 3.0 for the phone app (on iOS). I'm pretty sure that I used to have a Customers button that allowed me, for example, to see what appointments a customer has. Has this disappeared or am I just
      • Zoho Signature, "For Demo Purpose Only Powered by Zoho Sign"

        How to disable this text on the documents for signature. "For Demo Purpose Only Powered by Zoho Sign"
      • Add Resource variable to notification email customisation for Event Type

        The notification email customisation feature for Event Type does not include a variable for the Resource field. Without this field, Zoho Bookings cannot be used by any business for resource-based services or event types e.g. room bookings, equipment bookings.
      • Can't find add role button, is iet st because I have the free subscription

        Trying to add my accountant in Zoho Books if I press the add accountant button, I get stuck as it says no such role exists, and won't let me continue, I can't find the add roles button, so I am stuck. Is it because I have the free subscription? Also can't
      • Calendar view all appointments in workspace

        In the Calendar page, add the ability to view all appointments in the Workspace. The Manage Calendars filter requires me to select at least one user or resource, and it only lets me select up to five of them. There's no filter option to view the entire
      • Tip #13: Identify where your bookings come from with Source Tracking

        Source tracking is the practice of identifying where your bookings originated. This is important, because online bookings come from a wide variety of sources like social media platforms, your website, email and ad campaigns, partner websites, organic
      • Unable to Add Notes

        I've had a user report that they are unable to add notes to account records. I attempted and found the same issue. There is no option to save the note.
      • Workflow Rule Alert Not Working

        I have a workflow rule set (that I've been using for years) that suddenly stopped working. Module - Leads Execute on - Create Alerts - Email Active - Yes When I create my lead I no longer receive my email notification. 
      • Can zoho sign collect data feeding Zoho Sign?

        I m sending contracts to client who are not in my zoho CRM database yet. Can the data they enter in Zoho sign contract I send them, (that includes...) official company name address first name second name etc, ...Create or update a contact / account
      • IMAP ACCOUNT ACCESS PROBLEM

        Hi! I moved from Gmail some time ago to ZOHO. It works fine and it worked till yesterday. I found out that on my MAC OSX mail client I can not receive emails from ZOHO using IMAP. Gmail is set to IMAP and works OK. My company email account uses POP and works good as well. Is there anybody else who has such problem or this might be something with my email client...? I didi check for the settings but everything is as it was from the beginning. Honestly, I didn't change anything recently. It just stopped.
      • Modified approved time log

        I can’t seem to find a way to make change to approve time log entry. The case is the following. We pay the employees every 2 weeks, so employe A enter is time for the 2 weeks and then submit his timesheet. Now is superior approve the time he worked via
      • Next Page