Zoho CRM offers Widgets as a way to enhance its functionality. By utilizing the widgets feature, users can seamlessly embed UI components within their CRM and leverage data from third-party applications to execute actions based on specific requirements.
Essentially, a widget is an HTML file that gets loaded in a popup when a custom button is triggered. To interact with Zoho CRM's data, it is necessary to load jQuery and their JS SDK within the HTML file.
The basic structure of an HTML file for a widget typically resembles the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://live.zwidgets.com/js-sdk/1.0.5/ZohoEmbededAppSDK.min.js"></script>
<title>Document</title>
</head>
<body>
<script>
ZOHO.embeddedApp.on("PageLoad",function(data) {
console.log(data);
//Implement Custom Business Logic here
});
ZOHO.embeddedApp.init();
</script>
</body>
</html>
Within this file, the line console.log(data) will output details regarding the page where the widget is activated. For instance, if it's a Lead page, it will display information related to that particular lead, such as the ID.
To manage data storage/retrieval, one must integrate functions within the section marked
//Custom Business logic goes hereAn example code snippet for fetching all Leads through this widget would appear as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://live.zwidgets.com/js-sdk/1.0.5/ZohoEmbededAppSDK.min.js"></script>
<title>Document</title>
</head>
<body>
<script>
ZOHO.embeddedApp.on("PageLoad",function(data) {
ZOHO.CRM.API.getAllRecords({Entity:"Leads"})
.then(function(data){
console.log(data)
})
});
ZOHO.embeddedApp.init();
</script>
</body>
</html>
As I needed to develop multiple Zoho Widgets while reusing the same Vue Components across each Widget, I contemplated using NuxtJS. Although I successfully created the Vue Components, I am unsure about integrating Zoho's JS SDK.
If anyone has any recommendations or tips on how to resolve this issue, your assistance would be greatly appreciated! Thank you!