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

      • Allow me to duplicate a field

        Hi, Many times I need to create new field with slightly change compare to an existing one. So when I click an existing field, can you add one more option "duplicate"? That'd be very helpful. You mayc heck wufoo.com to see this feature. Thanks, Li lhong1
      • Community Digest Noviembre 2024 - Todas las novedades en Español Zoho Community

        ¡Hola, Español Zoho Community! Wow, ya termina el año, ¡gracias a vuestra participación se nos ha pasado volando! Por eso mismo estamos preparando sorpresas para todos los que participáis en la Español Zoho Community para el próximo año, ¡estad atentos
      • Zoho Mail iOS app - Complete revamp of the UI including insert image option, toolbar customization, calendar widgets and more!

        Hello everyone! The new Zoho Mail iOS app introduces a fresh look, blending native iOS features with a refined UI and UX to make email management more intuitive. The updated design focuses on simplicity, ensuring smoother navigation throughout the app.
      • Adding a work order for Assets vs. changing the contact person

        When adding a work order for an existing Assets (e.g. service), the assigned contact cannot be changed (deleting the contact deletes the selected Assets). This results in such an illogical operation that if you want to change the person to be contacted,
      • DOMIN NME

        How many email account do zoho supports
      • Assign admins to the application

        I want to know who to assign admins to UAE Payroll application. I tried from inside the application, and from one.zoho.com >> directory and nothing is happening, knowing that I have enabled zoho people integration with payroll. Can someone help me?
      • Zoho Marketing Campaign

        I want a details report of marketing API . which API i can use to get a full flexed detail of email campaign , sms , social media ,and all other campaigns ?
      • ¿Puedo migrar mi sitio desde WordPress a Zoho? ¿Zoho admite herramientas con código personalizado?

        ¡Hola comunidad! Estoy evaluando la posibilidad de migrar mi sitio web https://calculadoradenotas.cl/ desde WordPress a una solución Zoho, y tengo algunas dudas técnicas que espero puedan aclararme. Mi sitio no es solo informativo: es una herramienta
      • Automating SharePoint Folder Creation based on Equipment Module

        Dear Team, I would like to seek your valuable advice on one of my requirements. My objective is to automatically create a SharePoint folder whenever a record is created in the Equipment module. The folder should be named based on the equipment name. Once
      • Can I view a gallery of attachments related to an Account, Contact, or Subscription

        It is often useful to review photos related to an account or contact by service type. It would be nice to be able to see the photos collected through workorders or appointments all associated.
      • Language Field on Contact Person-level

        Dear at Zoho Books, would it be possible for you to have a Field for 'Language' for the Contact Persons under a Company. In CRM and Bigin we could create a Custom Field (Dropdown) for this effect but without any present in Zoho Books we could never sync
      • Customise Zoho FSM Work Order Name

        Hi there, is there a way for us to customise the work order number? For example - I want to add auto look up for company name or dates at the end of the work order number. WO4 - Company ABC
      • Introducing Dynamic Display in Zoho CRM mobile apps

        Hello everyone, We're happy to announce that Dynamic Display is now available in the Zoho CRM mobile app for both iOS and Android devices. Mobile apps have become synonymous with convenience and flexibility. As more and more businesses rely on mobile
      • How we can integrate pdf attachments in zoho crm with xero

        when i tried to integrate the data and attchment from zoho crm to to xero only the data get integrated with xero how we can integrate the pdf attachment as well nb zoho apis are not working via functions
      • Delete user profile

        Hello, How can I delete a User Profile?
      • Send emails directly via Cases module

        Greetings all, The ability to send emails from the Cases module, which users have been eagerly anticipating, is now available, just like in the other modules. In Zoho CRM, Cases is a module specifically designed for managing support tickets. If your organization
      • Introducing delegate signing in Zoho Sign

        Hi everyone! We are happy to announce a new feature in Zoho Sign — Delegate Signing! Whether you're tied up in meetings, away on vacation, or managing multiple responsibilities, you can now assign a delegate to sign documents on your behalf. This ensures
      • Deleting Salutation Field

        We have updated our lead input screen and 'Salutation' has appeared. This is not visible in the 'Edit Pgae Layout' screen so cannot be moved to 'List of Removed Fields'  Salutation is visible in the list in 'Customization - Fields' however I can only 'Edit' or 'Replace' I cannot delete and I do not need this field on my lead input screen.  Please can you advise how to get rid of this.  Screen shots can be provided if needed.  Thank you Tasha
      • Zoho Voice VS in Zoho CRM for logging calls

        I don't understand the differences between logging calls in Zoho Voice VS in Zoho CRM. Why the 2 separate platforms? Seems confusing
      • Updates to Auto-Upgrade in Zoho Campaigns

        Hello everyone, We've rolled out a new update that slightly modifies how the auto-upgrade option in Zoho Campaigns works. Even if you hit the contact limit, this update ensures that your account is upgraded and that contacts are imported smoothly—without
      • Adding Sub-Forms to Merge Documents

        I am setting up a Mail Merge, which includes sub-form table data. I've done it before but now I am having issues: 1. The headings don't show. I had to enter these manually 2. The table lines are separated. I want them together. Anyone know how to fix
      • Zoho Bookings Online Training | July 31, 2025

        Hi everyone! We’re back with the second session of our Zoho Bookings training series! This time, we’ll show you how to automate your scheduling, manage appointments more efficiently, and explore advanced features for your industry. Join our free, two-hour
      • Translation of Tooltip Messages

        The descriptive help messages should be available to provide translations for.
      • CREATE button is grayed

        On Android adding new notes to notebooks with collections is impossible because the CREATE button is grayed. What can be done?
      • Can Zoho Creator Apps have multiple actors and steps? Example

        Mortgage Application App- Outside party fills out form via published website form, Inside party approves for additional documentation, outside party recieved requests for x, y, and z documents.  Outside party submits x, y and z but z is wrong.  Inside
      • How to download all attachments from inbox, send, other folders in one go

        Hi All, Appreciate if anyone could help me with steps for below requirement. How to download all attachments from inbox, send, other folders in one go. Even mapping to new folder will help me.  Thanks in advance. 
      • Re-Apply SLA When Ticket Reopened from Closed Status?

        If you have an SLA applied, timers are deactivated when going to "On Hold" status type and reactivated when going back to an Open status type. What we discovered is when a customer replies to a closed case and it reopens, the SLA is not applied and timers
      • Zoho Expense Reimbursement

        I am using Zoho Expense for employee expenses.  At year end I accounted for reimbursement for the founders' expenses by doing a manual entry between employee reimbursements and shareholder loan.  All is correct in the balance sheet, but in Zoho expense the expense report totals are showing as owing still.  It doesn't impact the books, but I don't want to see amounts owing.  How can I zero these out?  The only way I can see it is by creating a transaction in Books that pays the employee via a bank
      • Request to Delete Mistakenly Created Zoho Desk Account – Access Blocked to Company Directory

        Dear Zoho Support Team, I hope this message finds you well. I am writing to request assistance regarding a Zoho Desk account I mistakenly created using my company email address. I created the account before being officially onboarded by my company, and
      • Introducing an AI-driven CAPTCHA for Help Center that offers improved accessibility and enhanced security | Zoho Desk | Product Update

        Captcha protects your help center from fraud and abuse without creating friction. What is a CAPTCHA? CAPTCHA is a test used in computing to verify that a user is human by requiring them to complete a challenge. It helps prevent bot attacks and reduce
      • Announcing new features in Trident for Windows (v.1.29.4.0)

        Hello Community! Trident for Windows just got better! It’s packed with new features designed to enhance communication, manage important information securely, and give you a smoother, more productive experience. Let’s dive into what’s new! Access Zoho
      • Exporting Ticket Threads/Comments and Attachments in Reports

        Hi, I would like to know is it possible for Ticket Comments and/or Attachments to be displayed in Reports?
      • Product management across integrated apps

        Hi everyone, I’m setting up my business for selling products and integrating CRM, Inventory/Books, Ecommerce, and other apps. Where should I load products for the first time so they reflect across all apps? And for updating prices or adding new products—where
      • Calculate Number of Days Between Two Dates

        Can someone help me with how to create a field using the formula function to calculate the number of dates between a campaign start date and end date? The closest I have gotten is using the "Datecomp" function but it gives you the dates in minutes, rather
      • Zoho Writer Docx files not able to be converted into Google Docs

        Since July 23rd, I've encountered an issue where DOCX files exported from Zoho Writer no longer convert properly into Google Docs when uploaded to Google Drive. My workflow relies on generating merged DOCX documents from Zoho Forms using Zoho Writer templates,
      • Schedule Campaign - Recipients Time Zone

        Something seems to be wrong with the scheduling feature for scheduling campaigns to be deployed at a specific time to the recipients time zone. I scheduled campaigns twice to be sent at the recipients time zone and the campaigns are deploying at the wrong time. When communicating with Zoho support they said to make sure it was scheduled at least 24 hours in advance so we did this with our last campaign and it was still deployed at the wrong time. Anyone else having this issue?
      • Zoho Vault App for Windows

        Hello, is there a Windows app that can be used to access the passwords saved in Zoho Vault? Thank you
      • Zoho Cursor Jumping

        Hi, Zoho Support, We received the below email for a bug when using Zoho on Firefox. Please let us know if there is anything that can be done to solve this issue. Have any other Zoho Mail users reported issues the past few days with Zoho auto-saving drafts
      • tomorrow option within the due date section and drag and drop into calendar

        Firstly, thank you for creating such a well-designed and user-friendly to-do list app. It’s almost perfect for my needs, but I wanted to offer a couple of suggestions that I believe could significantly enhance its usability, particularly for those who
      • low quality videos

        when in puplish videos or reel in social media platforms it pulished in low quality
      • Next Page