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

                                  • Add Full-Screen Viewing for Quartz Recordings in the Client Interface

                                    Hi Zoho Team, We would like to request an enhancement to the Zoho Quartz client interface when viewing submitted recordings. Current Limitation: When viewing a Quartz recording from the client (user) interface, there is currently no option to switch the
                                  • Not Receiving OTP • https://voters.eci.gov.in/home/family

                                    Hello Customer, Greetings from Zoho Mail. Upon a detailed review of our delivery logs, we can confirm that other Zoho Mail users are successfully receiving OTP emails from eci.gov.in. However, in your specific case, it appears that the OTP emails are
                                  • WorkDrive for Excel Add on

                                    Dear Sir/Madam Have installed Workdrive for Microsoft add on But unable to view the same added in Excel
                                  • Zoho Calendar s’enrichit avec une intégration à Zoho People et Zoho Cliq

                                    Les journées de travail ne se déroulent jamais exactement comme prévu. Une conversation informelle devient une séance d’échange d'idées, une absence modifie un planning, et votre agenda se retrouve vite décalé par rapport à la réalité. Chez Zoho Calendar,
                                  • Holidays

                                    Hi; For defining Holidays, you need to add logic to handle the year as well as the month & day. We need to be able to enter Holidays for the next year. I need to add a holiday for January 2, 2017, but I can't until January 1st, which is a Sunday and we
                                  • Zoho public comments are confusing and unnecessary

                                    Hi, we use zoho desk and have issues with public comments. We started using them because the "Reply" option just seemed very clumsy because of the following reasons: - the top "Reply" button starts what seems to be a regular email, showing the entire
                                  • Introducing parent-child ticketing in Zoho Desk [Early access]

                                    Hello Zoho Desk users! We have introduced the parent-child ticketing system to help customer service teams ensure efficient resolution of issues involving multiple, related tickets. You can now combine repetitive and interconnected tickets into parent-child
                                  • Zoho API - ticket creation - Validation failed for the condition : Ticket Status Info should not be empty

                                    Hi ! I'm trying to create ticket through Zoho API, and I'm getting a 422 response : "Validation failed for the condition : Ticket Status Info should not be empty" My request looks like this : curl --location 'https://desk.zoho.eu/api/v1/tickets' \ --header
                                  • How to create a two way Sync with CRM Contacts Module?

                                    Newbie creator here (but not to Zoho CRM). I want to create an app that operates on a sub-set of CRM Contacts - only those with a specific tag. I want the app records to mirror the tagged contacts in CRM. I would like it to update when the Creator app
                                  • 10GB Email Storage Limits in Zoho CRM

                                    We’ve had Zoho One for almost 5 years and have always synced our emails from Gmail via IMAP… As of late, we’ve run into issues with our emails not syncing, due to being over the 10GB storage cap… What’s very odd is that we haven’t changed a thing? I know
                                  • Zoho Books Sandbox environment

                                    Hello. Is there a free sandbox environment for the developers using Zoho Books API? I am working on the Zoho Books add-on and currently not ready to buy a premium service - maybe later when my add-on will start to bring money. Right now I just need a
                                  • Deleting unwanted ticket replies

                                    Hello, In a Zoho Desk Ticket thread, sometimes one of the recipients has auto-reply activated. This creates a new message in the Ticket thread that not only pollutes the thread, but most importantly cannot be replied properly because usually auto-reply e-mails don't do "reply all", so the other recipients are not included. I want to delete such a message in the Ticket thread. I searched the help of Zoho Desk, but only found a way to mark as Spam (https://help.zoho.com/portal/kb/articles/marking-support-tickets-as-spam)
                                  • Desk DMARC forwarding failure for some senders

                                    I am not receiving important emails into Desk, because of DMARC errors. Here's what's happening: 1. email is sent from customer e.g. john@doe.com, to my email address, e.g info@acme.com 2. email is delivered successfully to info@acme.com (a shared inbox
                                  • System-generated support email added in CC on “Reply All”

                                    Hi, I recently set up Zoho Desk for a client and we are trying to prevent the Zoho Desk system-generated support email address (not the mailbox used as the department’s "From address") from being automatically added in CC when agents use “Reply All” on
                                  • Create & Update Zoho Vault Passwords via Zoho Flow

                                    Hi Zoho Flow / Zoho Vault Team, We’d like to request an enhancement to the Zoho Vault integration in Zoho Flow. Current Limitation: At the moment, Zoho Flow supports only the following selected Zoho Vault actions, such as: Fetch passwords, Share passwords
                                  • Applying Excess Payments & Conflict Invoices Due to Cancelled Items

                                    I’m running into several issues that appear to stem from deeper-than-expected overlap between Zoho Finance (Books/Inventory) and Zoho POS. The level of coupling between these systems seems greater than what was originally communicated, and it’s leading
                                  • Please, make writer into a content creation tool

                                    I'm tired of relying on Google Docs. I'm actually considering moving to ClickUp, but if Writer were a good content creation tool instead of just a word processor, I would finally be able to move all my development within the Zoho ecosystem, rather than
                                  • Zoho Sheet - Desktop App or Offline

                                    Since Zoho Docs is now available as a desktop app and offline, when is a realistic ETA for Sheet to have the same functionality?I am surprised this was not laucned at the same time as Docs.
                                  • HTML Tags added to Reports with Notes

                                    Recently Zoho added the ability to markup text within notes. That way, users can change font size, colors, etc. It's a great change. However, since the change, reports that include a column for "Note Content" are printing HTML tags within the report.
                                  • New Feature: Audit Log in Zoho Bookings

                                    Greetings from the Zoho Bookings team! We’re excited to introduce Audit Log, a new feature designed to help you track all key actions related to your appointments. With Audit Log, you can maintain transparency, strengthen security, and ensure accountability.
                                  • Bill automation in Zoho Books

                                    Hi I am looking for 3rd-party options for bill automation in zoho which are economical and preferably have accurate scanning. What options do I have? Zoho's native scanning is a bit pricey
                                  • Restrict Payment Methods

                                    Allow us to restrict certain payment methods specific for each customer.
                                  • Introducing the Zoho Projects Learning Space

                                    Every product has its learning curve, and sometimes having a guided path makes the learning experience smoother. With that goal, we introduce a dedicated learning space for Zoho Projects, a platform where you can explore lessons, learn at your own pace,
                                  • Emails Getting Delay Error Messages - Status: 451

                                    Hi. Hoping someone can help. I've been using Zoho for over a year now with no problems at all. Today, the majority of my emails I send out or reply to are getting this error: This message was created automatically by mail delivery system. THIS IS A WARNING MESSAGE ONLY. YOU DO NOT NEED TO RESEND YOUR MESSAGE. The original message was received at Sun, 22 Dec 2019 18:20:19 -0800 from wazza@amninjas.com [wazza@amninjas.com] ----- The following addresses had fatal errors ----- [Status: ERROR, Address:
                                  • Add Domain

                                    Hello Zoho Support, My Zoho Sites project accidentally auto-added domains with http:// prefix and duplicated domain entries. Current domains list shows: http://www.kinhtethethao.com.vn (Primary – cannot be removed) http://www.kinhtethethao.com.vn (verification
                                  • Kaizen #221: Workflow & Actions Reports APIs

                                    Over the last few weeks, we have joined Zylker Cloud Services as they restructured their automation ecosystem using Workflow APIs and Actions APIs. Along the way, we discovered how to audit workflows, update old rules, create new ones, and manage associated
                                  • Having an Issue with the Entity ID

                                    I'm having an issue when trying to use Zoho Flow and the notes function. I currently have it set up when a new response comes into a particular form, all of their responses will go into the notes section of their contact on the CRM. I'm currently mapping
                                  • For Each Loop in Zoho Flow

                                    I am using Zoho flow to create rows in an google sheets for every new order in Shopify but the issue is that it is creating one row per order and all line items are comma separated values but I want separate rows for each line item. Is there a way to
                                  • Debug and Test not receiving updates

                                    Hello, I've been trying to debug two of my simple flows between Zoho Projects and Clockify but it seems like the Debug and Test feature is not working for me. When I click the Play button on any of the flows and then perform the trigger actions nothing
                                  • How do people handle using Outlook and Zoho Project calendar at the same time?

                                    We have an ongoing problem in our organisation where we use Zoho Projects to plan all of our projects tasks and that also allows us to look forward using the workload report to see which of our consultants are overstretched etc and which are available.
                                  • Attendance, Reimagined: Smarter Views for Teams and Individuals

                                    Tracking attendance shouldn’t feel like a chore. With the revamped Attendance module UI, Zoho FSM makes it easier than ever to monitor work hours, check-in activity, and team availability—whether you’re managing an entire workforce or just keeping an
                                  • Logistics Industry: Learn to create amazing appointment scheduling sites

                                    In the logistics industry, the quality of service is something that cannot be shown to others unless they experience it.  Sure, there are metrics that show how you fare when compared to your competition, but then, it only communicates little with respect to quality. The usual route which firms in logistics took are advertisements, to which the internet has opened alternatives in today’s digital age like websites and appointment scheduling sites. A great online presence can help you communicate with
                                  • Customer Management: # 1 Pick a Convenient Way to Onboard Customer

                                    When Meera opened her bookstore, onboarding customers was effortless. A customer walked in, picked a book and left with a handwritten bill. As the store gained popularity, things changed. " Can I place an order over the phone?" a customer asked one day.
                                  • Tracking Emails sent through Outlook

                                    All of our sales team have their Outlook 365 accounts setup with IMAP integration. We're trying to track their email activity that occurs outside the CRM. I can see the email exchanges between the sales people and the clients in the contact module. But
                                  • Fetch ALL items from Inventory and send to Google Sheet using Flow

                                    The title says it all -- I want to fetch the Item name, SKU, Purchase rate, and Sales rate for ALL items in Zoho Inventory and have them populate a tab in an existing Google Sheet. I have already successfully made this work for one item, so the flow is
                                  • Why Document Integrity Matters at Every Stage of the Contract Lifecycle

                                    Contracts are legal records that must stay authentic and traceable from creation to expiry or termination. In Zoho Contracts, several design decisions focus on protecting the integrity of every document. These measures ensure that no important details
                                  • affichage pièces jointes impossible

                                    Bonjour, aujourd'hui je n'arrive pas à afficher ni à télécharger les pièces jointes dans ZOHO CRM. J'utilise Chrome, j'ai vidé les caches et les cookies. Mais cela ne change rien. Merci de votre aide
                                  • Reminder to renew subscription.

                                    Whenever I try to add to one of my notes a " renew your subscription" window pops out and won't Close disallowing me to edit. Why should I renew my subscription on an application with at best such bugs and at worse such underhanded ways to force ren
                                  • Fields not coming through, not pulling data

                                    Forgive the noviceness of my vocabulary. I am in Zoho flow connecting CRM and Projects. When an opportunity hits a certain stage, it will create the project in Projects, and bring in data from the opportunity. Everything is working, except for two fields
                                  • Smartsheet Integration

                                    Has any in the community been able to integrate Zoho Desk with Smartsheets using Zoho Flow? I am trying to get the Smartsheet Row ID based on ticket data and cannot find documentation on the Get Row function for Smartsheet. It is asking for a Query String
                                  • Next Page