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

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 ={
 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!

SEE ALSO

Next>>








        • Recent Topics

        • Filter Based API request in Zoho Books using POSTMAN

          How do I GET only specified CONTACTS based on created time or modified time in Zoho Books using POSTMAN. In the api documentation, it is written we can apply filters but I need a sample request.

        • URL validation

          We use an internal intranet site which has a short DNS name which Zoho CRM will not accept.   When attempting to update the field it says "Please enter a valid URL". The URL I am trying to set is http://intranet/pm/ Our intranet is not currently setup with a full DNS name and given the amount of links using the shortname probably isn't a feasible change for us.

        • Has anyone been experiencing slow issues?

          Dear all, I just want to ask if anyone has been experiencing slow issues with Zoho Creator in the past two weeks? I worked with the ISP to improve network quality by changing routes and upgrading bandwidth, but nothing changed. I am in Vietnam.

        • Zoho Projects Roadshows 2025 - USA

          Dear Users, After an amazing response to our roadshows in 2024, we are excited to be back for the second year in a row! Join our team of experts as they walk you through the most-used features in Zoho Projects, explore powerful automation capabilities,

        • Billing Management: #6 Usage Billing in SaaS

          Imagine a customer shuffling across multiple subscriptions, a streaming service, a music app, cloud storage, and a design tool. Each one charges a flat monthly fee, regardless of how much or how little they use. Some months, the customer barely opens

        • Is there anyone who has been experiencing issues regarding the Zoho Creator Certification Website in the past 2 weeks?

          Dear all , I just wanted to ask is there anyone who was planning on taking the Zoho Creator Developer Certification Test in the past 2 weeks and have been facing errors stating that the website is under maintennance and also not allowed to access the

        • Directly Edit, Filter, and Sort Subforms on the Details Page

          Hello everyone, As you know, subforms allow you to associate multiple line items with a single record, greatly enhancing your data organization. For example, a sales order subform neatly lists all products, their quantities, amounts, and other relevant

        • GST Slabs Redefined: Stay Compliant Using Zoho Books!

          Hello Everyone! The Government of India is rolling out new GST rates, a major reform aimed at simplifying the current tax structure starting 22 September 2025. GST will move from four slabs (5%, 12%, 18%, 28%) to two main slabs (5% and 18%), plus a special

        • Allow syncing Activities from other applications

          Marketing Automation could be a much more powerful platform if you were able to sync activities into the platform (e.g. purchase, donation, etc) outside of a user doing something on your website. I'd love it if you could sync Custom CRM Modules as activities,

        • Create static subforms in Zoho CRM: streamline data entry with pre-defined values

          Last modified on (9 July, 2025): This feature was available in early access and is currently being rolled out to customers in phases. Currently available for users in the the AU, CA, and SA DCs. It will be enabled for the remaining DCs in the next couple

        • Global Sets for Multi-Select pick lists

          When is this feature coming to Zoho CRM? It would be very useful now we have got used to having it for the normal pick lists.

        • Introducing Profile Summary: Faster Candidate Insights with Zia

          We’re excited to launch Profile Summary, a powerful new feature in Zoho Recruit that transforms how you review candidate profiles. What used to take minutes of resume scanning can now be assessed in seconds—thanks to Zia. A Quick Example Say you’re hiring

        • Integración Books para cumplir la ley Crea y Crece y Ley Antifraude (VeriFactu)

          Hola: En principio, en julio de 2025, entra en vigor la ley Crea y Crece y Ley Antifraude (VeriFactu). ¿Sabéis si Zoho va a cumplir con la ley para cumplir con la facturación electrónica conectada a Hacienda? Gracias

        • Ask the Experts #1

          Hello everyone! It’s time to transform how you manage projects. Define the processes. Automate the tasks. Streamline the workflows. Let us dive into automation in Zoho Projects — from configuring workflows and custom functions to building triggers, using

        • Option to Customize Career Site URL Without “/jobs/Careers”

          Dear Zoho Recruit Team, I hope you are doing well. We would like to request an enhancement to the Career Site URL structure in Zoho Recruit. In the old version of the career site, our URL was simply: 👉 https://jobs.domain.com However, after moving to

        • How to overcome Zoho Deluge's time limit?

          I have built a function according to the following scheme: pages = {1,2,3,4,5,6,7,8,9,10}; for each page in pages { entriesPerPage = zoho.crm.getRecords("Accounts",page,200); for each entry in entriesPerPage { … } } Unfortunately, we have too many entries

        • Zoho Sheet - Printing - Page Breaks and Printing Customization

          I think the title is descriptive enough in that I cannot find help documentation on a simple task of adding in page brakes for separating pages on print. Thanks

        • Checking if Creator has Change History

          Like zForms - whenever an entry was updated there's an option to attached change history to email notif. Trigger -> Successful form submission

        • Zoho sites header

          Good day, Im stuck with this situation. I choose a template for my website creation. I have tweaked every instance of the visual editor, regarding the header, I have created created customize fonts presets... I have followed every single step. and my

        • Your bot just got smarter: AI-Powered routing that reads between the lines

          What if your bot could tell the difference? Between a visitor who just needs a quick answer, someone actively comparing options, and a frustrated customer one click away from leaving? Most bots can't. They deliver the same response to everyone, missing

        • 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

        • Unable to create embed code for resource of workdrive using API

          Hello Team, I am trying to create embed code for a resource using workdrive api in powershell, however facing some issues with injecting data in body. Followed Doc: https://workdrive.zoho.com/apidocs/v1/filefoldersharing/shareeveryone Please help, below

        • how to use validation rules in subform

          Is it possible to use validation rules for subforms? I tried the following code: entityMap = crmAPIRequest.toMap().get("record"); sum = 0; direct_billing = entityMap.get("direct_billing_details"); response = Map(); for each i in direct_billing { if(i.get("type")

        • Adding contact role to a specific deal js sdk malfunctioning

          i was trying to add the contact role to a specific deal contact but repeatedly i am getting this error: { "code": "SUCCESS", "details": { "statusMessage": { "code": "INVALID_DATA", "details": { "expected_data_type": "jsonobject" }, "message": "body",

        • Q3 Updates from Bigin!

          Hey Biginners, Hope you’re doing great! As we approach the end of 2025, we truly hope Bigin has been a part of helping you build your dream business this year! We've been busy working behind the scenes to bring you features that make running your business

        • New Series Announcement - Ecommerce Marketing Tips

          Running an online business is more than just having a website. It’s about getting the right customers to discover you, trust you, and keep coming back. To support your growth journey, we’re launching a weekly Marketing Tips series right here on Zoho Commerce

        • Client Script | Update - Introducing Subform Events and Actions

          Are you making the most of your subforms in Zoho CRM? Do you wish you could automate subform interactions and enhance user experience effortlessly? What if you had Client APIs and events specifically designed for subforms? We are thrilled to introduce

        • {"errors":[{"id":"500","title":"Servlet execution threw an exception"}]}

          Here's the call to move a file to trash. The resource_id is accurate and the file is present. header = Map(); header.put("Accept","application/vnd.api+json"); data = Map(); data_param1 = Map(); att_param1 = Map(); att_param1.put("status",51); data_param1.put("attributes",att_param1);

        • Converting Sales Order to Invoice via API; Problem with decimal places tax

          We are having problems converting a Sales Order to an Invoice via API Call. The cause of the issue is, that the Tax value in a Sales Order is sometimes calculated with up to 16 decimal places (e.g. 0.8730000000000001). The max decimal places allowed in

        • Zoho Canvas - Custom templates for related lists

          Hi, I see that the example pages load always one of our related lists in a custom template, but I dont know how to work with that:  1) How can i make my own custom templates for related lists?  2) Where and how can i check out existing custom templates?

        • Kaizen #147 - Frequently Asked Questions on Zoho CRM Widgets

          Heya! It's Kaizen time again, folks! This week, we aim to address common queries about Zoho CRM Widgets through frequently asked questions from our developer forum. Take a quick glance at these FAQs and learn from your peers' inquiries. 1. Where can I

        • open word file in zoho writer desktop version

          "How can I open a Microsoft Word (.doc or .docx) file in Zoho Writer if I only have the file saved on my computer and Zoho Writer doesn't appear as an option when I try 'Open with'? Is there a way to directly open the .doc file in Zoho Writer?"

        • How to invite friends on other social media platforms to one of my group chats in arattai?

          Hello, I have formed chat groups in arattai. I want to invite my friends on other social media platforms like WhatsApp/ FB to one of my groups. Different friends would be invited to different groups. How to share an invite link of one of my groups to

        • Zoho PDF editor has a lot of issues.

          Zoho PDF editor needs a lot of work. It hangs and glitches a lot. Deletes annotations and clearings randomly.

        • Zohom mail

          Plz resolve the problem . I hope u understand .

        • Zoho Sheet for Desktop

          Does Zoho plans to develop a Desktop version of Sheet that installs on the computer like was done with Writer?

        • Workdrive on Android - Gallery Photo Backups

          Hello, Is there any way of backing up the photos on my android phone directly to a specific folder on Workdrive? Assuming i have the workdrive app installed on the phone in question. Emma

        • Market cap

          Market cap formula?? Kaise nikale

        • Clients not receiving emails

          I've been informed that my emails are not being received. Is there anything that I should look into to rectify this? Many thanks!

        • stock

          bom/bse : stock details or price =STOCK(C14;"price") not showing issue is #N/A! kindly resolve this problem

        • Next Page