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

      • Announcement: Zoho DataPrep to Deprecate Password-Only Authentication for Snowflake Connections on July 31, 2025

        As part of our ongoing commitment to security and in alignment with Snowflake's pledge to the Cybersecurity and Infrastructure Security Agency (CISA) Secure by Design initiative, Zoho DataPrep will no longer support single-factor password authentication.
      • The same Contact associated to multiple Companies - Deals

        Hi, I would like to know if there is an option to associate the same contact with multiple companies (two or more) deals, using the same contact details for all. This is because we have contacts who are linked to different companies or branches of the
      • Text on Zoho Sign confirmation dialouge is very small compared to text used everywhere else on Zoho Sign.

        I've reported multiple times through Zoho's support email that the text on this notification is very small in contrast to all the other text on the Zoho Sign app. I think it's a bug and it just needs the font size to be increased. It's very minor but
      • Wise integration in Zoho Books

        Hi, it is now time for zoho books to support Wise.com integration for payment links. Wise has launched credit card payments, now about 0.5% cheaper than Stripe. Also their bank payments are much much cheaper than credit cards. Its time for books team
      • Error Message: None of the rows can be imported

        I have been using zoho sheets to download my CSV file for about 2 years now, this month, October 2021, for some reason when I download it to upload to zoho books I get a message saying "None of the rows can be imported". I have been using the same process,
      • Invalid Element place_of_contact, Invalid Element gst_no, Invalid Element gst_treatment

        so this is the body contact_name: orderData.customerName, company_name: orderData.customerName, email: orderData.email, contact_type: 'customer', currency_code: 'INR', gst_treatment: 'business_gst', gst_no: 'i using proper gst no i just removed it from
      • Not able to item an item to non taxable via api, despite sending is_taxable as false

        Hi everyone, I'm trying to update an item via books api and even when sending is_taxable as false, the item still shows Taxable in zoho, I get no errors as well when I update, any help appreciated in this!
      • Collection & Payment Mapping Automation

        We book Sales Invoices and Purchase Invoices against Same Projects. Both Sales Invoices & Purchase Invoices can have one or multiple Projects mentioning the Project ID. We prefer to Make vendor Payments Once we have received The Collections from Clients
      • Nested Sub-forms (Subform within subform)

        Hi Team, Whether there is any possibilities to add sub-form with in another sub-form like Main Form       -> Sub form A             ->Sub form B If we tried this, only one level of sub form only working.  Any one having any idea about this? Thanks Selvamuthukumar R
      • Restore Trashed Records Anytime Within 30 Days

        Access the recycle bin from the Data Administration tab under the settings page in Zoho Projects, which gives better control over the trashed data. When records like projects, phases, task lists, tasks, issues, or project templates are trashed, they are
      • Avoiding Inventory Duplication When Creating Bills for Previously Added Stock

        I had created several items in Zoho Books and manually added their initial stock at the time of item creation. However, I did not record the purchase cost against those items during that process. Now, I would like to create Purchase Orders and convert
      • Applying EUR Payments to USD Invoices in Zoho Books

        Hello, I have a customer to whom I issue invoices in USD. However, this customer makes payments in both EUR and USD. I have already enabled the multi-currency feature in Zoho Books Elite, but I am facing an issue: When the customer makes a payment in
      • How to prevent users from editing mail merge templates from Zoho crm

        We want users to use public mail merge templates. They should not be able to edit templates but only preview data merge and send emails. We did prohibit "manage mail merge template" in the user profile. But they can still edit the template in the zoho
      • Customer Addresses cannot be edited/deleted in invoices

        In the invoices we have an option to change the customer address and add a new address Now I dont know why for some reason if we add an address through this field, the address doesn't appear in the customer module We cannot delete the addresses added
      • Custom Fields connected to Invoices, Customers, Quotes, CRM

        I created the exact same custom fields in Books: Invoices, Customer, Quotes, and in CRM but they don't seem to have a relationship to one another. How do I connect these fields so that the data is mapped across transactions?
      • Accelerate Github code reviews with Zoho Cliq Platform's link handlers

        Code reviews are critical, and they can get buried in conversations or lost when using multiple tools. With the Cliq Platform's link handlers, let's transform shared Github pull request links into interactive, real-time code reviews on channels. Share
      • Heads up: We're going to update the VAT Summary table's visibility (UK and Germany Editions)

        Hello users, Note: This change only applies to organisations using the UK and Germany editions of Zoho Books. Currently, if you've enabled the VAT Summary table in a template, it will be displayed only in PDFs sent to your customers whose default currency
      • Partial payment invoicing

        Greetings I have questions related to payments and retainer invoices: 1. When I want to issue a partial payment invoice, I can't specify the portion to be paid or already paid, then balance to be shown as Due. 2. Retainer invoice is only available as
      • Inputting VAT Pre-Registration expenses for first VAT Return

        Hi Zoho, I've just registered for VAT and am setting up Zoho to handle calculations and VAT return submissions. I'm struggling to figure out how to input the last 4 years worth of expenses into Zoho so that they're calculated in the VAT module. When I
      • Anyone else experiencing very slow loading of pages in Zoho Projects?

        I reported this yesterday only to be told there are no issues but is anyone else experiencing stupidly slow loading of pages. On our loading screen, it is taking often as long as 60 seconds to load a page and just stays on this screen for ages! Other
      • Zoho Desk Lookup Field Reporting

        Thank you for adding the ability to add additional lookup fields for desk tickets. My question is how do you report against these fields? For example: Associating related accounts to the primary desk ticket account, I am not able to add the lookup fields
      • Integrating asana will cause notification messages to pop up continuously

        When I create or edit a task in Asana, the Asana bot keeps updating messages to group chat, which causes the cliq to keep popping up notifications.
      • Entire notebook that had notes has disappeared

        I don't know how tf this happened. All I did was uninstall and reinstall the mobile app after fixing a bug I had. After I reinstalled the app, everything was synced back except for one folder which had a bunch of notes in it. None of those notes are in
      • My site has disappeared from web builder

        www.mproperties.uk My site above is still working. However it has completely disappeared from my Zoho sites' web builder. I am therefore unable to edit my site whatsoever. Please help.
      • Trying to trigger email notification based on rollup summary field

        Hi there, I'm trying to trigger an email notification via Workflow Rules wherever the rollup summary field "Total Shipments" goes from empty to not empty. However this field is not available from the picklist of options in the Workflow rule. Can anyone
      • zia data enrichment - switch to webamigo Extension

        Hello, I have so far used data enrichment via Zia. Now I have installed the Webamigo extension to expand personal data. Unfortunately, nothing has changed after the installation; are there any additional steps needed to switch from the previous method
      • Export Timeline

        With the new Timeline features, it would be really helpful to have the option to export a timeline. When handling customer complaints, having the full breakdown of everything that happens on a module is great but we usually have to send this to another
      • Interactions Tab in Zoho CRM: A 360° Omnichannel View of Every Customer Touchpoint

        Hello Everyone, Hope you are well! We are here today with yet another announcement in our series for the revamped Zoho CRM. Today, we introduce Interactions Tab a new way to view all customer interactions from one place inside your CRM account. Customers
      • How to resubscribe a contact marked as "Unsubscribed (Marked by Recipient)" without using a form?

        Hello, I have a question regarding Zoho Marketing Automation functionality. Is there a way for an administrator to change the subscription status of a contact marked as "Unsubscribed (Marked by Recipient)" back to "Subscribed" without using a form? Ideally,
      • Linkedin: when Zoho Social is going serious with it?

        Hi, it's been said in the past that Linkedin related features in Zoho Social were well behind those of other social networks because of limitations imposed by the platform. Now that we see around my tools (take taplio.com) frankly outpacing ZSocial on
      • 5名限定 課題解決型ワークショップイベント Zoho ワークアウト開催のお知らせ(7/24)

        ユーザーの皆さま、こんにちは。Zoho ユーザーコミュニティチームの藤澤です。 7月開催のZoho ワークアウトについてお知らせします。 2ヶ月ぶりに、渋谷にて「リアル開催」します! ▷▷詳細はこちら:https://www.zohomeetups.com/20250724Zoho ━━━━━━━━━━━━━━━━━━━━━━━━ Zoho ワークアウトとは? Zoho ユーザー同士で交流しながら、サービスに関する疑問や不明点の解消を目的とした「Zoho ワークアウト」を開催します。 Zoho サービスで完了させたい設定やカスタマイズ、環境の整備など……各自で決めた目標達成に向け、
      • How to get fields centered in a form?

        Is it possible to center fields in a form? Some of my forms do some don't and it is really not aestheticly pleasing?  Any help would be greatly appricated. Thanks, Michael McNeill 
      • Make Packages from multiple sales order of a single customer

        Our customers sends orders to us very frequently, some times what customer wants is to ship items from 5 to 6 sales orders in a single shipment. it will be very nice if, zoho can implement this function, in which we can select items from other sales orders of the customer.
      • Webhooks and Integration

        Hey, I was looking to create automation using webhooks or something equivalent of a trigger based mechanism, to connect it as an integration. But I don't find any relevant APIs to setup these webhooks/notifcations for the "Zoho Books". Can anyone please
      • Zoho Books X Zoho Expense

        Hello there, Please can you tell me if it is possible to sync from Books to Expense? I much prefer the Expense reports to that of Books and the Credit Card feeds work via expense and not Books for me. However I find books is much better to deal with the
      • ABILITY TO LOG INTO CUSTOMER PORTAL

        I think it would be very helpful to have a button in Zoho Books to be able to see the customer portal so we can see what they see to help them navigate through the portal. Many times, the customer will call about the portal, but without visibility into
      • Sort, filter & save views for BOOKS PROJECTS

        Thanks for all the updates. Our firm uses the module for simple internal project accountancy. This means we do everything from the Projects Section but this isn't user friendly at all. You can't do anything with customized your own fields which basically
      • edit input format in custom field - sales order

        hi, I want to integrate a custom field (multi line text box) in our sales order. It needs to show upper case and lower case letters, numbers, spaces, hyphens and "/". What do I need to put in the custom format to configure these signs? Thanks, Tina
      • This transaction type cannot be matched with a line on the statement.

        When using the books API https://www.zohoapis.com/books/v3/banktransactions/uncategorized/${transaction.transaction_id}/match I get this error "This transaction type cannot be matched with a line on the statement." What I'm doing is for the uncategorized
      • Timesheets

        I wanted to create the timesheets remainder for our team mates who miss out the weekly timesheet entries. While creating the email templates, I couldn't see anything related to timesheets. Since it shows projects Can you help me find and build a one
      • Next Page