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!  

    • Recent Topics

    • Issuing reconciling a bank statement

      HELP! I'm trying to reconcile a bank statement. The prior month reconciled perfectly. Beginning balance is correct yet I'm off by the same amount each time. Both myself and my office manager, separately and together, have tried to complete this reconciliation

    • Can you inject JS in an HML+CSS+Deluge Page?

      I have an HTML + CSS + Deluge page and need just a little vanilla JS functionality. However, it seems like Zoho Creator does not allow that. I'm required to create a JS widget. Is this correct? If so: 1. Won't this quickly consume my API limit if there

    • Use the searchBy parameter to find user by email address

      I'm trying to find a user is Zoho Desk via the Api. In the documentation I see that there is the possibility to add a searchBy parameter in the request. But I can't find how the search values should be formatted. I've tried multiple things and get either

    • Correlated subqueries not supported in Zoho Analytics. This creates huge limitations

      Running into a major limitation in Zoho Analytics: correlated subqueries simply don’t work, even in completely standard SQL patterns inside a JOIN. Example: LEFT JOIN "Bills" b ON d."Id" = b."Deal ID" AND EXISTS ( SELECT 1 FROM "Bill

    • Unknown table or alias 'A1'

      I would like to create a subquery but i am getting the following error: Unknown table or alias 'A1' used in select query. This is the sql statement:  SELECT A1.active_paying_customers, A1.active_trial_customers, A1.new_paying_signup, date(A1.date_active_customers), 

    • Detect and ignore bots in visitors

      The SalesIQ visitor numbers are basically useless to us because there is no bot detection. We get the same bots coming in from the same countries looking at the same pages every day. It can't be that difficult to tell the difference between an actual

    • Zoho CRM - Rename "Estimates" in CRM Finance Suite Integration to "Quotes"

      I'm not sure if it's been 2 or 3 years now since Zoho Books renamed Estimates to Quotes. I still see "Estimates" in the Zoho CRM integration. Could this be added to Translation settings so that some customisation could be made on an account by account

    • Exporting tickets

      I went to Setup -> Organization -> Import/Export in order to export tickets but found 2 issues: 1. The email body never gets exported. 2. There are some large numbers (like 5.57E+16) under certain columns of the exported CSV file. I could not find any export options. Please can you help with this?

    • Add Real-Time Microphone Audio-Level Indicator During Screen Recording

      Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request an important enhancement to the Zoho WorkDrive screen-recording experience. Current Limitation: During a recording session, there is no visual indication that the microphone is

    • Properly Capture Dropdowns & Hover Elements When Recording a Window/Tab

      Hi Zoho WorkDrive Team, Hope you are doing great. We encountered a limitation when recording a selected window or browser tab: Certain UI elements, such as dropdown lists, hover menus, and overlays, are not captured unless we record the entire screen.

    • Allow Recording Only a Selected Portion of the Screen

      Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request a more flexible recording option in Zoho WorkDrive. At the moment, we can record either the entire screen or a specific window/tab — but not a custom selected portion of the screen

    • Add Camera Background Blur During Recording

      Hi Zoho WorkDrive Team, Hope everything is well. We would like to request an enhancement to the video recording feature in Zoho WorkDrive. Currently, the camera preview displayed during a recording does not support background blur. This is an essential

    • Make Camera Overlay & Recording Controls Visible in All Screen-Sharing Options

      Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request an improvement to the screen-recording experience in Zoho WorkDrive. Current Limitation: At the moment the recording controls are visible only inside the Zoho WorkDrive tab. When

    • Display Client Name in Zoho Creator Client Portal Dashboard

      Hello Zoho Creator Team, We hope you are doing well. Zoho Creator recently introduced the option to set a client’s display name in the Client Portal settings, which is very helpful for providing a personalized portal experience. However, there is currently

    • Introducing Dark Mode / Light Mode : A New Look For Your CRM

      Hello Users, We are excited to announce a highly anticipated feature - the launch of Day, Night and Auto Mode implementation in Zoho CRM's NextGen user interface! This feature is designed to provide a visually appealing and comfortable experience for

    • Managing functions

      Can someone let me know if there are any plans to improve the features for managing functions in CRM? I have lots of functions and finding them is hard. The search only works on the function name and the filter only works on function type. I have created a naming convention based on tags to filter the list which helps a bit and for some projects I keep lists in a spreadsheet.  I'd like a spreadsheet-style list in CRM with a few custom fields and a way to construct views (like in modules). Maybe even

    • Allow Admins to Transfer Ownership of Their Own Files & Folders

      Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request an important enhancement to the ownership-transfer functionality in Zoho WorkDrive, specifically regarding administrator capabilities. As administrators, we have the ability to

    • Allow Regular Users to Directly Transfer Ownership of Files & Folders

      Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request an important enhancement related to file and folder ownership management in Zoho WorkDrive. At the moment, a regular user cannot directly transfer ownership of their files or folders

    • How to update custom multi-user field in Zoho Projects?

      I'm trying to update custom multi-user fields in Zoho Projects via a Deluge function in CRM. The code I have so far is below. It works for updating standard project fields and single-line custom fields, but it does not work to update multi-user fields.

    • Has Anyone successfully integrated Zoho and Sage Intact?

      Hey all, We’re evaluating Zoho One + Sage Intacct and I’m trying to connect with anyone who has actually implemented the two together.Specifically, I’d love to know: -- Which functions you kept in Zoho vs. Intacct (e.g., Product Catalog, AR/AP, invoicing,

    • Finding missing records

      I have a challenge and I am not really sure where to start with it. I can't find any similar threads on here, can anyone help: I have two forms, FormA and FormB. Both forms have records that contain a field called Job_Number. What I am trying to achieve

    • Kaizen #57 - Mass Update API in Zoho CRM

      Hello everyone! Welcome back to yet another post in the Kaizen series. This week, we will discuss the Mass Update API in Zoho CRM. In this post, we will cover the following: 1. Introduction 2. Mass Update Records API  3. Schedule Update and Get Status

    • Editing the Ticket Properties column

      This is going to sound like a dumb question, but I cannot figure out how to configure/edit the sections (and their fields) in this column: For example, we have a custom "Resolution" field, which parked itself in the "Ticket Information" section of this

    • Creator HTML page refresh

      Hi, I have added around 5 different html snippets in single creator page. I understand, I can refresh the entire page from page script using Navigational URLs https://help.zoho.com/portal/en/kb/creator/developer-guide/others/url-patterns/articles/navigational-urls

    • Zero Personalization of the File Sharing Experience

      By now (2025) this is the maximum level of personalization available for a Zoho sharing link. We gently asked Zoho if we could modify at least the background, and they replied that it cannot be customized. We're truly disappointed – and surprised every

    • Canvas Flex Box containers should not require a width/height.

      Flexbox containers are often used as organizational concepts, to ease re-flow on mobile etc. - I cannot use % for flexbox W or H - I cannot omit W or H This means that the content cannot dictate, and a Flexbox container cannot be used merely as an organizational

    • Its 2022, can our customers log into CRM on their mobiles? Zoho Response: Maybe Later

      I am a long time Zoho CRM user. I have just started using the client portal feature. On the plus side I have found it very fast and very easy (for someone used to the CRM config) to set up a subset of module views that make a potentially extremely useful

    • Automation in Zoho Sprints

      Hi. I have a Sprints board with the following statuses: ToDo, InProgress, CodeReview, Testing, Preprod, Live When a ticket is moved from e.g. Testing to Preprod, the following tags should be modified: remove 'tested OK' remove 'ready for Preprod' add

    • Custom function return type

      Hi, How do I create a custom deluge function in Zoho CRM that returns a string? e.g. Setup->Workflow->Custom Functions->Configure->Write own During create or edit of the function I don't see a way to change the default 'void' to anything else. Adding

    • Two factor authentication for helpdesk users

      The company i work for wants use the helpdesk site in Zoho desk, as a place for their distribution partners to ask question and look for information about our product. The things there is suppose to go up there is somewhat confidential between my company

    • Kiosk can't merge picklist or multiselect

      There is no ability to load a multiselect or picklikst field into a kiosk with the values that have been previously selected. So, I essentially have 3 unacceptable options: 1.)Load the value into a text string and include instructions like this: "Picklist

    • AGE field from DATE OF BIRTH Field.

      HI! I have a field called date of birth in my CRM (LEADS, CONTACT etc…)     How can I know the AGE today   I would like to create a field AGE. I now how to create a field but I don´t which calculation (CUSTOM FUCTION) to make ¿ANY HELP?

    • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

      Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

    • How to update/remove file in zoho creator widgets using javascript API

      Hi Team, I have developed a widget which allows inserting and updating records I have file upload field with multiple file upload. Now while doing insert form record, I am using uploadFile API to upload files for that record. I am using updateRecord API

    • Contact data removes Account data when creating a quote

      Hi, Our customer has address fields in their quote layout which should be the address of the Account. They prefill the information, adding the account name - the address data is populated as per what is in the account - great. However when they then add

    • Introducing Enhanced Storage Management

      We’re excited to roll out two new enhancements in Zoho Recruit, Subscription Information and Storage Management — designed to give admins complete visibility into subscription details, feature limits, and storage consumption — all from one place inside

    • Announcing new features in Trident for Windows (v.1.34.4.0)

      Hello Community! Trident for Windows just got better! With this update we have features that make your daily work easier and more efficient. We've added some features that are exclusive to our app and we're sure you'll find them useful. Let’s dive into

    • Report Hover Setting

      Would be great if we will able to show information to the user while hovering a record in a report.

    • Vertical images displayed as horizontal

      Some pictures that originally are in vertical position are displayed in horizontal after the upload. It seems that system rotates them by 90 degrees. How can I fix this issue?

    • Zoho Desk iOS update: Custom buttons, follow/ unfollow option on tickets

      Hello everyone! In the most recent Zoho Desk iOS app update, we have brought in support to access the custom buttons configured on web app(desk.zoho.com). Using custom buttons you can seamlessly execute predefined actions directly from their mobile devices,

    • Next Page