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 #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 areKaizen #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 the
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
Seeking Zoho Creator Expert (Delivery Management App / Logistics Ops) — Built & Deployed Before
Hi everyone, We’re building a Delivery Management App (focused on delivery operations for now) using Zoho Creator. We’re looking for a Zoho Creator expert who has already developed and deployed a similar delivery/workflow system and can assist us withCliq 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 ? RegardsSpotlight #7 - Automatic Transitions in Blueprint
Previously, records could not be moved from one state to another without user intervention. With automatic transitions, move records from one state to another automatically, when it elapses its pre-defined time. This Spotlight discusses how automaticWhatsapp Connection Status still "Pending" after migration
Hello, I migrated my WhatsApp API to Zoho from another provider a day ago. So far the connection status is still “Pending”. There is a problem? How long does it usually take?Adding Multiple Files to a Zoho Vault Entry
There is a old blog post talking about adding multiple file attachments to one Zoho Vault Secret: https://www.zoho.com/blog/vault/introducing-new-features-in-zoho-vault-powerful-password-sharing-wider-storing.html Is that still possible, I can see howGet user last login
1. Is there a way to programmatically get the last user login to trigger certain workflows? 2. Is there a way to programmatically access the custom fields on a user's account?Dropshipping Address - Does Not Show on Invoice Correctly
When a dropshipping address is used for a customer, the correct ship-to address does not seem to show on the Invoice. It shows correctly on the Sales Order, Shipment Order, and Package, just not the Invoice. This is a problem, because the company beingAdd Attachment Support to Zoho Flow Mailhook / Email Trigger Module
Dear Zoho Support Team, We hope you are well. We would like to kindly request a feature enhancement for the Mailhook module in Zoho Flow. Currently, the email trigger in Zoho Flow provides access to the message body, subject, from address, and to address,Zoho Invoice Customer Login Portal
Are there any plans for a customer portal to Zoho Invoice, ala Freshbooks? I would like customers that I invoice to be able to login to review invoices and invoice history. I have not switched from Freshbooks for this very reason.the custom domain forwards by default to the old career site / how to switch it off??
dear friends, how to switch off the old version of the career site?? The set up custom domain forwards directly to the old site, so that I cant publish it... Any ideas? Thank you! KR, VictoriaPartner with HDFC And Sbi Bank.
Hdfc and sbi both are very popular bank if zoho books become partner with this banks then many of the zoho books users will benefit premium features of partnered banks.Can Zoho Flows repeat Actions more than once?
I'm attempting to make an intentional Zoho Flow loop using the below layout. However, when "WithinLimit" condition is met, the program fails to execute the action "Get & Add Request Co..." again. Is this by design? Is Zoho Flows unable to repeat actionsWhat KPIs Do You Use to Measure Your Support Team’s Performance in Zoho Desk?
Hi everyone, We hope you’re all doing well. We are trying to improve how we measure the performance and effectiveness of our support department, and we would really appreciate learning from the community. We assume there are several common and widely-usedPreserve Ticket Issue Mapping When Migrating from Jira to Zoho Projects
Hello Zoho Projects Team, We hope you are doing well. We are currently exploring a full migration from Jira to Zoho Projects, and we identified a critical limitation during the migration process involving Zoho Desk integration. Current Situation: We useResend Client Portal Invitation + View Email Delivery Status
Hi Zoho Team, We hope you are doing well. We would like to request two important enhancements related to the Zoho Creator Client Portal invitation process. At the moment, when we add a user to the Client Portal, Zoho Creator automatically sends an invitationCRM iOS App Missing Tags support
Hi, I remember reading either a tread on iOS (Maybe Later) & Android (i believe Now Supported) regarding “Tags” in the mobile apps unfortunately I can’t seem to find either. Could we clarify are “Tags” support coming to CRM iOS app as searching the forumsImported contacts succesful but contacts do not show up in Contacts
I imported +300 contacts. I can see them in import history. When clicking on a contact in import history I see all the imported contact details for any given contact. So import seems to be successful. However the imported contacts do not show up in the contacts tab. Not in All contacts, and not in a filtered view where they absolutely should show up. The search function also does not find any imported contact. Help?Hotmail is STILL blocking the zoho mail IP
Greetings, as I already mentioned in my last message, my Zoho IP has been blocked by Hotmail for more than 15 days. Although someone said that the issue was "solved," it still isn't, and this amount of time seems neither normal for a "serious" company,Pre-fill webforms in Recruit
I don't want to use the career site portal (as I have my own already), but I would like to direct users to the application forms for each role, from my website job pages. Is there a way to pre-fill fields in Recruit application forms, so that I only haveZia Actions: AI-powered Workflow Automation for Faster and Smarter Execution
Hello everyone, Workflows got a notch better with AI-based actions. Actions such as field extraction, prediction, auto reply, and content generation facilitate quick execution with improved speed and accuracy. Zia can intercept useful details in newlyImport KB template OR Export template for zoho desk?
Greetings. Can you tell me if there is a way to get an EXPORT of my KB articles? OR is there a template you supply for importing KB articles into my zoho desk? I am looking for a method of understanding what fields can be imported, and what their possibleThis user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details
Hello, Just signed up to ZOHO on a friend's recommendation. Got the TXT part (verified my domain), but whenever I try to add ANY user, I get the error: This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details I have emailed as well and writing here as well because when I searched, I saw many people faced the same issue and instead of email, they got a faster response here. My domain is: raisingreaderspk . com Hope this can be resolved. Thank youXML format to import knowledgebase into Zoho Desk
Hi, We just started to use Zoho Desk and want to import our knowledgebase from our old support system (Freshdesk) to Zoho Desk. Can anyone give us information about the format of xml file to import? There is no explanation on the related page.Can we add custom fields to portal community profiles?
How do we add custom fields to our profile pages in our portal community? If we have the ability to add custom fields, will we be able to access those fields via API? We want to use our Desk community in our help portal as our primary community and wouldWeekly Sales Summary
Is it possible to generate a weekly report in Zoho Books to show -$$ amount of estimates generated -# of estimates generated by Salesperson -$$ amount of Sales Orders created -$$ amount of Invoices generatedClient Portal ZOHO ONE
Dear Zoho one is fantastic option for companies but it seems to me that it is still an aggregation of aps let me explain I have zoho books with client portal so client access their invoice then I have zoho project with client portal so they can access their project but not their invoice without another URL another LOGIN Are you planning in creating a beautiful UI portal for client so we can control access to client in one location to multiple aps at least unify project and invoice aps that wouldRestrict Addresses in Zoho Forms?
In the address field, is there a way to restrict the addresses that auto populate (via Zoho Maps or Google Maps) to a specific state (I know it's possible with the country). Additionally, how often does the address in Zoho Maps get updated? Certain addressesDo Individual Forums within Categories, in Desk Community, Produce Their Own RSS Feed?
Do Individual Forums within Categories, in Desk Community, Produce Their Own RSS Feed? If not, can anyone share a work-around that could help me get an RSS feed for individual category forums?ASAP Widget Not showing "My Tickets"ed
Hello Team, I have created a ZOHO ASAP Widget and embedded to my portal app.clearvuiq.com , widget renders ok and I can open tickets from widget. However I want my opened tickets to be visible in the widget. How can I achieve that?Add Zoho Forms to Zoho CRM Plus bundle
Great Zoho apps like CRM and Desk have very limited form builders when it comes to form and field rules, design, integration and deployment options. Many of my clients who use Zoho CRM Plus often hit limitations with the built in forms in CRM or Desk and are then disappointed to hear that they have to additionally pay for Zoho Forms to get all these great forms functionalities. Please consider adding Zoho Forms in the Zoho CRM Plus bundle. Best regards, Mladen Svraka Zoho Certified Consultant andHow to view CRM Sales Orders in Desk
What's the usual way to view all CRM sales orders linked to a contact, when viewing a ticket in Desk? I don't want to have to open a new tab to see the order in CRM. And the Desk CRM sidebar doesn't seem to be configurable. Would I have to use an extensionKaizen #219: Actions API - Webhooks APIs - Part 1
Hello all!! Welcome back to a fresh Kaizen week. In the previous weeks, we covered Workflow Rules APIs, Actions APIs - Email Notification APIs, Tasks Update API, and Field Update API. This week, we will continue with another Actions API - Webhooks APIPricing Strategies: #3 Services never Stop with just Plans
"Hey, while you're here, could you also take a look at the vegetable patch?" Aaron hears that line almost every week. He runs a small gardening service, the kind where customers subscribe to a simple monthly plan that includes basic maintenance, mowing,Presenting ABM for Zoho CRM: Expand and retain your customers with precision
Picture this scenario: You're a growing SaaS company ready to launch a powerful business suite, and are looking to gain traction and momentum. But as a business with a tight budget, you know acquiring new customers is slow, expensive, and often deliversLead Blueprint transition in custom list view
Hi, Is It possible to insert the Blueprint transition label in a custom Canvas list view? I am using Lead module. I see the status, but it would be great if our users could execute the Blueprint right from the list view without having to enter the detailedCropping Photos for Zoho Sites
Hi, I'm wondering if there is a built in crop tool for zoho sites for my photos so I can crop them and see what the crop looks like on the site?Deluge scripts
Why is there not a search function to make it easier to find the script of interest when modifications are required.WorkDrive and CRM not in sync
1/ There is a CRM file upload field with WorkDrive file set as the source: 2/ Then the file is renamed in WorkDrive (outside CRM): 3/ The File in CRM is not synced after the change in WorkDrive; the file name (reference) in CRM record is not updated (herezoho sheet stuck
I Need help. ZOHO sheets stuck on the loading screen. I've already deleted the system cache and cookies of my browser (google chrome) but it's still not opening.bulk edit records and run internal logic
hi there is few logics in manner "it this than that" logics work well when i edit entry openning it one by one (via workflow "on add/edit - on success" , for custom field "on update/on user input") but when i try bulk edit records - logic does not work. how can i turn on logic to work as programmed - for mass editing records via bulk edit?Next Page