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

        • Cross-Data Center Collaboration and / Or allowing users to choose DC

          Dear Zoho Cliq Support Team, We are writing to request a significant enhancement to Zoho Cliq that would greatly benefit our geographically dispersed development team. Current Challenge: Currently, Zoho Cliq automatically routes users to specific data

        • New Mandatory One-Click Unsubscribe Link Overshadowing Custom Unsubscribe Link

          I was recently informed by Zoho CRM Support that they are now mandated by the large email service providers like Google and Yahoo to provide a one-click unsubscribe option in the header (not the body) of all mass emails. I have a custom unsubscribe link

        • Send / Send & Close keyboard shortcuts

          Hello! My team is so close to using Zoho Desk with just the keyboard. Keyboard shortcuts really help us to be more efficient -- saving a second or two over thousands of tickets adds up quickly. It seems like the keyboard shortcuts in Desk are only for

        • Is it possible to register webhooks in Zoho CRM using API?

          Hello, I am trying to register a webhook in Zoho CRM programmatically (using the API). Specifically, I want to register a webhook that is fired when new Contacts are created in the CRM. I was able to setup a webhook using the UI, by creating a rule that

        • Calls where the local audio is shared, have echo

          When another user is sharing their screen with audio, I get echo from my own voice. We tested this with multiple users, with different audio setups, and there's no obvious way to fix it. Is this a bug you could look into, or are we missing something?

        • Update application by uploading an updated DS file

          Is it possible? I have been working with AI on my desktop improving my application, and I have to keep copy pasting stuff... Would it be possible to import the DS file on top of an existing application to update the app accordingly?

        • Markdown support, code cells...

          Hi Zoho I'd like to vote for a feature that markdown is supported with: Headings Code highlighting Quoteblocks ... Furthermore a inline card(like inline sketch card) for special text like Code would be great. And just to add my vote as well for "Tags"!

        • Minimise chat when user navigates to new page

          When the user is in an active chat (chatbot) and is provide with an internal link, when they click the link to go to the internal page the chat opens again. This is not a good user experience. They have been sent the link to read what is on the page.

        • How do I fix this? Unable to send message; Reason:554 5.1.8 Email Outgoing Blocked.

          How do I fix this? Unable to send message; Reason:554 5.1.8 Email Outgoing Blocked.

        • Zoho Projects app update: Voice notes for Tasks and Bugs module

          Hello everyone! In the latest version(v3.9.37) of the Zoho Projects Android app update, we have introduced voice notes for the Tasks and Bugs module. The voice notes can be added as an attachment or can be transcribed into text. Recording and attaching

        • zurl URL shortener Not working in Zoho social

          zurl URL shortener Not working in while creating a post in Zoho social

        • In the Zoho CRM Module I have TRN Field I should contain 15 digit Number , If it Contain less than 15 digit Then show Alert message on save of the button , If it not contain any number not want to sh

          Hi In the Zoho CRM Module I have TRN Field I should contain 15 digit Number , If it Contain less than 15 digit Then show Alert message on save of the button , If it not contain any number not want to show alert. How We can achive in Zoho CRm Using custom

        • Zoho Bookings know-how: A hands-on workshop series

          Hello! We’re conducting a hands-on workshop series to help simplify appointment scheduling for your business with Zoho Bookings. We’ll be covering various functionalities and showing how you can leverage them for your business across five different sessions.

        • Custom report

          Hello Everyone I hope everything is fine. I've tried to To change the layout of the reports, especially the summary page report, and I want to divide summary of each section in the survey but I can't For example: I have a survey containing five different

        • Zoho Journey - ZOHO MARKETING AUTOMATION

          I’ve encountered an issue while working with a journey in Zoho Marketing Automation. After creating the journey, I wanted to edit the "Match Criteria" settings. Unfortunately: The criteria section appears to be locked and not editable. I’m also unable

        • Custom Fields in PDF outputs

          I created a couple of custom fields. e.g Country of Origin and HS Tariff Code. I need these to appear on a clone of a sales order PDF template but on on the standard PDF template. When I select "appear on PDFs' it appears on both but when I don't select

        • How to create a Service Agreement with Quarterly Estimate

          Hello, I'm not sure if this has been asked before so please don't get mad at me for asking. We're an NDIS provider in Australia so we need to draft a Service Agreement for our client. With the recent changes in the NDIS we're now required to also include

        • Change Currency symbol

          I would like to change the way our currency displays when printed on quotes, invoices and purchase orders. Currently, we have Australian Dollars AUD as our Home Currency. The only two symbol choices available for this currency are "AU $" or "AUD". I would

        • Zoho Social - Post Footer Templates

          As a content creator I often want to include some information at the end of most posts. It would be great if there was an option to add pre-written footers, similar to the Hashtag Groups at the end of posts. For example, if there is an offer I'm running

        • Allow to pick color for project groups in Zoho Projects

          Hi Zoho Team, It would be really helpful if users could assign colors to project groups. This would make it easier to visually distinguish groups, improve navigation, and give a clearer overview when managing multiple projects. Thanks for considering

        • Zoho Books - Quotes to Sales Order Automation

          Hi Books team, In the Quote settings there is an option to convert a Quote to an Invoice upon acceptance, but there is not feature to convert a Quote to a Sales Order (see screenshot below) For users selling products through Zoho Inventory, the workflow

        • Can't find imported leads

          Hi There I have imported leads into the CRM via a .xls document, and the import is showing up as having been successful, however - when I try and locate the leads in the CRM system, I cannot find them.  1. There are no filters applied  2. They are not

        • Custom Button Disappearing in mobile view | Zoho CRM Canvas

          I'm working in Zoho CRM Canvas to create a custom view for our sales team. One of the features I'm adding is a custom button that opens the leads address in another tab. I've had no issue with this in the desktop view, but in the mobile view the button

        • The connected workflow is a great idea just needs Projects Integrations

          I just discovered the connected workflows in CRM and its a Great Idea i wish it was integrated with Zoho Projects I will explain our use case I am already trying to do something like connected workflow with zoho flow Our requirement was to Create a Task

        • Zoho Projects MCP Feedback

          I've started using the MCP connector with Zoho Projects, and the features that exist really do work quite well - I feel this is going to be a major update to the Zoho Ecosystem. In projects a major missing feature is the ability to manage, (especially

        • email template

          How do I create and save an email template

        • Enhancements in Portal User Group creation flow

          Hello everyone, Before introducing new Portal features, here are some changes to the UI of Portals page to improve the user experience. Some tabs and options have been repositioned so that users can better access the functionalities of the feature. From

        • How do I filter contacts by account parameters?

          Need to filter a contact view according to account parameter, eg account type. Without this filter users are overwhelmed with irrelevant contacts. Workaround is to create a custom 'Contact Type' field but this unbearable duplicity as the information already

        • Can I add Conditional merge tags on my Templates?

          Hi I was wondering if I can use Conditional Mail Merge tags inside my Email templates/Quotes etc within the CRM? In spanish and in our business we use gender and academic degree salutations , ie: Dr., Dra., Sr., Srta., so the beginning of an email / letter

        • email moderation issue when email is sent in the name of a mail group

          Symptom: an email that is sent by a mail group moderator in the name of a moderated mail group is held back for approval. Reproduction: Create a moderated mail group with members and moderators. Allow that mails can be sent in the name of the group (extended settings). Send an email to the group as a group moderator, but in the name of the group. This mail is held back for moderation which is unexpected. Expected: A mail sent by group moderator to a moderated group are not held back for moderation

        • blank page after login

          blank page after logging into my email account Thanks you

        • Always display images from this sender – Is this feature available?

          In Zoho mail, I had my "Load external images" setting set to "Ask me", and that's fine. That's the setting I prefer. What's not fine though is I always need to tick "Display now" for each email I get, regardless if I've done that multiple times from several

        • Function #9: Copy attachments of Sales Order to Purchase Order on conversion

          This week, we have written a custom function that automatically copies the attachments uploaded for a sales order to the corresponding purchase order after you convert it. Here's how to configure it in your Zoho Books organization. Custom Function: Hit

        • Free webinar: Security that works: Building resilience for the AI-powered workforce

          Hello there, Did you know that more than 51% of organizations worldwide have experienced one or more security breaches, each costing over $1 million in losses or incident response? In today’s threat landscape, simply playing defense is no longer enough.

        • "Subject" or "Narration"in Customer Statement

          Dear Sir, While creating invoice, we are giving in "Subject" the purpose of invoice. For Example - "GST for the month of Aug 23", IT return FY 22-23", "Consultancy", Internal Audit for May 23". But this subject is not coming in Customer Statement. Only

        • Apply Vendor Credit Automatically

          Hello!!! Is there a way where in we can apply vendor credits automatically on the FIRST OUTSTANDING BILL of the vendor?? We have lots of VENDOR CREDITS ISSUES mostly!!! Applying it manually is a pain for us. Would be great if we have a way to apply the

        • Zoho Notebook Sync problem

          I'm facing a problem with syncing of notebook on android app. It's not syncing. Sometimes it syncs after a day or two.  I created some notes on web notebook but it's not syncing on mobile app. Please help!!!!

        • Apply Vendor Credits Automatically

          We are bulk importing Vendor credits in Zoho Books!!! Is there a way to apply vendor credits automatically to the first UNPAID bill of the Vendor?

        • Cant Save Gauge on Creator Page

          How to Save Gauge on Creator Page see movie https://vimeo.com/1116410860?share=copy#t=0

        • Apply Advance option not shown in report

          We are facing an issue in Zoho Expenses. While approving an Expense Report, the "Apply Advance" option is not appearing under the three dots (More Options). Details: Module: Expense Reports Issue: "Apply Advance" option not visible Status of Report: Awaiting

        • Next Page