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
- Ensure that you have installed all the necessary components required to use Zoho's CLI.
- 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
- Zoho CRM Widgets -Overview, CLI Installation, Creating a Widget, Kaizen #23
- Widgets in Blueprint - Kaizen #95 How is a Widget used in a Blueprint?
- Related List Widget - Kaizen #114 Geocoding Leads' Addresses in ZOHO CRM
----------------------------------------------------------------------------------------------------------------------------------------
Join us for our upcoming Zoho CRM Developer Series: Zoho CRM APIs, where you can explore more about Zoho CRM APIs. Register Now!
Access your files securely from anywhere
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Kiruthiga G
Vigneshwaran K
Marco Mogliani
Maxime Bory
Sriram U
Sticky Posts
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 areKaizen #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 achievedKaizen #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 theKaizen #197: Frequently Asked Questions on GraphQL APIs
🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Zadarma + Zoho CRM Integration – Missed Calls Saved as Contacts Instead of Leads
Hello everyone, I’m looking for input from anyone with experience using the Zadarma + Zoho CRM integration. Currently, I’m seeing that missed calls are automatically being created as Contacts instead of Leads. From a CRM perspective, this doesn’t makeHow to update Multiple Users field in Quote Module from Deal Module
Scenario : Deal Module having Multiple User Field (Presales Engineer) which having more than 1 User and through Deluge Script I need to get that Users Details and need to put into Multiple User Field (Presales Engineer) of Quote Module. Note: Both ModuleClone a Module??
I am giong to repurpose the Vendors module but would like to have a separate but very similar module for another group of contacts called Buyers. I have already repurposed Contacts to Sellers. Is it possible to clone (make a duplicate) module of VendorsHow to change the text in WhatsApp Zobot integrated to Zoho Booking?
I have integrated Zoho Bookings into Zoho SalesIQ, I want to change the text in WhatsApp when creating a booking in Zobot how to change those text?Updating Subform Record from other Form
Just wanted to ask how to properly approach this. I have 2 forms and would like to trigger an auto update on the subform once record submitted. block below only updates 1 row for each recordRow in input.AV_System { AssetRecord = Site_Asset_Services[SOR_NoZoho Books - Hide Convert to Sales Order if it can't be used.
Hi Books team, I noticed that it is not possible to convert a Quote to a Sales Order when a Quote is not yet marked as accepted. My idea is to not show the Convert to Sales Order button when it is not possible to use it, or show it in a grey inactiveHow do I bulk archive my projects in ZOHO projects
Hi, I want to archive 50 Projects in one go. Can you please help me out , How can I do this? Thanks kapilCross-Data Center Collaboration and / Or allowing users to choose DC
Dear Zoho Cliq Support Team, We are writing to request a significant enhancement to Zoho Cliq that would greatly benefit our geographically dispersed development team. Current Challenge: Currently, Zoho Cliq automatically routes users to specific dataNew Mandatory One-Click Unsubscribe Link Overshadowing Custom Unsubscribe Link
I was recently informed by Zoho CRM Support that they are now mandated by the large email service providers like Google and Yahoo to provide a one-click unsubscribe option in the header (not the body) of all mass emails. I have a custom unsubscribe linkSend / Send & Close keyboard shortcuts
Hello! My team is so close to using Zoho Desk with just the keyboard. Keyboard shortcuts really help us to be more efficient -- saving a second or two over thousands of tickets adds up quickly. It seems like the keyboard shortcuts in Desk are only forIs it possible to register webhooks in Zoho CRM using API?
Hello, I am trying to register a webhook in Zoho CRM programmatically (using the API). Specifically, I want to register a webhook that is fired when new Contacts are created in the CRM. I was able to setup a webhook using the UI, by creating a rule thatCalls where the local audio is shared, have echo
When another user is sharing their screen with audio, I get echo from my own voice. We tested this with multiple users, with different audio setups, and there's no obvious way to fix it. Is this a bug you could look into, or are we missing something?Update application by uploading an updated DS file
Is it possible? I have been working with AI on my desktop improving my application, and I have to keep copy pasting stuff... Would it be possible to import the DS file on top of an existing application to update the app accordingly?Markdown support, code cells...
Hi Zoho I'd like to vote for a feature that markdown is supported with: Headings Code highlighting Quoteblocks ... Furthermore a inline card(like inline sketch card) for special text like Code would be great. And just to add my vote as well for "Tags"!Minimise chat when user navigates to new page
When the user is in an active chat (chatbot) and is provide with an internal link, when they click the link to go to the internal page the chat opens again. This is not a good user experience. They have been sent the link to read what is on the page.Zoho Projects app update: Voice notes for Tasks and Bugs module
Hello everyone! In the latest version(v3.9.37) of the Zoho Projects Android app update, we have introduced voice notes for the Tasks and Bugs module. The voice notes can be added as an attachment or can be transcribed into text. Recording and attachingzurl URL shortener Not working in Zoho social
zurl URL shortener Not working in while creating a post in Zoho socialIn the Zoho CRM Module I have TRN Field I should contain 15 digit Number , If it Contain less than 15 digit Then show Alert message on save of the button , If it not contain any number not want to sh
Hi In the Zoho CRM Module I have TRN Field I should contain 15 digit Number , If it Contain less than 15 digit Then show Alert message on save of the button , If it not contain any number not want to show alert. How We can achive in Zoho CRm Using customZoho Bookings know-how: A hands-on workshop series
Hello! We’re conducting a hands-on workshop series to help simplify appointment scheduling for your business with Zoho Bookings. We’ll be covering various functionalities and showing how you can leverage them for your business across five different sessions.Custom report
Hello Everyone I hope everything is fine. I've tried to To change the layout of the reports, especially the summary page report, and I want to divide summary of each section in the survey but I can't For example: I have a survey containing five differentZoho Journey - ZOHO MARKETING AUTOMATION
I’ve encountered an issue while working with a journey in Zoho Marketing Automation. After creating the journey, I wanted to edit the "Match Criteria" settings. Unfortunately: The criteria section appears to be locked and not editable. I’m also unableCustom Fields in PDF outputs
I created a couple of custom fields. e.g Country of Origin and HS Tariff Code. I need these to appear on a clone of a sales order PDF template but on on the standard PDF template. When I select "appear on PDFs' it appears on both but when I don't selectHow to create a Service Agreement with Quarterly Estimate
Hello, I'm not sure if this has been asked before so please don't get mad at me for asking. We're an NDIS provider in Australia so we need to draft a Service Agreement for our client. With the recent changes in the NDIS we're now required to also includeZoho Social - Post Footer Templates
As a content creator I often want to include some information at the end of most posts. It would be great if there was an option to add pre-written footers, similar to the Hashtag Groups at the end of posts. For example, if there is an offer I'm runningAllow to pick color for project groups in Zoho Projects
Hi Zoho Team, It would be really helpful if users could assign colors to project groups. This would make it easier to visually distinguish groups, improve navigation, and give a clearer overview when managing multiple projects. Thanks for consideringZoho Books - Quotes to Sales Order Automation
Hi Books team, In the Quote settings there is an option to convert a Quote to an Invoice upon acceptance, but there is not feature to convert a Quote to a Sales Order (see screenshot below) For users selling products through Zoho Inventory, the workflowCan't find imported leads
Hi There I have imported leads into the CRM via a .xls document, and the import is showing up as having been successful, however - when I try and locate the leads in the CRM system, I cannot find them. 1. There are no filters applied 2. They are notCustom Button Disappearing in mobile view | Zoho CRM Canvas
I'm working in Zoho CRM Canvas to create a custom view for our sales team. One of the features I'm adding is a custom button that opens the leads address in another tab. I've had no issue with this in the desktop view, but in the mobile view the buttonThe connected workflow is a great idea just needs Projects Integrations
I just discovered the connected workflows in CRM and its a Great Idea i wish it was integrated with Zoho Projects I will explain our use case I am already trying to do something like connected workflow with zoho flow Our requirement was to Create a TaskZoho Projects MCP Feedback
I've started using the MCP connector with Zoho Projects, and the features that exist really do work quite well - I feel this is going to be a major update to the Zoho Ecosystem. In projects a major missing feature is the ability to manage, (especiallyemail template
How do I create and save an email templateEnhancements in Portal User Group creation flow
Hello everyone, Before introducing new Portal features, here are some changes to the UI of Portals page to improve the user experience. Some tabs and options have been repositioned so that users can better access the functionalities of the feature. Fromblank page after login
blank page after logging into my email account Thanks youAlways display images from this sender – Is this feature available?
In Zoho mail, I had my "Load external images" setting set to "Ask me", and that's fine. That's the setting I prefer. What's not fine though is I always need to tick "Display now" for each email I get, regardless if I've done that multiple times from severalZoho Notebook Sync problem
I'm facing a problem with syncing of notebook on android app. It's not syncing. Sometimes it syncs after a day or two. I created some notes on web notebook but it's not syncing on mobile app. Please help!!!!Cant Save Gauge on Creator Page
How to Save Gauge on Creator Page see movie https://vimeo.com/1116410860?share=copy#t=0Apply Advance option not shown in report
We are facing an issue in Zoho Expenses. While approving an Expense Report, the "Apply Advance" option is not appearing under the three dots (More Options). Details: Module: Expense Reports Issue: "Apply Advance" option not visible Status of Report: AwaitingAuto Capitalize First Letter of Words
Hi I am completely new to ZOHO and am trying to build a database. How can i make it when a address is entered into a form field like this: main st it automatically changes is to show: Main St Thank YouFollow-up emails via Workflow Automation not staying in the same thread
Dear Zoho Support Team, I am currently using Workflow Automation in Zoho Campaigns to send follow-up emails. In my test case, I noticed the following behavior: All emails in the automation have the same subject line. If the follow-up email is sent withinClient Script refuses to set an initial value in Subform field
I tried a very simple, 1 line client script to set a default value in a custom subform field when the "Add Row" button is clicked and the user is entering data. It does not work - can someone tell me why? ZDK documentation suggests this should be doable.Next Page