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

    • validation rules doesn't work in Blueprint when it is validated using function?

      I have tried to create a validation rule in the deal module. it works if I try to create a deal manually or if I try to update the empty field inside a deal. but when I try to update the field via the blueprint mandatory field, it seems the validation

    • Get Zoho Mail API working (including DRE Connector, Oauth Token, ZUID, ZOID & ACCOUNT_ID)

      Disclaimer: I’m not a professional coder! Do you need to use Zoho Mail API? Me too. It lets you do all sorts of things — like reading the complete header of an email, or forwarding an email with its attachments — which is what I wanted to do. But setting

    • Revenue Deferrals

      Does ZOHO books and subscriptions handle Revenue Deferrals?   

    • Can I make a website open inside Zoho whenever I log in?

      Hi Zoho Team, Every day, I check a few websites for updates, for example, Rojgar--result, where I see the latest government job results and notifications. I was wondering if there’s any option in Zoho to make a website like that open inside Zoho whenever

    • Zoho Analytics & SQL Server - Live connect

      Below are the steps I did Created a fresh database and table in my own virtual server Created a new data source connection with live connect I was able to select the tables and created the data source successfully I am getting the error when I try to

    • Kaizen #214 - Workflow APIs - Part 2

      Welcome back to another week of Kaizen! Last week, we discussed how Zylker Cloud Services used the Workflow APIs to discover and audit all the automations in their CRM, listing every workflow, checking triggers, and understanding their automation limits.

    • Playback and Management Enhancements for Zoho Quartz Recordings

      Hello Zoho Team, We hope you're all doing well. We would like to submit a feature request related to Zoho Quartz, the tool used to record and share browser sessions with Zoho Support. 🎯 Current Functionality As of now, Zoho Quartz allows users to record

    • Zoho CRM Community Digest - September P1 | 2025

      Hello Everyone! September's Here! Before we jump into product updates, and community highlights, here's a quick spotlight! Zoho has launched a Professional Sales Rep Certification course on Coursera, tailored for sales professionals to strengthen their

    • Upload my theme.

      Hello. I would like to upload my own theme, this one: https://themeforest.net/item/panagea-travel-and-tours-listings-template/21957086 Is it compatible and where I upload it? If not I will hire a developer, what do I have to ask when I search for one?

    • Explore the Redesigned Quotes Module in Zoho Billing

      Dear users, We’re excited to introduce a refreshed look for the Quotes details page in Zoho Billing! This update brings you a more efficient user interface experience without changing your existing workflow. We've enhanced layouts with organized tabs,

    • Product Updates in Zoho Workplace applications | September 2025

      Hello Workplace Community, Let’s take a look at the new features and enhancements that went live across all Workplace applications this September. Zoho Mail Attach email as EML file in Compose Effortlessly attach emails as EML file in Compose by simply

    • Vehicle Tracking

      we have GPS devices that installed on our vehicles, and we would like to know if it's possible to  get vehicle live location data from the GPS device To Zoho Creator App.   Thank You

    • 🤝 Rencontres, partage et inspiration au Zoho Community Meetup de novembre

      Chers utilisateurs, Bonne nouvelle 🎉 : notre Meetup Zoho Community approche, et nous serions ravis de vous y voir ! 📍 Toulouse : le 25 novembre 📍 Lyon : le 27 novembre (🎯 Il ne reste que quelques places !) Que vous soyez débutant ou utilisateur avancé,

    • Need Help Mapping GST Registration Number Field Between Zoho Books & Zoho CRM + Slow Sync Issues

      am facing an issue with field mapping between Zoho Books and Zoho CRM. I want to map the GST Registration Number field from the Customer module in Zoho Books to a custom GST field inside the Accounts module in Zoho CRM. However, I am getting a warning

    • Notification received when self-assigning tickets

      When I assign tickets in Zoho Desk the relevant agent gets a notification email. When assigning myself a ticket in Zoho Desk, I get a notification email. Now, as I am the person who assigned the ticket to myself, getting a notification in this regard

    • Nouveauté dans Zoho Writer - Création de documents et de modèles assistée par l'IA

      Zia, l’assistant IA de Zoho Writer, soutient les utilisateurs dans l’amélioration de leur écriture et la création de contenus : correction orthographique et grammaticale en temps réel, suggestions adaptées au contexte, détection du plagiat, révisions

    • Session Expired

      I constantly get "Session Expired" and need to relogin or close and open the application again. This gets really frustrating during the day. Is this something that can be solved? This really makes me want to leave the app as it is no go to need to reopen

    • Integrate your Outlook/ Office 365 inbox with Zoho CRM via Graph API

      Hello folks, In addition to the existing IMAP and POP options, you can now integrate your Outlook/Office 365 inbox with Zoho CRM via Graph API. Why did we add this option? Microsoft Graph API offers a single endpoint to access data from across Microsoft’s

    • Disable Buttons for Users with Profiles without permission

      Hey, I've noticed that users without permission of setting up things in the marketplace, can still see the icon: On a click, you see this: It would be way better, if they couldn't see this menu icon at all. (Aside from the fact that it completely misplaced

    • Mapping a new Ticket in Zoho Desk to an Account or Deal in Zoho CRM manually

      Is there any way for me to map an existing ticket in Zoho desk to an account or Deal within Zoho CRM? Sometimes people use different email to put in a ticket than the one that we have in the CRM, but it's still the same person. We would like to be able

    • Zoho Analytics - Make text clickable in underlying data

      Hi Community, I have a simple sales report based on a Invoice query table. I have included a link on to each invoice on the table and sent the Invoice number URL to the link. This works find in the query table, but when I click underlying data on the

    • Credit Management: #5 Advanced Refund Policy

      You're subscribed to a well-known SaaS design tool. You've used it to manage your team's projects, create marketing visuals, brochures, and so on. But your needs change over time. Your company may switch to another tool or hire an in-house designer who

    • Exported Slide Image Lacks Portion of the Background Image

      This does not always happen, but when I export (or "download") the rendered image of a slide, it sometimes lacks a portion of the background image. I created a sample slide deck to demonstrate it and shared it with the admins. It is also publicly available

    • How to create a Zoho Mail extension similar to Outlook's OnSend add-in?

      Hi, I want to create a Zoho Mail extension similar to Outlook’s OnSend add-in. The extension should: Let the user select headers and footers from a taskpane while composing an email. When the user clicks Send, the extension should: Automatically insert

    • Effective Inbox Organization: Folders vs Tags in Zoho Mail?

      I'm exploring the best ways to organize a busy inbox, especially when managing multiple clients or project using Zoho Mail. I’d love to know what works best for others: 1. Do you prefer **folders** (possibly with sub-folders) for each client or project?

    • Piss poor service in Support in Domains and email

      Srijith Narayanan B contacted me today. Very pleasant fellow. Just didn't want to tell him how bad your support service is. You help the person, but you leave before we can finish the next stage. Which causes a lot of frustration. It's been 8 days now

    • Zoho Mail android app update: Block & reject future emails, Report phishing, Spam alerts, Suspicious URL detection

      Hello everyone! In the most recent Zoho Mail Android app update, we have brought in support for the following features: Block & reject future emails Report Phishing Spam alerts in the mail details screen. Suspicious URL detection. Block & reject future

    • Zohomail does not support additional fields in mailto links

      Hello, I set up Zohomail as default composer in Firefox according to manual here: https://www.zoho.com/mail/help/defaultcomposer.html#alink2 Later, I wanted to use this functionality to answer in a Linux mailing list thread using mailto link: mailto:xxxxx@kernel.org?In-Reply-To=%3C727o0521-q24p-s0qq-66n0-sn436rpqqr1p@example.com%3E&Cc=xxxxx%example.org&Subject=Re%3A%20%5BPATCH%20v2%28%29

    • Emails not being received from a particular domain

      Cannot receive any emails sent from atco.com Domain is in the spam whitelist so should be no reason for it not to be coming through. Have filed a ticket and besides a generic response of we are looking at it - it seems there is no actual support workers

    • Email address for forwarding is not saving and there's no confirmation ema

      Steps to reproduce: 1. Enter my forward email in the email forward section of the account 2. Click save 3. See a notification stating saved successfully 4. Refresh the page, no forward email is saved 5. No email confirmation received at the forwarding

    • This domain is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details

      This is the error i keep getting when trying to use my Zoho Domain Mail. This domain is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details Find attached. I hope this can be resolved very quickly so i can go on and make

    • Auto CC - Moving Departments

      We have Auto CC e-mail replies to your support mailbox enabled. We have two departments: Helpdesk (helpdesk@domain.com) Delivery (delivery@domain.com) If we create a Helpdesk ticket, and reply, replies are CC'd to helpdesk@domain.com (OK) We then move

    • unable to send message reason 554 5.1.8 Email outgoing blocked

      unable to send message reason 554 5.1.8 Email outgoing blocked

    • Mailk got blocked / Inquiry About Email Sending Limits and Upgrade Options

      Dear Zoho Support Team, My name is Kamr Elsayed I created this account to use for applying for vocational training in Germany. As part of this process, I send multiple emails to different companies. However, after sending only 8 emails today, I received

    • SMTP email sending problem

      Hello, I've sent emails before, but you haven't responded. Please respond. My work is being disrupted. I can't send emails via SMTP. Initially, there were no problems, but now I'm constantly receiving 550 bounce errors. I can't use the service I paid

    • unblock my zoho mail account. outlines@zoho.com

      please unblock my zoho mail account, outlines@zoho.com

    • Unable to see free plan option

      Hello Zoho Support Team, I hope you are doing well. I am trying to sign up for Zoho Mail, but I am unable to see the option for the free plan. Could you please guide me on how I can access or activate the free plan? Thank you for your assistance.

    • Outgoing blocked: Unusual activity detected.

      I just made payment for my Zohomail Today and have been debited so i will like to be Unblocked because this is what it says (Outgoing blocked: Unusual activity detected) Thank you i await your swift responses

    • How to remove some users in zoho accounts

      How to remove some users in Zoho accounts.

    • Forwarder

      Hi, I tried to add a forwarder from which emails are sent to my main zoho account email . However, it asks me for a code that should be received at the forwarder email, which is still not activated to send to my zoho emial account. So how can I get the

    • Next Page