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!  

    Access your files securely from anywhere

          Zoho Developer Community

              Bootcamp
              Community
              Pricing
              Webinars
              What's New
              Integrations
              Contact Support
              Contact Sales

                Zoho Survey Resources
                  Features
                  Survey Templates
                  Integrations
                  Community
                  iOS Mobile Surveys
                  Pricing
                  Android Mobile Surveys
                  Insurvey Blogs
                  Insight Blogs
                  Tips & Tricks





                                Latest Feature Updates


                                    Zoho Desk Resources

                                    • Desk Community Learning Series


                                    • Digest


                                    • Functions


                                    • Meetups


                                    • Kbase


                                    • Resources


                                    • Glossary


                                    • Desk Marketplace


                                    • MVP Corner


                                    • Word of the Day




                                        Zoho Marketing Automation
                                          Zoho SalesIQ Resources

                                                • 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


                                                Manage your brands on social media
                                                Access Zoho Social

                                                  Zoho Pagesense Resources


                                                      Zoho TeamInbox Resources

                                                        Zoho DataPrep Resources



                                                          Zoho CRM Plus Resources

                                                            Zoho Books Resources


                                                              Zoho Subscriptions Resources

                                                                Zoho Projects Resources


                                                                  Zoho Sprints Resources


                                                                    Qntrl Resources


                                                                      Zoho Creator Resources



                                                                          Zoho Campaigns Resources


                                                                            Zoho CRM Resources

                                                                            • CRM Community Learning Series

                                                                              CRM Community Learning Series


                                                                            • Kaizen

                                                                              Kaizen

                                                                            • Functions

                                                                              Functions

                                                                            • Meetups

                                                                              Meetups

                                                                            • Kbase

                                                                              Kbase

                                                                            • Resources

                                                                              Resources

                                                                            • Digest

                                                                              Digest

                                                                            • CRM Marketplace

                                                                              CRM Marketplace

                                                                            • MVP Corner

                                                                              MVP Corner





                                                                                Design. Discuss. Deliver.

                                                                                Create visually engaging stories with Zoho Show.

                                                                                Get Started Now


                                                                                  Zoho Show Resources


                                                                                    Zoho Writer Writer

                                                                                    Get Started. Write Away!

                                                                                    Writer is a powerful online word processor, designed for collaborative work.

                                                                                      Zoho CRM コンテンツ






                                                                                        Nederlandse Hulpbronnen


                                                                                            ご検討中の方





                                                                                                  • Recent Topics

                                                                                                  • AI read notes or explanation

                                                                                                    It would be such a great feature to have AI voices be able to read our Notes or Explanation If not having the AI speak the notes at run time, how about a feature where inside of Zoho Show you can have it look at all the notes of all the slides and have

                                                                                                  • Top Menu Disappeared from Blog Page

                                                                                                    Hi, Our top menu disappeared at Blog Posts page. However, it's still visible any other page on the website. I attached two screenshots, so it can be understood clearly. How can we bring back top menu? Thanks, K.

                                                                                                  • Managing Prepaid Hours for Consulting

                                                                                                    We are a consulting firm that bills clients a flat upfront annual fee plus an hourly rate and offer a discount for pre-paying a block of hours. Hours that surpass the pre-paid block are billed monthly at the normal rate. If there are any pre-paid hours remaining at the end of the project they are banked for future use. I'm not seeing a method of doing this in Projects/Books/CRM... thoughts?

                                                                                                  • ZOHO Widget SDK not loading in html

                                                                                                    I have this code below, I have imported the widgetsdk however I get the error shown in the image, I have tried many different ways of importing and initiating the function ZOHO but nothing is working. can someone explain what I'm doing wrong, if I am

                                                                                                  • Enhancements to Zoho Corp Help Center "Team Requests" View

                                                                                                    Dear Zoho Team, I hope this message finds you well. The ability to view both my tickets and my team’s tickets in the Zoho Corp Help Center is a fantastic feature, especially as the focal point for Zoho in our organization. However, we’ve encountered a

                                                                                                  • Allow Multiple Scheduled Appointments with Zoho Support

                                                                                                    Dear Zoho Team, I hope you're doing well. First, thank you for introducing the option to schedule support calls via the Zoho CRM booking link. This has been a fantastic enhancement, eliminating the need for back-and-forth coordination when scheduling

                                                                                                  • Projectwise budget ---

                                                                                                    Can we have a Project wise subject in addition to the Monthly, and quarterly ACCOUNT LEVEL budget?

                                                                                                  • WorkDrive API Documentation

                                                                                                    WorkDrive provides users and developers an extensive set of APIs to help integrate functionalities of Zoho WorkDrive with other Zoho applications and third-party tools. We have published the official WorkDrive API Documentation page for all external users.

                                                                                                  • Error 403: Forbidden When Updating Email Signature via API

                                                                                                    Hi Zoho Desk team, First, congratulations again on the excellent Zoho API. But, I’m encountering an issue while attempting to update an email signature via the API. Whenever I make a request to update the signature, the response returns an HTTP 403 Forbidden

                                                                                                  • Who can see draft replies on tickets?

                                                                                                    We have noticed that we are able to see draft replies made by other agents. Which settings can limit this visibility? It makes sense to me that admins and the agent who created the draft would be able to see the draft, but no one else. How can we make

                                                                                                  • Serious question: Are there actually "solo-preneurs"/small business owners who made Zoho-one work well for them?

                                                                                                    L.S. After already many years of continued struggle with Zoho-One, I am seriously wondering if there are actually solo-preneurs (one person small business owners - without a large, dedicated IT dept.) who got it (Zoho-One) to work well for their businesses.

                                                                                                  • Major iOS issues when accessing forms via the browser

                                                                                                    Hi, We have been using forms for some time, while the office staff are accessing the forms via the app on Android mobiles, we have a fleet of sub contractors that we would not like them having access to the main app as some of the forms are confidential

                                                                                                  • All notes disappeared

                                                                                                    I've been using the notebook app for over five years on my phone without being logged into an account. A few days ago I opened the app and all my notes had disappeared. Since then I tried restarting my phone, updating the app and logging into my account,

                                                                                                  • How to Iterate a Function in Zoho Desk Workflow with Delay Between Calls?

                                                                                                    Hi everyone, I’m working on a function in Zoho Desk that searches for a specific ticket record. If the ticket is not found, I need to retry the search multiple times with a delay between each attempt until the ticket is located or a maximum number of

                                                                                                  • How to Iterate a Function in Zoho Desk Workflow with Delay Between Calls?

                                                                                                    Hi everyone, I’m working on a function in Zoho Desk that searches for a specific ticket record. If the ticket is not found, I need to retry the search multiple times with a delay between each attempt until the ticket is located or a maximum number of

                                                                                                  • Work Orders / Bundle Requests

                                                                                                    Zoho Inventory needs a work order / bundle request system. This record would be analogous to a purchase order in the purchasing workflow or a sales order in the sales cycle. It would be non-journaling, but it would reserve the appropriate inventory of

                                                                                                  • Zoho Books API Limit Is RIDICULOUS!!!!!!!!!!!!!

                                                                                                    The 2,500 API call limit in Zoho Books is about as useful as AOL dialup.  Seriously Zoho, not only can I use up 2,500 API calls in no time with my own app but YOUR OWN STUPID IPAD APP blows through them super fast too, so if any one of my clients wants

                                                                                                  • QR codes in templates

                                                                                                    I'm excited about the new QR code generator. I have included a QR code that contains the record ID setting "${ID}" as input data. In the report detail it works perfectly but when printing it in a template the code is not shown.

                                                                                                  • Button Display Conditions

                                                                                                    Hi Guys, Is it at all possible to have extra button conditions? Context: We have data in our deals module which has a custom button which converts the deal into contacts + set up relationships between them. At the end of the conversion we set a field

                                                                                                  • Knowledge base: The nitty-gritty of SEO tags

                                                                                                    A well-optimized knowledge base with great SEO can benefit your company by allowing customers to find help articles and support resources using search engines. This enables customers to quickly and efficiently find the information they need without direct

                                                                                                  • Social Media Simplified with Zoho Social: Make the best out of the publishing calendar

                                                                                                    Are you a marketer who likes visualizing your plan of action before you start social media posting? Are you part of a team that works on social media on a rotational basis, so the most important task is to collaborate to avoid overlap and confusion? Or

                                                                                                  • Custom function daily limit and procedural programming

                                                                                                    Dearest Zoho Today, support confirmed that if I call a custom function from another custom function then I will use up two, with regards to my daily limit. A few times, we have blown our daily limit and that means that ordinary business processes don't run for the rest of the day. I have to mop these up the following day and there is no guarantee that I will get it right. Therefore, I can't afford to waste any. Procedural programming has been around for over 50 years now and it greatly simplifies

                                                                                                  • Unified customer portal login

                                                                                                    As I'm a Zoho One subscriber I can provide my customers with portal access to many of the Zoho apps. However, the customer must have a separate login for each app, which may be difficult for them to manage and frustrating as all they understand is that

                                                                                                  • Welcome Link Expired

                                                                                                    Hi The links sent to the users didn't get clicked on in time and now all the links have expired. Is there a way to send a new link without deleting them and re-adding them>

                                                                                                  • New enhancements: Changing portal users' email addresses and new customization options for templates

                                                                                                    Dear All, Portals have enabled organizations to extend access to various CRM modules to their customers, vendors, partners, and end users, per their business requirements. When a portal is created, an invitation email is sent to portal users with a link

                                                                                                  • Granular Time Frame Settings for Message Deletion and Editing in Zoho Cliq

                                                                                                    Dear Zoho Team, I hope you're doing well. Currently, the settings for message deletion and editing in Zoho Cliq are configured globally under: Admin Panel > Organisation > Configurations > Conversations Delete messages: Time frame to allow message deletion

                                                                                                  • New Built In QR/Barcode Generator Print Settings

                                                                                                    I'm trying out the new QR/Barcode generator field in Creator. I would think most people will want to print these, like I do. I am not seeing any way to control the height or width of the barcode for printing (inside the print/pdf template builder). The

                                                                                                  • Zoho One. Client Script

                                                                                                    Hi, I would like to know if the Client Script feature is available in Zoho One. If it's, how can I enable it?

                                                                                                  • Calendar View for Zoho Tickets

                                                                                                    Is there a way to view your tickets with due dates on a calendar view? I can not find a way to merge my Zoho Calendar and Tickets. This would be extremely helpful to my team.

                                                                                                  • Delete / Modify Default Career Site - Zoho Recruit

                                                                                                    Hello, It would be very useful if we could delete a default career site or change which of our career site is the default. Our Career site was created when there were issues with Zoho Recruit creating English CTA buttons on French Career sites. The only

                                                                                                  • Workflows for Timesheet

                                                                                                    Good day, Any way to have timesheet as triggers? I looked into Zoho Flow and into Zoho Project automation but no where can I have timesheet as a trigger. Basically, I would like to trigger something upon timesheet approval. Right now, the only way to

                                                                                                  • Is it possible to hide Developer Space for all user in Zoho Projects

                                                                                                    Hello! I am Zoho admin in a company and we want to use Zoho Project to manage projects, but after a few days of testing we are not able to "hide" the Developer Space from all kind of users except the admin. To sum up, I want to hide this for all users.

                                                                                                  • Introducing automation and utility conversations in WhatsApp marketing

                                                                                                    We’re excited to announce the addition of two new features to our WhatsApp integration: Automation and Utility conversations. These enhancements will allow you to streamline your marketing efforts and engage with your customers more effectively by automating

                                                                                                  • Extracting data from cells in zoho sheets for zoho books

                                                                                                    I am currently uploading my bank statment in excel format to zoho workdrive. I would like flow to extract certain data and send it to zoho books. Would scripting in zoho flow be able to help me with this? By this I mean should I attempt this in zoho flow

                                                                                                  • Within the Basic KPI component in Analytics, it is impossible to set "next" day range as a filter

                                                                                                    Hi there, I am currently setting up a deal dashboard for the Sales team. While it is possible to filter deal records to show records that were created LAST X days only, it looks like a NEXT X days Closing date filter is not available. Would it be possible

                                                                                                  • Pulling Specific Products from Sales Orders in Books to a CRM Record

                                                                                                    We currently process orders directly through our website (woocommerce) as well as through manual sales orders in zoho books. When an order comes through the website, all of the individual products from that order show up in the CRM record of that customer.

                                                                                                  • Você já viu os cursos do Zoho Mind?

                                                                                                    Pessoal, Tem uma plataforma da Zoho chamada Zoho Mind, muito interessante os cursos e vídeos tutoriais que lá possui. Para a turma do Zoho Creator, tem uma dica de Buscar dados em Formulário, segue o link e clique em Zoho Creator. https://www.zohomind.com.br/#/videostutoriais

                                                                                                  • Como gerar gatilhos para pagamento de impostos no Zoho Books?

                                                                                                    Olá Pessoal, boa tarde! Gostaria de saber como vocês estão escriturando os impostos a pagar no Zoho Books. Vi que temos a opção de Bills, porém se eu escriturar nesta aba do Zoho Books para gerar lembretes de tempo de vencimento por exemplo vai refletir

                                                                                                  • Subform Time field to string.

                                                                                                    Good afternoon All. I have a Subform 'Delivery_Receiving_Hours' that captures Day (Dropdown), Time_Open (Time), and Time_Close (Time). I need to capture this data and send it to a multiline field in the CRM. The code, posted below, below will capture

                                                                                                  • workflow for bounced email gets triggered, but email is status = opened

                                                                                                    Hello, I have a workflow that sends me an email if outgoing email are bounced. Now I got some kind of this emails, but the corrosponding contacts have status = open at the email. Why this bounce-workflow is triggered? Reports > Email Reports > Bounce

                                                                                                  • Next Page