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

      • [Beta Feature] Parent-Child Ticketing

        Hello there, a beta parent-child ticketing feature has recently been made available for some, read more here: https://help.zoho.com/portal/en/kb/desk/ticket-management/articles/understanding-parent-child-ticketing-system#Business_scenarios I would like
      • Enable Sorting by Ticket Count in Category Reports

        Hi Zoho Desk Product Team, I hope you're doing well. We would like to submit a feature request to improve the reporting capabilities in Zoho Desk. 🎯 Feature Request: Sorting by Ticket Count in Category Reports Currently, category-based reports in Zoho
      • Reactivating a CRM user...

        I'm a 1-man business primarily using CRM under my Zoho1 subscription (I have NO other employees or users). I wish to re-activate a prior user (my son, once more working with me) but when changing his status from inactive to active I receive this message:
      • Zohoサポートにスコープ開放を依頼する

        お世話になっております。 現在、弊社にてZoho DeskのナレッジベースをAPI経由で取得し、AIツール(NotebookLM等)に連携する仕組みの構築を検討しています。 つきましては、ZohoDesk.articles.READ スコープを使用したOAuth認証の許可をいただけますでしょうか。 API Console から Server-based アプリを作成済みですが、認可URLにアクセスすると「スコープが登録されていません」と表示されます。 お手数をおかけしますが、スコープの開放をご
      • Where can I configure the notifications for everything KB-related?

        Hi all, I'm receiving notifications for some actions happening in our Knowledge Base (e.g. someone leaving a feedback) and I would like to customise the template or have the choice to enable/disable such notifications like it is possible for ticket notification
      • Increase Round Robin Scheduler Frequency in Zoho Desk

        Dear Zoho Desk Team, We hope this message finds you well. We would like to request an enhancement to the Round Robin Scheduler in Zoho Desk to better address ticket assignment efficiency. Current Behavior At present, the Round Robin Scheduler operates
      • Self Client Authorization Code Flow for Mail returns 404

        Hello, I'm having trouble getting the Zoho mail api setup and want a sanity check. I am trying to follow this guide to get an access token for the mail api: https://www.zoho.com/accounts/protocol/oauth/self-client/authorization-code-flow.html Unfortunately
      • Zoho Knowledgebase Help Center Categories linkages are wrong

        Greetings, I am build a help center in zoho desk, based on the additional custom brand I have paid for. My knowledge base has 4 main categories. I have this setup this way in my knowledgebase customization theme area. The page layout is like this: Here
      • Connecting Learn to a Custom GPT

        Hi all! I am attempting to connect a Learn Space and all it's articles into a custom GPT. Has anyone successfully done this? I have worked on it with no success so far.
      • Tip 12: How can you customize the display name while sending emails from Zoho Creator.

        Hi folks, Usually when you send emails to your users, the display name defaults as your From email address. Most often, you would like to set a custom display name to represent your organization or the context of the email. You can mask or customize the display name (From Address) using Deluge script as long as the From email address has been verified. This would be very useful to you if you want to send bulk emails to a large audience.    Let's say you have a Student Registration form for your dance
      • Importing Data to update and not add

        I'm very new to Zoho created and tried searching the forums for the answer. Nothing I found has helped me make sense of how to do this. I created a app based on an excel spreadsheet but no matter what I do, whenever I import data it duplicates the record. I have a field I would like to use as a unique identifier, but I'm not sure how to tell my app that.  Any assistance, even a link to a tutorial on creating functions in the workflow of the app, would be very helpful. Unfortunately I can't share
      • 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
      • 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
      • Next Page