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

      • How to make attachments mandatory

        I want the user to be unable to mark an opportunity as Closed – Won if it doesn’t have any attachments. I’ve already tried client scripts and functions, but nothing worked.
      • SLA Ticket Report

        From data to decisions: A deep dive into ticketing system reports Service level agreement (SLA) ticket reports in a help desk system are crucial for ensuring that services are delivered according to established commitments. They help maintain accountability
      • Zoho Backstage - PCI Compliance / Web Security

        I have a couple of questions related to Backstage and payment processing.... 1. my purchasing division is not giving approval to use Backstage yet because of some security issues. In order for us to take payments via a payment gateway like Authorize.net
      • Zoho Tables August 2025 Update: Faster and Smoother

        We’ve been working behind the scenes to make Zoho Tables faster, lighter, and more reliable. Here are the highlights: Faster Response Times Optimised the way responses are generated. Reduced memory consumption by 20–25%, leading to smoother performance
      • Video Upload from app says "unsupported aspect ratio" but is verified to be correct.

        I and my social media person are experiencing a problem where Social will not accept video uploads to Instagram. The error we receive is "unsupported aspect ratio" but looking directly at the file in question we see that the width and ratio both match
      • Disposable Email Addresses

        Dear zMail Team, Can you also bring out a few disposable email addresses for each accounts? That way occasional registrations and imminent spam from them can be largely solved right? ---- Deepak Vasudevan http://thamizhththendral.blogspot.com/
      • Zoho sheet - Zoho expense

        I want to schedule to create an expense using Zoho Sheet and flow. That is the EMI that I pay on a particular date to the bank and should be itemised, like principal and interest on the loan. Can someone help me in this regard??
      • Ability to configure a schedule/shift for each user and/or crew in Zoho FSM

        Hello, In our team of Field Agents, we have different shifts. Some field agent always work from 7:00 AM to 4:00 PM while others work the evening shift like 4:00 PM to 11:00 PM. Sometime shift are on weekdays only or on weekend. It would be great to be
      • Free webinar: Streamlining customer service paperwork with the Zoho Sign extension for Zoho Desk

        Hello Everyone! Have you been wondering about bridging the gap between digitised customer service and business paperwork? Join our free webinar to learn how you can do this by connecting Zoho Sign, our digital signature app, with Zoho Desk, our online
      • Mail Search should allow grouping by conversation like Gmail.

        Having switched from gmail I have found the search function hard to use. Mostly because mail is not grouped by conversation in search. If I search for a word when looking for a conversation had with someone then sometimes 10 emails will come up from the
      • Improve Zoho Learn updated article notifications

        I noticed today while updating an article, that the notification users get says "[User Name] has published article [Article Name]..." My feedback to the product team is that it would be really helpful for an end user, if the system notification differentiated
      • Safari Support

        Safari, the world's second largest browser, zoho desk does not officially or fully support. That needs to change.
      • Can I get images from an "Image Upload" field in a webhook?

        I want to send images from 2 "image upload" fields via a webhook. Is this possible?
      • Ticket closure notification - all contacts cc'd on email thread

        Hello, If a client sends an email to our service desk and cc's in other people that work at the same company - so that they are in the loop of the service request. When the we close the ticket, only the ticket owner (person who emailed us - which created
      • Inactive account cleanup policy for Zoho Sign

        Zoho Sign reserves the right to delete accounts that are license free and inactive for more than 120 days. The account deletion will be initiated only after the user receives prior email notice about possible data deletion and how to backup the data.
      • Missde API documentation for Sales Receipt

        Hi! I noticed that the Sales Receipt endpoint is not currently listed in your API documentation (https://www.zoho.com/books/api/v3/introduction/). Could you please provide any available temporary documentation for this endpoint, along with a detailed
      • Multi-currency in Zoho CRM Forecast and Reports

        As a company we have branches in 4 different countries with as many different currencies. Our Sales Teams would like to work with their local currency as much as possible. The Forecast module using only 1 currency is practically usable only by the sales
      • How to select from pricebook when creating a salesorder or quote

        I am creating a sales order and when selecting the Products I do not see any where to select from pricebooks. How do i associate this to my orders?
      • Proposal for Creating a Unique "Address" Entity in Zoho FSM

        The "Address" entity is one of the most critical components for a service-oriented company. While homeowners may change and servicing companies may vary, the address itself remains constant. This constancy is essential for subsequent services, as it provides
      • I cannot find my older documents from 2024 and 2023

        I cannot find my older documents from 2024 and 2023.
      • System default SLA descriptions can't be modified

        The system default SLAs have identical descriptions for all SLA levels, but their settings differ. However, I am facing an issue where I cannot modify these descriptions and save the changes. The content of the description box can be edited but the changes
      • Customising Help Center

        Hi I don't think it is possible to add custom pages to help center? We'd like to use this as a customer portal with support tickets, FAQ/Guides, Billing and contracts. Is there any plans to add a feature like this or an alternative way to do it other
      • Replies sometimes creating separate ticket

        Sometimes when a customer responds to an email coming from Zoho Desk, instead of adding a reply to the original ticket, a separate ticket is created. This happens even though the response subject line contained the ticket number, and the person responding
      • Ticket Approvals - External Users

        The ticket approval option - we need to be able to select external users (Contacts) for approvals. Sometimes we are working with an end user and their boss needs to approve a purchase. For example, working with a cashier on a broken cash register and
      • Force Users to Ask Answer Bot a question... First

        End users will always skip talking to a bot. It would be nice if Zoho adopted the standard and forced users to first ask a question to answer bot (or zia in some fashion) and then pass to the agent if it wasn't answered. Options to force the user to speak
      • View Answer Bot conversations?

        We are trialing Zia and are experimenting with Answer Bot on our knowledge base. So far so good! Management asks me if it is possible to view Answer Bot conversations, the purpose being to look over its shoulder and confirm that it is working as des
      • Mass Email an Account

        It would be nice to mass email an account stating there is an outage at their business or something specific to an account is needed to be mass communicated. Even if it makes a ticket for every Email Out to every contact in the Account. Think: the customer
      • Multiple Topics assigned to a single Campaign

        Hello, is it possible to assign multiple Topics to a single Campaign? We frequently write a content to our subscribers that spans multiple Topics and we would like to send it to all Contacts that are subscribed to at least one of the Topics. But it looks
      • Zoho Projects Fonts and Accessibility missing

        I cannot find any more the tab where I can change the font in Zoho Project. I also checked the knowledgebase and there they have accessibility tab which I am completely missing. Is there some setup I am missing or is it a problem with our account?
      • Zoho Books Custom Widgets Deprecation Error

        I created a simple sample widget with zet and published it using sigma Both in the Sandbox and Production the Widgets are showing this error
      • Problems with PDF files in notebook

        I'm evaluating Zoho Notebook as an alternative to Evernote and imported my Evernote account to Zoho Notebook. First issue is that notes in Evernote that comprise a PDF are turned into a 'group' with a single note page (that has the text from the Evernote
      • API (v3) Tasks sorting issue

        We are using the v3 API for Projects. When we gat all tasks, per page of 100 tasks, we get the task info alright. But when we try to sort based on DESC(last_modified_time) we don't get the correct sort order. It is roughly sorted by the last_modified_time,
      • Assemblies make my stock go negative

        I am sure this is just the way that we are using this feature, but we use assemblies, a lot. The issue for us is the way that the relive inventory and the fact that it makes our composite item stock go negative. I have added flows to auto assemble and
      • User Activity Reports

        I'd like to get data related to user activity.  For example, Login and logout times, emails sent/received, new records created , etc. Is that currently available. I just can't seem to find anything . Thanks, Dave
      • Help: Populate “Contact Owner” details into Customer custom fields (for email templates) in Zoho Books

        We want to send invoices on behalf of our sales agents, and include the agent’s name, email, and phone in the email body using placeholders. Plan is to copy the Customer Owner details into three Customer custom fields, so they can be used as placeholders
      • Undocumented Books API error message - 1000 - The requested action could not be completed. Please try again. | Unexpected error

        This code sometimes throws this error 1000 - The requested action could not be completed. Please try again. | Unexpected error What does it mean? result = zoho.books.updateRecord("salesorders",organization.get("organization_id"),salesorder_id,sales_
      • Partial payments for retainer invoices

        When a customer does not pay the entire retainer invoice there is no way to apply a partial payment. PLEASE add this function.
      • Making Tags Mandatory

        When creating an expense, is it possible to make the Tags field mandatory?  I see the option in settings to make other fields mandatory, like Merchant, Description, Customer, etc, but nothing about Tags. Thanks! Kevin
      • Mass Update not trigger workflows

        Hi, I have performed a mass update of all records in a custom module using a custom view. I have a dummy checkbox on my module that I turn on or off - hoping to trigger all the new workflows that have been created for that module. However, no workflows
      • Multi-Select lookup field has reached its maximum??

        Hi there, I want to create a multi-select lookup field in a module but I can't select the model I want the relationship to be with from the list. From the help page on this I see that you can only create a max of 2 relationships per module? Is that true?
      • Next Page