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!  

    • Sticky Posts

    • Kaizen #198: Using Client Script for Custom Validation in Blueprint

      Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

    • Kaizen #226: Using ZRC in Client Script

      Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In this

    • Kaizen #222 - Client Script Support for Notes Related List

      Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore how

    • Kaizen #217 - Actions APIs : Tasks

      Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.

    • Kaizen #216 - Actions APIs : Email Notifications

      Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are

    • Recent Topics

    • Monthly Webinar - Getting Started with Zoho LandingPage

      Are you building your first landing page and want a little guidance? Join our monthly Getting Started with Zoho LandingPage webinar and learn how landing pages fit into your marketing strategy, drive lead generation, and improve conversions. Here’s what

    • View all email threads directly from record's History and Interactions

      Greetings all, We've introduced the ability to view complete email thread conversations directly from records' History and Interactions sections, along with email delivery status and sentiment insights on the Interactions page—which makes it easier for

    • Marketing Tip #22: Check website and navigation for broken links

      Do you inspect your online store frequently? If not, here's your reminder to do it now. Broken links frustrate customers and make your store feel unreliable. Whether it’s a missing product page, an outdated menu item, social media accounts, or a broken

    • push notification to Cliq when user is @mentioned in CRM notes

      push notification to Cliq when user is @mentioned in CRM notes. Currently users that is @mentioned gets an email to be notified. User/s that is @mentioned should get a Cliq notification.

    • How to make entries for restaurant sales in Zoho Books?

      Hello, I'm new to Zoho Books. I need to understand how to record our restaurant sales in Zoho Books. We can't raise invoices for each bill from the daily sales report generated by our POS (duplicated effort). We need a means of entering cumulative sales

    • Integrate with WooCommerce using Wordpress Plugin

      We’re thrilled to announce a powerful update to the Zoho Marketing Automation WordPress plugin with WooCommerce integration! This enhancement enables new possibilities for businesses running online stores using WooCommerce, empowering them to merge seamless

    • How do I sync multiple Google calendars?

      I'm brand new to Zoho and I figured out how to sync my business Google calendar but I would also like to sync my personal Google calendar. How can I do this so that, at the very least, when I have personal engagements like doctor's appointments, I can

    • Domain already exists

      Hi, I tried to add my domain creativecolumnist.com but its showing as Domain already exist. Please release if it has already been associated with Zoho, I am the real owner of that domain.

    • Select forwarding

      For Zoho mail online on PC in web browser: I had forwarding enabled in section "Mail accounts / Forwards", and I also have some filters that send emails from some unwanted senders to Archive. But it doesn't work as intended, it forwards everything (obviously

    • system not picking my default custom service report template

      Can you tell me why when we create a service report always pick the (standard old) template? Even when I have a custom service report selected as Default.

    • Restrict Appointment Booking to Approved Clients

      Dear Zoho Bookings Support Team, We'd like to propose a feature enhancement for managing appointments within Zoho Bookings. This feature would ensure only pre-approved clients can schedule meetings. Desired Functionality: We propose the introduction of

    • Automate Credit Card Surcharge

      Is there a way to create an automation that will add a 3.0% credit card surcharge to a subscription whenever a customer pays via credit card?

    • I have the item field and Quantity field in the sub form , on the submit of the form if the quantity is grater than inventory means show alert on submit validation only for item type goods ,

      I have the item field and Quantity field in the sub form , on the submit of the form if the quantity is grater than inventory means show alert on submit validation . Stock Check Validation only for item type goods , not for item type service . For the

    • Disappearance of all articles in the knowledge base

      Hi there! It seems like all of our articles have disappeared from the knowledge base: However, the names still appear in the "sort articles" section:

    • Logic for sending to a non-primary email address

      Hi, I have a scenario where contacts are able to sign up for emails with 2 different email addresses (example: work, personal). I've mapped both to Campaigns from Zoho CRM, but when I go to target an email only the primary email addresses are pulling in. How can I update this to look at both of the email addresses - or specifically the secondary email address in Campaigns? Thanks, Jenny

    • Add "Reset MFA" Option for Zoho Creator Client Portal Users

      Hello Zoho Creator Team, We hope you are doing well. We would like to request an important enhancement related to Multi-Factor Authentication (MFA) for client portal users in Zoho Creator. Currently, Creator allows us to enforce MFA for portal users,

    • Tables for Europe Datacenter customers?

      It's been over a year now for the launch of Zoho Tables - and still not available für EU DC customers. When will it be available?

    • Does Zoho has chatroom/chatbot url feature?

      Hi Zoho community! I’m looking for a quick "Yes/No" answer for my dev team regarding Zoho’s capabilities. We currently use Zoho Desk for our Service Team and Zoho CRM for our Marketing Team to bring both functions under one platform. Our question: Does

    • One Support Email Managed By Multiple Departments

      Hello, We use one support email (support@company.com). Incoming emails come to the "Support Department" and based on what the customer is asking, we route that ticket to different departments (billing, technical support, etc.). When users in these different

    • Is it Possible to Modify Standard Report Urls

      Is there a way to permanently modify standard report Urls? Use case: Suppose I have a Products report. Showing list as timeline, calendar, or kanban doesn't make sense. Want to hide that from users by adding #Report:Products?zc_ShowAs=false&zc_Print=false

    • Updated font library: New font styles and custom font options in Zoho Sheet

      Zoho Sheet's font library now supports 500+ font styles in 60+ languages! The updated font library is stacked with new font styles, and some of the previously available font styles have been replaced with equivalent options. There are two ways you can

    • scope for phonebridge in CRM and phonebridge API documentation

      Hi I cannot find the scope to be used for phonebridge in CRM API V2 calls. I am getting OAUTH_SCOPE_MISMATCH for scope group ZohoCRM.modules.ALL,ZohoCRM.setttings.ALL Also I am not able to locate the documentation for the same, All I have is phonebridge

    • Job Alerts for Candidates

      hi All, I have 2 questions relating to sharing job details with candidates. 1. is there a way to notify candidates that meet certain criteria of current jobs available? eg. I run a candidate search, and identify 50 candidates that might be suitable. Can

    • Zoho Wiki or new Zoho Learn

      We are currently evaluating if we should move off confluence. At present in Confluence we have multiple levels within our documentation but with learn it looks like you can only have Space       - Manual             - Chapter Is it possible to have levels below Chapter? Also the same question for the existing wiki, can I have more sub-levels?

    • Fix image at bottom of a page fot automatic proposal creation

      I'm working on a proposal document to automate our proposal creation process. So far it works fine, but I experience some problems with an image I want to have fixed at the bottom of the page AND above the footer. This section of the document consists

    • Can't scroll the page down unless I refresh the page

      Hello, This issue has been going on with me and a lot of other users in my organization, we can't scroll down! the scrolling side bar doesn't appear and scrolling down through mouse or keyboard keys doesn't work, it seems that the page just ends in the

    • Price List

      II want to restrict the items to display in sales, quote, etc for which custom rates are added in price list. How I can do the same in Zoho books

    • Let’s Talk Recruit: Still switching tabs to source?

      Welcome back to the Let’s Talk Recruit series. Let’s talk about how you actually source talent. Do you open multiple job boards every single time a role opens? Run the same keyword searches you ran yesterday? Download, upload, rename, and then do it again

    • Kaizen #231 - Embedding Zoho Desk Tickets in Zoho CRM

      Hello, CRM Wizards! This week, let us enhance cross-team visibility between Zoho CRM and Zoho Desk. We will use the Zoho Request Client inside a Related List widget to display open Zoho Desk tickets directly within the Contact record in Zoho CRM. This

    • Introducing Job Alerts

      Keeping candidates engaged beyond their first application is one of the most consistent hiring challenges. Many interested candidates simply do not revisit career sites regularly, which can result in missed opportunities and reduced re-applications. To

    • Task status - completed - other options

      I have a dumb question I know i can make custom statuses for the tasks - but is there anyway to make additional "completed" statuses like for instance if i have a task "call back customer" and i leave a vm for them to call back marking it "completed -

    • Bank feed integration First Abu Dhabi Bank (FAB) to Zoho? (UAE)

      Hello everyone, Is First Abu Dhabi Bank in the list of banks available for bank feed integration with Zoho Books? Thank you.

    • How to Export Filtered List of Contacts?

      This seems like it should be simple, but I'm stymied. I'm trying to export a filtered list of my Contacts for analysis in a spreadsheet. The use case is that I'm an ecom business based in the US. The bulk of our customers are individuals stored as Contacts.

    • Quick Create needs Client Script support

      As per the title. We need client scripts to apply at a Quick Create level. We enforce logic on the form to ensure data quality, automate field values, etc. However, all this is lost when a user attempts a "Quick Create". It is disappointing because, from

    • can we add product images in Zoho CRM Quote PDF template?

      I want to create a quotation format in Zoho CRM similar to the attached PDF, where each product is displayed in a table with rpoduct image I need the product image to appear inside the line items section of the quote. However, while checking the Quote

    • Does Zoho Writer have Dropdowns

      I want to add a drop down field in Zoho writer. Is this possible?

    • Users Lookup

      It would be extremely convenient to have a lookup field whose type is Users. There are many instances where we need to relate certain actions to users. Furthermore, in our company the candidate sourcer might not be the one who's creating the profile (done by an admin). Please do consider adding this essential feature in the future. Thank you

    • Connecting Multiple WooCommerce Stores to a Single Zoho Marketing Automation Account

      Is it possible to connect multiple WooCommerce stores to a single Zoho Marketing Automation account?

    • Service Title in Service Report Template Builder

      I am currently working on the Service Report Template Builder in Zoho FSM. I have created three separate service report templates for different workflows: Preventive Maintenance Report Requested Service Report Installation Report My issue is that I cannot

    • Update: New Security Admin Role

      Hello Zoho Directory Admins! This post is to highlight the recent role and permission changes introduced as part of the security enhancements. Previously, Helpdesk Admins had the security permissions and were responsible for managing the security configurations

    • Next Page