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

      • 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
      • 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
      • DKIM cannot be enabled for the domain as no verified default selector present

        Hi Support Team, For Domain DKIM record trying to enable status. but showing error "DKIM cannot be enabled for the domain as no verified default selector present" So, please resolve the issue. Thank you.
      • I can't log in to my account on Thunderbird

        I've just had to rebuild my PC (calamitous mess from Microsoft with Win10/Win 11 'upgrade' - they confirmed I had to start with a new build). I have used Zoho mail for years via Mozilla Thunderbird, but now I've had to download the latest version of TBird,
      • Sorten the domain of zoho mail ids

        I recently created zoho mail id and am quite excited with the features. But one issue ig nobody wanna type this big zohoaccounts.com I mean silly bold Suggestion zmail.com (sound gmail) (attraction) or some genz words looks cool
      • Weekly Tips : Customize your Zoho Mail Notifications

        In a professional context, email communication remains one of the most crucial channels for staying connected and managing workflows. Keeping track of your emails, task updates, or important announcements can be overwhelming—especially if you are juggling
      • How to move emails to Shared Mailbox?

        Hello, I created a Shred Mailbox instead of using a distribution group. But I cannot move previous emails to certain shared mailbox. Is it possible move some emails from inbox to shared mailbox?
      • Email task creator when task is updated/marked complete

        I am looking for a way to notify the creator of a task in zoho todo when - Task is updated Task is closed Comments entered 1 and 2 are critical, and I cannot find a zoho flow to do this. There is no way that as a manager I will know when someone has completed
      • The attendees will now be redirected to the landing webpage when they exit the webinar, set by the organizer.

        Hello All, In the latest version of the Zoho Meeting iOS mobile app (v1.3.16), we have brought in the below enhancements:   Post Webinar Re-direction Revamped exit UI for Webinar Post Webinar Re-direction:  The attendees will now be redirected to the
      • Next Page