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

      • Specifying a filename for Schedule Reports

        Is it possible to specify a filename to use with scheduled reports? For example: With a general ledger report, instead of general_ledger.pdf I would like to include the date the report was generated in the filename so it is called general_ledger_202
      • Need to upsert "Created Time" field in Leads Module

        I am in the process of implementing Zoho CRM for my business. I need to modify the "Created By' field to reflect the actual date/time the lead was captured in my original Excel file. Otherwise, my conversion velocity data will always be inaccurate, which
      • HTML for confirmation email

        Hi, After a prospect submitted the Zoho form, we want to send a confirmation mail. In this mail we want to add our email signature. However, while this is possible in Zoho CRM this doesn't seem to be an option in Zoho Forms. Also an html editor is not
      • Fire a webhook when the user gets access to portal

        Hello, We would like to know if there is any way in which we can automate a webhook call if the user accepts the portal invitation that Zoho sends by email. The customer module does have the option to trigger webhooks when a customer is created, updated,
      • Enable History Tracking for Picklist Values Not Available

        When I create a custom picklist field in Deals, the "Enable History Tracking for Picklist Values" option is not available in the Edit Properties area of the picklist. When I create a picklist in any other Module, that option is available. Is there a specific reason why this isn't available for fields in the Deals Module?
      • Creating Payrun summary by fetching values from the employee payruns and adding them

        I am trying to make a processing payrun module. I want on Form load to autofill payrun summary eg Total Deductions, Total employer contributions etc by fetching one value after the other in the employee payrun information. So it should loop through the
      • Feature Request - Zoho Books - Add Retainer Invoices to CRM/Books integration

        Hi Books Team, My feature request is to include Retainer Invoices in the finance suite integration with Zoho CRM. This way we will be able to see if retainer invoices have been issued and paid. I have also noticed that when the generate retainer invoice
      • Books <-> CRM synchronisation with custom Fields

        Hello, We are synchronising Books Customers with CRM Accounts. In CRM Accounts I set up last year a "segments" multiselect field shown below In Books, I set up a custom multi-select field with the same value as in the CRM And set up the synchronisation inside Books. Want to synchronise the Books Segments with the CRM Segments, but the later doesn't exist, and another non-existing is there ?! First, I don't understand where the field Segmentation is coming from. Second, I set CRM Segmentation to sync
      • Edit Reconciled Transactions

        I realize transaction amounts and certain accounts cannot be edited easily once reconciled, but when I audit my operational transactions quarterly and at the end of the year sometimes I need to change the expense account for a few transactions. To do
      • Request to Customize Module Bar Placement in New Zoho CRM UI

        Hello Support and Zoho Community, I've been exploring the new UI of Zoho CRM "For Everyone" and have noticed a potential concern for my users. We are accustomed to having the module names displayed across the top, which made navigation more intuitive
      • Sending campaigns from other server

        Hi, Is it possible to send campaigns from another server so customers can see mail direct from our company (Corrata) and not from ZCSend.net? Thanks, Tim
      • Edit a previous reconciliation

        I realized that during my March bank reconciliation, I chose the wrong check to reconcile (they were for the same amount on the same date, I just chose the wrong check to reconcile). So now, the incorrect check is showing as un-reconciled. Is there any way I can edit a previous reconciliation (this is 7 months ago) so I can adjust the check that was reconciled? The amounts are exactly the same and it won't change my ending balance.
      • Admin and Dispatcher Users show as Field Technicians in Dispatch Module?

        Hi Zoho, Our Admin and Dispatch user both show up as Fied Technicians / Field Agents in the Dispatch module, but they most certainly should not be assigned to any of the work orders and service appointments. These users are NOT service resources. How
      • Zoho Payroll: Product Updates - June 2025

        This June, we’re taking a giant step forward. One that reflects what we’ve heard from you, the businesses that power economies. For our customers using the latest version of Zoho Payroll (organizations created after Dec 12, 2024) in the United States,
      • View Products (items) in Contact and Company

        Hi, I would like to know if there is an option to view all the products /(items) that were inserted in the pipeline deal stage for exemple "Win Pipeline" within the company and contacts module section? For instance, view with the option filter for the
      • Update subform dropdown field choices - on load workflow

        Hi, I have a "Check In" form that has "Contacts" subform and a "Tickets" subform. When the form is loaded, I want to populate one contact and the number of tickets. I want the "Contact" field in the "Tickets" subform to have the choice of "Contacts."
      • Upload Zoho Inventory Item Image by API

        itemID = item.get("item_id"); organizationID = organization.get("organization_id"); resvp = zoho.inventory.getRecordsByID("items",organizationID,itemID,"zoho_inventory_conn"); info resvp; image_file = invokeurl [ url: "https://t4.ftcdn.net/jpg/03/13/59/81/360_F_313598127_M2n9aSAYVsfYuSSVytPuYpLAwSEp5lxH.jpg"
      • Salesforce to Zoho One Migration

        HI, I am about to start a migration from Salesforce to Zoho One I would like to know the best practise for this, my current thoughts to the approach is 1) Create fields, modules as required for migrating data 2) migrate Data 3) go live Will this approach
      • Zoho Expense Integration with Zoho Books

        I want to know what flexibility do i have in selecting the chart of accounts which get a hit whenever we are posting any expense or advance in zoho expense?
      • Custom Function to Update Ticket based on Subject of Ticket

        This may be pretty simple but I'm having issues with getting a custom function to fill out custom fields based on the subject of a ticket and not the body of a ticket. Basically we need to fill in the PO number and Item ID custom fields, both of this
      • Incoming 'Message' data via WhatsApp appears empty

        the Incoming 'Message' data via WhatsApp appears empty; instead of customer messages, I only see CRM system notification messages are being displayed. I have seen 3 messages like this since yesterday it seems that in 'All Message' the message snippet
      • Handling Automatic Replies in Desk

        We send out email campaigns (currently via Klaviyo) and naturally we receive "Automatic Replies" to these mass email campaigns. These responses are all being routed to Zoho Desk. We get two types of "Automatic Replies" Type 1) Customer is out of the office/holiday
      • Zoho Mail API Error EXTRA_KEY_FOUND_IN_JSON

        I have a workflow set up in Pipedream that uses the Zoho Mail API to send emails from my account. It's worked without issue for months but today I'm getting the following 404 error for every email I try to send: { "data": { "errorCode": "EXTRA_KEY_FOUND_IN_JSON"
      • How to search (web API) for a Calls record by phone number?

        Using v8 /Calls/search web api I'm unable to to complete a search request no matter how I use the api: When I try using "criteria=" I get: response: <Response [400]> response_json: { "code": "INVALID_QUERY", "details": { "reason": "the field is not available
      • [Free Webinar] Product Release Updates - Creator Tech Connect

        Hello Everyone! We welcome you all to the upcoming free webinar on the Creator Tech Connect Series. The Creator Tech Connect series is a free monthly webinar that runs for around 45 minutes. It comprises technical sessions in which we delve deep into
      • Zoho GenAI API Error Not a valid response from zia.

        Zoho GenAI API Error Not a valid response from zia.
      • Help me to retreive my Document

        Please help me to retrieve my documents from any date between 1st February, 2025 to 20th,March 2025 .it got mistakenly deleted on the 21 of March 2025 due to phone screen malfunction I earnestly await your positive response .thank you
      • how to change the page signers see after signing a document in zoho sign

        Hello, How can I please change the page a signer sees after signing a document in Zoho Sign? I cannot seem to find it. As it is now, it shows a default landing page "return to Zoho Sign Home". Thanks!
      • Look Up Field Type not available for events and tasks?

        Look Up Field Type not available for events and tasks?    
      • I cannot check out to Zoho People.

        When I tried to check out today, there's prompt that inhibits me to check out: To add entry in Attendance, log time for any of your jobs
      • Digest Juin - Un résumé de ce qui s'est passé le mois dernier sur Community

        Bonjour à toutes et à tous, Ce mois-ci encore, tout s’est enchaîné à toute vitesse ! On vous fait un petit récap de ce qui a marqué ces dernières semaines. Zoho RPA est une solution robuste d’automatisation des processus, conçue pour s’intégrer aux systèmes
      • Different Transaction Series for Different Types of Sales

        Is there any way I can create multiple transaction series for different type of Sales? Say B2B-001 and B2C -001 for respective type of Sales.?
      • Unable to charge GST on shipping/packing & Forwarding charges in INDIA

        Currently, tax rates only apply to items. It does not apply tax to any shipping or packing & forwarding charges that may be on the order as well. However, these charges are taxable under GST in India. Please add the ability to apply tax to these charges.
      • Customer Advance Zoho Book API

        All I could find was Customer Payment API, it does not have facility to add customer advances, where those are not linked to any invoice as such. How to do it?
      • Even though the received amount+tax is equal to or lesser than the invoice value, zoho doesnt allow to record

        Even though the received amount+tax is equal to or lesser than the invoice value, Zoho mentioned the error- you've recorded more payment than the actual invoice balance. please check again. screenshot also attached.  You've recorded more payment than
      • Multiple deductions in invoice

        I issue invoices to a customer that include multiple deductions that I would like to track in different expense accounts. But that is not possible in Zoho Books as there is only one Deduction field and even that I don't have control over to assign it
      • #BiginnersTips | How to bulk update closing dates for multiple deals in Bigin

        Hello Biginners! Keeping your CRM data accurate is crucial for any business- big or small. One key aspect is ensuring that closing dates for deals are always up to date. Why? Because if a deal is closed but not updated, your dashboards and reports would
      • 采购里出现付款通知 的错误

        采购里面出现付款通知错误,怎么调整,我找不到路径,好像是ZOHO 自动生成的,请问怎么调整
      • {"code":1002,"message":"Statement of Accounts does not exist."}

        Hello Zoho team, I faced an issue while trying to POST a sales order from sap to zoho books, using the below data packet: {   "customer_id": "4322967000027451968",   "line_items": [     {       "item_id": "2154170000010847685",       "rate": "752.00",
      • Add Custom Fields only in Customer module and not on supplier module!? Is not there a way to do that!?

        I am trying to create custom fields on clients module but it also gets created on suppliers module; which of course does not make sense at all as a lot of custom fields are client or supplier specific but never both. I am missing something? This seems
      • Next Page