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

      • How do we get a follow up to Experts 22: Scale up your customer support with integrations & extensibility

        Hi, How do we get a followup and answers to the questions we have asked during 'Experts 22: Scale up your customer support with integrations & extensibility'. I have repsonded to the answers but have no way of following up. Thanks Brett
      • Frustrating Email Duplication and Timeline Issues Between Zoho Mail and CRM

        Hi Zoho team, Can someone please help clarify what’s going on here? Here’s what’s happening: I initiate an email to a lead using Zoho Mail. The lead is created in Zoho CRM via the integration, and the email is correctly associated with that lead. Sometimes,
      • Best Strategy to import contacts and when to create leads

        Hi, I'm new to Bigin and looking for a "best" strategy. I had and have the following idea for an use case: 1. Search for websites which I want to contact 2. Create a contact in Bigin with all the required information based on this website (via API if
      • Better implementation of Item Category on Invoices and Estimates

        1) I have added Item Category as a custom field. Honestly, this should be a native part of the item itself, and either required, optional, or not used.  2) When entering an item on an invoice, you have to enter the first character(s) of the item, otherwise
      • Bulk Update (via the 'Accountant' menu)

        Why can't we bulk update Expenses to Owner's Drawings? It always ends in failure with the error "Involved account types are not applicable". If such conversion isn't possible, why make the option available? Better to allow it though.
      • Set Reply_to parameter for "Email an Invoice" API Endpoint

        Is there a way to set "Reply To" email address when using the Email an invoice API endpoint? It doesn't seem to be in documentation, but sometimes there are undocumented parameters. If it doesn't exist, please consider adding it as parameter since all
      • Zoho Books adaptado a la legislación española. ¿Sustitutos?

        Buenas a tod@s No tenemos información sobre la adaptación de Zoho Books a la nueva ley de facturación en España. Me preguntan usuarios de zoho que deberían hacer. Propongo una lista de alternativas, si al final se opta por no desarrollar la funcionalidad
      • A Question about Email Handling (Sending and Receiving)

        Hello! I was looking into setting up Email Aliases for my domain that I purchased a while ago through Zoho Mail. I set up a singular alias already and have it linked with Gmail, and it seems to be working out well. However, I set up another alias today,
      • Kaizen #201 - Answering Your Questions | Webhooks, Functions, and Schedules

        Hello everyone! Welcome back to another post in the Kaizen series! We are incredibly grateful for all the feedback we received, and as promised, we will answer all the queries in this Kaizen series. Last week, in our 200th post, we addressed one of the
      • Zoho Projects Strict Dates for Tasks

        Hi Zoho Projects team, I would love to see a feature to allow Strict Dates for Tasks. Sometimes in projects you have dates which must not move, even if predecessor Task dates change. For example, perhaps you need to book access to a facility to perform
      • No Mark as filed buton in GSTR -3b

        We are filing our GST in GST portal -and want to mark GST in Zoho books as filed. It is possible to mark GSTR 1 as filed through Mark as filed button. But there is no such button in GSTR-3B.  How to mark corrosponding GSTR-3B as filed?
      • ranking by drag the choices instead of rank by number

        is the option of draging the choice is available instead of selecting the ranking number for each choice?
      • TASKS - Dashboard to show ALL Tasks from ALL apps.

        The Unified Tasks View is useless without the other main zoho apps (Desk, Books & even FSM now) We need to see all our tasks under on pane of glass. The Zoho developers are out of touch with real business workflows. So how it was designed they want us
      • Function #13: Transaction level profitability

        In Zoho Books, the Profit & Loss report provides valuable insights into the overall profitability of your business, indicating whether you have made a profit or incurred a loss. However, there may be occasions when you wish to assess whether a specific
      • Zoho CRM with Sap Business One

        I need information about integration CRM with Sap BO, thank.
      • Allow bill to nest multiple projects

        A bill (purchase) is more often than not used across multiple projects and this functionality is missing and very urgently needed for accurate reporting of purchases across projects
      • How can I change iOS display setting at night?

        It seems like at night the two light daytime settings themes (white with blue on top or just white) are not available and I am forced to choose among a few other colours that I really don’t want, I.e., black, blue or orange. Is there a way for me to always
      • Celebrate WWW day with Zoho Desk

        Let's recall the times when we learned 'WWW' stands for World Wide Web. Whether you like to call it wuh-wuh-wuh or double-u double-u double-u, or World Wide Web, we all owe a lot to this groundbreaking invention that reshaped how we connect, communicate,
      • The power of camaraderie

        In the days before the internet boom, conversations happened face-to-face or over the phone. Phone calls were precious; every minute counted, and every word mattered. We looked forward to those moments of real connection. Even today, nothing quite matches
      • Message Content is missing/invalid fault

        We cannot create a complete template over zoho. Some features - like button adding - is missing. The templates are created on Zoho and edited on Meta to solve the problem. But still then, some features cannot be used and the message returns this failure
      • Können bereits gesendete Kampagnen im Nachhinein einer Mailing-Liste zugeordnet werden, ohne dass die Kampagne erneut versendet wird?

        Wir haben unsere älteren Kampagnen in Campaigns über Kontaktkategorien versendet. Dann haben wir umgestellt auf Mailing-Listen, damit alte Kampagnen auch in einem Archiv aufgerufen werden können. Jetzt ist die Frage, ob die Kampagnen, die über die Kategorieauswahl
      • Newsletter Templates Are Not Mobile Responsive

        Hi, I've already submitted this request to ZOHO once this morning, but for some reason your system logged me out, wouldn't accept my username/password login, and isn't showing any evidence that I've submitted this issue. So here we go again... I am under the impression that your newsletter templates are supposed to be mobile optimised: https://www.zoho.com/campaigns/blog/responsive-email-marketing.html This is clearly not the case, as the last 2 newsletters I've created in Campaigns look perfect
      • Digest Juillet - Un résumé de ce qui s'est passé le mois dernier sur Community

        Bonjour à toutes et à tous, Zoom sur les nouveautés de juillet dernier au sein de Zoho Community France. Zoho Commerce vous propose une expérience améliorée grâce à sa nouvelle interface ergonomique et à ses fonctionnalités avancées, conçues pour faciliter
      • 100 Rows in a Subform is too limited

        We have a custom Module in CRM called Price Sheets, when we get a PO from a client we add the items from the PO to it and then check with our vendors for pricing and add our margin etc And after it is complete we have setup custom scripts to create a
      • Uninstall unattended agent

        Hello, I'm testing many use case before we purchase assist for our remote support. While we are testing what is the proper way to uninstall agent?  I did uninstall from systray, from windows control panel but still ZohoURservice is running. How can I uninstall client side?
      • Zoho Commerce Down?

        Is anyone else's storefront down at the moment? Ours has been down for at lease an hour.
      • Zoho Projects iOS app update: Dashboard widget on the home screen

        Hello everyone! We are excited to introduce the 'Dashboard' widget in the latest version(v3.10.8) of the Zoho Projects iOS app. Dashboard widgets allow you to view the project progress visually without having to open the app. The widget enables you to
      • Idea: Workflow Rule Trigger Only When Subform Row Is Updated (Thanks to New Inline Row Feature)

        Hi Zoho team and community, With the recent update to Zoho CRM, we can now add or delete rows inside subforms without entering edit mode, using the inline Add row button. This is a fantastic improvement for user experience — seamless, fast, and efficient.
      • Auto add new section based on document choices

        Hi team, I'm wondering if the below is a possilibity within Zoho sign. We have an application process to become a customer of ours, we currently use Zoho Sign to manage this application and this works quite well. However, if the customer indicates 'YES'
      • Change rate after xxxx kilometers

        Is there a way to change the miileage rate after a certain mileage. After 5000 kilometers, we want the rate to automaticly change. Thank !
      • Subform Entry Limit from a Subform Field (A different Subform on the same Form)

        Hi, I would like to be able to use a Subform 1 Field as the Dynamic Entry Limit for Subform 2. Even better would be able to use some code with the values, so for example using the Subform 1 Qty Field as the Max Entry limit for Subform 2, BUT only the
      • Slow Zobot response time

        Hi, We launched the Zobot on our site to sit along with the regular Live Chat but had to take the Zobot down as the response time was very slow. The bot was slow to begin then once the chat had been initiated the response was very slow. The bot typing
      • how to show data of 3 table in pivot

        Based on engineer name i want to get the data from 3 different tables like Service , amc, installation , but Every table contain Engineer name As Common , based that from the service table i want to take service amount , and count of service based on
      • Custom Status for Purchase Orders

        Currently Zoho books has functionality to create custom statuses for Sales Orders. Can this be extended to include custom status for purchase orders as well? It was a great decision to add this functionality to sales orders. Our use case is for tracking
      • Ask the Experts 22: Scale up your customer support with integrations & extensibility

        Hello everyone! The foundation is set. Build the beams. Raise the pillars. Set the walls. The Zoho Desk architecture stands tall. Let's discuss integration within Zoho Desk, extensions from the Marketplace, creating connections between Zoho Desk and other
      • Is there no way to duplicate an entire workflow or even custom function across multiple departments?

        Is there no way to duplicate an entire workflow or even a custom function from one department to other departments, like it is done for field duplication from one department layout to other department layouts?
      • Automated reply on any new ticket raised by customer

        Hi ZohoDesk team, Can we set up an automation so that whenever a new ticket is created against our support email; ZohoDesk immediately sends our standard acknowledgement, including the expected TAT for resolution? If that’s possible, could you share the
      • Zoho equipment rental - just like Booqable

        Hi Zoho Team, is it possible to create a module or a system like booqable? our business starts renting our IT equipment assets that have been recently used for Events and Projects, we are having ZOHO books so its easy to integrate if you create one. Booqable
      • Profit Margin Scheme

        I'm a tourism company operating in the aviation and outbound tourism sectors. Typically, taxes are 0% as our operations are outside the country. However, the state has now imposed a tax on the profit margin. This means if the selling price of an airline
      • Visibility and Enforcement for Outdated Plug Parameters in Zobot Canvas

        Dear Zoho SalesIQ Team, Greetings, We’d like to suggest an important usability and quality improvement for working with Plugs inside Zobot. Current Behavior: When we update the code of an existing Plug, any Zobot card using that Plug requires manual resaving.
      • Next Page