For this tutorial in video form, click here
We’ve been working on a Zoho CRM widget, and we thought we’d show you what it looks like. We first built this widget using raw JavaScript and weren’t very happy with it. So, we rebuilt it today using React JS and TypeScript.
The Widget
Let’s check it out:
At the top, you can see it allows you to search for properties that are close to a particular address. It then shows you the properties on a map, as well as the details of who is connected to that property in a table below that. We’ve decided to make the code open source.
If you want it, click this github link. Here’s an overview of what it looks like:
The code is down at the bottom. Let’s look at the contents of the “src” folder:
Now, let’s click on the Apps.tsx file. In it, you’ll find a relatively simple function component.
It’s also got a search widget, as well as a results widget.
As you can see, it renders the search widget and a results widget. When a user clicks on search, it’s then able to call a serverless custom function within the CRM, get the data from the CRM, before rendering it on a map.
Conclusion
Hopefully this is a useful example of how to build a Zoho CRM widget. In order to understand it, you need to already understand the basics of React JS, TypeScript and Deluge script.
If you know all those things, hopefully this is a bit of a scaffold that will make it easier for you to learn and be able to build widgets like this yourself.