Kaizen 140 - Integrating Blog feed scraping service into Zoho CRM Dashboard

Howdy Tech Wizards! Welcome to a fresh week of kaizen.

This week, we will look at how to create a dashboard widget that displays the most recent blog post of your preferred products/services, updated daily at a specific time. We will leverage the potential of Zoho CRM's Function, Variables, and Automation Schedules to achieve this widget.

Overview

For the use case mentioned above,

Build and deploy a web scraping service on a cloud.
Create a Zoho CRM variable to store the response from this web scraping service.
Write a custom schedule function to fetch the web scraping response and update the previously created CRM variable.
Create a dashboard widget that makes a GET API call to that specific CRM variable on page load and displays the response.

1. Create a Web Scraping Service

Develop a web scraping script in your preferred language based on your products/services' blog sites. In this demo, we have used NodeJS and the blog sites of various Zoho products. Our data requirements in the dashboard widget are the title of the latest blog, its URL, and mapping these to their respective products. Since recent posts on these pages often appear first, we have applied the following logic to scrape the sites:

Use the axios and cheerio libraries in NodeJS to fetch and load the HTML data of the blogs in the DOM format.
Use a getLatestBlog function that fetches the HTML data and utilizes selectors to retrieve the required information (latest blog title and page URL). This data is then mapped to their respective products and fed into a table.

The sample code for web scrapping is provided as an attachment to this post.

Deploy this NodeJS web scraping script to a server or a cloud function. In our case, we have uploaded it to Catalyst Serverless Function.

Make a note of the Function URL for the NodeJS web scraping script provided by Catalyst after hosting it. We will invoke this URL from a Custom Schedule Function.

2. Create a Zoho CRM Variable

Step 1: In your Zoho CRM, go to Setup > Developer Hub > Variables.

Step 2: Click on the Create New Variable button and provide the necessary details.

Initially, set a dummy value. Make a note of this variable ID as the response from our web scraping script will be stored in it with the help of Custom Schedule Function.

For a step-by-step guide on creating a variable, check here.

3. Write a Custom Schedule Function

Step 1: Go to Setup > Automation > Schedules in your Zoho CRM.

Step 2: Click on the Create New Schedule button and provide a name to the schedule.

Step 3: In the Function To Be Executed field, choose Writing Function. A pop-up will appear with the necessary details to create a function.

Step 4: Once you hit the Create button, the deluge code editor appears within which you have to code the following requirements.

First, invoke the function URL of the web scraping script. This action will run the script and provide a response. Then, use this response to update the designated CRM variable that was previously set up for this task by using the Update Variable API.

You can also copy and paste the code from here.

response = invokeurl

[

url :"https://blog-scrapper-789629878.development.catalystserverless.com/server/blog_scrapper_function/"

type :GET

];

info response;

scrape_response = response.toString();

variable = Map();

variable.put("id","5545974000007587001");

variable.put("value",scrape_response);

variables_list = List();

variables_list.add(variable);

param = Map();

param.put("variables",variables_list);

response = invokeurl

[

url :"https://www.zohoapis.com/crm/v6/settings/variables/5545974000007587001"

type :PUT

parameters:param.toString()

connection:"crm_oauth_connection"

];

info response;

For information on invoking API URLs, please refer to the connections help page. Note that the web scraping URL does not require any authentication, as it is a public URL.

Step 5: Click the Save button to associate the function with your schedule. Configure the frequency of the scheduler to run the function every day at a specific time.

For more information about Schedules, check this help page.

Every day at 11:00 AM, the scheduler will invoke our web scraping script hosted in Catalyst and store its response in a variable. Next, we need to create a dashboard widget that displays the response stored in this variable.

4. Code your Widget

Step 1: Refer to this help page and initiate a widget project in your local environment using Zoho CLI.

Step 2: Everytime, the dashboard widget is loaded, the code in widget.html file executes an API call to the Zoho CRM Variable, which we updated in the Scheduled Function. It loads the response from the GET Variable API call into the widget.

Copy and paste the following code in your widget.html file.

<html>

<head>

<script src="https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js"></script>

</head>

<body>

<div id="blogs-table-container"></div>

<script type="text/javascript">

ZOHO.embeddedApp.on("PageLoad", function () {

var conn_name = "test_api_connection";

var req_data = {

"method": "GET",

"url": "https://www.zohoapis.com/crm/v6/settings/variables/5545974000007587001",

"param_type": 1

};

ZOHO.CRM.CONNECTION.invoke(conn_name, req_data)

.then(function (data) {

console.log(data)

const div = document.getElementById("blogs-table-container");

div.innerHTML = data.details.statusMessage.variables[0].value;

})

ZOHO.embeddedApp.init();

</script>

</body>

</html>

5. Upload the Widget and Check Your Results

Step 1: Execute the zet validate and zet pack commands to validate and pack the widget.

Step 2: Go to Zoho CRM > Setup > Developer Hub > Widgets and click the Create New Widget button.

Fill in the necessary details and upload the package.

Step 3: Let us now check the dashboard widget from the Zoho CRM Home page.

We have used the blog sites of a few Zoho products for this demo. You can replace them with your required products/services' sites.

Hope this post was insightful and help your interest.

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!

Stay tuned until we circle back to you next Friday!

Cheers!

-------------------------------------------------------------------------------------------------------------------

Recommended Reads

Variables - Overview, GET Variable API, UPDATE Variable API
Scheduler - Create Schedules in Automation
Functions - Overview, Deluge, Kaizen posts on Functions
Widgets - Overview, Installation and Package, Use Cases

-------------------------------------------------------------------------------------------------------------------

Previous Kaizen: Kaizen #139: Using Functions in Client Script and Handling Timeouts | Kaizen: Home

Join us for our upcoming Zoho CRM Developer Series: Zoho CRM APIs, where you can explore more about Zoho CRM APIs. Register Now!

Zoho Desk Resources

Desk Community Learning Series
Digest
Functions
Meetups
Kbase
Resources
Glossary
Desk Marketplace
MVP Corner
Word of the Day

Topic Participants
Kiruthiga G

Sticky Posts
Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands
Kaizen #165 : How to call Zoho CRM APIs using Client Script
Welcome back to another exciting Client Script post! In this post, we will discuss one of the most frequently asked questions: How do you call Zoho CRM APIs from Client Scripts? In this kaizen post, 1. Ways to make calls to Zoho CRM APIs using Client
Kaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provide
Extension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP
Handling and managing the data between two applications is a major factor for an efficient business. There are a variety of ways to handle data between Zoho CRM and other third-party applications. You can use deluge CRM tasks, create connectors, use API
Kaizen #152 - Client Script Support for the new Canvas Record Forms
Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved