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

        • Default Value on a Number

          Hi, I would be nice to also be able to set the Default Value for a Number Field, not just the Initial Value shown, so if not on the screen so not enetred it can have a value of 0 for example. Thanks Dan

        • Having trouble fetching contents of Zoho Connect Feeds using the API, requesting alternative API documentation.

          I'm trying to retrieve feed/post data from Zoho Connect using the API but facing challenges with the current documentation. What I've tried: OAuth authentication is working correctly (getting 200 OK responses) Tested multiple endpoints: /pulse/nativeapi/v2/feeds,

        • Tip#45: Custom Tags and Cluster Tags

          Tagging your work items helps categorize and label work items within your Zoho Sprints workspace. Now, this feature is expanded across multiple modules, along with the introduction of cluster tags that offer an advanced tagging mechanism. Manage Tags

        • Extensions 101 webinar series: Build, integrate, and monetize with extensions

          Attention developers! Are you ready to take your extension development skills to the next level? We're excited to bring back the Extensions 101 webinar series with an expanded lineup of Zoho products and an introduction to more platform features. Last

        • When using "locations" in zoho books, can you keep the two locations totally separate from each other?

          I am looking to add a location but I don't want to intermingle the banking or other accounts. I want that to be like two separate independent branches that use different banking accounts, accounts payable, and accounts receivable. The people who are in

        • [Free Webinar] User Management in Zoho Creator - Creator Tech Connect

          Hello Everyone! We welcome you all to the upcoming free webinar on the Creator Tech Connect Series. The Creator Tech Connect series is a free monthly webinar that runs for around 45 minutes. It comprises technical sessions in which we delve deep into

        • A couple of minor enhancements to Workflows

          Last updated on September 17, 2024: These enhancements were initially available for early access, and we've now enabled them for all users. We are elated to announce a couple of enhancements to custom functions in our Workflows! Say hello to: "Source"

        • Business Continuity - Disaster Recovery

          I know about the Zoho CRM backup .zip files, however, this doesn't include any of the infrastructure with like custom fields or custom modules. I am curious on what everyone has in place for a true backup or what your plan is if your Zoho instance were

        • Free webinar alert on October 16 - Less Complexity, More Security: Workplace + Directory

          Hello Zoho Workplace Community! Security and productivity shouldn't be at odds—and with Zoho, they're not. Discover how Zoho Workplace + Directory delivers seamless collaboration with enterprise-grade security, all in one integrated ecosystem. Join our

        • Narrative 11: Are your customers happy?

          Behind the scenes of a successful ticketing system: BTS Series Narrative 11: Are your customers happy? Happiness isn't just something you experience; it's something you remember. Hear your customers' voices by enabling customer happiness ratings in Zoho

        • Don't understand INVALID_REQUEST_METHOD when I try to post up an attachment

          When I make the POST request (using python requests.post() for files): https://www.zohoapis.com/crm/v8/Calls/***************01/Attachments I get this response: r:{ "code": "INVALID_REQUEST_METHOD", "details": {}, "message": "The http request method type

        • Organization Emails in Email History

          How can I make received Org Emails to show up here?

        • Signature field is showing black

          Hello, When customer signed the service form, it is showing as below picture Phone model: iPhone 16 Pro We tried delete and install application, but it not solved. This has on phone of a few person. There is any advice to solve this?

        • Zoho CRM Android app updates: record sharing, user image upload, Zoho Survey integration, and more

          Hello everyone, We've made some important improvements to Zoho CRM's Android app, and we'd like to walk you through the latest updates. Here's what's new: Record sharing with org users User image upload Zoho Survey integration support Venue preference

        • How to Delete/hide Google adwords section from Layout?

          Hi people, maybe someone can tell me how to remove or hide the Google adwords section from my layout? Im not using it and it takes too much space.

        • WIDGET in related record list ZOHO CRM; how to get and put data to subform custom fields?

          he need: Read and write two custom subform line-item fields on Quotes: Segment_wyceny (picklist/text) and W_pakiecie (number). Write works; read does not return these fields via SDK. Environment Zoho CRM Widget Zoho Embedded App SDK v1.2 Module: Quotes

        • Introducing Assemblies and Kits in Zoho Inventory

          Hello customers, We’re excited to share a major revamp to Zoho Inventory that brings both clarity and flexibility to your inventory management experience! Presenting Assemblies and Kits We’re thrilled to introduce Assemblies and Kits, which replaces the

        • Not all emails from outlook365 migrated to my new zoho account

          I recently setup a new email address hosted by zoho. I migrated all my folders and email from my Outlook365 account to my new zoho account, but not all my emails migrated. Looks like only the past 12 months, or so, made the move. How do I get the rest

        • Way to update CRM records in quik view

          I have custom module in zoho crm and that module have 500 records. I want a quick way or UI so that user can easily update the record information in quick view without going to record detail view or edit view. I tried zoho sheet option but in zoho sheet

        • Writer sing up problom

          Zoho writer sing up prolom face

        • Where to integrate Price Book and Product List Price

          Hello, We sync zoho crm all modules with all data to zoho analytics. In zoho crm, we have "Price Books" and "Products" modules, where each product is assigned to a few price books with different list prices. From zoho crm, I am able to export a dataset

        • Form / CRM Integration Not entering into workflow

          I have a simple form setup with company name, first name, last name and lead source. Each of the fields are mapped to CRM Leads module. When the form is submitted, the lead is populated properly. I also have a workflow created that when the lead source

        • Automating CRM backup storage?

          Hi there, We've recently set up automatic backups for our Zoho CRM account. We were hoping that the backup functionality would not require any manual work on our end, but it seems that we are always required to download the backups ourselves, store them,

        • Zoho Slowness - Workarounds

          Hi all, We've been having intermittent slowness and Zoho just asks for same stuff each time but never fix it. It usually just goes away on it's own after a couple weeks. Given that speed is a very important thing for companies to be able to keep up with

        • First day of trying FSM in the field.

          What we found. 1. with out a network connection we were unable to start a service call? 2. if you go to an appointment and then want to add an asset it does not seem possible. 3. disappointed not to be able to actually take a payment from within the app

        • Don't understand why Forms Mobile Scan and Fill not working

          I have configure enabled mobile scan and fill, I have enabled QR and Bar code on two fields name and position, I have mapped seq 1 to Name and seq 2 to position, I have created a 2d QR code with the person names and position, seperated by a comma. When

        • Recurring Supervisor Rule Reminders for Open/In-Progress Tickets

          Hello Zoho Support Team, I would like to suggest a potential improvement regarding reminders for tickets and activities in Zoho Desk. Currently, it is possible to set reminders only once. In the Supervisor Rules section, it is possible to configure reminders

        • Template usage

          Hi, We are using some templates as a response to customer questions. Is it possible to analyze the usage of these templates? We want to know if the use of our templates has increased over time

        • Round robin

          Hi, I'm trying to set up a round robin to automatically distribute tickets between agents in my team but only those tickets that are not otherwise distributed by other workflows or direct assignments. Is that possible and if so which criteria should I

        • How to mute chat notification sound by default in Zoho SalesIQ?

          We’ve recently embedded the Zoho SalesIQ chatbot on our website, and we’ve noticed that notification sounds sometimes play even when the visitor hasn’t interacted with the chat widget yet. We’re trying to understand two things: Why do these sounds occur

        • Ticket Status Colors

          Can i change the colors of Ticket Status in the admin panel? Or even change the background of the entire cell of a Critical ticket? This way its easy for my agents to see a urgent ticket when it comes in. Right now everything is black text. Here Right

        • Sync Lookup Fields from Zoho CRM

          HI Team, I have synced a lookup field from my CRM data to Campaigns. When I view the synced data the field appears to display a Zoho CRM record ID rather than the text value. Is it possible to get the sync to import the text value rather than the CRM

        • New From Address cannot verify

          I have created a new From Address, which is the support@ address for my domain, that forwards to the default support mailbox. Presumably then, the verification email that is sent, should turn up as a ticket, but it does not. How can I verify my from address so that I can use my own domain?

        • Closing Accounting Periods - Invoice/Posting dates

          Hi, I have seen in another thread but I'm unsure on how the 'transaction locking' works with regards to new and old transactions. When producing monthly accounts if I close December 24 accounts on 8th Jan 25 will transaction locking prevent me from posting

        • How to update/remove file in zoho creator widgets using javascript API

          Hi Team, I have developed a widget which allows inserting and updating records I have file upload field with multiple file upload. Now while doing insert form record, I am using uploadFile API to upload files for that record. I am using updateRecord API

        • issue with image thumbnails not showing in Image Selector

          We have been using Zoho Campaigns for over a year, maybe close to two years, and this issue just started happening in the last month. I wanted to wait to see if it would resolve on it's own, and it doesn't seem to be. The thumbnail images for all new

        • Deluge Script for adding tag

          Trying to create a custom function where a tag is added to a record - but for the life of me, I cannot figure out how. Help please! Moderation Update: Adding the help doc and sample to add Tags to records via deluge here for everyone's benefit. tag1 =

        • Automatically embed short AI-generated product videos in Zoho Mail campaigns

          Hi Zoho team, I've been experimenting with AI-generated product videos and wanted to suggest an automation idea for Zoho Mail and CRM campaigns . For example, here's a quick demo video I created automatically using AI — no filming or editing required:

        • Unlock your Zoho Vault with OneAuth, Windows Hello, TouchID, YubiKey, and many more!

          Hello everyone, We are thrilled to introduce one of the most highly requested features – the ability to unlock your Zoho Vault using various authenticators. The primary purpose of a password manager is to remember just one master password and securely

        • Blueprint or Validation Rules for Invoices in Zoho Books

          Can I implement Blueprint or Validation Rules for Invoices in Zoho Books? Example, use case could be, Agent confirms from client that payment is done, but bank only syncs transactions tomorrow. in this case, Agent can update invoice status to done, and

        • Next Page