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

        • Marketer's Space - Why email marketing matters in ecommerce (and how to get started with Zoho Campaigns)

          Hello Marketers, Welcome to this week's Marketer's space post. Today, we'll discus why email marketing matters in ecommerce businesses. Running an online store is exciting but challenging. If you're running an online store, you've probably experienced

        • Zoho Campaigns Event timestamps do not propagate to Zoho CRM

          We have integrated Zoho CRM and Zoho Campaigns. But when looking at Contact records, the Campaign event data is missing the actual timestamps: especially when a particular email was sent. They're not in the Campaigns related list, and the cannot be found

        • Kaizen #121 : Customize List Views using Client Script

          Hello everyone! Welcome back to another interesting Kaizen post. In this post, we can discuss how to customize List Views using Client Script. This post will answer the questions Ability to remove public views by the super admin in the Zoho CRM and Is

        • Setting default From address when replying to request

          At the moment, if I want to reply to a request, the From field has three options, company@zohosupport.com, support@company.zohosupport.com, and support@company.com.  The first two are really internal address that should never be seen by the customer and

        • In place field editing for candidates

          Wondering about any insight/best practices for efficiently updating candidate records while reviewing them in a Job Opening pipeline. We can do in-field editing (e.g. update job title or City) only when we have the full candidate record open, however

        • Explore Your Support Reach with Zoho Assist’s Geo Insights

          Understanding where your remote support sessions are happening can help you make smarter decisions, allocate resources effectively, and improve overall customer satisfaction. In this week's Zoho Assist's community post we will be exploring Geo Insights

        • Direct Integration Between Zoho Cliq Meetings and Google Calendar

          Dear Zoho Team, We’d like to submit the following feature request based on our current use case and the challenges we’re facing: 🎯 Feature Request: Enable meetings scheduled in Zoho Cliq to be automatically added to the host's Google Calendar, not just

        • Formatting of text pasted into Zoho documents

          Howdy, I'm a newbie and finding Zoho an improvement to MS Word. Consider yourself hugged. High on my wish list would be plain text cut-and-paste. When pasting text from the web to Zoho, presently Zoho imports the formatting along with the text. This means that every cut-and-paste operation brings in text in a different font, size, or style. Can we have at least the option of importing plain text without formatting (or better yet, is this option already out there?) ... Thanks Helen

        • Add additional features to Zoho Tables

          Zoho Tables is a really great tool, why not add features like diagramming capability into the tool from applications like Draw.io which I believe is open source, you should be able to do wireframes, process flow diagrams, network design, etc. Please note

        • Zoho sheet

          Unable to share zoho sheet with anyone on internet with editer option only view option is show

        • The Social Wall: August 2025

          Hello everyone, As summer ends, Zoho Social is gearing up for some exciting, bigger updates lined up for the months ahead. While those are in the works, we rolled out a few handy feature updates in August to keep your social media management running smoothly.

        • The Social Wall: July 2025

          Hello everyone! July has brought some exciting new updates to Zoho Social. From powerful enhancements in the Social Toolkit to new capabilities in the mobile app, we’ve packed this month with features designed to help you level up your social media presence.

        • Use Zoho Creator as a source for merge templates in Zoho Writer

          Hello all! We're excited to share that we've enhanced Zoho Creator's integration with Zoho Writer to make this combination even more powerful. You can now use Zoho Creator as a data source for mail merge templates in Zoho Writer. Making more data from

        • Tagged problem !!!

          Damn it, we're one of dozens of construction companies in Africa, but we can't link purchasing invoices to projects. Why isn't this feature available?

        • Enable Password Import option in ulaa browser

          Dear Ulaa Team, I noticed that the Ulaa Password Manager currently offers an option to export passwords, but not to import them. This limitation poses a challenge for users like me who have stored numerous credentials in browsers like Chrome. Manually

        • Limited review (/questions) for Bookings 2.0

          Hi all, I'm writing this review of Bookings 2.0 for two reasons: 1) it may be of interest to others, and 2) I'd like to be corrected if I'm wrong on any points. It's a very limited review, i.e. the things that have stood out as relevant, and particularly

        • Syntax for URLs in HTML Snippets

          What are some best practices for inserting a URL in an HTML snippet? I've looked at Zoho Help articles on navigation-based and functional-based URLs, but I'm still unclear on how to incorporate them in an HTML snippet. For example, 1. How do I link to

        • The Social Wall: June 2025

          Hello everyone, We’re back with June Zoho Social highlights. This month brought some exciting feature updates—especially within the Social Toolkit—to enhance your social media presence. We engaged with several MSME companies through community meet-ups

        • Make panel configuration interface wider

          Hi there, The same way you changed the custom function editor's interface wider, it would be nice to be able to edit panels in pages using the full width of the screen rather than the currently max-width: 1368px. Is there a reason for having the configuration panel not taking the full width? Its impossible at this width to edit panels that have a lot of elements. Please change it to 100% so we can better edit the layouts. Thanks! B.

        • Tip 7: How to fetch data from another application?

          Hi everyone, Following our Zoho Creator - Tips and Tricks series every fortnight, we are back today with a tip based on one of the most popular questions asked in our forum. This tip would help you fetch data from another application(App B) and use it

        • The Social Wall: May 2025

          Hey everyone, We're excited to share some powerful updates for the month of May! Let's take a look! Reply to your Instagram and Facebook comments privately through direct messages Are you tired of cluttered comment threads or exposing customer queries

        • Sub-Form Fields as Filters for Reports

          Hi, I would like to use the Sub-Form Fields as Filters in Reports just like we do for Main Page Fields. Thanks Dan

        • How to change the format for phone numbers?

          Mobile phone numbers are currently formatted (###) ###-####.  How can I change this to a more appropriate forms for Australia being either #### ### ### or (#)### ### ###?

        • Zoho CRM Formula - Current Time minus Date/Time field

          Hello, I am trying to prevent duplicate emails going to clients when more than 1 deal is being updated. To do this, I would like to create a formula to identify if a date/time field is >= 2 hours ago. Can someone please help me write this formula? Example:

        • Per Level Approval for admins

          We need Process admins like Zoho CRM in Zoho Books for per stage approval Currently in books, admins only have the option for Final Approval But for example, in cases like when an employee is on leave, we can't just approval one level we only have option

        • Default Sorting on Related Lists

          Is it possible to set the default sorting options on the related lists. For example on the Contact Details view I have related lists for activities, emails, products cases, notes etc... currently: Activities 'created date' newest first Emails - 'created

        • Billing Management: #7 Usage Billing in Telecom & Internet Service Provider

          Telecom and Internet Service Providers operate in markets where usage varies drastically from one customer to another. While flexible, usage-based models align revenue directly with consumption, they also introduce operational challenges like real-time

        • Zoho Sprints - Q3 updates for 2025

          The updates for the third quarter of 2025 are out. A few significant features and enhancements have been rolled out to improve user experience and product capabilities. The following are the updates: Manage tags and cluster tags Record and maintain project

        • Kaizen #208 - Answering your Questions | Functions, AI and Extensions

          Hello Developers! Welcome back to a fresh week of Kaizen! We are grateful for your active participation in sharing feedback and queries for our 200th milestone. This week, we will answer the queries related to Functions and Extensions in Zoho CRM. 1.

        • Zoho Projects Webhook fails with HTTP Error 0

          Hello Zoho Community, I am pulling my hair out over this one. I have setup a very basic http(s) server that always responds "ok" and code 200 to incoming GET requests. It will accept any parameters, and any path. Really, all it does is say "ok," and log

        • Zoho CRM still doesn't let you manage timezones (yearly reminder)

          This is something I have asked repeatedly. I'll ask once again. Suppose that you work in France. Next month you have a trip to Guatemala. You call a contact there, close a meeting, record that meeting in CRM. On the phone, your contact said: "meet me

        • Creating Restaurant Inventory Management on Zoho

          Hi,  We run a small cloud kitchen and are interested to use Zoho for Inventory and Composite Item tracking for our food served and supplied procured to make food items.  Our model is basically like subway where the customer can choose breads, veggies,

        • To Zoho customers and partners: how do you use Linked Workspaces?

          Hello, I'm exploring how we can set up and use Linked Workspaces and would like to hear from customers and partners about your use cases and experience with them. I have a Zoho ticket open, because my workspace creation fails. In the meantime, how is

        • Zoho Forms to Zoho CRM : First/Last Name to just Name ?

          When integrating a Zoho Form into the Accounts menu of the CRM I'm having trouble with how names are formatted ; In Forms the data is available as First Name or Last Name In the CRM there is only one field called Name How can I ensure that "John" "Smith"

        • Enhancements to the formula field in Zoho CRM: Auto-refresh formulas with the "Now" function, stop formula executions based on criteria, and include formulas within formulas

          Dear Customers, We hope you're well! By their nature, modern businesses rely every day on computations, whether it's to calculate the price of a product, assess ROI, evaluate the lifetime value of a customer, or even determine the age of a record. With

        • This festive season, offer discounts with coupon code support in Stripe Checkout

          Hello form builders! It’s the festive season, the perfect time to spread joy and great deals! Now, with Zoho Forms’ latest enhancement for Stripe Checkout, you can do exactly that with coupon codes! Your payment forms integrated with Stripe Checkout can

        • Cómo creo una factura negativa o de abono?

          NEcesito anular una factura y crear una nueva igual pero en negativo. El sistema no me lo permite

        • Power of Automation::Streamline log hours to work hours upon task completion.

          Hello Everyone, A Custom Function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as to when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. Requirement:-

        • Is CRM On Premise available

          Hi Zoho team, Can you please let me know that CRM Zoho is available for On Premise as well? Thanks, Devashish

        • Last activity time is acting like last modified time

          When i edit the description or any field in the potential, account, contact and lead, the Last Activity Time is being updated like the Modified Time. This is messing all workflows and reports and we are unable to track real last time of activities like

        • Next Page