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

      • Zoho Writer Default Publish Setting for Mail Merge

        Hello, I was thinking of using Mail Merge to create documents from CRM and automatically link them. However, I noticed the "publish" function and it seems the default is "to the world". This creates some anxiety as it is not clear what this "to the world"
      • Contacts Profile

        Is there a way to add a picture to my contacts profile? You have an outline of a person but no way I can see to import a picture.
      • Tip 46: View resource allocation while adding or editing tasks

        Keeping track of employees workload can be daunting but also necessary. Overloading employees with work can cause burnout and reduce productivity.  Managers should be able to identify resources who are less engaged when assigning tasks. This will ensure a balanced workload and also improve employee's efficiency. Zoho Projects lets you identify resources who are available to take up a job when you add or edit a task.  ​ Assign the task to team members and the calendar in the Start Date field will display
      • Switching Between Multiple Zoho One Organizations in New UI

        Here’s a polished version in English that you can use on Zoho’s support or community forum: Subject: Switching Between Multiple Zoho One Organizations in New UI Hello Zoho Community / Support Team, I’m currently managing two independent Zoho One organizations.
      • .ds import error from .ds file

         Problem encountered while creating the application Exception occured while publishing message to the topic :: [DataModelTopic]
      • Fully functional FSM workflow

        I am using Books, FSM, Begin and Desk. At this moment, FSM is not fully functional even on its own. For example, Customer A buys 4 air-cons and 3 brackets from us. We are fine to create WO manually in FSM. This should be the full loop for a FSM workflow:-
      • Connect Woocommerce new order to zoho books via zoho flow

        Hello i want help to create a flow to create a new sales order from woocommerce to zoho books. Can someone send me step by step flow, functions and fields?
      • What's New in Zoho Invoice | April - June 2025

        Hello everyone! We're excited to share the latest feature updates and enhancements we've made to Zoho Invoice from April to June 2025. In this, you will learn more about the following features: New Integrations via Zoho Marketplace Add Images to Email
      • PROJECTS - More flexibility with task and pricing

        Hi Everyone, I would like to use PROJECTS in my Zoho Booking app but it does not fit into my business. For example: I charge per sessions fixed price. My session usually are 2 hours and I bill the customer on the end of the month. My session can have
      • Is it possible to change default payable account for a bill?

        We have a case where we need to change a bill account from the default accounts payable to another account (it can be current asset or current liability, depending on the case). However, Zoho Books has set default account for bills, (accounts payable)
      • how to upload a reviewed price list in zoho to replace the existing price list

        Price list upload for my zoho books
      • Company details and emails

        Our company has recently been rebranded and we have new email address - How do I update information for users. I have tried to re invite users with new email but it sends me to organization and there is no where I can change the email or invite with new
      • Linking Resale Certificates to Customer Locations

        Florida Resale Certificates must be on every customer invoice. We have customers with multiple locations and each location has a seperate FL Resale Certificate. The FL Resale Certificate makes the transaction EXEMPT from Sales Tax. Can FL Resale Certificate
      • Notebook App Not Opening

        I love this app but for the last 2 days it recuses to open. My phone tells me the app is bugged and I must wait for a new update. Is anyone else having this problem or is something going on with me? I have many important notes that I can't necessarily
      • 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
      • Copy Sales Order Reference# to Purchase Order#

        Hello, We use our customer's purchase order number as the order number on our purchase order to the supplier.  We direct ship everything from our suppliers and the customers then see their PO number on the packing notes (instead of a sequentially-generated one). Therefore, is it possible to use automation to copy the Sales Order Reference# (customer PO) to the respective Purchase Order# (our PO) when converting the Sales Order to a Purchase Order?
      • Free webinar: Zoho Sign in Q2 2025: A quick walkthrough

        Hi there! We’re halfway through the year—and Zoho Sign has some exciting enhancements to show for it! Join us in our upcoming webinar to discover what's new and what you can look forward to. What will this session cover? Explore the newest features introduced
      • Using a Webhook as an Action

        I have been able to setup where I can use a webhook as a Trigger, but I am wondering how I can use a webhook as an Action. In the Zoho Flow Builder when using Zoho CRM as a trigger, I do not see a way to invoke a URL to POST json data that can be used
      • Adding commas to a numeric value

        Hi, I want to add commas to numeric values so that they look like money E.g 1234.56 to 1,234.56 12345.67 to 12,345.67 12345678.90 to 12,345,678.90 How do you do that in Deluge? Thanks for the help
      • Pushing Zoho People leave into Microsoft calendar: how to chose how "event" is shown (busy, free etc)

        Hi, how can I select how a "leave" event is pushed into Microsoft calendar? I want for leave "working elsewhere" to show as working elsewhere and NOT as busy.
      • Tiktok and Instagram Carousel with Music

        Is it possible to add music or sound (can be downloaded or uploaded or attached) when we upload carousels in IG and Tiktok?
      • [Product Update] Locations module migration in Zoho Books integration with Zoho Analytics

        Dear Customers, As Zoho Books are starting to support an advance version of the Branches/Warehouses module called the Locations module, users who choose to migrate to the Locations module in Zoho Books will also be migrated in Zoho Analytics-Zoho Books
      • Once again, non-admins can no longer revise the site map

        Not sure when this change happened, but it's a problem now. This appears to be a regression on this issue: https://help.zoho.com/portal/en/community/topic/bug-non-admins-can-no-longer-revise-the-site-map ... which was solved. That issue was also a regression.
      • Detail View in Mobile without Labels

        Zoho creator 6. I have been trying to acheieve this but not able to. I have a quick view of my articles using custom layout for mobile. When i tap on an article it opens in detail view on my mobile which has two cols. Left displays label and right the
      • Updating task using excel file

        Hi, Is there a way to update existing tasks using excel file import?  Thanks
      • Cross module filtering is now supported in CRM

        Editions: All DCs: All Release plan: This enhancement is being released in phases. It is now available in AU, JP, and CN DCs. Help resource: Advanced filters The Cross-module filtering enhancement is now available to all CRM accounts in the following
      • Before Going To The Qc stage , site ready ness file upload mandtoty how to achive this in the blue print transition

        Before Going To The Qc stage , site ready ness file upload mandtoty how to achive this in the blue print transition On click of the Predelivery transition can we show site ready ness file upload mandtoty or on click of the QC show the alert message site
      • Note cards are duplicating

        Hi, I've been using this app for some time and love it. Recently I've noticed that upon closing a note card, it creates a duplicate. If I exit the notebook it's in and go back, everything is back to normal. Not a major issue but still a little annoying.
      • Where is the (Bulk) Notes Export function from Notebook ???????

        I have seen various threads over the last two years on this and basically no action from ZOHO at all ! BTW having to go to an individual note and export to PDF (which now doesn't even work ) or some sort of zoho format is by no means the answer ! I still can't see any sort of bulk (or even individual) export function across notes. This is really poor for a notes product that is nearly 4 years old from a "major vendor".  I now have a large number of notes (some with images) that I want to export and
      • Again about the backlighting of the search query when searching in a client for Linux

        Some time passed, I installed a client for Linux version 3.4.0, but I still did not receive the promised search with the backlighting of the search query how it was implemented in the client for android. In the previous topic, you told me that this function
      • Important! ZipRecruiter Sponsored Posting Plan Changes in Zoho Recruit

        Greetings, We’re reaching out to inform you about an important upcoming change to the ZipRecruiter Sponsored job board integration within Zoho Recruit. What’s Changing? Starting June 1, 2025, Zoho Recruit will be updated with ZipRecruiter's latest pricing
      • In the Blue Print Transition requirement received it will show 8 check field in pop up if they any one of this field then only move to next stage Ist quote

        In the Blue Print Transition requirement received it will show 8 check field in pop up if they any one of this field then only move to next stage Ist quote Pls help how i fix this
      • Linking Multi-UOM Barcodes to Products in Zoho Books

        Greetings, I'm using Zoho Books for retail shop and I'm running into a bit of a challenge with products that have multiple Units of Measurement (UOMs) and corresponding barcodes. For example, I sell cigarettes both as individual packets and in cartons
      • Convert Item to composite item

        When using Zoho CRM integrated with Zoho Inventory/Books, the item creation process is a little messy. After a few years of trial and error, we have settled on creating items in CRM, which are sync'ed to Zoho Inventory using Zoho's own internal integration.
      • Mapping “Account Name” from CRM to Campaigns

        I’m syncing our Contacts list to Campaigns and want to select “Account Name” as an available field. Account Name does not appear in the drop down menu for CRM field even though Account Name is a field in our standard layout. How can I make it availa
      • Zoho Campaigns to Zoho Analytics Sync Fails – Field Mapping Shows But Not Applied

        I’m facing a persistent issue with the Zoho Campaigns integration to Zoho Analytics in my workspace. Here’s a detailed description of the problem: Under Edit Setup, I see a field mapping summary that shows: DataField Mapping: Most Recent Login However,
      • Host in US Data Centre

        I humble apply to be registered on US Data centre
      • Multiple images, one record

        I have a form that is used to capture the following info: -Facility Name -Origin -Shipment # -Picture of Damaged Pallet (Image field) I want to be able to capture multiple pictures without having to create a new record, as there might be multiple damaged pallets on the shipment. Obviously, one never knows how many damaged pallets might be on a shipment so I'd prefer not to create 20 image fields and have most of them unused.  I'd prefer that they have an option to add another image only if they need
      • how to dynamically upload multiple images for single record?

        Is the use of dynamic multiple images in a single record supported? I've searched but have not found the answer. If it is supported, how is it done? I saw 1 suggestion to add a sub-form but that doesn't seem to be the answer. I don't want to add a set number of image fields. Each record would have a different number of images. I want the addition of images to be dynamic. thanks
      • Multi-upload field

        Hi I need to include a file upload field that allows the user to select multiple files and upload all at once. I hope I can do this with HTML, I'm new to merging HTML and deluge... Can I trigger a hidden file upload window to appear On User Input of a field in an embedded form? Thanks! Levi
      • Next Page