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

      • Add Image Upload Field to Zoho Bookings Registration Form

        Hi, We would like to request the addition of an image upload field to the Zoho Bookings registration form. Currently, Zoho Bookings only supports text-based fields (e.g., Single Line, Multi-Line, Email, Checkbox, Dropdown, Radio Button, and Date), but
      • Merge Tags Output Incorrect Placeholder Text After CRM Sync

        Hi everyone, I’m experiencing an issue with merge tags in Zoho Campaigns after last sync of contacts and leads from Zoho CRM (days before everything worked perfectly). Here’s the situation (seems like a default configuration in Campaigns) : My leads have
      • UI Improvement - Ability to Collapse Flow

        The UI for Flow is generally pretty good. However, when multiple decision trees are used, the layout can get pretty convoluted and hard-to-follow (see one of my Flows below): In these cases, even the auto-arrange fails to make this something that a normal
      • Windows agent 2025_M02 release notes

        Agent Version: 111.0.3.300 Release date: 24 February, 2025 Various Major enhancements to improve overall performance and optimize the user experience. Squashed a few bugs to improve overall product quality.
      • Windows agent 2025_M01 release notes

        Agent Version: 111.0.3.299 Release date: 05 February, 2025 Major Enhancement: Live Monitor feature compatibility released. Major Enhancement: Updated Scaling for multi technician cases with Android and Web based viewers. Various other bug fixes and performance
      • how to record deferred revenue?

        Dear Zoho Team, We issue invoices relating to 12-month web hosting service. When we issue the invoice, we should record the entire amount of the invoice as DEFERRED REVENUE (ie. $10 x 12 mths = $120, balance sheet item). After the particular month of the hosting service, $10 of revenue has been earned and deferred revenue amount will be $110. We must keep adjusting the balance sheet and income statement over the course of the service until the company has fulfilled its obligation of services and
      • Narrative 13: Importing your data

        Behind the scenes of a successful ticketing system: BTS Series Narrative 13: Importing your data When importing data into an application, it is crucial to prevent data loss or duplication. These types of errors can hinder the development of a clean and
      • Blueprint Not Triggering When Lead Status Is Updated by Workflow (IndiaMART Integration)

        I have set up a blueprint that triggers when a lead’s status is “New Lead.” Our CRM is integrated with IndiaMART, and when leads are created from IndiaMART, their Lead Status is initially set to None. To handle this, I created a workflow that automatically
      • Update Subform in specific field(Status) without affecting other fields in Zoho CRM using Deluge?

        Scenario: PRODUCT Module(change name Plot) in any product status change From Available to Booked then on PROJECT Custom Module have Subform So, Subform name is Property Details now in that Subform 1 field is STATUS that update according to  product status
      • YouTube Live #2: Agreement Intelligence with Zoho Sign's eSign AI assistant

        Hi there, We're back again with our YouTube live series and this time, we'll take you through our holistic agreement intelligence powered signature workflows. Struggling to draft an agreement? Need help double-checking clauses and going through complicated
      • Can I Build a POS using ZOHO creator and integrate it with ZOHO Books?

        Hello,  I have a Zoho Books account and I was wondering if I can have a POS system that integrates with it. Primarily with Inventory, Customers and Payment and ofcourse Create invoices and credit notes.   So, would Zoho creator provide me with this solution?  Thank you, 
      • An important update for Zoho Cliq desktop users

        The latest version of the Zoho Cliq desktop app (v1.8.0) will no longer be supported on macOS 10.15 Catalina and earlier versions. This is because the framework we use (Electron) no longer supports some older macOS versions. If you’re using macOS 10.15
      • Zoho Projects - Visual improvement to parent and sub-task relationship

        Hi Projects Team, My feature request is to improve sub-task visibility. Please see screenshot below. I really think parent child relationships could be visually improved. Even if the first letter of the parent task was inline with other same level tasks
      • Items Below Reorder Point Report?

        Is there a way to run a report of Items that are below the Reorder Point? I don't see this as a specific report, nor can I figure out how to customize any of the other stock reports to give me this information. Please tell me I'm missing something s
      • New Toolbar in Zoho Sheet

        We have revamped our toolbar design in this new version of Zoho Sheet. Below are some screenshots to help you get accustomed to this new interface. Click on the picture below to view the animated image in its original size. Scroll down this post to learn about the changes. Highlight of Changes: The previous format tab is now split into 2 tabs - Home and Format. The Home tab contains the commonly used functions and the Format tab holds formatting related options. Under the Home tab towards the far
      • Zoho inbuilt Telephony made a lot of issues!

        Hi there, I am a user that I am working with zoho inbuilt telephony around 1 month. Non of my colleagues are happy with this app! most of the time customer cannot hear my customer service team, customers say our voice is breaking. whenever Telephony support
      • Sending workflow notifications using popular chat services

        Hello everyone, We have introduced instant and scheduled notifications on some of the most popular chat platforms to facilitate easy collaboration, quick action, and wider reach. Workflow notifications can be sent to the following chat platforms: Zoho
      • Webhook not firing.

        I created a webhook using the Web UI, it looks very nice and the testing worked without an issue, but when i save/ update a ticket, the webhook is not firing. Here are the details of the web-hook i get from using the API "modifiedTime": "2019-10-22T09:23:37.380Z",
      • Adding Images to a Quote in Zoho CRM

        We are currently preparing to use Quotes in Zoho CRM and we are building out our Quote templates.  We came across an issue of not being to add Images of the products to the Quote - specifically in the body of the Quote templates.   This is a problem,
      • Applications built with Zoho Creator

        Hi, I’m really interested in seeing how others have built their application using Zoho Creator, especially those designed for external users (clients, vendors, or the public). If you’ve developed something along those lines and don’t mind sharing, I’d
      • Is it posssible to add Asap Widget on Wordpress?

        I have tried to add the ASAP widget so users could iniciate chats and see the KB information but nothings seems to work. I have tried to add the script using a php snippet that adds the to the footers and also tried one for the header in the functio
      • Require ticket resolution

        Hi Zoho team, Is there a way to require resolution even if an agent did not use a blueprint? for example, our blueprint has a "resolve" transition but what if agent revoked blueprint and manually set the status of ticket to closed? Is there a way where
      • Tables from ZohoSheets remove images when updated from source

        I have a few tables from a ZohoSheet in a ZohoWriter document that will remove the images in the cells when I refresh from the source. The source still has the images in the table when I go to refresh. After updating from the source, as you can see the
      • API Pagination Error: 'from' Parameter Limit

        Hello, I am encountering an error while paging through the Zoho Desk API results: Status code: 422 - {"errorCode":"UNPROCESSABLE_ENTITY","message":"The value passed for field 'from' exceeds the range of '0-4999'."} Is 5000 the maximum number of records
      • How to go to the next open ticket in the queue when agents closes ticket

        Zoho Desk When agent closes a ticket - eg when they choose 'Send and Close" - where is the setting that automatically redirects them to the next open ticket in the queue?
      • External download link limit

        Can You please help us to understand this For Zoho WorkDrive external users, the download limit is a maximum of 5 GB total download size and a maximum of 50 first-level files and folders What is the meaning of first level? We are using these files in
      • CRM verify details pop-up

        Was there a UI change recently that involves the Verify Details pop-up when changing the Stage of a Deal to certain things? I can't for the life of me find a workflow or function, blueprint, validation rule, layout rule ect that would randomly make it
      • Custom templates for calendar report

        What about being able to design custom templates for the calendar report, as well as for other types of reports? I think more users are waiting for this.
      • Print a price list or price book

        Hi Community. Am I right in concluding that Zoho has no functionality to print a price list from either Zoho CRM, Zoho Inventory or Zoho Books? I won't get stuck on the fact that Zoho doesn't sync price books between Zoho CRM and Books/Inventory (more
      • Disable payment thank-you emails

        Hello, can someone please tell me how to disable sending of the "Payment Thank-You" emails? 
      • Maximum tags possible in Contacts Records

        I read in some documentation that Zoho allows a total of 200 tags across all records. Is this correct? So is it not possible to have one tag per record for 500 records?
      • Any way to "Pay with Check" or "Refund with Check" for Credit Notes?

        When we have a Bill in Zoho Books, we can select the "Pay with Check" option which then allows us to print/cut the check directly out of Zoho Books. When we created a Credit Note and want to refund the customer, is there any way to Refund with Check,
      • CRM Mobile reports

        When our engineers finish a job they like to email the customer a job report. This is best done todate as an email template but we can find no way to include an image field from that module. Is there any other options?
      • When Zoho Tables Beta will be open to EU data center

        Hello all, We in EU are looking at you all using and testing and are getting jealous :) When we will be able to get into the beta also? We don't mind testing and playing with beta software. Thank you!
      • Start Form on a different page (i.e., hide form pages)?

        I have a Zoho form that uses the `Field Alias - Prefill URL` feature. My goal is to have a pre-filled field that directs the user to a specific starting page in the form. For example: The URL will have a field alias that will auto-populate a field with
      • How can we disable "My Requests"?

        We are not using this functionality in our system at all and our users get confused.
      • PayPal payment received recording problem

        Hi, A little while back one of our customers used the PayPal payment option to pay an invoice For some reason though the payment is showing up twice within the Payments section of the invoice! Instead of setting the invoice value to ZERO, it now shows a negative value Anyone else face this problem? I've checked PayPal and there is only 1 payment in reality... A bug? Actonia ps: for anyone from Zoho Customer Service or tech team,  its Invoice 785 in our account
      • string(87) "{"code":"INVALID_TOKEN","details":{},"message":"invalid oauth token","status":"error"} " grtting this error

        Using access token i am trying to add sales orders through api but it is throwing errors like the above i have mentioned. Please help me for that
      • How to mute chat notification sound by default in Zoho SalesIQ?

        We’ve recently embedded the Zoho SalesIQ chatbot on our website, and we’ve noticed that notification sounds sometimes play even when the visitor hasn’t interacted with the chat widget yet. We’re trying to understand two things: Why do these sounds occur
      • Kanban View for Projects.

        At our organization, we describe active projects with various statuses like "In Proofing" or "Printing" or "Mailing". In the Projects view, one can set these project statuses by selecting from the appropriate drop-down. While this works, it's difficult to view and comprehend the progress of all of your projects relative to each other in a table. Creating a Kanban view for projects where I can move them from one status to another allows me to see where each project is in the order of our workflow.
      • Next Page