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!  


      Zoho Campaigns Resources


        • Desk Community Learning Series


        • Digest


        • Functions


        • Meetups


        • Kbase


        • Resources


        • Glossary


        • Desk Marketplace


        • MVP Corner


        • Word of the Day


        • Ask the Experts


          • Sticky Posts

          • 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
          • Kaizen #152 - Client Script Support for the new Canvas Record Forms

            Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved
          • Kaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script

            Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.
          • Kaizen #210 - Answering your Questions | Event Management System using ZDK CLI

            Hello Everyone, Welcome back to yet another post in the Kaizen Series! As you already may know, for the Kaizen #200 milestone, we asked for your feedback and many of you suggested topics for us to discuss. We have been writing on these topics over the

          Zoho CRM Plus Resources

            Zoho Books Resources


              Zoho Subscriptions Resources

                Zoho Projects Resources


                  Zoho Sprints Resources


                    Zoho Orchestly Resources


                      Zoho Creator Resources


                        Zoho WorkDrive Resources



                          Zoho CRM Resources

                          • CRM Community Learning Series

                            CRM Community Learning Series


                          • Tips

                            Tips

                          • Functions

                            Functions

                          • Meetups

                            Meetups

                          • Kbase

                            Kbase

                          • Resources

                            Resources

                          • Digest

                            Digest

                          • CRM Marketplace

                            CRM Marketplace

                          • MVP Corner

                            MVP Corner




                            Zoho Writer Writer

                            Get Started. Write Away!

                            Writer is a powerful online word processor, designed for collaborative work.

                              Zoho CRM コンテンツ



                                ご検討中の方

                                  • Recent Topics

                                  • Zoho CRM Analytics - Allow To Reorder Dashboards

                                    I would like to suggest that you add the ability to reorder dashboards in the Analytics Module. I can see that this has been requested some time ago, the latest 9 years ago. I am not sure if this is a big or small endeavor, but such a small fix can go
                                  • Plans to allow more columns of monitoring, and monitoring not only your own channels?

                                    Are their any plans to allow more columns of monitoring, and monitoring not only your own channels? Here's why - I'm sure I'm not alone in that we sell other brands products, so not only am I interested in my own brand social channels, but also the social
                                  • Kaizen #194 : Trigger Client Script via Custom buttons

                                    Hello everyone! Welcome back to another interesting and useful Kaizen post. We know that Client Scripts can be triggered with Canvas buttons and we discussed this with a use case in Kaizen#180. Today, let us discuss how to trigger Client Script when a
                                  • Adding Choices in a Sub-Form Dropdown

                                    Hi, Has anybody tried Adding Choices to a Dropdown in a Zoho Creator Sub-Form programmatically? My Deluge code adds rows to a subform with 2 fields A and B. A - text field. B - dropdown. My Deluge script adds the row and displays A successfully. For the
                                  • Zoho CRM Email Templates 100% Width No Background How?

                                    Hi, On the Zoho CRM Email Templates in setup > customization > templates > new templates > I choose blank template, but still it puts in a gray background and a max width for the email. I just want to make an email that looks like an email I would send from gmail that has no background or max width. How do you do this? 
                                  • Checking client unsubscribe details

                                    Hi team, Can you please let me know where we can check if a client has unsubscribed, along with the date and time it was done? If this information is not available at our end, please help confirm the unsubscribe date for the below email ID from the backend:
                                  • Manage control over Microsoft Office 365 integrations with profile-based sync permissions

                                    Greetings all, Previously, all users in Zoho CRM had access to enable Microsoft integrations (Calendar, Contacts, and Tasks) in their accounts, regardless of their profile type. Users with administrator profiles can now manage profile-based permissions
                                  • Optimum CRM setup for new B2B business

                                    Can some advise the most common way to setup Zoho CRM to handle sales for a B2B company? Specifically in how to handle inbound/outbound emails. I have spent hours researching online and can't seem to find an accepted approach, or even a tutorial. I have
                                  • Integration with...

                                    Dear Zoho Commerce team, Please could you consider the integration within Zoho Commerce / Inventory and Qapla'? (https://www.qapla.it/en/) This app is better than Aftership in many ways: - Aftership integration require PRO plan and price start from more
                                  • Scan and Fill CRM Lookup Field

                                    Not sure if there is a reason why this isn't possible or if I'm just missing it. But I would like to be able to use the scan and fill feature on the mobile app to prefill the CRM lookup field and fetch the rest of the data in the form.
                                  • Customer Management: #2 Organize Customers to Enhance Efficiency

                                    When Ankit started his digital services firm, things felt simple. A client would call, ask for a website or a one-time consultation, Ankit would send an invoice, get paid, and move on. "Just one client, one invoice. Easy.", he thought. Fast forward a
                                  • Zoho Mail and Zoho Flow integration to automatically create ToDo tasks from outbound emails

                                    How do i setup Zoho Mail and Zoho Flow integration to automatically create ToDo tasks from outbound emails
                                  • Attachments between Zoho and Clickup, using Flow.

                                    Olá suporte Flow, tudo bem ? Estamos usando o flow para integrar Zoho Desk com o clickup. Não localizamos a opção de integrar anexos entre do zoho Desk para o clickup. Gostaríamos de saber se migrando para o plano pago, teremos suporte para fazer a integração
                                  • Adding an Account on Zoho Mail Trigger in Zoho Flow

                                    I'm trying to create a flow using the zoho mail trigger "Email Receive". My problem is that when I select this trigger, it only shows one account from the account dropdown. I'm planning to assign it on a different email. How can I add other email ad
                                  • Linnworks

                                    Unless I am missing something, the Linnworks integration is very basic and limited. I have reached out to support but the first response was completely useless and trying to get a reply in a timely manner is very difficult. Surely I should be able to
                                  • Test data won't load

                                    I am using a Flow to receive orders from WooCommerce and add them to a Zoho Creator app. I recently received an order which failed, and when attempting to test the order I found that it just shows a loading animation and shows up in the history as "queued."
                                  • AddHour resets the time to 00:00:00 before adding the hour.

                                    Based on the documentation here: https://www.zoho.com/deluge/help/functions/datetime/addhour.html Here's my custom function: string ConvertDateFormat(string inputDate) { // Extract only the date-time part (before the timezone) dateTimePart = inputDate.subString(0,19);
                                  • WhatsApp Link is not integrating

                                    Hello, I am using zoho flow. when new row added in google sheet it sends email to respected person. In email body I have a text "Share via WhatsApp". behind this text I putted a link. But when the recipient receives email and wants to share my given info
                                  • Zoho flow - Webhook

                                    If I choose an app as a trigger in Zoho Flow, is it still possible to add a webhook later in the same flow?
                                  • Zoho Flow + Bigin + Shopify

                                    We are testing Zoho Flow for the first time and want to create a flow based in first purchases. When a client makes his first order, we're going to add the "primeiracompra" (first order) tag to his account in Shopify (it's not efficient, but that's the
                                  • 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
                                  • Is it The Flow? Or is it me?

                                    I want to do some basic level stuff, take two fields from a webhook, create a zsheet from a template using one field with date appended, create a folder using both fields as the name, and put the zsheet into that folder. I was going to elaborate - but
                                  • Having problem with data transferring from Google sheet to ZMA

                                    When connecting Google sheet with Zoho marketing automation it is having the email as a mandatory field. Can I change it as non-mandatory field or is there any other way to trasnfer data from google sheet to ZMA. I have leads which we get from whatsapp,
                                  • Dropbox to Workdrive synchronisation

                                    I want to get all the files and folders from Dropbox to Workdrive and each time a new file or folder is added in dropbox i want it to be available in Workdrive and wise versa. Sync Updates to Files Trigger: "File updated" (Dropbox). Action: "Upload file"
                                  • Microsoft Planner Task to Service Desk Plus Request - error n4001

                                    Hi there. I'm trying to create a flow that will create a new request in ServiceDesk Plus when a new task is created in Microsoft Planner. I have succesfully connected both Planner and ServiceDesk Plus, and have configured the 'create request' section
                                  • Trailing Space in "Date and time scheduled "

                                    I am trying to use the Zoho Projects - Create event action in a flow. It is failing with the output error as: "Action did not execute successfully due to an unknown error. Contact support for more details." The input is: { "Duration - Minutes": 30, "Project":
                                  • Project name by deal name; project creation via flow

                                    Hello, I want to create a project in zoho projects using flow by a trigger at the crm. My trigger is the update of a deal (stage). The project name should be the account name/ deal name. But I dont find the solution to it. Can you please give me the answer
                                  • Slack / Zoho Flow; Repl

                                    I am trying to add a comment in a zoho ticket when someone reply's to a message in a thread. The Message posted to public channel trigger doesn't seem to pick up thread messages. I also cannot use the thread_ts field as it doesn't seem to pull that in.
                                  • Get Holiday ready with Zoho Mail's Templates

                                    As the holiday season approaches, it’s time to step away from work and unwind. You may not be able to respond to every email or send individual messages to wish everyone holidays greetings—but It is still important to stay connected. How do you send thoughtful
                                  • Customize folder permissions in a Team Folder in a Team Folder via zoho Flow

                                    HI All, on the nth level folder of a team folder I would like to Customize folder permissions when it's created in the flow of Creating folders. That last level I only want to grant access to a specific group, goup ID 201XXXXXXXX. Can you help with a
                                  • Associating a Candidate to a Job Listing

                                    Hello, I am trying to use Zoho Forms embedded on my website for candidates to apply for a job opening. I want the form then to tie directly with zoho recruit and have the candidate be automatically inputed into Recruit as well as associated with the specific
                                  • Automate reminder emails for events

                                    Hi team, I am trying to automate send event reminders via zoho campaign to my attendees 1 day prior to my scheduled events. I used zoho flow, autoresponder in zoho campaign, as well as I used workflow and automation - but none of these methods are working.
                                  • Update related module entry Zoho Flow not working with custom module ?

                                    Hi everyone. I am facing an issue here on Zoho Flow. Basically what I am doing is checking when a module entry is being filled in with an Event ID. Event is a custom module that I created. If the field is being filled in I fetch the contact with its ID
                                  • How to disable time log on / time log off

                                    Hi We use zoho people just to manage our HR Collaborators. We don't need that each persona check in and out the time tracker. How to disable from the screen that ?
                                  • Zoho Flow - Add to Google Calendar from trigger in Zoho Creator App

                                    Hello! New to Zoho Flow, but I believe I have everything setup the way it should be however getting an error saying "Google Calendar says "Bad Request". Any idea where I should start looking? Essentially some background: Zoho Creator app has a trigger
                                  • Picklist field shows "none" as default

                                    Hello, Is there an option to avoid showing "none" as the default value in a picklist field? I also don't want to see any option displayed. My expectation is to have a blank bar, and then when I display the drop-down list, I can choose whichever I wa
                                  • Email authentication

                                    أريد التحقق من البريد الإلكتروني
                                  • What’s New in Zoho Analytics – December 2025

                                    December is a special time of the year to celebrate progress, reflect on what we have achieved, and prepare for what’s ahead! As we wrap up the year, this month’s updates focus on refining experiences, strengthening analytics workflows, and setting the
                                  • Marketing Tip #12: Earn trust with payment badges and clear policies

                                    Online shoppers want to know they can trust your store. Displaying trust signals such as SSL-secure payment badges, return and refund policies, and verified reviews shows visitors that your store is reliable. These visual cues can turn hesitation into
                                  • The improved portal experience: Introducing the template view for inventory modules, enhanced configurations, and PDF export support

                                    Availability: Open for all DCs. Editions: All Hello everyone, You can now achieve a seamless, brand-aligned portal experience with our enhanced configuration options and the new template view for inventory modules. Your clients will now be able to view
                                  • Next Page