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

      • Courses without signup

        Can I create "real" public courses where no signup is needed?
      • Espace Sandbox – Votre environnement de test sécurisé dans Zoho Projects

        Zoho Projects propose un sandbox sécurisé pour tester des configurations, des personnalisations et des modifications sans compromettre les données en production. Note : Disponible avec le plan Enterprise le plus récent basé sur les utilisateurs (y compris
      • Descargas en learn

        Buenos dias, yo en mis cursos para no tener que cargar los archivos que utilizare en las lecciones decidi utilizar la opcion de bloques para añadir un enlace de mi workdrive con el video que deseo para que sea todo mas organizado, pero hay un problema.
      • Mail delivery

        I initially had a problem sending any outgoing mail and was able to fix it on my own, given Zoho support never got back to me. However, despite being able to send emails now, none of my mail to different Gmail addresses are arriving, and they are not
      • Mermaid Support & Zoho Learn

        Hi Zoho Team, I’m currently working with Zoho Learn and was wondering if there’s any way to add support for Mermaid syntax to create flowcharts, sequence diagrams, and other visual elements within articles or lessons. Mermaid is widely used in technical
      • Blocked due to VPN

        Hi My account outgoing mails and IMAP access have been blocked due to using a vpn being interpreted as suspicious logins. I’ve tried to mail support but not sure if this is also blocked. This is extremely frustrating as I’m using a vpn because I’m travelling
      • reset admin access.

        I am a user under the domain @lanutraceuticals.com. I do not have admin access. Kindly let me know the administrator contact or help me reset admin access.”
      • Unsubscripation booked domin

        Kindly Un subscription booked domain
      • How to change Super Admin

        Good Day, Can someone kindly guide me on how to change the super Administrator. I have tried many times but could not succeed.
      • Events disappearing in Calendar

        To reproduce the bug: 1.- Add a new event in Calendar 2.- Type any name for the Event 3.- Click "Create" 4.- The event appears 5.- Click on the event to open it 6.- Optional: Edit the event 7.- Click OK 8.- After two seconds, the event disappears Now, click on another day and then come back to the inserted event's day. The event appears.
      • Mail transfer to a contact with multiple accounts

        Hi, Since we can only associate one email for a Contact across Zoho, would it be a problem if we want to merge our mailbox in the future? For example, Mr. Jones is the main POC for 5 accounts, once we merge our mail where would the messages go-- is it
      • @mention not working in Mail

        Am I missing something? When trying to forward a message there is a hint you could do this also by "@mention" at the end of the message. When typing (for example) "@s.." there should appear addresses from my contacts, shouldn´t it? But nothing happens! So what can I do? Best regards and thanks for any help in advance! JH P.S.: Sorry for my bad English.
      • Enable Zia-Powered Deluge Assistance and AI Agent Without Mandatory OpenAI Integration

        Hi Zoho Creator Team, Hope you're doing well. We’d like to request a feature enhancement related to Zia's AI capabilities in Zoho Creator, particularly regarding Deluge Assistance and the AI Agent. Currently, as shown in your documentation (Generate Deluge
      • Zoho Sign community meetup series - India

        Hello everyone! Zoho Sign is a comprehensive digital signature application tailor-made for Indian businesses with unique features like Aadhaar eSign, eStamping, USB/PFX signing. We are now excited to announce our first meetup series for Zoho Sign in India,
      • Product Updates in Zoho Workplace applications | June 2025

        Hello Workplace Community, Let’s take a look at the new features and enhancements that went live across all Workplace applications this June. Zoho Mail Slideshow view for inline images in Notes View all your inline images added in a notes in a effortlessly
      • Assign multiple vendors to the same product

        Guys, My business often purchase the same product from several vendors (based on price and availability). Is it possible to assign more than one vendor to the same product? I saw this same question in this forum, from some time ago. Is this feature available or, at least, in Zoho's roadmap? If not, is there any trick to solve my problem? Without this feature, I simply cannot manage my company's inventory, limiting very much the use of Zoho CRM. Waiting for your reply. Leonardo Kuba Sao Paulo / Brazil
      • Is there as way to shut off the invitation when you set up a new user?

        Is there as way to shut off the invitation when you set up a new user?  I would like to get all my users in the system, my org structure set up and tested, etc, BEFORE I invite the users.  I did not see a way to shut of the automatic invitation email.  The only way to get around it is to set up the users with no Email ID.  However, when you do that - you get into the problem of not being able to update a user's Email ID (which makes NO sense whatsoever).  If I set up a user with an incorrect email
      • Manage Engine login issue

        App not available The app you're trying to access isn't yet available in the in data center region, where your account is present. To use ManageEngine, you can sign up for a new account in another data center region. Learn How Go to Zoho accounts Please
      • Zoho Creator - users "Name" Column

        Hi, When you add user to an application inside Zoho Creator, the system generate an account name for it. We don't have the  ability to change this name. According to Zoho creator Support (Case:11523656) : "The values displayed under 'Name' column of 'Users & permissions' section, is actually the respective account's username and not the actual name specified on the account. Usernames are system designated based on the account email address and cannot be modified from your end." We need to have the
      • Zoho Assist Unattended - devices disappearing

        Hello, I've recently introduced a new model of laptops into our environment (Lenovo Legion). We are experiencing an issue where only the latest installed agent - laptop is visible in Assist. This issue does not appear with our Dell inventory. Example:
      • Searchable email tab in Bigin

        Hi team, Could I please request a feature update, to be able to search emails within the email tab of Bigin. We have large correspondence with some agents and it would be very helpful if we are able to search from this section:
      • The silent force behind great customer service

        Customer service is known to be a demanding role. Customer service agents are expected to bring empathy, clarity, and human connection to every voice call, chat, and remote session, even if the situation requires some time for customers facing stressful,
      • New From Email in Zoho Desk

        Dear ZohoSupport, We are trying to establish a new From Address in Zoho Desk but we are facing difficulties. When trying to use the smtp.office365.com SMTP Server, after clicking the Save and Verify button, the Authentication Failed error pops up although,
      • Option in pipeline deal to select which hotel or branch or store if client has more than one local store

        Hi, I would like to know if there is an option in the deal pipeline to select which hotel, branch, or store a deal is related to—if the company has more than one location. For example, I have a client that owns several hotels under the same company, and
      • Aggregate SalesIQ Knowledge Base Interactions into Zoho Desk Knowledge Base Dashboard

        Hello Zoho Desk Team, We hope you're doing well. We’d like to request a feature enhancement related to the Zoho Desk Knowledge Base dashboard and its integration with Zoho SalesIQ. 🎯 Current Limitation When customers interact with knowledge base articles
      • Admin Visibility and Control Over Group Chats in Zoho Cliq

        Hello Zoho Cliq Team, We hope you're doing well. While we appreciate the current capabilities in Zoho Cliq — including the ability to restrict who can create group chats and configure user permissions — we would like to request several enhancements to
      • Update Regarding Zoho Finance Applications' Domains For API Users

        Hi users, Until now, both the Zoho Finance apps and their APIs shared a common domain. We've recently introduced separate domains for APIs. You can now start using the new domains for API calls. The old domains will not work for API users starting April
      • Ability for Agents to Initiate Voice Calls With Site Visitors Without Active Chat Session

        Dear Zoho SalesIQ Team, Greetings, We would like to request a feature enhancement related to the voice call functionality in Zoho SalesIQ. Current Limitation: At the moment, voice calls can only be initiated by agents after a chat session has been started
      • Add new Card

        How do you add a new credit card to a contact with Zoho API as can be done on web.  I am not able to find way to do this with Books API, CRM API or Subscriptions API.  This is an issue for our company as we do migration from a different system.  I can add card to a subscription through Subscriptions API, but some of our customers may not have a subscription, but only invoices set up in Zoho Books.  Is there any way in Zoho API to add new credit card to contact/customer?
      • Benchmark for Using Mail Merge in Service Order Scopes

        Hello, I was wondering if Zoho CRM has a benchmark or best practices for utilizing Mail Merge in service order scopes. Specifically, I'm looking for guidance on how to effectively integrate this feature for creating and managing service orders, especially
      • Why don't we have better integration with Mercado Pago or Pagseguro?

        Currently, the integration between Zoho Commerce and Mercado Pago for Brazil is very poor... Since it is old, it does not include the main payment method in Brazil today, which is PIX. Is there a date for this to finally be launched? There are numerous
      • two columns layout

        it's actually frustrating to not have this feature, I actually had to convince my employer to subscribe to zoho forms and integrate it with zoho crm, but because of this feature not beeing provided, our forms looks unnecessarly long and hideous. 
      • Sync Zoho Desk Help Center Category Icons to SalesIQ Articles

        Dear Zoho SalesIQ Team, Greetings, We are using the integration between Zoho SalesIQ and Zoho Desk to sync articles from our Zoho Desk Knowledge Base into SalesIQ. While this integration works well for syncing article content, we’ve noticed a visual inconsistency:
      • Company Name not pre-populating when using Quick Create: Contact

        Hi Devs, This has bugged me for a long time, and it's a simple UX design change to solve it. Problem: Users creating Contacts not linked to Companies/Accounts Cause: When a user creates an Opportunity where after browsing the Contacts they realise they
      • Spell Checker in Zoho desk

        Is there a way to set always check spelling before sending? Outlook does this and it is a handy tool to avoid typos
      • Enable Sync of SalesIQ Article Interactions to Zoho Analytics for Unified Knowledge Base Reporting

        Dear Zoho SalesIQ and Zoho Analytics Teams, Greetings, We’d like to formally request an enhancement to enable SalesIQ article interaction data to be synced with Zoho Analytics, so that we can obtain a unified view of our knowledge base performance metrics
      • How to enter membership share, sold or reimburse

        Hello, First, I am just begining taking care of the accounting of my organisation, and new also to Books. In Books, our accounting plan has an account #3900 - Share capital, that cumulates the share our member pay. How do I write a sale or a reimbursement
      • Ability for me to take the issued PDF certification on successful completion of a course then push to zoho sign in order that it is digitally certified

        How can I take the issued PDF certification on successful completion of a Zoho Learn course then trigger a workflow to push to Zoho Sign in order that it is digitally certified, hosted on the blockchain and then push to Zoho Workdrive to be hosted off
      • Candidates rejection process

        Is there a way to get ZOHORecruit to automatically send out an email to candidates that are rejected?
      • Multi file upload

        Hi, I just wonder if one could upload multiple files in one shot, say between one and three files, without adding multiple File Upload fields? Thanks, Alalbany
      • Next Page