Extension pointers #4: Working with widgets to power-up extension capabilities (Part-1)
Connected apps help bring Zoho CRM together with the third-party applications and services.
Connected apps provide support for exchanging data between Zoho CRM and third-party applications, authenticating other applications using single sign-on, and authorization methods to access Zoho CRM data. There are few ways connected apps offer integration facilities:
- Widgets
- SAML
Widgets
Widgets are embeddable UI components that can perform certain functions using data from third-party applications. You can enhance the existing functionality of your CRM by embedding these widgets into it.
SAML
Security Assertion Markup Language (SAML) is an XML-based standard that allows exchange of authentication data between services. Zoho supports the Single Sign-on (SSO) feature in connected apps through SAML. SSO is a session and user authentication service that permits a user to use one set of login credentials to access multiple applications. Here, Zoho acts as the identity provider (IdP) and the third-party application acts as the service provider (SP).
In this post, we will explore how a widget can be used in building a connected app. We will look at the steps to install the CLI and create a project for a widget in it.
Zoho CRM integrations with widget support
If you know how to build extensions that integrate Zoho CRM with third-party applications, then you know how to handle the exchange (get and set) of data between the services. When you build these types of integrations and push data into Zoho CRM, you will be pushing the data into standard or custom modules in Zoho CRM.
Let's think about it from a scenario where you need to show data from the third-party application in a customized view in CRM. In this case, you can create your own customized GUI component and embed it into Zoho CRM. Similarly, if you need to add a new feature to Zoho CRM along with a customized UI, you can create your own customized GUI and embed it into Zoho CRM to perform that functionality.
- Are there any prerequisites to build a widget?
- If so, what are they?
- How do you create a widget?
- How do you embed widgets in Zoho CRM?
- How do you test a widget?
You will find the answers to all your questions in this post.
Widgets are GUI components that can be embedded in Zoho CRM to extend its functionality. Let's look at a telephony widget as an example. A CRM sales representative needs to have regular calls with potential leads as part of their strategy to increase their customer base. Embedding a telephony widget into Zoho CRM helps the representatives make calls by simply clicking on the telephone icon in Zoho CRM. Using widgets, a dial pad can be easily embedded in Zoho CRM and the dial operations can be handled from the CRM itself.
To gain the benefits of widgets, you will need to understand the following steps:
- Installing CLI: Install a command line interface and set up the development environment to create a widget.
- Creating a widget: Add the required resource files of a widget.
- Embedding a widget: Create a connected app and embed the widget in Zoho CRM ready for use.
Before looking at the steps to install a CLI, let's take a look at its prerequisites.
Prerequisites
Node.js
- Serves as the base platform for creating a widget.
- An open-source, cross platform, javascript environment that executes javascript code outside of a browser.
npm (Node Package Manager)
- The default package manager for the Node.js environment.
- Contains all the essential packages to create a widget.
JS SDK
- Certain Zoho CRM APIs are required for the javascript code to interact with Zoho CRM.
- These Zoho CRM APIs are bundled together and are available in the JS SDK.
Command Line Interface (CLI)
- CLI is a text-based interface that is used to interact with software through commands and get a response.
- ZET (Zoho Extension Toolkit) CLI is the tool that enables you to build, test, and package extensions for Zoho products.
Installing ZET CLI and Creating a Widget
Creating widgets for Zoho CRM enhances functionality and simplifies your work.
To build a widget and integrate it with Zoho CRM, you need to set up the required development environment. Visit this page and download the latest version of Node.js. This will include the Node Package Manager.
Run the following commands to verify and check the installed versions of Node.js and Node Package Manager:
|
Next, install ZET CLI. Run the following command to install the zapps cli node package:
|
To verify if the installation was successful, run the following command. This command displays certain basic options and commands for your reference.
|
Now you are ready to create a new project for your widget. Use the command: zet init.
This command prompts you to select the Zoho service you want to create a widget for followed by the project name. Choose Zoho CRM and enter the project name. The project will be initialized with the NPM dependencies.
|
Move to the project directory's' location and check the list of folders in it.
|
Change the directory location to the app folder. The app folder includes the widget.html file and is the appropriate folder to store all the required resources.
|
To include the required resources, let us set up a directory structure in the app folder by creating folders for HTML, CSS, and JS. It is always a good programming practice. Provide structure, definition, and logic for your widget by adding HTML, CSS, and JS files into the appropriate folders in your project:
- HTML files for the UI layer need to be added to the HTML folder. CSS files need to be added to the CSS folder.
- Define your desired business logic through Java script and add the files to the JS folder.
- In addition to these JS files, you will have to add the JS SDK ZohoEmbededAppSDK.min.js from here.
Run the validate command to check if your project resource files pass all the validation rules.
|
Use the run command to start a local server with the current directory as context.
|
Copy the URL produced and paste it in your browser to see the output locally.
Finally, run the pack command to pack all the files in the project. It will zip the files an place them in the dist folder of the project.
|
After testing the widget locally and packing it into a zipped file, the next step is to host the widget and embed it in Zoho CRM.
In this post, we have covered the steps to install ZET CLI and create a widget project. In the next post, we will explain how a widget can be associated with a connected app and be embedded into Zoho CRM in an extension. For more information, keep following this space.
Access your files securely from anywhere
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
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 #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.Kaizen #226: Using ZRC in Client Script
Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In thisKaizen #222 - Client Script Support for Notes Related List
Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore howKaizen #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 are
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
Email was sent out without our permission
Hi there, One customer just reached out to us about this email that we were not aware was being sent to our customers. Can you please check on your end?Flexible Partial-Use Coupons (Stored Value Credits)
Subject: Feature Request: Ability for users to apply partial coupon balances per transaction Problem Statement Currently, our coupons are "one-and-done." If a user has a $50 coupon but only spends $30, they either lose the remaining $20 or are forcedPrevent accidental duplicate entry of Customer Ordersome
Zoho Support has confirmed that Zoho currently does not have any method (using Deluge, flow or any other method) to alert a user when a sales order has been entered twice using the same customer reference number (i.e. a duplicate). Most ERP platformsCustomizing Helpcenter texts
I’m customizing the Zoho Desk Help Center and I’d like to change the wording of the standard widgets – for example, the text in the “Submit Ticket” banner that appears in the footer, or other built-in widget labels and messages. So far, I haven’t foundMigrating Brevo Automation Logic to Zoho Campaigns
Hello Zoho Campaigns Support Team, I am in the process of migrating my email marketing from Brevo to Zoho Campaigns. I have around 10,000 contacts, which I have already successfully exported from Brevo and imported into Zoho Campaigns. I now need guidanceIs there a way to delete workspaces?
I want to remove one of the workspaces in my Campaigns account. I don't see any obvious way to do this. Am I missing something?Boost your Zoho Desk's performance by archiving tickets!
The longer your help desk operations are, the more likely it is to accumulate tickets that are no longer relevant. For example, ticket records from a year ago are typically less relevant than currently open tickets. Such old tickets may eventually leadCollapsing and expanding of lists and paragraphs
hello Would you ever implement Collapsing and expanding of lists and paragraphs in zoho writer ? Best regardsNew Custom View -Sorting the Custom fields
While creating a New Custom View in invoice , Customers, Bills ,expense etc , the sorting of custom fields are not available , a query function "order by / sort by " may also be included in Define new criteria module which will be more beneficial toMake CAMPAIGNS email look as simple as possible
Hi there I'm trying to make my Campaigns email look as much like a normal email as possible. I'm a bit stuck with the "justification" of the email email block. Can I LEFT JUSTIFY the "whole email" to make it look "normal"? (Please see screenshot attached)[Webinar] Top 10 Most Used Zoho Analytics Features in 2025
Zoho Analytics has evolved significantly over the past year. Discover the most widely adopted features in Zoho Analytics in 2025, based on real customer usage patterns, best practices, and high-impact use cases. Learn how leading teams are turning dataSorry! we encountered some problems while sending your campaign. It will be sent automatically once we are ready. We apologize for the delay caused.
Hello. Lately we are having problems with some campaigns, which show us this error message. Sorry! we encountered some problems while sending your campaign. It will be sent automatically once we are ready. We apologize for the delay caused. We can't findCan I remove or divert certain contacts from an active Campaigns workflow?
I have created a workflow in Zoho Campaigns, which sends different emails, once contacts have been added to a mailing list. To choose which email to send to the contacts, there are conditions, which divert contacts based on their company type and their company size. There was a subsection of this workflow, where company size wasn't selected correctly, and some contacts have been sent down the wrong path and received the wrong email. The workflow contains a reminder loop and a further series of emails.File Upload field automatically replaces spaces with underscores – support experience
Hi everyone, I want to share my recent experience regarding the File Upload field behavior in Zoho Creator and my interaction with the Zoho support team. When a user uploads a file, the system automatically renames the document by replacing spaces inHow to map fields from Zoho Recruit to Zoho People
I've got these fields from my Job Offer that I'm trying to map to the Work information fields in Zoho People, but they arent showing up. For example, how do I get the department name field (in the job post) to map to the work information field in ZohoUTM in zoho campaigns
Helloo everybody!!! Someone know how IF ZOHO CAMPAIGNS has UTM for tracking the url of any campaigns. thank uFull Context of Zoho CRM Records for Zia in Zoho Desk for efficient AI Usage
Hello everyone, I have a question regarding the use of Zia in Zoho Desk in combination with CRM data. Is it possible to automatically feed the complete context of a CRM record into Zia, so that it can generate automated and highly accurate responses forKnowledge base printing
I saw a posting about printing the knowledge base as I was looking for the answer, but we would like the ability to print out the entire knowledge base with a click, keeping the same organization format. Bonus would include an index of keywords andSearch not working!
I have items in my notebook tagged but when I search for a tag nothing comes up! Any fix for this?Zoho Books | Product updates | January 2026
Hello users, We’ve rolled out new features and enhancements in Zoho Books. From e-filing Form 1099 directly with the IRS to corporation tax support, explore the updates designed to enhance your bookkeeping experience. E-File Form 1099 Directly With theUpdates for Zoho Campaigns: Merge tag, footer, and autoresponder migration
Hello everyone, We'd like to inform you of some upcoming changes with regard to Zoho Campaigns. We understand that change can be difficult, but we're dedicated to ensuring a smooth transition while keeping you all informed and engaged throughout the process.File Upload field not showing in workflow
Hi, I have added a field on Zoho CRM. I want to use it in a workflow where that particular field is updated based on another field, however it is not showing up in the field list to select it in the workflow. Why is this please?Drag 'n' Drop Fields to a Sub-Form and "Move Field To" Option
Hi, I would like to be able to move fields from the Main Page to a Sub-Form or from a Sub-Form to either the Main Page or another Sub-Form. Today if you change the design you have to delete and recreate every field, not just move them. Would be nice toHow do i integrate google analytics to Zoho Campaigns?
Looking to track Zoho Traffic from email Current topic is outdatedHow do teams manage meeting follow-ups across Zoho tools?
We’re using Zoho tools for collaboration and tracking, but managing meeting notes, action items, and follow-ups across teams is still challenging. Curious how others are handling this within Zoho workflows. Are there best practices or integrations thatAdding a Deal to and Existing Contact
I want to easily add a Deal to an existing Contact. If I click on New Deal on the Contact page this currently this is what happens: All of the mandatory field (and other field) information exists within the Contact. Is there a simple way for it to automaticallyZoho Sprint Backlog View, filter by item status
Hello, In Zoho Sprints, it would be great to be able filter out specific items in the Backlog based on their status. We would like to track items that were Removed from our backlog without seeing them constantly in the Backlog view, as this view shouldCustomize Colors used on graphs and charts according to users desire.
It would be great if we could customize the graph's colors as we see fit. I hate that yellow is always the default color!Let 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 forMejoras urgentes para ZOHO MEETING
Tengo unos meses usando Zoho Meeting. En general, es buena, pero hay cosas vitales que no logra cumplir con mínima calidad. 1) Calidad de audio y video: urge mejoras. Audio con retraso, imagen borrosa, mal recorte de silueta con fondos virtuales. Además,Multiple header in the quote table???
Hello, Is it possible in Zoho CRM to add multiple headers or sections within the Quote product table, so that when the quote is printed it shows separate sections (for example “Products” and “Services”)? To clarify, I’m asking because: This does not appearSaving sent email campaign as PDF
I'm looking to add all campaigns sent to an archive folder in sharepoint. Is there anyway to accomplish this in Zoho Flow ? I'm falling at the first hurdle ... can I automatically save a sent campaign as a PDF to a folder location ?Exporting All Custom Functions in ZohoCRM
Hello, All I've been looking for a way to keep about 30 functions that I have written in Zoho CRM updated in my own repository to use elsewhere in other instances. A github integration would be great, but a way to export all custom functions or any wayHow can Data Enrichment be automatically triggered when a new Lead is created in Zoho CRM?
Hi, I have a pipeline where a Lead is created automatically through the Zoho API and I've been trying to look for a way to automatically apply Data Enrichment on this created lead. 1) I did not find any way to do this through the Zoho API; it seems likeConditional Layouts On Multi Select Field
How we can use Conditional Layouts On Multi Select Field field? Please help.Appreciation to Qntrl Support Team
We are writing this topic to appreciate the outstanding level of support from Qntrl Team. We have been using Qntrl since 2022 after shifting from another similar platform. Since we joined Qntrl, the team has shown a high level of professionalism, support,How can I hide "My Requests" and "Marketplace" icon from the side menu
Hello everybody, We recently started using the new Zoho CRM for Everyone. How can I hide "My Requests" and "Marketplace" from the side menu? We don't use these features at the moment, and I couldn't find a way to disable or remove them. Best regards,Whatsapp Integration on Zoho Campaign
Team: Can the messages from Zoho Campaign delivered through Whatsapp... now customers no longer are active on email, but the entire campaign module is email based.... when will it be available on whatsapp.... are there any thirdparty providers who canQuotes Approval
Hey all, Could you please help in the following: When creating quotes, how to configure it in a way, that its approval would work according to the quoted items description, not according to quote information. In my case, the quote should be sent to approvalMandatory Field - but only at conversion
Hello! We use Zoho CRM and there are times where the "Lead Created Date & Time" field isn't populated into a "Contractor" (Account is the default phrase i believe). Most of my lead tracking is based on reading the Lead Created field above, so it's importantNext Page