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
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
Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! CommandsKaizen #165 : How to call Zoho CRM APIs using Client Script
Welcome back to another exciting Client Script post! In this post, we will discuss one of the most frequently asked questions: How do you call Zoho CRM APIs from Client Scripts? In this kaizen post, 1. Ways to make calls to Zoho CRM APIs using ClientKaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provideExtension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP
Handling and managing the data between two applications is a major factor for an efficient business. There are a variety of ways to handle data between Zoho CRM and other third-party applications. You can use deluge CRM tasks, create connectors, use APIKaizen #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 achieved
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho DataPrep Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho Campaigns 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
Create customized SLAs for your customer base with support plans
Managing customer expectations, prioritizing critical issues, and resolving customer inquiries on time is quite a juggle. Without a clear timelines or defined priorities, a support team may struggle with delays in response, SLA violations, and pendingZoho Flow or Schedules
I have a process where we text our leads 7 times over a 14 day with different content for each text. I created one flow in Zoho Flow to do this, but wondering if there is a more efficient way to accomplish this via Schedules. It goes on for 6 more timesFree webinar: Zoho Sign 2024 wrap-up - Everything that is new and has changed
Hello, Are you looking up to catch up on all the updates made to Zoho Sign in 2024? Or are you still figuring out how you can use Zoho Sign better to get business paperwork done more efficiently? If so, we invite you to join us this Thursday, DecemberHow to Customize Task Creation to Send a Custom Alert Using JavaScript in Zoho CRM?
Hello Zoho CRM Community, I’m looking to customize Zoho CRM to send a custom alert whenever a task is created. I understand that Zoho CRM supports client scripts using JavaScript, and I would like to leverage this feature to implement the alert functionality.Workflow - Execute Based on Date
Hello, I have trouble understanding the documentation for Execute Based on Date or Date Time Field's Value. I want to send an email every time I have a Case opened for more than three days with its status unchanged. I set : This rule will be executed 3 days after [date]. Condition : Status is [New]. Instant Action : Send an email notification. However, I'm not sure I follow this part of the documentation: "For all the records matching the rule criteria, rule will be triggered either monthly or yearlyCan we set a BCC address as default to show while sending emails?
Two things inside ZohoCRM are annoying me because it's a repeated work. First one is that I always need to click manually to add the BCC field while sending an email to a lead. Can we set a default address so when I click to send a new email the BCC addressMake collecting payments from your customers in Bigin easier with payment links
Greetings, Efficient payment collection is crucial for business success. Bigin already helps your businesses manage and sell products effectively, but we can further enhance this by making payment collection easier. This integrated payment feature letsSend email is not authenticated
Hi, I’m getting an error in Gmail, when receiving an email from my account in zoho, my email is already authenticated in my domain, and I don't know why I keep receiving this message... also testing in outlook, the message goes directly to "junk".Inbox Preference - Saved replies based on message repsonse with specific word
Hi There, Can one create a workflow where the Save Reply will be generic for all messages that contains a specific word, various channels,. The saved reply should contain a link for download etc. that is a response to the word entered in the message containedBasic Price List Functionality Still Missing
I am having a problem with the most simple imaginable pricing scenario - you buy cheap, add profit, then sell high. Or in less simplistic terms: business buys a product at a given cost, then adds predetermined percentage markup, and finally sells thatHow do I hire employees????
Hi! I own a bookkeeping company, where a few of my clients use Zoho Books as their accounting platform . I started utilizing Zoho Practice to work on the books of my Zoho clients, some have Zoho One and some have Zoho Books plans. I just hired an employee,Automate data upload process like reports
I'll start with the end in mind. I want to basically keep certain creator tables updated with data that are in a sql database/tables in our office (employees, active jobs, employee positions) so I can reference that data and not have to duplicate it by hand every time someone adds a new job or employee in the office desktop software. Here are some thoughts I had about how to do this, but am unsure as to whether any of them are actually possible and how to go about it from there: Is there any wayGreylisted, try again after some time
Can you check my ip, i send to duyna@vietlinkjsc.vn but have an error; my ip is 112.213.94.12 Here is log: 2018-01-09 09:40:29 H=mx.zoho.com [204.141.32.121] SMTP error from remote mail server after RCPT TO:<duyna@vietlinkjsc.vn>: 451 4.7.1 Greylisted, try again after some time 2018-01-09 09:40:32 H=mx2.zoho.com [204.141.33.55] SMTP error from remote mail server after RCPT TO:<duyna@vietlinkjsc.vn>: 451 4.7.1 Greylisted, try again after some time 2018-01-09 09:40:32 duyna@vietlinkjsc.vn R=lookuphostEmails linked to Deal
Hello everyone, I’d like to ask a question to see if someone can help me out. We are requesting availability from suppliers by sending emails directly from the Opportunity. These emails we send are logged within the Opportunity; however, when we receiveHow to transfer all my mails from Zoho to Gmail or Office 365
is there any option to move my emails from zoho to gmail or office 365. i would like to export more than 25k emails from zoho to office 365 or gmail. can anyone help me to guide properly. this will help me to access my emails easily i have both account and can easily do it with office 365 or gmail. i want two options. direct from zoho to office 365 or exported eml files from zoho to gmail. please suggest me both if possibleInquiry Regarding Image Display Issue in Campaign Duplication
We are currently using Zoho Campaigns for email distribution to our clients. I would like to inquire about an issue we encountered. When duplicating a previously created and sent campaign from the "All Campaigns" section, the images used in the headerNew integrations for Bigin: Zoho Sign, SalesIQ, and Marketing Automation
Greetings, We're excited to share new integrations that make Bigin more powerful and useful for your business! Zoho Sign for Bigin Zoho Sign now integrates seamlessly with Bigin, enabling you to sign, send, and manage contracts or agreements without leavingAdd multiple users to a task
When I´m assigning a task it is almost always related to more than one person. Practical situation: When a client request some improvement the related department opens the task with the situation and people related to it as the client itself, the salesmanWhat is Attendee Status 0 and 1?
Hi there, I recently stumbled upon the API to get the attendee list and in the return value, there is a parameter called "status", and 0 supposed to mean not_attending, and 1 means attending. I cannot find this representation anywhere in the attendeeZOHO BackStage
How to get list of events, using ZOHO BackStage APIs. Is it possible OR not?How to Customize Task Creation to Send a Custom Alert Using JavaScript in Zoho CRM?
Hello Zoho CRM Community, I’m looking to customize Zoho CRM to send a custom alert whenever a task is created. I understand that Zoho CRM supports client scripts using JavaScript, and I would like to leverage this feature to implement the alert functionality.Zoho Meeting iOS app update - Join breakout rooms, access polls, paste links and join sessions, in session host controls
Hello, everyone! In the latest iOS version(v1.7) of the Zoho Meeting app, we have brought in support for the following features: Polls in meeting session Join Breakout rooms Paste link in join meeting screen Foreign time zone in the meeting details screen.Calculate hours between 2 date/time fields
Hi, Does anyone know if it is possible to get the number of hours between 2 date/time fields in a zoho crm custom function? Thanks, MichaelExternal ID validation.
I added an external ID field as below in one of my custom modules: When creating records via the API using some value (eg: 762115b2-097e-43b2-bdba-f3924a5371a6) for this field, it works without any problem. I can create and even see the records on theCRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive
Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage filesRemove Address from credit card payment
I would like to remove the need to add address when paying by credit card. I only want the customer to have to add their credit card details.Create a button that executes a customized function
Hello, I have created a summary view in which I combine the data from my items table and suppliers table. I would like to know if there is the possibility of adding a button somewhere in the view to be able to execute a function when clicked on it. ICustom field doesn't fill when converting sales order to invoice
Hi, When I convert a Sales Order to an Invoice one of the custom fields on a product line names "Subsidie" does not seem to fill in automatically. I manually have to select the product again by clicking on the product name in the order line en re-selectCan I use ZOHO calendar to schedule a Youtube video that is already in my youtube account, but listed as private or unlisted?
I am creating Youtube videos and shorts and then uploading them to our Channel so others can view and approve. Once approved I would like to just schedule them over the next few days within Zoho. So far it looks like I have to re-upload the video to ZohoHow to Display a Logo Image on a Public Form?
I would like to display a logo image in the header of a form. To achieve this, I added an Add Notes field to the form. The code below works perfectly for Zoho users accessing the form. However, when the form is made public, the image does not load properly:Advice for my first project in Zoho
Hello, how can I design and implement a customized ERP and CRM system using Zoho to automate and manage core business functions, including customer relationship management, property inventory, sales tracking, and financial processes. This is one of myAssociate Email API Internal Error
I am trying to associate an already existing email within a function using the Related Emails API. To provide more context, I also have admin permissions and have ensured that the fields are correct and that I have admin permissions when associating theProfit on Sales order
Hi, would it be possible to implement a column at the Sales order overview of Purchase amount? So a field with the amount of all purchase related to this Sales order? This is very usefull so you will see the profit you made on this deal. I tried to getSubform Data in v2 REST API
What is the mechanism for adding subform data in the Creator v2 REST APIs? There is nothing documented in the Data APIs documentation (https://www.zoho.com/creator/help/api/v2/). I was able to determine how to GET the subform data by adding it to theIs the filename of an attachment restricted to only certain languages?
Hi, I tried to create a file card in a notebook, but I encountered an issue: when the filename of an attachment is in languages other than the main ones (such as English, Japanese, or Simplified Chinese......), syncing stops or the filenames become garbledHow to create comparison time periods like these examples
In a Pivot Report I would like to be able to select any date range and show a set of metrics for that date range e.g. revenue, orders, units sold. I would then like to be able to compare to the previous period based on the amount of days on the selectedOverwrite Option for custom modules
Hi Team, I noticed that the overwrite option is unavailable in Zoho Books when importing data for custom modules. This limitation makes it challenging to bulk update old data, as the only option is the 'bulk update' feature, which is restricted to 25Zoho Creator - Zoho Analytics
I am facing an issue in Zoho Analytics where I am still seeing deleted data from the Zoho Creator form I created. Could you please look into this and let me know what needs to be done?Unable to send emails
I have this email parth@mrcolumbus.in, but I couldnt send outgoing email. Can you please help?Notifications push : Encourager le réengagement et renforcer la fidélité des utilisateurs efficacement
Vous avez déjà souhaité engager et communiquer de manière proactive avec les utilisateurs, y compris lorsqu'ils utilisent votre application de manière peu active ? Zoho Apptics vous offre déjà des fonctionnalités qui vous permettent d'évaluer la performance,Next Page