Extension Pointers #7: Build third-party integrations by incorporating Custom variables into Widgets

There are currently a number of third-party applications that can be integrated with Zoho CRM to help improve the existing functionality of the product. Amongst this diverse collection, there are certain applications that only support API key forms for user authentication. If the third-party application that you choose to integrate supports API key forms, Custom variables are the best way to integrate with Zoho CRM. Custom variables are of major importance in scenarios where data needs to be globally accessed across an entire extension, as well as during third-party integrations where security-related, user-specific data needs to be passed in order to establish a successful integration.

Just as custom variables help to integrate Zoho CRM with third-party applications, widgets are built-in UI components that help you customize your own UI interface and perform certain functions using third-party data.

In this post, we'll look at how to use custom variables while building widgets, in order to synchronize the third-party data seamlessly into Zoho CRM components in a personalized format.

Consider, for example, a widget that needs to display the services and technologies of the company to which a Zoho CRM lead belongs. These details help to target and serve the leads based on a data-driven approach, and thereby run b2b marketing efficiently. In our example, Clearbit is the third-party application that is used as a source of data enrichment.

Let's go through the steps to achieve the above-mentioned functionality.

Create a Custom Variable to store the API key value

In order to establish a connection with the Clearbit application and retrieve its data, we first need to register with Clearbit and obtain the API Secret Key. Upon successful acquisition of the API Key, we'll create a custom variable to store its value in the extension.

1. Go to the Extension's Detail page in Zoho Developer Console.

2. Choose Custom Properties from the left panel of the Zoho Developer console under Build, then click Create your first CRM variable.

3. Provide the Custom Variable Name and the Clearbit API secret key as the value.

4. Click Save.

The custom variable "API Key" will be created with an auto-generated API name.

Note: clearbitextension__API_Key is the API Name in our example.

Create a widget that fetches the details of a company

Create a widget called "ClearbitProject" in ZET CLI.
Add the necessary HTML and CSS files (handle the UI) along with the JS file (business logic) to get the company details of the lead. Refer here to check out the step-by-step guide to create a widget in ZET CLI .

Add the ZohoEmbeddedAppSDK.min.js file (available here) to use the JS SDKs that are needed for your project.
Please refer to JS SDK for information on the different Zoho CRM APIs supported by the SDK. These APIs are significant in helping the Javascript code interact with Zoho CRM.

Clearbit.js code snippet

var comp;

var json;

var jsonObj;

var orgVal;

function initializeWidget()

