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
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 achievedKaizen #142: How to Navigate to Another Page in Zoho CRM using Client Script
Hello everyone! Welcome back to another exciting Kaizen post. In this post, let us see how you can you navigate to different Pages using Client Script. In this Kaizen post, Need to Navigate to different Pages Client Script ZDKs related to navigation A.Kaizen #210 - Answering your Questions | Event Management System using ZDK CLI
Hello Everyone, Welcome back to yet another post in the Kaizen Series! As you already may know, for the Kaizen #200 milestone, we asked for your feedback and many of you suggested topics for us to discuss. We have been writing on these topics over theKaizen #197: Frequently Asked Questions on GraphQL APIs
🎊 Nearing 200th Kaizen Post – We want to hear from you! 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 #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.
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 Connect Module in Zoho Trident
Hi I really like where Zoho Trident is going. Having Mail and Cliq in one place is especially powerful. However, Zoho Connect really needs to be included to make this a true communication and collaboration hub. I would like to request that Zoho ConnectTasks Statuses
Hi, The task status "Completed" is a final status which closes the task. We need to have a status "Cancelled". However, when the status is set to "Cancelled", the task prompt still has a blue button to Close Task. When the customer clicks that and closesAdd Webhook Response Module to Zoho Flow
Hi Zoho Flow Team, We’d like to request a Webhook Response capability for Zoho Flow that can return a dynamic, computed reply to the original webhook caller after / during the flow runs. What exists today Zoho Flow’s webhook trigger can send custom acknowledgementsZoho Inventory - Managing Items With Multiple Suppliers
Hi community, I'm working on a project at the moment for a car parts wholesale business. Each Item (part) has its own original manufacturer part number (sometimes more than one part number for the same item). When purchasing parts from 3rd party suppliers,Finding missing records
I have a challenge and I am not really sure where to start with it. I can't find any similar threads on here, can anyone help: I have two forms, FormA and FormB. Both forms have records that contain a field called Job_Number. What I am trying to achieveis it possible to add more than one Whatsapp Phone Number to be integrated to Zoho CRM?
so I have successfully added one Whatsapp number like this from this User Interface it seems I can't add a new Whatsapp Number. I need to add a new Whatsapp Number so I can control the lead assignment if a chat sent to Whatsapp Phone Number 1 then assignCustomer Portal on Zoho Desk
Hi, I'd like to know more about the items below I found when setting up the Customer Portal on Zoho Desk. Could someone help me explaining these in details? Especially the 2nd and 3rd point. Thanking you in advance! Permissions Customers can sign up for Customer Portal Customers can view tickets of their organization (contacts) Customers must register to access Customer Portal Display Community in Customer Self Service portalCliq iOS can't see shared screen
Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? RegardsCreate custom rollup summary fields in Zoho CRM
Hello everyone, In Zoho CRM, rollup summary fields have been essential tools for summarizing data across related records and enabling users to gain quick insights without having to jump across modules. Previously, only predefined summary functions wereFile Field Validation
Hello all, We are tracking our customer NDA agreements in our CRM and have created 2 fields to do so, an execution date field and a file upload field. I want to create a validation rule to ensure that when the execution date field is populated that theCanvas: is it possible to have a fixed header?
Hello. Does Canvas provide the option to have a fixed header, similar to the standard view? It would also be interesting for other parts of the interface, like the header or sidebar of the tab section. Thanks!Automatically Add Recurring Zoho Meeting Events to Zoho Calendar / Zoho Meeting Calendar
Hello Zoho Meeting Team, Hope you are doing well. We would like to request an enhancement regarding recurring meetings created inside Zoho Meeting. At the moment, when we schedule a recurring meeting in Zoho Meeting, it does not appear in Zoho CalendarWhen moments in customer support get "spooky"
It’s Halloween again! Halloween is celebrated with spooky symbols and meanings based on history and traditions, with each region adding its own special touch. While we were kids, we would dress up in costumes along with friends, attend parties, and enjoyHow 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 youEmpowered Custom Views: Cross-Module Criteria Now Supported in Zoho CRM
Hello everyone, We’re excited to introduce cross-module criteria support in custom views! Custom views provide personalized perspectives on your data and that you can save for future use. You can share these views with all users or specific individualsHow can I delete duplicate transactions?
I want to delete the duplicates not simply exclude them. I have duplicates, because I had automatic bank feeds turned on (had to make sure this critical functionality was working before migrating to Zoho). Now when I import my csv's exported from Wave,Limited layout rules in a module
There is a limit of 10 layout rules per module. Is there a way to get that functionality through different customization or workflow + custom function (easily accessible), etc. Having just 10 is limiting especially if module contains a lot of data. AreEnhance Sign CRM integration
Hello all, I'm working on a custom Deluge script to enhance the integration between Zoho CRM and Sign by using a writer merge template for additional flexibility. I want to replicate the post-sign document integration that exists between CRM and SignPython - code studio
Hi, I see the code studio is "coming soon". We have some files that will require some more complex transformation, is this feature far off? It appears to have been released in Zoho Analytics alreadyGood news! Calendar in Zoho CRM gets a face lift
Dear Customers, We are delighted to unveil the revamped calendar UI in Zoho CRM. With a complete visual overhaul aligned with CRM for Everyone, the calendar now offers a more intuitive and flexible scheduling experience. What’s new? Distinguish activitiesReplacing email ID,
In zoho sheets If I am sending it as an email attachments can I replace sender email ID from notifications to my email ID.Move orders scan ISBN
Hi We have ISBN setup to be searched in items zoho but move orders dissent recognize the ISBN is there q missing configuration? regards, JSViewID and Zoho Desk API
I'm looking at the documentation for Listing contacts and it looks like you can filter by ViewID. I assume this is views created in a department or all departments. Is this correct? And if so, how do I find the ViewID for that view? EDIT: I see the viewAbility to Link Reported Issues from Zoho Desk to Specific Tasks or Subtasks in Zoho Projects
Hi Zoho Desk Team, Hope you're doing well. When reporting a bug from Zoho Desk to Zoho Projects, we’ve noticed that it’s currently not possible to select an existing task or subtask to associate the issue with. However, when working directly inside ZohoAutomatically Update Ticket Status in Zoho Desk Based on Actions in Zoho Projects
Hi Zoho Desk Team, Hope you’re doing well. We’re using the Zoho Desk–Zoho Projects integration to manage tasks related to customer tickets, and it works well for linking and tracking progress. However, there are a few important automation capabilitiesPrint Tickets
We have field engineers who visit customers. We would like the option to print a job sheet with full details of the job and account/contact details.Zoho Desk integration with Power BI
Hi, I want to be able to create a Power BI report which has live updates of ticket data from zoho desk, is this possile at all? Thanks JackAbility to Attach Images When Reporting Issues to Zoho Projects from Zoho Desk
Hi Zoho Desk Team, Hope you’re doing well. We’re using the Zoho Desk–Zoho Projects integration to report bugs directly from support tickets into the Zoho Projects issue tracker. This integration is extremely useful and helps us maintain smooth coordinationAbility to Choose Task List and Add Subtasks When Creating Tasks from Zoho Desk
Hi Zoho Desk Team, Hope you’re doing well. We’re using the Zoho Desk–Zoho Projects integration to seamlessly connect customer tickets with project tasks. While the integration works great overall, we noticed two important limitations that affect our workflowSync Task Status from Zoho Projects to Zoho Desk
Hi Zoho Desk Team, Hope you’re doing well. We’re actively using the Zoho Desk–Zoho Projects integration, which helps our support and project teams stay aligned. However, we noticed that when we change a task’s status in Zoho Projects, the change is notDefault/Private Departments in Zoho Desk
1) How does one configure a department to be private? 2) Also, how does one change the default department? 1) On the list of my company's Zoho Departments, I see that we have a default department, but I am unable to choose which department should be default. 2) From the Zoho documentation I see that in order to create a private department, one should uncheck "Display in customer portal" on the Add Department screen. However, is there a way to change this setting after the department has been created?Retainer invoice in Zoho Finance modlue
Hello, Is there a way of creating retainer invoices in the Zoho Finance module? If not can I request this is considered for future updates please.Can we do Image swatches for color variants?
We want to do something like the attached screenshot on our new zoho store. We need image swatches instead of normal text selection. We want to user to select an image as color option. Is this doable? I don't see any option on zoho backend. Please hZoho CRM IP Addresses to Whitelist
We were told to whitelist IP addresses from Zoho CRM. (CRM, not Zoho Mail.) What is the current list of IP Addresses to whitelist for outbound mail? Is there a website where these IP addresses are published and updated? Everything I could find is overColor of Text Box Changes
Sometimes I find the color of text boxes changed to a different color. This seems to happen when I reopen the same slide deck later. In the image that I am attaching, you see that the colors of the whole "virus," the "irology" part of "virology," andThe difference between Zoho Marketing Automation and Zoho Campaigns
Greetings Marketers! This post aims to differentiate between Zoho Marketing Automation and Zoho Campaigns. By the time you get to the end of the post, you will be able to choose a product that objectively suits you. What is Zoho Marketing Automation?How to use Rollup Summary in a Formula Field?
I created a Rollup Summary (Decimal) field in my module, and it shows values correctly. When I try to reference it in a Formula Field (e.g. ${Deals.Partners_Requested} - ${Deals.Partners_Paid}), I get the error that the field can’t be found. Is it possibleZoho Mail Android app update - View emails shared via Permalink on the app.
Hello everyone! In the latest version(v2.8.2) of the Zoho Mail Android app update, we have brought in support to access the emails shared via permalink within the app. Earlier, when you click the permalink of an email, you'll be redirected to a mobileLet us view and export the full price books data from CRM
I quote out of CRM, some of my clients have specialised pricing for specific products - therefore we use Price Books to manage these special prices. I can only see the breakdown of the products listed in the price book and the specialised pricing forWeekly Tips: Manage External Images in Zoho Mail
When you receive emails every day, whether from clients, newsletters, or services, many of them contain external images that automatically load when you open the message. While this can make emails look more engaging, it can also impact your privacy andNext Page