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

      • Multi-Select lookup field has reached its maximum??

        Hi there, I want to create a multi-select lookup field in a module but I can't select the model I want the relationship to be with from the list. From the help page on this I see that you can only create a max of 2 relationships per module? Is that true?
      • Generating CRM reports based on date moved in staged history

        Hi everyone, I'm trying to generate CRM reports of jobs (I think these are called usually deals) based on when they were moved to a particular stage, ie all jobs that were moved to Proposal/Quote in the previous financial year. I can see from other similar
      • Modules for missed calls, emails, texts etc

        Hi there. Is there a way to create a module that would automatically show a list of all inbound calls that were missed by our users, as well as any inbound SMS's, emails & WhatsApp messages. That way, a user who is available, can work through that list
      • Subforms and automation

        If a user updates a field how do we create an automation etc. We have a field for returned parts and i want to get an email when that field is ticked. How please as Zoho tells me no automation on subforms. The Reason- Why having waited for ever for FSM
      • Ability to Set a General Email Signature for the Organization in Zoho Recruit

        Dear Zoho Recruit Team, I hope you're doing well. We would like to request a feature that would allow us to set a general email signature at the organizational level within Zoho Recruit. Currently it is only possible for individual users to create their
      • Custom Buttons & Links Now Supported in Portals

        We’ve just made portals in Zoho Recruit more powerful and customizable than ever! You can now bring the power of Custom Buttons and Links to your Candidate, Client, Vendor, and Custom Portals — enabling portal users to take direct action without recruiter
      • Live webinar: Transform data into impactful visuals with Zoho Show

        Data is frequently a core part of a presentation, whether it’s a sales pitch, project update, research report, or performance review. But when it’s just numbers on a page, the message you’re trying to convey can get buried. The real magic happens when
      • File attachments not working - web version

        Since Notebook announced better file attachments, I have experienced file attachments failing. When uploaded from my pc to the web version, notebook just spins. Acting like the attachment is very large. When it's 30k. If I cancel out of this, the notecard
      • API - Barebones Data for Send Doc For Signiture

        I am learning how to use with Zoho Sign API. I am wondering if someone can give me a bare bones JSON data sample for "Send Document For Signature". Below is the blank data that is pre-populated in postman. Seems like there is more here than the bare minimum
      • Revenue Management: #2 How to compute revenue?

        In our previous post, we discussed the revenue recognition standards under IFRS 15 and ASC 606 and the five-step model. Now, let's examine three distinct business scenarios to see how the standards and model work in practice. This will help you understand
      • External lookup in CRM (as in Books)

        Hello Context: We have a CRM module, similar to Deals, but for Purchasing. Once the PO is created, a link to this PO should be updated in that "deal". In Books, you can add a custom 'external' field which can look up into CRM modules. I'm asked to have
      • "Undo Send" Feature

        Would love it if TeamInbox had an "Undo Send" feature, that gives you 10 seconds or so to "undo" the sending of an email. Many other email clients already have this feature, and my clients really miss it, as it has saved them many times in the past when
      • Zoho Sites

        Does anyone have experience building Zoho sites or know how I can find someone who does?
      • Zoho Crm Lagging

        Hi Zoho Support Team, Starting from today, my Zoho CRM has been extremely slow and laggy when accessing any pages or modules. This is affecting my work and overall productivity. Could you please help to check if there are any ongoing issues or if there’s
      • Is there a way to reference/attach mails to deals/contacts when the mails haven't come through their contacts normal email and the mail comes through software / app who use their mail system

        There are often system mails that come through systems or other software which use their email addresses since they use their own mail servers to mail. This causes an issue as it does not record the mail in the history of the CRM since the email is not
      • Recommendation

        I give up on Zoho. It's never going to be an all in one solution, their own apps don't even connect. Can any one recommend an alternative at least for the crm / people.
      • CRM - Site/Location

        Hi Zoho, One massive oversight of the Zoho CRM is the inability to add multiple sites or locations to one account. Many organisations have several (in some cases, hundreds) of sites across the country or even the globe. The workaround to this, of course,
      • An unknown error occurred. Please contact support

        Whenever I visit this page I see this. I changed browser and still the same. Can someone from Zoho help me please?
      • How to Streamline Pick & Ship

        Is there a way to streamline the built-in pick and ship process? I guess mostly on the ship side. Our current process allows us to choose shipping super fast. It's an EasyPost plugin for WooCommerce. You have to populate the boxes / weights / shipping
      • How to add, delete or rename the "payment method" drop down?

        When we recorded payment in invoice, there's a "payment method" drop down with choices like cash, bank transfer... We want to add and delete or rename some new selection. How to do such adjustment? Please advice.
      • Smarter data gathering with Query component in Wizards

        Dear All, Introducing the Query Component in Wizards for CRM! A smart search field that saves you time and effort, and helps you manage and gather data more efficiently than ever before. Long and complex record entries can be overwhelming and prone to
      • Introducing teamspaces and team modules in Zoho CRM mobile app

        Hello everyone, We have an exciting update to share in the Zoho CRM mobile app. As part of CRM For Everyone—a new set of features that reflect our vision to democratize CRM and make it accessible for all—teamspaces and team modules are now available on
      • Client Script - change page and/or section background colours

        Hello, Would anyone be willing to help me with a bit of Client Scripting code? I have had a go myself but only been able to alter the form field styles, not the overall page/section/heading styles. I want to set a different page background colour for
      • Zoho SalesIQのチャットボット、ブロックのコピー機能

        Zoho SalesIQのチャットボットの構築でドラッグアンドドロップで作成を行っているます。 内容は同じブロックのコピーペースト機能がないみたいなのですが、同一のブロック、同一の複数のブロックをいくつも作成する場合は、皆様はどのように行われていますか? 例えば添付の4つのブロックをまとめてコピーして、別のフローの先につなげる場合です。 教えていただけますと幸いです。よろしくお願いいたします。
      • Questions About Zoho Commerce Member Portal

        Hello, A couple questions about the Zoho Commerce Member Portal: 1. Can I add only specific pages be added to the Members Portal, and not the entire website? 2. When a customer signs up on my Zoho Commerce site, is there a setting that gives me a chance
      • Online Payment Fees

        We don't take many online credit card payments so the merchant service provider (PayPal) charges us the 2.9% fee for processing the amount. I would like the ability for the fee to be automatically added to the total amount for "ease of payment". We'd
      • Error occured. please try again!!!

        I created a new list. Added two new contact's email addresses. I try to EDIT either one of them to add their first name, last name and phone number. Whatever I try to edit and update, I get the error message  Error occured. please try again!!! And it doesn't update any of their info. I tried just editing first and last name. Still get the error. No matter what I try to update, I get the error. I tried creating a new list, and adding just one email address and then edit it and also get the error.
      • "Send email as" not work

        Hi team, I currently use ZOHO MAIL services on the MAKE platform (formerly INTEGROMAT). In MAKE I entered my ZOHO MAIL credentials but the problem is that when the emails are sent from the automation in MAKE, the emails do not come in with the name set
      • *UPDATE: ISSUE RESOLVED, SEE HOW FOR HELP* Issue imbedding Youtube Videos

        **UPDATE: RESOLVED** For anyone that is having a similar issue, try this workaround before attempting to have the Zoho techs fix it. I have been in communication with them for weeks about this and they can't seem to fix the issue. Thinking it may have just been my computer or my browser, I tried two different computers on two different networks, each running different versions of Windows, and tried it on Chrome, Firefox and IE; nothing worked. So, needless to say, it's an issue with Zoho somewhere.
      • Backorder For Composite Items

        Hello If i released SO for composite item and use backorder feature of zoho inventory then it should backorder child item items of composite and not composite item.This is basic of backordering.I conveyed this to zoho call center but no solution yet.
      • Paid Support

        We are in the process of creating tiers for our support offerings. There will be three tiers of support available - 2 paid and 1 free. The paid tiers will be purchased in allotted hours. I need to figure out how to a) work in the out of the box SLA, Contracts
      • Automatically CC supervisor

        Hello,  in our organization agents are replying to tickets and they are required to CC their supervisor on all emails to and from customers.  is there a way to have an email address automatically populate in the CC field when reply to a ticket?  tha
      • Zoho One - White Label

        Releasing a white-label feature for Zoho One, or any software or service, can offer several advantages and benefits for both the company providing the software (Zoho in this case) and its users. Here are some key reasons for releasing a white-label feature
      • Are this Features included in the Road Map

        1. Sync between description/short description in Zoho Books/Inventory and Zoho Commerce: I am unsure how it works now. I belive the description is not pulled. 2. Pick Up: This feature is great. It is added on Zoho Commerce but not on Books/Inventory which
      • Reconciliation - Show Transactions After End Date

        I did a quick search, and I've only seen this brought up indirectly. In the reconciliation interface, transactions dated up to a week after the end date should be available for being reconciled. The use case is pretty simple... many times, transactions
      • Auto populate email field in zoho form

        Hi,  Is there a way the email field in zoho forms can be auto populated based on the name selected from a drop down list?
      • Option to accept and pay for estimate from Public Estimate link?

        Is there any way that our customers can get the Estimate in their email, click on "View Estimate" and from the public link, click Accept and Pay? When they click that, in the background Zoho would create the invoice record in the so that the payment would
      • Kaizen #125 Manipulating Multi-Select Lookup fields (MxN) using Zoho CRM APIs

        Hello everyone! Welcome back to another week of Kaizen. In last week's post in the Kaizen series, we discussed how subforms work in Zoho CRM and how to manipulate subform data using Zoho CRM APIs. In this post, we will discuss how to manipulate a multi-select
      • Easily track referrals with Zoho Forms

        Referral tracking can be a powerful way for businesses to understand where their leads are coming from. With Zoho Forms, tracking the referral sources of your leads is an easy and straightforward process. Here are some tips to help you make the most of
      • Add an email to an existing ticket is not working

        I noticed that in Zoho Desk the funcionality to add an email to an existing ticket is not working using the syntax [##12345##], has the method changed? In red is the syntax we use to add email to an existing ticket As you can see, he did not add the email
      • Next Page