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 .
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
Access your files securely from anywhere
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Nanditha Somasundaram Somasundaram
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! CommandsKaizen #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 ClientKaizen#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 provideExtension 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 APIKaizen #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
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Cancellation waiting list - Zoho Bookings
Is it possible to have a waiting list in case I got a cancellation it can be filled automatically with people on this list?Zoho Bookings Integration with Make.com
Dear Zoho Bookings Support Team, We are writing to request a new integration between Zoho Bookings and Make.com, a leading automation platform widely used by Zoho users. Current Integration: We acknowledge the existing integration with Zapier, anotherIntroducing Zoho CRM for Everyone: A reimagined UI, next-gen Ask Zia, timeline view, and more
Hello Everyone, Your customers may not directly observe your processes or tools, but they can perceive the gaps, missed hand-offs, and frustration that negatively impact their experience. While it is possible to achieve a great customer experience byIntroducing Rollup summary in Zoho CRM
------------------------------------------Moderated on 5th July'23---------------------------------------------- Rollup summary is now available for all organizations in all the DCs. Hello All, We hope you're well! We're here with an exciting update thatDifferent Page Numbering
I want the page numbers not just 1,2,3... but i,ii,iii,iv,... or even I,II,III,IV.... How can I do this?Leads Should Support Business-Centric Structure for B2B Use
We’re a B2B company that generates leads for other businesses and often engage with multiple contacts within the same company. For years, we’ve struggled with Zoho CRM’s limitation of requiring a Last Name field for leads. For example, if we’re pursuingPoor Search Results on Zoho CRM
The search on Zoho CRM is quite poor. Salesforce has now published a new search, when will get this on Zoho? https://help.salesforce.com/s/articleView?id=data.c360_a_hybridsearch_index.htm&type=5Holding Shift to keep selected tickets
It is annoying trying to change the category of tickets and then closing them. You have to select them one by one, no way to 'hold down left click and drag your mouse down to select multiple'. Once you have selected them and you change the category, youCurrency Data Type Issue
Hi, I'm running into an issue with the currency data type conversion with the pipeline tool inside Zoho Analytics. Basically, when the table is added to the pipeline, the columns with currency data type will be converted to text type. I assume it's becauseZoho AI Translate – No Support for Hebrew?
I want to use Zoho AI Translate, but I see that it does not support Hebrew. Since Zoho supports multiple languages, I was hoping this function would also work with Hebrew. Is there any plan to add Hebrew support in the near future? Or is there an alternativeCRM HAS BEEN SOOO SLOW For Days 05/15/25
I have fantastic Wifi speed and have zero issues with other websites, apps, or programs. It takes an excruciatingly amount of time to simply load a record, open an email, compose an email, draft a new template, etc. Am I in a subset/region of subscribersExclude Segment from Campaign Recipients
I've created two Segments in order to separate Non-Marketing Contacts from Marketing Contacts. I'd like to send an Eblast to all Marketing contacts in my lists, but when I go to select Recipients, I have two options: 1. To Choose Lists to Send to; 2.Equivalent domains
Need a settings feature for adding/modifying/deleting domains that use the same login service. The feature can also suggest some popular sites that use shared credentials to access domains under their control. For example: amazon.com and its local variations like amazon.in. For example: gmail.com and google.com. LastPass has this feature.Introducing Keyboard Shortcuts for Zoho CRM
Dear Customers, We're happy to introduce keyboard shortcuts for Zoho CRM features! Until now, you might have been navigating to modules manually using the mouse, and at times, it could be tedious, especially when you had to search for specific modulesAssociating Multiple Work Orders with a Single Invoice in Zoho FSM
Hello Everyone, Is it possible to associate multiple Work Orders with a single Invoice in Zoho FSM? Best Regards, Subhash KumarCan't verify DKIM key?
So basically I just wanted to verify the email on my domain so it doesn't showup as spam in other people's inboxes. So I did what Zoho told me to do, it was to verify a DKIM key. I created the key with the address, added the correct information to the TXT file in my domain's DNS settings, tried to verify it and it keeps saying 'Verification failed'. I tried it more then once, I reset the DKIM key, and for some reason it just won't verify. Either it's me being impatient or this thing isn't working.Custom view placeholders
Hi all, On some occasions it would be great to have placeholders setting up a custom view. Example in our case we have a field for a year. We would like to have a placeholder like $.{CurrentYear} that will insert the current year 2025 e.g. Now we haveForecast performance analysis
Last modified on 15/05/2023: Performance analysis in forecasts is now available for all Zoho CRM users in all DCs. Note that it was an early access feature available only upon request. As of May 10, 2023, it is rolled out for all Zoho CRM accounts. FindAudio/video quality issues with Zoho Meeting – Any roadmap for improvement?
Hi Zoho Team, We’ve been using Zoho Meeting for both internal and external meetings, and unfortunately, the experience has been consistently poor. The video and audio quality are so unreliable that it often renders meetings ineffective—especially withClone a Module??
I am giong to repurpose the Vendors module but would like to have a separate but very similar module for another group of contacts called Buyers. I have already repurposed Contacts to Sellers. Is it possible to clone (make a duplicate) module of VendorsDeleting Records Older Than 14 Days
I have a form called vacancies that contains a field "status_date". I need to create a schedule that runs once a week and if the status date is > 14 days it deletes that record. I would appreciate anyones help. -AaronI need open my email in Zoho from oulook account
Hi Can you help me to solved this First, I’m unable to access my email account via Outlook. Second, when I send any email from my Zoho account, it doesn’t reach Gmail inboxes. Thank you for your supportUSA Military addresses
When we have a client with a US military address adding them to the CRM, or having them fill in a form is a problem. Zoho Forms and CRM doesn't seem accommodate them correctly. It doesn't make sense for me to have to create a secondary data model forDefault value for Subject field in Case module
I would like to add a default value to the Subject field in a custom module based on the Case module. Since this field is mandatory, I can't use a workflow rule that adds a default subject if the field is left empty. So I would like to display a defaultGetting daily summary report from SalesIQ
Why am I suddenly getting a daily summary report from SalesIQ when I'm not even using it nor signed up to it knowingly?MULTI-SELECT LOOKUP - MAIL TEMPLATE
Dear all how are you? We need to insert data from MULTI-SELECT LOOKUP in a email template, but I can't do that, when I'm creating the template I can't find the field to insert it. is there any solution? PVUWhat’s New in Zoho Inventory | April 2025
Hello users, April has been a big month in Zoho Inventory! We’ve rolled out powerful new features to help you streamline production, optimise stock management, and tailor your workflows. While several updates bring helpful enhancements, three major additions請求書に添付されているファイルをAPI経由で取得する際の問題について
Books APIリファレンス 現在、Books APIを利用して請求書内の添付ファイルを取得するメソッドを構築しています。以下のコードを参考にしているのですが、添付ファイルが複数アップロードされている場合、responseにおいて2つ目のファイルの情報しか取得できない現象が発生しています。 headers_data = Map(); headers_data.put("Authorization", "Zoho-oauthtoken 1000.41d9xxxxxxxxxxxxxxxxxxxxxxxxc2d1.8fccxxxxxxxxxxxxxxxxxxxxxxxx125f");Custom Function : Copy multilookup field to text field
Hi, I'm a newbie on function programming, I try to copy text from a multi lookup field named "societe" to a text field named "societe2". I've used this code. In deluge script it seems to work, but when I trigger this function it doesn't work (Societe2Save Draft in email bigin for desktop and mobile
Hi any news to when we going to have the save draft for email in bigin desktop and mobile?Zoho books and venmo
Hi, Is there a way to hook Venmo into zoho books? I have a Venmo business account and want to be able to sync that. I know you can do it with the paypal integration but I dont want to use paypal for the fees and that doesnt allow me use/integrate my currentAdd Pinned Tickets to top of queue
As an IT Helpdesk, we have some tickets where they will need to be looked at daily over a week or 2, and the ability to pin a ticket to the front/top of the queue would be handy as we can be reminded to take a look, rather than placing them on hold andI can't found API for Sales Receipts
Hello May you please help me to find an API document for Sales Receipts to get data and retrive a custom fields like Invoice and credit notes RegardsCreate custom field using API.
Hi Zoho Support, can we create the custom field using Zoho API? Thanks, Parth Moderation Update: I'm locking this post as the feature has now been implemented. Please refer to the help link provided in the comment below.Pipeline in Custom Modules
I love the way the Sales Pipeline looks and functions with reports. I would like to add the save pipeline features and visualization to a custom module, however, I only see that these pipelines are only available for the Deals module. Is there a way to add pipelines to custom modules?I don't really understand leads in the campaigns tab on Zoho CRM
Good morning, fellow CRM users. I am having quite a hard time understanding the leads in the campaigns tab. In this particular campaign in the screenshot below, we sent out emails to our mailing leads through Zoho Campaigns, and the data is linked backAttention API Users: Upcoming Support for Renaming System Fields
Hello all! We are excited to announce an upcoming enhancement in Zoho CRM: support for renaming system-defined fields! Current Behavior Currently, system-defined fields returned by the GET - Fields Metadata API have display_label and field_label propertiesAssistance with Bulk Contact Import in Zoho Email Campaign
I’m currently in the process of importing the Supermarkets customer list from Zoho Accounts into Zoho Email Campaigns. During the import, I’m being prompted to complete the "field mapping" section, but I’m unsure how to properly configure it to ensurewhat is the header code and footer code, do you provide it for my website
I am unable to understand few terms in making website, i need your help in header code, footer code, face book pixel integration etc..Zoho DataPrep
Zoho DataPrep is not updating the dataset. I post the updated dataset in Zoho WorkDrive under the same file name. (I delete the old file and upload the updated file with the same filename.) Zoho DataPrep is supposed to pull the dataset from Zoho WorkDrive,Next Page