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

    • Announcing the new SKILL.md for Zoho CRM and the updated OAS repository!

      We are introducing a new zoho-crm skill to make working with Zoho CRM Developer tools (like APIs, functions, widgets, client scripts, queries etc) easier and faster, with the help of AI in your preferred AI harness like Claude Code, Codex, Cursor, VSCode

    • Kaizen #261 : Using Zoho CRM Skill to generate complex COQL queries

      Hello everyone, In the previous Kaizen posts, we introduced the zoho-crm SKILL.md and discussed how it can help you when you are working with Zoho CRM APIs and Client Script. In this Kaizen, we will focus on using the Zoho CRM `SKILL.md` with GitHub Copilot

    • Kaizen #256 - Build an Arrival Readiness Web Tab in Zoho CRM

      Hi everyone! Welcome back to the Kaizen series! In the post, we discuss a use case in hospitality industry: how an Arrival Readiness web tab widget can be used to let reception staff identify and resolve issues before arrival of guests. Use case In the

    • 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

    • Recent Topics

    • AI Calling

      Hi, does anyone have experience or any thoughts on AI Calling. Getting AI to make calls on behalf of your company. We are looking into it, but are finding it difficult to get info and providers that can assist.

    • Email Forwarding to Zoho Desk Failing After Migration from Gmail to Outlook (Microsoft)

      We recently migrated from Gmail to Microsoft Outlook. Since the migration date, emails sent by our customers are no longer being received by Zoho Desk. I tried setting up the email forwarding rules in Outlook similar to what we had in Gmail, but it still

    • How to Fix an Outlook OST File That Cannot Be Opened

      Have you at any time attempted to open Outlook only to find that your OST file cannot be accessed? It can be very annoying, particularly since the file holds important emails, attachments, and other mailbox data. This problem might arise due to file corruption,

    • Record positive and negative bank transactions in the same expense account

      Hello, I hosted a promotional event and paid a vendor $600 for food catering (bento boxes). Twenty people attended the event, and each person paid $30 for a bento box, resulting in 20 separate $30 transactions deposited into the bank. I coded the $600

    • CRM Address Field - States with Countries in brackets

      Hi, Could you please remove the country in brackets from the Global State List, or at least allow us to edit these entries? It looks like the brackets were added during the initial data population, perhaps by someone building the list in a spreadsheet

    • 👍 Zoho CRM's Notes now gets Reactions and a new look

      Available in SA and JP DCs. Rolling out to other DCs in phases. Hello everyone, Notes help users capture important updates, collaborate with teammates, and maintain context for records. Now with Note Reactions, users can quickly acknowledge updates, express

    • How to mass find and delete duplicate files from OneDrive

      It is easy to save documents, photos, videos, and all other types of files using Onedrive, but if you upload the same files more than once then your OneDrive storage can end up being filled with a large number of duplicate files. Manually searching out

    • Different Report sharing filters within same Dashboard

      I have a question about sharing filters for a dashboard which contains separate reports built from the same query. Below are the pieces of the puzzle: - “Sales Query”: line-level query containing sales for a team of 5 sales reps; there’s no need for the

    • Make Your Workflows Smarter with Zia Agents

      Hello, Enterprise Support Community, Workflow rules can now go beyond predefined actions. Zia Agents can now be invoked directly from workflow rules in Zoho CRM, allowing you to bring contextual, AI powered actions into your automated processes. Choose

    • How can I add a Custom Field (or Customer_name) to a picklist?

      Our workflow is Shopify-->SO -->Picklist-->Package-->Shipment. We would like to have the Picklist template to include a custom field "Customer_Notes" (we have created this field already). This way we get alerted when a customer has notes on their account.

    • DYK 14: Create Tasks with AI

      Did you know AI can suggest tasks within your Zoho Projects portal? Breaking a project into clear, actionable work items takes time and manual effort. Especially when the same team handles both planning and execution. AI task suggestions in Zoho Projects

    • #11 Nithya's First Overseas Client

      Nithya designs for clients in three countries and has never met any of them. Her first overseas invoice took a full evening. The second took four minutes. The difference was not a clever tax trick. She stopped treating every international customer as

    • Other languages in Schedulers (Zoho Books)

      Hello everyone, currently we have create functions in other languages, like nodejs etc but on schedulers we can use only deluge.. Are other languages on schedulers roll out? Kind regards, Sakis Oikonomou

    • New in Office Integrator: Extract data from images into your spreadsheet

      Hi users, We are pleased to introduce the Data from Picture feature in Zoho Office Integrator's spreadsheet editor. It intelligently detects and organizes text and numbers from any image into structured cells using OCR. With this feature, users can turn

    • Edit PDFs using Zoho PDF Editor

      Hello users, In a previous article, we covered the organizing capabilities of Zoho PDF Editor. Here, we'll provide a quick recap of its editing features, including a few new additions. A few highlights of Zoho PDF Editor's editing capabilities: Add and

    • Partner with HDFC And Sbi Bank.

      Hdfc and sbi both are very popular bank if zoho books become partner with this banks then many of the zoho books users will benefit premium features of partnered banks.

    • Multiple subscription plan line items in Zoho Billing quotes

      I run an IT company and sell a lot of licences. A client might have multiple subscription plans including software licences in different categories. A client might have Microsoft licences, antivirus licences, web hosting and maintenance package services.

    • Mail Merge templates in Sandbox

      Rolled out for all DCs Hello everyone, You can now create and test Mail Merge templates directly in Sandbox, making it easier to validate document generation without affecting your live organization. Why this matters Mail Merge templates are often used

    • Dashboard Table of “My New Work Orders” Changes View

      Hi FSM Team, We noticed an inconsistency with the Dashboard Table of “My New Work Orders.” Initially, the table is configured to use the “My New Work Orders” view. When we go to the Home page, the table displays a different set of records. When we return

    • Tips & Tricks #6 | Zoho Vault: Audita actividad, Gestiona accesos, Comparte credenciales & mucho más.

      ¿Sabías que Zoho Vault puede hacer mucho más por la seguridad de tu equipo? Las contraseñas forman parte del día a día de cualquier persona y organización. Aplicaciones, herramientas internas, cuentas de clientes, servicios externos, plataformas de marketing,

    • Inquiry Regarding Customer Hierarchy & Sub-Customer Creation via Zoho API

      Dear Zoho Support Team, Our mutual client has requested support for implementing the Customer Hierarchy (Parent/Sub-Customer structure) within our existing workflow. At the moment, all invoices are being created in Zoho under the main (parent) customer

    • Which Zoho CRM tasks would you want an AI assistant to handle?

      I’ve started delegating my Zoho CRM work to AI – and many tasks now take me half the time. It has been so useful that we’re now working to make it available to everyone. Instead of clicking through records and tabs, I simply describe what needs to be

    • Introducing MCP for Zoho CommunitySpaces

      Hello everyone, Your AI assistant can now share the community workload with you. Zoho CommunitySpaces supports MCP (Model Context Protocol), so you can link an AI assistant like Claude, ChatGPT, or Cursor to your community and run it through plain language

    • CV-Library: The Newest Source Booster in Zoho Recruit!

      We’ve expanded your sourcing toolkit — CV-Library, one of the UK’s largest and most trusted online job boards, is now available as a Source Booster in Zoho Recruit. This gives recruiters instant access to millions of UK-based candidate profiles, all without

    • Tip 52#: Ways to improve data flexibility using related list

      A related list offers an ideal solution to string related data across entities together. It enables you to pull records from any module or external source and float them as a tab within your project, sprint, epic, work item, or release detail view layout.

    • Email Blast

      Hi, How do we send an email blast to thousands of customers? The email addresses are not yet saved in Zoho Desk.

    • Zoho ERP | Product updates | September 2026

      Hello users, A new month, a fresh set of updates in Zoho ERP. This month brings Netting, enhancements across our verticals, and more updates to help streamline your everyday work. Explore this month’s updates and see what’s new. Introducing Netting If

    • Introducing Zoho POS for Restaurants

      Hello Community, We’re thrilled to announce the launch of Zoho POS for Restaurants, unveiled at the 30th milestone edition of Zoholics India 2026. Running a restaurant involves multiple teams and workflows. A single table journey, from seating a guest

    • WhatsApp Business Message Pricing Update: Effective October 1, 2026

      Hi everyone, Starting October 1, 2026, Meta is updating how WhatsApp Business messages are charged. This guide explains the new per-message pricing model, how message categories work, and what changes for service messages specifically. How Meta charges

    • Zoho Calendar integration for Bigin

      Hello everyone, We're excited to introduce Zoho Calendar's integration in Bigin! For a while now, users have been able to sync events in Bigin with Google Calendar and Outlook Calendar - but with this new topping, it syncs with Zoho Calendar as well.

    • Does Updating Employee Names and Profile Pictures in Zoho One Automatically Sync Across All Zoho Applications?

      Hi Zoho Team, We are currently using Zoho One in our organization and want to centrally manage employee profile information. As a Zoho One Super Admin, if I update the employee name and profile picture for all users from the Zoho One Admin Panel, will

    • Enhanced shared mailboxes: Dedicated Sent folders, Run-through filters & fresh UI

      Hi everyone, Collaborative communication is the backbone of smooth operations; whether you are handling customer support queries, managing vendor requests, or tracking sales leads. Shared mailboxes in Zoho Mail ensure your team stays on the same page

    • 10/22 15時〜 オンラインもくもく会のお知らせ | Zoho ワークアウト

      ユーザーの皆さま、こんにちは。コミュニティグループの中野です。 10月22日（木）開催の「Zoho ワークアウト」をご案内します。 Zoho ワークアウトは、参加者それぞれが取り組みたいテーマを持ち寄り、ユーザー同士で交流しながら、 設定・検証・運用改善を進めるオンラインの「もくもく会」です。 「試してみたい設定があるけれど、なかなか時間を取れない」 「一人で進めていると、途中で手が止まってしまう」 「他のユーザーの活用方法や工夫を聞いてみたい」 そんな方は、Zoho ワークアウトで一緒に取り組んでみませんか？

    • Reporting tags associated to Project in Zoho books?

      Hi, I know you can add reporting tags to contact, articles and transactions. Is it possible to add reporting tags to Project. We Zoho reports I would be able to generate reports by tags. Sometimes tags for a contact is different for projects (ie Projects

    • Reporting Tags in Profit and Loss Reports Analysis

      Hello Community and Zoho Books Product Team, I would like to highlight a limitation I encountered with Reporting Tags in Zoho Books. Reporting Tags Not Applying to Automated Inventory Journal Postings from Product Invoices. For inventory product invoices,

    • Spam Quarantine: Manage suspicious emails in Zoho Mail

      When an email is quarantined by spam processing, it need not always be blocked right away. Some emails may be marked incorrectly, or may need to be reviewed before a final decision is made. The Spam Quarantine feature in the Zoho Mail Admin Console gives

    • What is the difference between "Reply" and "Public Comment" in a ticket?

      Hey, my company is thinking about switching to Zoho Desk but we do not understand the difference between the "Reply" and the "Public Comment" feature. When should we use which? And why? What is the difference between them? Thank you for your help! Kindest

    • Comments Vs. Replies

      I'm curious as to the difference between a "Reply" and a "Comment" on a ticket. It appears that "Replies" are what's used to determine response time SLA's and there are also used to automatically re-open tickets. I'm just trying to understand the key differences so I can educate both our clientele and our back-end users on which function/feature to use to better improve the ticket lifecycle. If anyone has any insight it would be appreciated. Thanks!

    • What's New in Zoho Inventory | July & August 2026

      Hello users, The July and August 2026 releases bring a range of new features and improvements across the product. From the Nigeria Edition and Super Admin enhancements to Sri Lanka IRD-compliant invoicing, Loyalty Program Management, and improvements

    • Forms data export bug

      The export csv with a password has changed for the worst. It is less secure by not allowing complex passwords. Just last week and the last year (at least) I was able to use a complex, secure password. Export CSV moreover doesn't even work if I use a simple

    • Next Page