{

// PageLoad listener that returns the entity details of the active page

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

{

console.log("inside function");

id = data.EntityId;

console.log("id===="+id);

entity = data.Entity;

// Get the record details of the entity using the value returned by pageload listener

ZOHO.CRM.API.getRecord({

Entity: entity,

RecordID: id

}).then(function(data) {

// Fetch the company detail from the response obtained through getRecord API

var recorddata= data.data[0];

comp=recorddata.Company;

// Get the API Key detailsfrom the custom variable

ZOHO.CRM.API.getOrgVariable("clearbitextension__API_Key").then(function(data){

org=data.Success;

//Store the API key value to a variable based on the format required by Clearbit API

orgVal="Bearer "+org.Content;

})

setTimeout(function(){

// Construct the params as required by Clearbit API

var request ={

url : "https://company.clearbit.com/v2/companies/find?domain="+comp+".com",

headers:{

Authorization : orgVal,

}

// Invoke HTTP get to receive the response of the initiated request i.e the Clearbit API call

ZOHO.CRM.HTTP.get(request).then(function(data) {

jsonObj = JSON.parse(data);

console.log(jsonObj);

respPrint(jsonObj);

})

},500)

})

// Extract the required information from Clearbit API response and format the data in UI

function respPrint(jsonObj){

jsonObj.tags.map(function(value,index){

var sub_list = document.createElement('div');

sub_list.classList.add('sub-list');

sub_list.innerText = value;

document.getElementById('list_tags').appendChild(sub_list);

});

jsonObj.techCategories.map(function(value,index){

var sub_list = document.createElement('div');

sub_list.classList.add('sub-list');

sub_list.innerText = value;

document.getElementById('list_technologies').appendChild(sub_list);

});

}

ZOHO.embeddedApp.init();

}

Multiple Zoho CRM APIs are a part of the above-mentioned Clearbit Javascript code snippet. Collectively, these APIs help to implement the business logic of retrieving the company details of the selected lead. Let's take a look at these APIs.

ZOHO.embeddedApp.on("PageLoad",function(data)) - An event listener that is triggered whenever an entity Page (Details Page) is loaded.

ZOHO.CRM.API.getRecord(config) - API that gets all details of a record when providing the entity and record ID information.

ZOHO.CRM.API.getOrgVariable()- API that returns the data with respect to the custom variable passed to it.

ZOHO.CRM.HTTP.get(request) - The API invokes HTTP GET and returns a response based on the request object passed to it as a parameter. The request object is constructed as a combination of request params and request headers of the respective API.

In our example, PageLoad listener is used to fetch the entity and ID of the record in an active page. Upon passing the retrieved entity and ID to the getRecordAPI, the complete record information is gathered, from which we fetch the company name of the selected lead.
The retrieved company's name is passed to the URL call as the domain, along with the headers required by Clearbit API. This is bundled together and constructed as the request parameter for the HTTP GET API.
The HTTP GET API is invoked, and it returns the response (enriched company details) based on the request parameter.
Finally, the required data is extracted from the response and displayed in the widget UI, as per your requirement.

After adding all the necessary files, validate and pack the project.

Associate the widget with a connected app and host it

After successfully building the widget, we can now associate it with a connected app in the extension.

1. Choose Connected Apps from the left panel of the Zoho Developer console, under Utilities.

2. Provide the necessary details for the Connected App. Upload the ClearbitProject.zip file from the dist folder and click Save.

Embed the widget as a related list in Zoho CRM

Now that the widget is associated with a connected app, let's embed it inside Zoho CRM. In our example, we'll embed the widget as a related list called Company Enriched Data in the Leadsmodule.

1. Choose Components from the left panel of the Zoho Developer console, under Build.

2. Choose the Related Details tab and select Add Widgets.

3. Provide the necessary details, choose the "Leads" module, and click Save.

4. Test the widget's functionality locally in an isolated sandbox environment using Test your Extension option.

Note: It's important to keep the localhost running in ZET CLI using the zet run command.

In the sandbox environment:

1. Click the Leads module and choose a lead. Here, we have chosen the lead "TestCustomer New" belonging to the company "Microsoft".

2. Select the related list Company Enriched Data that includes our ClearbitProject widget.

The resulting data of the ClearbitProject widget, namely the services, tags, and technologies offered by Microsoft, to which our lead "TestCustomer New" belongs, will be populated and displayed .

Note: As part of the development process of the extension, we have set the value of the custom variable "API Key" with the API secret key obtained. After development, when planning to publish and share the extension either publicly or privately, it's important to make sure that the value is set empty to ensure that users provide their own secret API key while installing the extension.Refer here to learn more about handling custom variables.

With these steps, custom variables can be incorporated into widgets to perform third-party integrations. You can alter and enhance the widget's functionality as per your requirement. Keep following this space for more info!

Working with widgets to power-up extension capabilities

<<Previous

Next>>

Access your files securely from anywhere

Zoho Developer Community

New to Zoho LandingPage?

Access Zoho LandingPage

Zoho LandingPage Resources

New to Zoho Survey?

Access Zoho Survey

Latest Feature Updates

Explore our Pricing & Plans

Zoho Survey Resources

Android Mobile Surveys

Insurvey Blogs

Insight Blogs

Tips & Tricks

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho CRM Plus?

Deliver unforgettable customer experiences

ACCESS ZOHO CRM PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Zoho Marketing Plus?

Everything you need to run your marketing

ACCESS ZOHO MARKETING PLUS

New to Bigin?

Signup Now

Access Bigin

Latest Feature Updates

Zoho Desk Resources

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

Tout forum

France ZUGs

Zoho SalesIQ Resources

Topic Participants
Nanditha Somasundaram Somasundaram

Sticky Posts
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
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
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
Extension pointers for integrating Zoho CRM with Zoho products #8: Upload and manage Zoho Workdrive folders and files from within Zoho CRM
Keeping records on your customers and business prospects is essential for tracking data, conducting follow-ups, and running a business smoothly. When you use two separate applications, and store relevant data in each, checking and tracking data becomes