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

        • Recent Topics

        • Last activity time is acting like last modified time

          When i edit the description or any field in the potential, account, contact and lead, the Last Activity Time is being updated like the Modified Time. This is messing all workflows and reports and we are unable to track real last time of activities like

        • Enhancements to the formula field in Zoho CRM: Auto-refresh formulas with the "Now" function, stop formula executions based on criteria, and include formulas within formulas

          Dear Customers, We hope you're well! By their nature, modern businesses rely every day on computations, whether it's to calculate the price of a product, assess ROI, evaluate the lifetime value of a customer, or even determine the age of a record. With

        • HEX/RGB Color Input in Visual Editor

          Hello Zoho Pagesense Team, We hope you're doing well. We’d like to submit a feature request to improve the color selection options in the Pagesense popup editor. Current Limitation: Currently, to set text colors, users must move the color slider manually.

        • CRM and Campaigns- tags not integrating?

          Hi! I am setting up an automation in zoho campaigns and it says the crm is integrated...but when I want to use a trigger of a certain tag I created for people in the crm to denote those who purchased, it doesnt have that tag available as an option in

        • Maximum limit of rows exceeded

          I am trying to add a row to a spreadsheets that has fewer than 60 rows. I keep getting an error message that says I have exceeded the maximum limit of 65,536 rows. Any ideas out there?

        • Tip #7: 5 formas de mantener tus listas de correo electrónico

          Tips and Tricks #7, adaptado de Susmit Sen ¡Hola, comunidad! Esta semana volvemos con nuestros Tips and Tricks para Zoho Campaigns. En esta ocasión, voy a darte algunos consejos para mantener limpias tus listas de correo electrónico, y empezar el 2021

        • Mail Merge related Lists

          When I try to merge an associated list the fields do not have a checkbox to choose them as it does in the tutorials. Am I missing something? Any ideas would be appreciated.

        • create-a-purchase-receive API issues

          Hello all, I'm trying to use the create a purchase receive inventory API documented here (https://www.zoho.com/inventory/api/v1/purchasereceives/#create-a-purchase-receive) however when I do am getting the following error {"code":9,"message":"The purchase

        • Zoho Pagesense really this slow??? 5s delay...

          I put the pagesense on my website (hosted by webflow and fast) and it caused a 5s delay to load. do other people face similar delays?

        • Heatmap: Missing Content Elements - Zoho Page Sense

          Hi there, I'm trying out Zoho Page Sense to generate heatmaps for my Wix pages. My problem: Some parts of my Wix pages don't show on my heatmap, the heatmap is just empty there. Maybe Wix default lazy loading setting causes this error? Is there a way

        • Marketing Tip #3: Use social proof to build trust

          People trust people. Showcasing reviews, testimonials, or “bestseller” badges on your product pages can nudge hesitant buyers toward purchase. Try this today: Add one customer testimonial or highlight your top-selling product on your homepage. Or, do

        • Zoho Sign Reminder email template

          Is there a template we can edit for the reminder emails? I don't see it in Settings / Choose a template

        • Preview an upload PDF or File

          I have a form where the customer has to upload a file (normally PDF - never jpeg)  When in report view I want to be able to preview the uploaded file without having to download it.  If I click on the upload it downloads to my computer, I want to be able

        • How to filter emails by Reply-to field?

          I receive a very particular newsletter from an association A registered on a website W (that is used by many associations), and the emails fields are not great: the From just contains the generic website's W's email, while A is only mentioned in the Reply-to

        • Line spacing

          I coudn't decrease the line spacing to space smaller then a single line. There is too much space between the lines that make the document look ugly. Please fix that. Liran. fonar

        • Control Position of “X” (Close) Button in Popup Editor

          Hello Zoho PageSense Team, We hope you're doing well. We would like to request a customization improvement in the PageSense popup editor. Current Limitation: Currently, the position of the “X” (close) button is fixed and cannot be customized in the popup

        • Add Standalone “Save” Button in Pagesense Popup Editor

          Hello Zoho Pagesense Team, We hope you're doing well. We would like to request an important usability improvement in the Pagesense popup editor. Current Limitation: There is currently no dedicated Save button while building a popup. The only way to save

        • Text Direction Control in Pagesense Popup Editor

          Hello Zoho Pagesense Team, We hope you're doing well. We’d like to submit a feature request to add text direction control in the Pagesense popup editor. Current Limitation: Currently, the popup editor does not provide native support for RTL (Right-to-Left)

        • Autosave in Pagesense Popup Editor

          Hello Zoho Pagesense Team, We hope you're doing well. We’d like to submit a feature request to enhance the Pagesense editor with an autosave functionality. Current Limitation: Currently, changes made in the Pagesense editor must be manually saved. In

        • Billing frequency is not displayed correctly.

          Hello There is an issue while displaying the billing frequency on a subscription quote. I am able to activate the subscription details and get this lovely overview: If I am adding a Plan which I charge quarterly, first of all it should be possible to

        • Creating Secret via Vault API

          Hi I am trying to create a secret through vault api.  This is the response I get. One thing I am not sure is how to decrypt the secretdata, how to get the secrettypeid? {     "operation": {         "result": {             "error_code": "",             "message": "Sorry, we are unable to process your request.",

        • Is It Possible to Hide Menu Option from Main Navigation?

          Is it possible to hide a menu option, e.g. Admin, from the Main Navigation based on some criteria, e.g. login = zoho.adminuser

        • Unleash the power of detail, with Table View.

          What use is context that's not available where you need it? With this in mind, we bring you the Table View. This feature will add more power to the way you organize and work through your ticket load. Table View comes in handy when you want more control over the ticket information you see. This is a nifty tool for users who find themselves limited in terms of the level of information that is being offered in the Classic View and Compact View. With an upper limit of 15 columns, agents can glean most

        • Kaizen #126 - Circuits in Zoho CRM - Part 1

          Hello everyone! Welcome back to another week of Kaizen! Today, we will discuss an exciting topic—Circuits in Zoho CRM. For starters, we will discuss what Circuits are, how beneficial they are for businesses, different views of a Circuit, and the different

        • ZOHO CRM Getting IOS to show HOME PAGE like android

          i have users in the office that have a mix of IOS and Android phones - the Apple users cannot see thier home page similar to what they see on thier desktop ? is this not available on IOS ?

        • I have a problem. I use Zoho invoice

          I have a problem. I use Zoho invoice, which is that when I create an invoice for a customer with specific items, let's say the value of these items is 2100, but my customers are not the type who pay the entire invoice amount at once, as they divide the

        • Ability to Create New Items When Zoho Trident is Minimized via tray or taskbar icon

          Allow users to create new items (emails, calendar events, tasks, etc.) directly from the system tray icon or by right clicking the task bar icon, even when the window is minimized or not actively running in the foreground. This enables quick access to

        • I can not see Undeliverable emails from my Mass Email Leads activity in CRM

          I am sending email templates and I can not see the Undeliverables? I only receive the "Out of Office" replies and any manual replies from the lead. Can you please let me know where the Undeliverable emails are sent so I can use the information to clean up the database?

        • Select Zoho Contacts as Meeting Participants in Zoho Cliq

          Hello Zoho Cliq Team, We hope you're doing well. We would like to request an enhancement to the meeting scheduling functionality in Zoho Cliq. Current Limitation: When scheduling a meeting in Zoho Cliq, participants can only be selected from: Organization

        • Ability to Select External Users from Participants List When Scheduling Meetings

          Hello Zoho Cliq Team, We hope you're doing well. We would like to request an enhancement to the meeting scheduling experience in Zoho Cliq. Current Limitation when scheduling a meeting in Zoho Cliq: External users can be selected from the list only under

        • Kaizen #212 - Map Dependency Fields in Zoho CRM using APIs

          Hi Everyone!! Welcome back to another week of Kaizen series! Over the past few weeks, we have been addressing your questions and feedback shared through our Kaizen 200th feedback form. Thank you for your continued engagement and thoughtful queries. We

        • Outdated state in mexico

          Hello Zoho team, the drop down to add the state for customers, when they introduce their state in mexico has a city named “Distrito Federal” that name changed many years ago to “ciudad de mexico”. could you please update this so my clients can find the

        • Is anyone using Zoho Flow with airtable?

          I need to build a flow that collects data from airtable and uses some of that data to create folders and files in google drive. I have fully function version of this in zapier and want to migrate to zoho. I am trying to perform a very basic fetch from

        • AI in Zoho Workplace: A Sneak Peek into What’s Coming!

          Hello everyone, We’re super excited to share something we’ve been working on and we want you to be part of it! You may have seen our announcement blog post introducing a major evolution in how AI works within Zoho Workplace. Want to be among the first

        • Best way to share/download presentation files in Zoho without losing formatting?

          Hello Zoho Community, I often work with PPT/PDF files in Zoho Docs and share them with colleagues. While PDFs usually give a direct download option, I’ve noticed that PPT/PPTX files sometimes only open in the viewer without a clear download link. Is there

        • Workflow Failure - Notifications

          Good afternoon, I have just experienced an error whereby a Workflow failed, for a reason currently unknown. The problem is that one of my users had to flag this manually (thankfully he's very thorough) and this otherwise would have flown under the radar.

        • Introducing Bin Locations In Zoho Inventory

          Hello users, We are excited to let you know that your wait for the Bin Locations feature has now come to an end! Yes, you heard us right! We are here to introduce the much-awaited Bin Locations now in Zoho Inventory. But before we dive into the feature

        • Error "Invalid client task found corresponding properties" only when triggered from workflow ?

          Hi All, I am facing an error message I never encountered previously: Error in executing On Add - On Load script Error in executing thisapp.get_all_projects_api_call function. Line:(2) Error in executing thisapp.getAccessTokenFromRefreshToken function.

        • How to interpret Campaign report statistics - definitions/explanation

          I am trying to make sure I understand the Campaign report correctly Do you have a list of definitions for: Delivered - it has reached the recipient's inbox Campaign reach - is this the number that have opened the campaign email? Unique Opens Clicks/Open

        • Zoho CRM's Copy Customization functionality now works across DCs, for customized accounts, and more

          Availability This feature is available in Standard, Professional, Enterprise, and Ultimate editions. These changes have been rolled out to all users in all DCs. For more information, please refer to these help documents: Overview | Instructions Hello

        • Next Page