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!  

    • Sticky Posts

    • Share your success story

      We would like to hear from our passionate users how much Zoho Creator has changed the way you work and benefited you. If you would like to share your story to us and be featured as a proud user of Zoho Creator, then this is for you. Fill up the form below and if you want to be included in a case study, we will get in touch with you to get further details. So what are you waiting for? Tell us your story. Charles

    • Merge and Store v1 API depreciation

      Hi Zoho Writer users, The Merge and Store v1 API allows you to store the merged document in Zoho WorkDrive. The response of this API will be returned with the document's ID only after the merge is complete. In Deluge, the maximum timeout for operation

    • Zoho Creator Developer's Conference 2017 !!!

      We welcome all our Creator Developers! You're invited to join us for our annual Zoholics Developers conference August 29th–31st! This is your chance to get training and guidance on Zoho Creator from our most knowledgeable custom app builders.       Zoholics Developers is a three-day event where you'll participate in interactive workshops to hone your app-building skills, get questions answered by Creator experts with personal one-on-one sessions, and connect with other Creator developers from around

    • Recent Topics

    • Canvas View - Print

      What is the best way to accomplish a print to PDF of the canvas view?

    • 5名限定 課題解決型ワークショップイベント Zoho ワークアウト開催のお知らせ(8/21)

      ユーザーの皆さま、こんにちは。Zoho ユーザーコミュニティチームの藤澤です。 8月開催のZoho ワークアウトについてお知らせします。 今回はZoomにてオンライン開催します。 ▷▷参加登録はこちら：https://us02web.zoom.us/meeting/register/eVOEnBsSQ2uvX4WN5Z5DeQ ━━━━━━━━━━━━━━━━━━━━━━━━ Zoho ワークアウトとは？ Zoho ユーザー同士で交流しながら、サービスに関する疑問や不明点の解消を目的とした「Zoho

    • New in Zoho Forms: Inline OTP Verification

      Hello form builders, We are excited to announce the launch of Inline OTP Verification in Zoho Forms, a smarter way to ensure the authenticity of the contact details you collect. Until now, OTP Verification in Zoho Forms worked as a pre-access step: respondents

    • Zoho Mail : Associate emails with Meeting records and allow multiple emails to be assocaited at once

      Is there a workaround that would allow either of these? I want to associate emails with Meeting records. I also would like to be able to select multiple emails at once for association with a record.

    • Create task from email

      Is there a way on mobile to create a task from an email? I use this feature a lot and when traveling now I read email on mobile. By the time I get to my office I forget about them since I didn't add it to a task. Is this feature missing on moble?

    • Zoho Socials - Unable to view Channels and SmartQ

      Hi, The channel Facebook has been added by the admin, however, it is not visible on the User level (employee). Other channels are visible. Also, we have the premium account, and SmartQ is not working. Can anyone help? Regards, Priyanka

    • Eliminating Manual Consolidation: Automating Currency Field Sync from Task to Project

      Hello Everyone, A Custom function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. Requirement:

    • We want to set the "Converted from Lead" value in Deals using a Workflow or via a Deluge script. How?

      For use in Zoho Analytics, we need the field "Converted from Lead" filled in our deal records. This field is empty everywhere, because we do not create deals directly when converting a lead to a contact. We want to do that using the API or a workflow

    • Sales Orders: Quoted_Items + items in another subform -> into Ordered_Items ?

      hello, When creating Sales Orders, is it posible to inherit/fill the Ordered_Items with all the items from Quoted_Items + all the items from a customized subform with similar fields? Since you can create a sales order in different ways (convert, new -

    • How to cancel the GSTR1 pushed to GSTN

      How to cancel the GSTR1 Pushed to GSTN, some rectifications to be done in HSN & SAC code

    • Zoho Books API — Invalid Operation Type / Scope does not exist

      Hello Team, We are unable to use the Zoho Books API from our registered application. We’ve already: Created a client in Zoho API Console using (Admin in Books) Generated the OAuth code and token successfully Used the correct scopes: ZohoBooks.fullaccess,ZohoOauth.userinfo.READ

    • Enhancements in Canvas

      Dear All, Greetings! Canvas lets you design the record details page to suit your brand or business preferences. We are glad to introduce the following enhancements to uplift your design experience. Reusable Components Style Presets Let's go! Reusable

    • Minimum order quantity

      Is there a way to enforce a minimum order quantity - ie has to have a minimum of 250?

    • 【Zoho CRM】ポータル機能のアップデート：UIとポータルの作成フローの変更

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中から、ポータル機能のアップデートをご紹介します。 目次 概要 ユーザーグループの作成フローの変更 ユーザーグループ詳細画面内のタブについて 「タブと権限」タブについて 「設定」タブについて 概要 UIとポータルの作成フローが変更されました。ポータルの新機能に先立ち、UIを一部変更しました。タブやオプションの配置を見直し、機能へよりアクセスしやすくなっています。 また、「ポータルユーザーの種類」は今後、「ユーザーグループ」と呼称され、ページ上のボタンも「ユーザーグループを作成する」に変更されます。

    • Tax on Imported goods charged by Shipping Company

      Hi Folks, I imported goods from outside Canada, for better understanding I will give an example data. imported goods value: 2000$ The shipping company sent me an invoice containing the following information: Custom duty on imported goods: 400$ Administration

    • 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

    • Zoho Webinar via Social Media

      Hello, is it possible to stream a Zoho Webinar via Social Media like Linkedin or Facebook?

    • Add Hebrew & RTL Support to Feedback Widget

      Hello Zoho Desk Team, How are you? We are using Zoho Desk and would like to utilize the Feedback Widget. While Zoho Desk itself supports Hebrew and RTL, the Feedback Widget unfortunately does not. We kindly request that Hebrew and full RTL support be

    • OAUTH2 isn't working with Power Automate and N8N (Zoho Desk)

      Hello, I am trying to set up an OAuth2 connection to the Zoho Desk API, but the authentication flow fails immediately. I am experiencing this issue in two separate platforms: Microsoft Power Automate (using a Custom Connector) and n8n. Instead of being

    • Kit Items Breaking Automations - "Provide mapped components for all kit items"

      This has been brought up in other threads, but I believe this issue warrants its own topic. Whenever a sales document (Estimate, Sales Order, Invoice) is created or manipulated programmatically, trying to include a Kit as an Item throws this error: "Provide

    • Show item Cost value on Item screen

      The Item screen shows Accounting Stock and Physical Stock. It would be very helpful if value information could be displayed here as well, for instance Cost Price. Currently, to find the Cost Price (as used for inventory valuations) from inside the item

    • Mark shipment as delivered via api

      Hellloooo again Zoho guys !! More help required if you would be so kind, pleeeezz..... var options =        {         'method' : 'post',         'contentType' : 'application/json',         'muteHttpExceptions' : true       }; var myPackNo  = encodeURIComponent('###################');

    • Setting Alternative units for an item.

      Hello Team, How to create alternate units for an item. We are placing orders for stocks in boxes. One box contain 24 items. At the time of selling we have two categories of buyers wholesalers and retailers. So the sales will be in PCS and in boxes also.

    • Zoho Inventory search when adding items to SO/PO, etc.

      I do not see that Zoho Inventory searches within the item name for an item lookup. We have many products with variants. So when I search for a product, say a lighting system, and it comes in different sizes and colors, I can only get those products where

    • Item Group Attributes

      Hello, I would like to see more attributes under grouped items. We sell car parts, there are several suppliers for the same part but under different brands. We want to group them together but the attributes under groups are lacking. For example, the products

    • Remove HTML Format - Deluge

      Hello @all if you want to delete the HTML format from the text please follow the script. Data = "Text"; info Data..replaceAll("<(.|\n)*?>" , "").replaceAll("&nbsp;" , " "); Apart from this if you require anything please let me know Thanks & Regards Piyush

    • Using multiple languages in template

      I wanted to add the company name in the template in arabic. I found a way through the header and footer option, except when i print the quotation the arabic disappears both in the top and bottom of the page. I have attached pictures of the before and

    • ADDING 5% VAT TO PURCHASE ORDERS GENERATED ON ZOHO BOOKS UAE

      Please guide on how to add 5% VAT to Purchase Orders generated on ZOHO Books UAE edition.

    • Import from /csv file, some items fail with the error "Specify Tax Or Tax Exemption".

      Hello! I am trying to import a csv file of all of my expenses for a complete financial year. I get errors for some items with the error message "Specifiy Tax or Tax Exemption". These errors only occur on lines where I have "Postage" as the expense account.

    • About maximum number of requests per minute

      Hi, Our company has integrated Zoho inventory and we're using the shipping order creation and update functions and so on. Currently we're receiving "For security reasons you have been blocked for some time as you have exceeded the maximum number of requests

    • Approval - Report/Views

      Hi, On Zoho Desk - Is there a way to report on pending approvals, or a view or similar?

    • "Zoho CRM Integration" option is missing in Zoho Social Settings

      I am trying to integrate my Zoho Social account with my Zoho CRM account. I am on the Professional Trial plan and my user role is "Brand Admin". However, I cannot find the "Zoho CRM Integration" or "Lead Generation" option anywhere in my Zoho Social settings.

    • Zoho CRM still doesn't let you manage timezones (yearly reminder)

      This is something I have asked repeatedly. I'll ask once again. Suppose that you work in France. Next month you have a trip to Guatemala. You call a contact there, close a meeting, record that meeting in CRM. On the phone, your contact said: "meet me

    • Error 553

      Não estou conseguindo enviar ou receber e-mail, sempre dando o erro 553, sendo que há mais de um mês o domínio está pago e liberado. Preciso de um suporte urgente

    • Automate insurance document workflows with Zoho Writer

      Insurance companies have to deal with creating and managing complex documents and forms, such as policy applications, explanation of benefits documents, brochures, renewals, and claim forms. Handling all of this manually is hugely time and effort intensive,

    • Create PDFs with Text so that we can copy from a generated PDF

      Currently, any information that a user enters into a field cannot be highlighted and copied from the PDF that Zoho Sign renders. For example, if someone were to provide a phone number in a Zoho Sign text field, you would not be able to copy the phone

    • How To Insert Data into Zoho Table using Api

      Hi Community, I have created a table inside zoho tables. How do I insert data into table using API. Please tell the exact endpoint and payload , I just have to insert data into table columns. Also tell how to find tableid, viewid, baseid etc. which are

    • How do I delete a folder in Marketing Automation?

      Folders are used across contact lists and segments, and email templates. How do I delete a folder once it's been created?

    • Portal Approval Process

      Hi Zoho team and fellow users, I am seeking a method to establish a multi-step approval process between a Zoho user and a portal user (Custom Portal) to review and approve requests through the Custom Portal. For instance, within this setup, one of the

    • Narrative 8: Intelligent in-app support that's instantly available anytime and anywhere

      Behind the scenes of a successful ticketing system - BTS Series Narrative 8: Intelligent in-app support that's instantly available anytime and anywhere The App Support Across Platforms (ASAP) add-on for Zoho Desk is an independent application that integrates

    • Next Page