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
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
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
Kaizen #198: Using Client Script for Custom Validation in Blueprint
Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.Kaizen #226: Using ZRC in Client Script
Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In thisKaizen #222 - Client Script Support for Notes Related List
Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore howKaizen #217 - Actions APIs : Tasks
Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.Kaizen #216 - Actions APIs : Email Notifications
Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are
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
Zoho Desk View Open Tickets and Open Shared Tickets
Hi, I would like to create a custom view so that an agent can view all the open tickets he has access to, including the shared tickets created by a different department. Currently my team has to swich between two views (Open Tickets and Shared Open Tickets).Clone Banking Transaction
Why is there no option to CLONE a Transaction in the Banking module?? I often clone Expenses (for similar expense transactions each month) so I would also like to clone Income transactions. But there is no option in Banking to clone an existing IncomeZoho Expense - Bi-Weekly Report Automation
Hi Zoho Expense Team, My feature request is to please include an option to automate creation of reports bi-weekly (every 2 weeks)Application Architecture in Zoho Creator: Why You Should Think About It from the Start
Many companies begin using Zoho Creator by building simple forms to automate internal processes. This is natural — the platform is extremely accessible and allows applications to be built very quickly. The challenge begins to appear when the applicationArquitetura de Aplicações no Zoho Creator: Por que pensar nisso desde o início
Muitas empresas começam a utilizar o Zoho Creator criando formulários simples para automatizar processos internos. Isso é natural — a plataforma é extremamente acessível e permite construir aplicações rapidamente. O problema começa a aparecer quando aDark Mode - Font Colors Don't Work
When editing a document in Dark Mode and selecting font colors, they don't show up on screen. Viewing/editing the same document in Light Mode shows them just fine.How to Customize & Reorder Spaces in Zoho One 25 (Spaces UI) — Admin Tips Not in the Docs
Hey Zoho Community, After digging around in the new Spaces UI, I found a couple of admin features that aren't well documented yet but are really useful. Sharing here in case others are looking for the same things. 🔁 How to Change the Default Space UsersSystem Components menu not available for Tablet to select language
I have attached a screenshot of my desktop, mobile, and tablet menu builder options. I am using 2 languages in my application. Language Selection is an option under the System Components part of the menu, but only for my desktop and phone(mobile). MyApprovals in Zoho Creator
Hi, This is Surya, in one of my creator application I have a form called job posting, and I created an approval process for that form. When a user submits that form the record directly adding to that form's report, even it is in the review for approval.How Zoho Desk contributes to the art of savings
Remember the first time your grandmother gave you cash for a birthday or New Year's gift, Christmas gift, or any special day? You probably tucked that money safely into a piggy bank, waiting for the day you could buy something precious or something youEstimate PDF Templates - logo too large
Hello, I cloned a standard estimate template, but my logo is showing up much larger than intended. This doesn’t happen with the standard invoice template, where the logo displays correctly. How can I adjust the logo size in the estimate template? ThankSelect CRM Custom Module in Zoho Creator
I have a custom module added in Zoho CRM that I would like to link in Zoho creator. When I add the Zoho CRM field it does not show the new module. Is this possible? Do i need to change something in CRM to make it accesible in Creator?Invoice emails not sending but reminders are
I am a new user. I have been creating some dummy invoices before I go live and have struck a block. Emails for the invoice are not being recieved by the recipient, however, when I send a reminder for the same invoice the email is sent. NOTE: I have checkedDeleted account recovery
I ended up accidentally deleting our Zoho invoice account while trying to work something out. Emailed support for recovery and restoration of the deleted account, if possible, but they responded by saying they can't find an account associated with thatDevis et factures multipage coupées
Bonjour, je suis sur Zoho invoice et je rencontre un problème sur mes devis et factures lorsqu'ils dépassent 1 page. je me retrouve souvent avec des lignes coupées ou le sous total page 1 et le total page 2. j'aimerai savoir s'il existe une possibilitéCustom Related List Inside Zoho Books
Hello, We can create the Related list inside the zoho books by the deluge code, I am sharing the reference code Please have a look may be it will help you. //..........Get Org Details organizationID = organization.get("organization_id"); Recordid = cm_g_a_data.get("module_record_id");Zoho Meeting - Feature Request - Introduce an option to use local date and time formating
Hi Zoho Meeting Team, My feature request is to add an option for dates to be displayed in the users local format. This is common practice across Zoho applications and particularly relevant to an application like Zoho Meeting which revolves around dateCannot give public access to Html Snippet in Zoho Creator Page
Hi, I created a form in Zoho Creator and published it. The permalink works but I want to override the css of the form. (style based URL parameters is not good enough) So I created a page and added an Html snippet. I can now override the css, which isHow can Outlook 365 link back into Zoho Projects so meetings and events in Outlook calendar show in Zoho?
We use Outlook 365 for our emails and diaries and have integrated Zoho Projects with Office 365. One challenge we face is getting Zoho Projects to recognise when we have meetings and events in Outlook and not allow project managers to assign tasks over that period. Is there a way to resolve this? ThanksOn Edit Validation Blueprint
Hello, I have a notes field and a signature field. When the Approve button is clicked, the Signature field will appear and must be filled in. When the Reject button is clicked, the Notes field will appear and must be filled in. Question: Blueprint willZoho Invoice en Navarra (Spain)
Hola, ¿Alguien usa Zoho Invoice en la Comunidad Foral de Navarra? En Navarra tenemos un sistema tributario diferente y no aplica Verifactu (la Hacienda Foral de Navarra ha anunciado su alternativa, NaTicket, pero no ha informado cuándo entrará en vigor).Emails from Zoho are getting blocked due to Zoho IP address being blacklisted
This is the info I got from my hosting provider – please address this issue immediately. I don’t expect this from such a big household name. Every single invoice I have sernt it not being received by my clients, all being blocked. All of a sudden. Asagentid : Where to find?
I've been looking around for this agenId to check for the total ticket assigned on a specific agent url :"https://desk.zoho.com/api/v1/ticketsCountByFieldValues?departmentId=351081000000155331&agentId=35108xxxxxx132009&field=statusType,status" type :GETZoho DataPrep integration with OpenAI (beta)
We are thrilled to announce Zoho DataPrep's integration with OpenAI. The public beta roll-out opens up three features. Users who configure their OpenAI Organizational ID and ChatGPT API key (Find out how) will be able access the features. The featuresAI Bot and Advanced Automation for WhatsApp
Most small businesses "live" on WhatsApp, and while Bigin’s current integration is helpful, users need more automation to keep up with volume. We are requesting features based on our customer Feedbacks AI Bot: For auto-replying to FAQs. Keyword Triggers:Setting total budget hours for a specific project
Hi there, I work on a lot of projects that have fixed budget hours. Is there a way to enter the total budgeted hours so i can track progress and identify when hours have been exceeded. I see in the projects dashboard there is a greyed out text sayingClone entire dashboards
If users want to customize a dashboard that is used by other team members, they can't clone it in order to customize the copy. Instead they have to create the same dashboard again manually from scratch. Suggestion: Let users copy the entire dashboardIntroducing Formula Fields for performing dynamic calculations
Greetings, With the Formula Field, you can generate numerical calculations using provided functions and available fields, enabling you to derive dynamic data. You can utilize mathematical formulas to populate results based on the provided inputs. ThisGetting started with Zoho PDF Editor
Hello users, If you are new to Zoho PDF Editor or aren't sure of its full potential, then this article is for you. Zoho PDF Editor is a free online PDF editing tool, that allows you to upload and edit PDFs, insert text and images, add fillable and e-signatureZoho Projects - Cloning a task does not trigger task workflow when created
Hello! I have a Project where my team uses a set of tasks from a tasklist as templates, so we could simply clone it and drag it to another list in kanban view to avoid creating a new one from scratch. The process works well, but after cloning it the newPurchase Orders not in sequence
I am unable to sort by Purchase Order Numbers. I can only sort by date; however, the PO numbers aren't in the order they were entered. This was not the case prior to today.Internal Fillable Contract with Zoho Writer (Before Sending to Client)
Hi everyone, I’m trying to automate the following process in Zoho CRM and would appreciate some guidance. Process: When a Deal moves to a specific stage, CRM triggers an automation. CRM sends a contract template to an internal team member so they canDate/time displayed in ZohoCRM does not match date/time of entries in ZohoForm
Hello there, we use a ZohoForm as a worksheet, i.e. users use it to track start time, break and stop time for every working day. The ZohoCRM org time zone is set on GM -4, so is the Time Zone in the Date&Time section in ZohoForm (see attachment). DespiteUpdate Existing Records greyed out in Free Version
Trying to update records from an Excel sheet, and not getting the option to update. Only option is to add as new accounts. All documentation I can see says update should be an option! Accounts, Leads, Contacts, all the same.Dynamically Populate Picklist Values from Another Module Using Client Script
I am working in Zoho CRM and trying to dynamically populate a picklist field in the Partners module using values stored in another custom module. I have two modules: 1. Partners Module Field: Partner_Type_Pick Field Type: Picklist 2. Partners_Type ModuleAdd zoho calendar to google calendar
Hi I keep seeing instructions on how to sync Zoho CRM calendar with google calendar but no instructions on how to view Zoho calendar in my google calendar.Zoho Community Digest : Jan 2026 | Part 1
Hello Everyone! Staying in the loop with Zoho's latest product updates and features across the vast Zoho Community Forums can be a real challenge. We get it. With over 50+ applications, each with its dedicated forum, it's easy to miss out on importantWorld date & time format
Hello, Is there a timeline to get the worldwide used date and time format ? I mean not the american one... I mean day month year, and 24 hours clock. RegardsNimble enhancements to WhatsApp for Business integration in Zoho CRM: Enjoy context and clarity in business messaging
Dear Customers, We hope you're well! WhatsApp for business is a renowned business messaging platform that takes your business closer to your customers; it gives your business the power of personalized outreach. Using the WhatsApp for Business integrationConditional layouts - support for multi-select picklists
Hi, The documentation for conditional layouts says the following: "Layout Rules cannot be used on the following field types: Auto Number Lookup Multi Select Lookup User Lookup Formula File Upload Multi Line" I have a custom module with a multi-pick listNext Page