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!  




        • Recent Topics

        • "Pivot Table" Conditional Formatting

          Team, I there a way to use conditional formatting a "Pivot Table"  report? Thanks, Arron Blue Pumpkin Hosting | Solutions Made Simple

        • How many clients can be added to Zoho Practice?

          How many clients can be added to Zoho Practice without having their zoho app?

        • Stage History

          when viewing a ticket , and you look at stage history tab (kanban view) and look at the stage duration column in days, it shows the current stage of the ticket as " current stage ". Should it not rather show the amount of days it has been in that current

        • Automating Ticket Responses Using Zoho Desk's AI Features

          We’re looking to set up an automation within Zoho Desk that can analyze incoming emails or tickets and automatically respond with relevant knowledge base articles based on the content of the request. Could you please guide us on how to configure this

        • Optimising CRM-Projects workflows to manage requests, using Forms as an intermediary

          Is it possible to create a workflow between three apps with traceability between them all? We send information from Zoho CRM Deals over to Zoho Projects for project management and execution. We have used a lookup of sorts to create tasks in the past,

        • Service locations are tied to contacts?

          Trying the system out. And what I discovered is that it seems that the whole logic of the app is, I'd say, backwards. There is a Customer - a company. The company has contact persons and service locations can be associated with different contact persons.

        • Enhancements to Zoho Map integration tasks

          Hello everyone, We're excited to announce enhancements to the Zoho Map integration tasks in Deluge, which will boost its performance. This post will walk you through the upcoming changes, explain why we're making them, and detail the steps you need to

        • Bug in Total Hour Calculation in Regularization for past dates

          There is a bug in Zoho People Regularization For example today is the date is 10 if I choose a previous Date like 9 and add the Check in and Check out time The total hours aren't calculated properly, in the example the check in time is 10:40 AM check

        • Narrative 12: Sandbox - Testing without the risk

          Behind the scenes of a successful ticketing system: BTS Series Narrative 12: Sandbox - Testing without the risk What is a sandbox environment? A sandbox environment is a virtual playground that allows you to test freely and experiment with various elements

        • Announcing new features in Trident for Mac (1.27.0)

          Hello everyone! Trident for macOS (v1.27.0) is here with new features and enhancements to improve scheduling and managing your calendar events. Let's take a quick look at them. Stay aligned across time zones. Both the scheduled and original time zones

        • Branding of native system emails

          Make system emails adjustable in terms of branding. We want our system to be completely white label, because it is not a CRM anymore, it's way more than that. We are following the strategy of "CRM for everyone" to use the CRM in all departments, not only

        • Slow uploads of large files

          I'm wanting to use Workdrive for transferring large images and video (we're talking things from 100MB-5GB). I'm running solo on a 500MBit/sec fiber connection. I'm getting upload speeds to Workdrive of no more than about 1-3Mbytes/sec when going through

        • Migrate Your Notes from OneNote to Zoho Notebook Today

          Greetings Notebook Users, We’re excited to introduce a powerful new feature that lets you migrate your notes from Microsoft OneNote to Zoho Notebook—making your transition faster and more seamless than ever. ✨ What’s New One-click migration: Easily import

        • need to upload from airtable to google drive

          I have a zapier zap that automates between airtable and google drive. When a customer uploads a new file into airtable via a client portal interface, zapier uploads that file into a folder linked to that customer's project record. I need to replicate

        • Can't delete functions that are associated with deleted workflow rules

          We have a handful of functions that were once associated with a workflow rule, but the rule has been deleted. The function still thinks it is associated so I can't assign it to a new rule. It is starting to get really messy because we have a list of functions

        • Default Sorting on Related Lists

          Is it possible to set the default sorting options on the related lists. For example on the Contact Details view I have related lists for activities, emails, products cases, notes etc... currently: Activities 'created date' newest first Emails - 'created

        • Credit Management: #1 Credit You Owe vs Credits Owed to the Business

          Think about the last time you ordered food online. You might have paid in advance through your card, but you received a $20 refund because your order got delayed or cancelled. In most apps, refunds don't go into the bank account directly; instead, they're

        • Tip #46- Turn Every Session into an Insight with Zoho Assist survey report- 'Insider Insights'

          Delivering exceptional remote support isn’t just about resolving issues, it’s about understanding how both customers and technicians experience each session. That’s where Survey Report in Zoho Assist come in. You can configure and customize survey questions

        • Enhancing Zia's service with better contextual responses and article generation

          Hello everyone, We are enhancing Zia's Generative AI service to make your support experience smarter. Here's how: Increased accuracy with Qwen One of the key challenges in AI is delivering responses that are both contextually accurate and empathetic while

        • Allow the usage of Multi-Select fields as the primary field on "Layout Rules"

          We want to force our users to enter some explanation strings when a multi-select field has been utilized. I can't understand the reason for the usage restriction of Multi-Select fields as a primary field. This is a simple "Display hidden mandatory field

        • CRM/Bookings integration edits Contact names

          Hi there, I've installed the extension that connects Zoho CRM and Zoho Bookings. When we get a new appointment from Bookings from an existing Contact, that Contact's record shows this: First Name was updated from asd to blank value Last Name was updated

        • Domain Change

          “Please update my Email-in domain from @biginmail.biginmail.in to @biginmail.zoho.com. Messages to the .in domain are bouncing.”

        • Webhooks Limit Exceeded

          Today, I received an error message saying, 'Total number of Webhook call exceeded', but when I look at Manage > Billing, it doesn't look like any of my invokeURL calls are being logged. Following the advice from this thread: https://help.zoho.com/portal/en/community/topic/webhooks-daily-limits-in-zoho-creator

        • Auto select option in CRM after Zoho Form merge

          Hi, I have a dropdown field in Zoho CRM that is filled with a Zoho Form. The data is filled but not automatically shown. After selecting the right value in the dropdown the information a second field is shown. So the question is; how can I make the dropdown

        • Bring your CRM data straight into your presentations in Zoho Show

          Let's say you are working on a presentation about your team's sales pipeline for an upcoming strategy meeting. All the information you need about clients and leads is in Zoho CRM, but you end up copying details from the CRM into your slides, adjusting

        • Improved RingCentral Integration

          We’d like to request an enhancement to the current RingCentral integration with Zoho. RingCentral now automatically generates call transcripts and AI-based call summaries (AI Notes) for each call, which are extremely helpful for support and sales teams.

        • Introducing New APIs in Zoho Contracts

          We are excited to announce the release of new APIs in Zoho Contracts to help you automate and manage every stage of your contract lifecycle more efficiently. Here’s a quick overview of what’s new: 1. Complete Contract Draft You can use this API to complete

        • Vimeo

          For me Vimeo is the most important video social channel for media and filmmakers. Would others agree and like it added to Zoho Social.

        • Delete a department or category

          How do I delete a Department? Also, how do I delete a Category? This is pretty basic stuff here and it's impossible to find.

        • Organization Emails in Email History

          How can I make received Org Emails to show up here?

        • How to setup pricing in Zoho

          Hi everyone, I am relatively new here and have just moved from my old inventory system to the Zoho one. I am trying to get my head around how it all works. I am mostly setup connected to a shopify store, but I do manual sales also For manual invoicing,

        • Prefilled Date fields auto-changed and then locked when using “Edit as new”

          If a document out for signature has date fields (not SignedDate fields) that were pre-filled before sending, and then you use “Edit as new” to create a new version of the same document, the value of those date fields gets automatically changed to today

        • Is there a way to update all the start and end dates of tasks of a project after a calendar change?

          Hi! Here's my situation. I've built a complete project planning. All its tasks have start dates and due dates. After completing the planning, I've realized that the project calendar was not the right one. So I changed the project calendar. I now have

        • Access Phone Field Components (Country Code) Directly

          Hello everyone, I'd like to propose an enhancement for the Phone field in Zoho Creator. The Problem: The Phone field captures the country code and local number separately, but stores them as a single string (e.g., +1234567890). To get the country code,

        • Send mass messages through WhatsApp from the Tickets module

          Hi Everyone! Effective communication is key to delivering prompt and reliable customer support. Because WhatsApp is one of the most widely used and familiar messaging platforms, it's an effective channel for agents to reach customers who have submitted

        • Lead Owner Signature Merge Field

          I want to automatically insert a signature (i.e. contact info usually found at the bottom of an email) into an email template, depending on who the lead owner is. What is the merge code for the Signature from a Users profile? CRM > Settings > Customization > Templates There is a popup near the bottom of the edit screen which says: "You can insert a Signature, which is available as a merge field in the users section." It is also referenced on this page: https://help.zoho.com/portal/en/kb/crm/customize-crm-account/customizing-templates/articles/template-builder#Merge_Fields

        • How do I create a time field?

          I want a field that only records time. I can only see how to create a date-time field. If I do that and enter a time, without a date, nothing is recorded. If I create a number or decimal field, I cannot use it in time calculations. All I want is a field

        • Alternating columns - How to reverse order on mobile - Responsive template

          Can the order of alternating columns be reversed on mobile so that image comes before the text? Example: Desktop Row 1 column Left (image) , column right (text) Row 2 column Left (text) , column right (image) Mobile Currently Row 1 Image over text Row

        • InvokeURL butchering JSON for OpenAI API calls

          My organization works with mostly educational institutions. We have a custom module called "Schools", which is the user-entered school name they put when using our service (which they enter along with their state and zip code). We want to map this to

        • Custom order for Current Stage (Blueprint field)

          Hi! I suggest adding the option to set a custom order in reports for the Blueprint field ‘Current Stage’. Currently, these fields can only be sorted in ascending or descending order. Thanks!

        • Next Page