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

    Nederlandse Hulpbronnen


      • Recent Topics

      • Good news! Calendar in Zoho CRM gets a face lift

        Dear Customers, We are delighted to unveil the revamped calendar UI in Zoho CRM. With a complete visual overhaul aligned with CRM for Everyone, the calendar now offers a more intuitive and flexible scheduling experience. What’s new? Distinguish activities
      • Chat to Lead

        Can I convert a Chat to a Lead?
      • Limit maximum entries for subform - depending on fields entry

        Hi Zoho! I have a form with a subform in it. I'd like to have limitation for the row number depending on an entry in a drop-down field in the main form (If the field in the main form is marked "Answer1" - Limit the entries to 1 row, if the field is "Answer2" to have 2 rows limitation, "Answer3" = no limitation at all) Can this be done? Thanks Ravid
      • Save HTML Snippet Page as PDF with Dynamic Data in Zoho Creator (Working Solution)

        Hi Zoho Creator Community 👋, I faced a common challenge while working with HTML Snippet Pages — I needed to generate a PDF with dynamic data and save it back into the record automatically. Here’s the working solution that might help others. Use Case
      • Make Camera Overlay & Recording Controls Visible in All Screen-Sharing Options

        Hi Zoho WorkDrive Team, Hope you are doing well. We would like to request an improvement to the screen-recording experience in Zoho WorkDrive. Current Limitation: At the moment the recording controls are visible only inside the Zoho WorkDrive tab. When
      • Rebranding Options for Zoho One

        We need the addition of rebranding and white-labeling settings directly within the Zoho One Admin Panel. This feature should allow organizations to customize the unified portal with their own logo, brand colors, and custom domain mapping (e.g., portal.company.com).
      • Tip #57- Accessibility Controls in Zoho Assist: Mobility- 'Insider Insights'

        Remote support should be easy to navigate for everyone. For users with mobility-related accessibility needs, long sessions and complex navigation can be challenging. Zoho Assist’s Mobility Accessibility Controls simplify interaction through keyboard-based
      • Total Cost in reports showing zero

        The image below shows my issue. The column Total Cost should show the cost to our company based on hours logged and the employee's rate. For instance, if the person working on Subtask 1 is paid 20/hr, then Total Cost should display $160 ($20x8 logged
      • To print Multiple delivery notes in batches

        In Zoho Books, we can print a Delivery Note from an Invoice using the Print Delivery Note option, but it is non-editable and always prints all line items from the invoice. Our requirement is to deliver invoiced items in batches and print delivery notes
      • Invoices not arriving and mail server settings

        I am having an issue where some clients are not receiving invoices. I have configured Zoho Books to send on my behalf and configured the appropriate SPF, DKIM and DMARC settings on my mail server and tested these as working. I get the CC'd copies so I
      • UPLOAD A CREATED PDF AUTOMATICALLY

        Using the html header pdf+print button, I have managed to find a way to have a user create a pdf using entered form data. Using the schedule button, I can have a "file uploaded" pdf mailed to someone as an attachment. The missing piece is to be able to add the pdf, created in that html page to a file upload field automatically? Right now one has to save it to computer and then upload it in a FILE UPLOAD FIELD. Any help would appreciated !  
      • Consolidated Department-wise Payroll Cost Summary Report

        Hello Zoho Payroll Team and Community, I am writing to discuss a reporting requirement regarding department-level expense tracking within Zoho Payroll. As we scale and manage salary distribution for employees across multiple departments, such as Accounts,
      • How to remove chat icon from knowledge base?

        I have set up a knowledge base to hold FAQs and documentation. It is currently standalone, and not integrated into our website. On every page there is a chat button in the bottom left corner that says "We're offline, please leave a message." How can I
      • [ZohoDesk] Improve Status View with a new editeble kanban view

        A kanban view with more information about the ticket and the contact who created the ticket would be valueble. I would like to edit the fields with the ones i like to see at one glance. Like in CRM where you can edit the canvas view, i would like to edit
      • Automated Dismissal of Specific Notifications and Centralized Control of Toast Notification Settings

        Dear Zoho Team, I hope this message finds you well. We would like to request two enhancements related to notification handling within Zoho Desk: Automatic Dismissal of Specific Notifications: Currently, when certain actions are taken in the ticket list
      • Show field in spreadsheet view depending on other field value

        Hello. Not sure if this is possible but let's say i have spreadsheet view in Creator with four different fields Field A, B, C and D Then i have a field named Response which for one record could contain only one of the pre-definde choices below A, B, C
      • Intergrating multi location Square account with Zoho Books

        Hi, I have one Square account but has multiple locations. I would like to integrate that account and show aggregated sales in zoho books. How can I do that? thanks.
      • Zoho Learn Zapier Integration

        Hello all, Is there any plan to integrate Zoho Learn with Zapier? It seems almost all Zoho products are in Zapier, with the exception of Learn and Marketing Automation.
      • Notice: SalesIQ integration paused on Zoho Sites

        I have this notice on my Zoho Sites in the SalesIQ integration setup. Can someone assist? "This integration has been temporarily paused for users. Reconnecting SalesIQ after disconnection will not be possible until we provide further updates." thank
      • Differences between Zoho Books and Zoho Billing

        Without a long drawn out process to compare these. If you were looking at these Books and Billing, what made you opt for one and not the other. Thanks
      • New Feature : Copying tickets with all the contents such as conversations/history/attachments etc

        Sometimes our customers and distributors do create tickets (or send emails) which contain more than one incident in them and then also some of the further conversations which are either created by incorrect new tickets or replies to old tickets are being created as combined tickets. In such cases we require to "COPY" the contents of the tickets into separate tickets and merge them into their corresponding original tickets. The "CLONE" feature doesn't copy the contents (especially the conversations
      • Como se agregan los empleados

        Necesito saber si para agregar empleados los mismos necesitan tener licencias
      • Deluge Error Code 1002 - "Resource does not exist."

        I am using the following script in a Custom Button on a Sales Return. Basically, the function takes the information in the sales return (plus the arguments that are entered by the user when the button is pushed) and creates a return shipping label via
      • Adding multiple Attendee email addresses when adding a Zoho Calendar event in Zoho Flow

        I am trying to integrate Notion and Zoho Calendar via Zoho Flow. However, the Attendee email address supported by Zoho Calendar - Create event only supports one email address, so I am having difficulty implementing automation to automatically register
      • Graceful Handling of Exceeded Option Limits

        Hi Zoho SalesIQ team. I would like to submit a feature request to deal with a bug in salesIQ Current Behavior (Bug): When a dynamic list passed to the Single Select Option Card contains more than 20 options, the Zobot stops responding (freezes/hangs)
      • System default SLA descriptions can't be modified

        The system default SLAs have identical descriptions for all SLA levels, but their settings differ. However, I am facing an issue where I cannot modify these descriptions and save the changes. The content of the description box can be edited but the changes
      • Adding non-Indian billing address for my Zoho subscription

        Hey Need help with adding a non-Indian billing address for my Zoho subscription, trying to edit the address to my Singapore registered company. Won't let me change the country. Would appreciate the help. Regards, Rishabh
      • How to create one ZohoCRM organisation out of a multi-organization?

        Hi, we have a multi-org including two different Zoho CRM organizations for two companies using respectively EUR and USD as default currency. I was wondering if there is any easy way to merge the two organizations into just one, so that users may access
      • Gray screen while signing documents

        We are all getting a "gray" screen when trying to sign documents in Zoho sign. Anyone else having issues?
      • Projects custom colors replaced by default orange

        Since yesterday, projects uploaded to Zoho, to which I had assigned a custom color, have lost the customization and reverted to the default color (orange). Has anyone else had the same problem? If so, how did you resolve it?
      • Interview booked through Invite but no Notifications

        We have a workflow that was developed through a developer/partner that was tested and worked. Today, we pushed a candidate through the process and invited them to an in-office interview. They were sent the booking link (as usual and as tested before successfully)
      • Automatiser la gestion des SLA dans Zoho Desk avec Zoho Contracts

        Les équipes du service client s’efforcent d’assurer un support rapide, régulier et fiable pour garantir la satisfaction de chaque client. Les accords de niveau de service (SLA) permettent de clarifier les engagements en définissant les termes et conditions
      • iOS App doesn't refresh for Document Creation

        Hello Zoho team, I have created a workflow to be used on a mobile iOS device which starts in Zoho Creater and ends with a murge and store function that then opens the newly created document within the Zoho Writer app. This process is working great however
      • Uploading a signed template from Sign to Creator

        Good day, Please help me on how to load a signed document back into Creator after the process has been completed in Sign. Below is the code that I am trying, pdfFile = response.toFile("SignedDocument_4901354000000372029.pdf"); info pdfFile; // Attach
      • Zoho DataPrep and File Pattern configuration

        I'm using Zoho data prep to ingest data from One Drive into Zoho Analytics... The pipeline is super simple but I can't any way to get all the files that I need. Basically I need to bring all the files with a certain pattern and for that I'm using a regex
      • Assistance needed: Activation of a domain

        Hello Zoho Support, I purchased the .com domain "primesolva.com" via Zoho 6 days ago. The domain is still pending, and I cannot access the DNS panel to add the TXT verification for domain ownership. Please confirm the registration status and help me activate
      • Operation not permitted

        I am trying to add an email address to the list of user but I am getting error Operation not permitted
      • Request to Permanently Delete Email User (info@mehbobgulf.com ) from Old Organization

        Please permanently delete the user email info@mehbobgulf.com It is still associated with my old Zoho organization. I cannot delete it because it shows ‘You cannot delete email. Zoho host’. I need to use this email in a new Zoho account.”
      • Client host [89.36.170.5] blocked using Spamhaus

        Hello please make make actions for delist ..... "Client host [89.36.170.5] blocked using Spamhaus"
      • Suggestion: Option to Re-run a migration

        As I'm going through a migration process, I like the IMAP migration tool, but it would be better if there were an option to re-run the same migration as configured. There's not even an option to copy/edit one that's already there. Just run if it hasn't
      • Next Page