Extension pointers #4: Working with widgets to power-up extension capabilities (Part-1)

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:

  • node -v
  • npm -v



Next, install ZET CLI. Run the following command to install the zapps cli node package:

  • npm install -g zoho-extension-toolkit

To verify if the installation was successful, run the following command. This command displays certain basic options and commands for your reference.

  • zet



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.

  • Zoho Service: Zoho CRM
  • Project Name: WidgetProjectDemo



Move to the project directory's' location and check the list of folders in it.

  • cd WidgetProjectDemo
  • ls



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.

  • cd app

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.

  • zet validate



Use the run command to start a local server with the current directory as context.

  • zet run



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.

  •   zet pack



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.


Next>>



    Access your files securely from anywhere








                            Zoho Developer Community



                                Bootcamp
                                Community
                                Pricing
                                Webinars
                                What's New
                                Integrations
                                Contact Support
                                Contact Sales
                                  Zoho Survey Resources
                                    Features
                                    Survey Templates
                                    Integrations
                                    Community
                                    iOS Mobile Surveys
                                    Pricing
                                    Android Mobile Surveys
                                    Insurvey Blogs
                                    Insight Blogs
                                    Tips & Tricks





                                                Latest Feature Updates

                                                  • Desk Community Learning Series


                                                  • Digest


                                                  • Functions


                                                  • Meetups


                                                  • Kbase


                                                  • Resources


                                                  • Glossary


                                                  • Desk Marketplace


                                                  • MVP Corner


                                                  • Word of the Day


                                                  • Ask the Experts




                                                      Zoho SalesIQ Resources

                                                            • Sticky Posts

                                                            • Kaizen #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 how

                                                            • 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 are

                                                            • Kaizen #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

                                                            • Kaizen #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.


                                                            Manage your brands on social media
                                                            Access Zoho Social

                                                              Zoho Pagesense Resources


                                                                  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 CRM Resources

                                                                                      • CRM Community Learning Series

                                                                                        CRM Community Learning Series


                                                                                      • Kaizen

                                                                                        Kaizen

                                                                                      • Functions

                                                                                        Functions

                                                                                      • Meetups

                                                                                        Meetups

                                                                                      • Kbase

                                                                                        Kbase

                                                                                      • Resources

                                                                                        Resources

                                                                                      • Digest

                                                                                        Digest

                                                                                      • CRM Marketplace

                                                                                        CRM Marketplace

                                                                                      • MVP Corner

                                                                                        MVP Corner









                                                                                          Design. Discuss. Deliver.

                                                                                          Create visually engaging stories with Zoho Show.

                                                                                          Get Started Now


                                                                                            Zoho Show Resources

                                                                                              Zoho Writer

                                                                                              Get Started. Write Away!

                                                                                              Writer is a powerful online word processor, designed for collaborative work.

                                                                                                Zoho CRM コンテンツ



                                                                                                  Nederlandse Hulpbronnen


                                                                                                      ご検討中の方




                                                                                                              • Recent Topics

                                                                                                              • New feature: Invite additional guests for your bookings

                                                                                                                Hello everyone, Greetings from Zoho Bookings! We are happy to announce the much-awaited feature Guest Invite, which enhances your booking experience like never before. This feature allows additional participants to be invited for the bookings to make

                                                                                                              • Link Contacts to Billed Accounts

                                                                                                                Hello, I want to do a survey on all my customers of 2025. For that I want to select all contacts linked to accounts who where billed in 2025. How to I create this link to I can then use Zoho Survey with this database of contacts?

                                                                                                              • Improved Contact Sync flow in Google Integration with Zoho CRM

                                                                                                                Hello Everyone, Your contact sync in Google integration just got revamped! We have redesigned the sync process to give users more control over what data flows into Google and ensure that this data flows effortlessly between Zoho CRM and Google. With this

                                                                                                              • Image field in custom module

                                                                                                                Hi guy, Is there any hope of adding a custom image field in the custom module? We created a custom module to keep track of assets, and it would be helpful if we could attach an image to the record. Thanks Rudy

                                                                                                              • Please can the open tasks be shown in each customer account at the top.

                                                                                                                Hi there This has happened before, where the open tasks are no longer visible at the top of the page for each customer in the CRM. They have gone missing previously and were reinstated when I asked so I think it's just after an update that this feature

                                                                                                              • Using gift vouchers

                                                                                                                We would like to be able to offer a limited number of gift vouchers, of varying values, to our customers, and are looking for the best way to do this. We have looked at Coupons and Gift Certificates, but neither seem to fit the bill perfectly. Coupons:

                                                                                                              • Email Address for Contact not Populating

                                                                                                                When I click "Send Mail" from a Contact's page, their email address does not auto populate the "To" field. How do I make this happen?

                                                                                                              • How create a draft via workflow?

                                                                                                                I wish to create a workflow rule for specific emails that creates a draft response - not an automatic email reply, but just a draft with a set response ready to be verified by an agent who can then manually select recipients. Alternatively, the workflow

                                                                                                              • الخصم على مستوى فاتورة المبيعات

                                                                                                                السلام عليكم ورحمة الله وبركاته مطلوب في إنشاء خصم على مستوى فاتورة المبيعات وليس على مستوى البند أريد معرفة الطريقة؟

                                                                                                              • Assign Income to Project Without Invoice

                                                                                                                Hello, Fairly new user here so apologies if there is a really obvious solution here that I am just missing... I have hundreds of small deposits into a bank account that I want to assign to a project but do not want to have to create an invoice every time

                                                                                                              • Support for Custom Fonts in Zoho Recruit Career Site and Candidate Portal

                                                                                                                Dear Zoho Recruit Team, I hope you're doing well. We would like to request the ability to use custom fonts in the Zoho Recruit Career Site and Candidate Portal. Currently only the default fonts (Roboto, Lato, and Montserrat) are available. While these

                                                                                                              • Introducing parent-child ticketing in Zoho Desk [Early access]

                                                                                                                Hello Zoho Desk users! We have introduced the parent-child ticketing system to help customer service teams ensure efficient resolution of issues involving multiple, related tickets. You can now combine repetitive and interconnected tickets into parent-child

                                                                                                              • Seeking help to be able to search on all custom functions that are defined

                                                                                                                Hello I have a lot of custom functions defined (around 200) and i would like to search some specific strings in the content of those. Is there a way to accomplish that? If not, is there a way to download all existing custom functions in some files locally

                                                                                                              • VAT and Taxes option not available

                                                                                                                Dear ZOHO Team , The VAT and Taxes options in my ZOHO books account not available,I tried to find how to enable or check the way to use this option but unfortunately couldn't find it anywhere ,I'm in UAE ,kindly let me know what to do to solve this issue

                                                                                                              • Default Tagging on API-generated Transactions

                                                                                                                If one assigns tags to an Item or Customer, those tags get auto-populated in each line item of an Invoice or Sales Order when one creates those documents. However, if one creates the Sales Order or Invoice via the API (either directly coding or using

                                                                                                              • Direct Feed (Bank)

                                                                                                                Is Direct feed integration for AlRajhi and ADCB bank supported by Zoho Books in GCC/Saudi

                                                                                                              • Sales Order, Invoice and Payment numbers

                                                                                                                Hi zoho friends, it is me again, the slow learner. I'm wondering if there is a way to have it so the Sales order, invoice and payment numbers are all the same? It would be easier for me if they were the same number so there is not so many reference numbers

                                                                                                              • MS Teams for daily call operations

                                                                                                                Hello all, Our most anticipated and crucial update is finally here! Organizations using Microsoft Teams phone system can now integrate it effectively with Zoho CRM for tasks like dialling numbers and logging calls. We are enhancing our MS Teams functionality

                                                                                                              • New in CRM: Dynamic filters for lookup fields

                                                                                                                Last modified on Oct 28, 2024: This feature was initially available only through Early Access upon request. It is now available to all users across all data centers, except for the IN DC. Users in the IN DC can temporarily request access using this form

                                                                                                              • Partner 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.

                                                                                                              • Customer Satisfaction (CSAT) Report

                                                                                                                From data to decisions: A deep dive into ticketing system reports The customer satisfaction (CSAT) report helps teams understand how customers feel about their support experience, identify service gaps, and continuously improve the help desk. It turns

                                                                                                              • Highlight a candidate who is "off limits"

                                                                                                                Hello: Is there a way to highlight a candidate who is "off limits"?  I would like to have the ability to make certain candidate and / or Client records highlighted in RED or something like that.   This would be used for example when we may have placed a candidate somewhere and we want everyone in our company to quickly and easily see that they are off limits.  The same would apply when we want to put a client or former client off limits so no one recruits out of there. How can this be done? Cheers,

                                                                                                              • Timeline Tracking Support for records updates via module import and bulk write api

                                                                                                                Note: This update is currently available in Early Access and will soon be rolled out across all data centers (DCs) and for all editions of Zoho CRM. The update will be available to all users within your organization, regardless of their profiles or roles.

                                                                                                              • Shifts in Zoho People vs Zoho Shifts?

                                                                                                                Hello Zoho People Team, We hope you are doing well. We are evaluating the Shifts functionality within Zoho People and comparing it to the standalone Zoho Shifts product. We’ve encountered comments and discussions suggesting that the Shifts feature inside

                                                                                                              • Disable fields in During action in Blueprint?

                                                                                                                Hi there. I've tried field disable (setReadOnly(true)) using client script and the event is onMandatoryFormLoad on detail page, assuming it'll work on blueprint fields, but it bears no result. Is this the expected behaviour? That we can't do this yet?

                                                                                                              • Allow Attaching Quartz Recordings to Existing Zoho Support Tickets

                                                                                                                Hi Zoho Team, We would like to request an enhancement to how Zoho Quartz recordings integrate with Zoho Support tickets. Current Behavior: At the moment, each Quartz recording automatically creates a new support ticket. However, in many real-world scenarios:

                                                                                                              • From Zoho CRM to Paper : Design & Print Data Directly using Canvas Print View

                                                                                                                Hello Everyone, We are excited to announce a new addition to your Canvas in Zoho CRM - Print View. Canvas print view helps you transform your custom CRM layouts into print-ready documents, so you can bring your digital data to the physical world with

                                                                                                              • FSM - Timesheet entires for Internal Work

                                                                                                                Hi FSM Team, Several of my clients have asked how they can manage internal timesheets within Zoho FSM. Since their technicians already spend most of their day working in FSM, it would be ideal if they could log all working hours directly in the FSM app.

                                                                                                              • Develop and publish a Zoho Recruit extension on the marketplace

                                                                                                                Hi, I'd like to develop a new extension for Zoho Recruit. I've started to use Zoho Developers creating a Zoho CRM extension. But when I try to create a new extension here https://sigma.zoho.com/workspace/testtesttestest/apps/new I d'ont see the option of Zoho Recruit (only CRM, Desk, Projects...). I do see extensions for Zoho Recruit in the marketplace. How would I go about to create one if the option is not available in sigma ? Cheers, Rémi.

                                                                                                              • Best Email Backup Wizard in 2026

                                                                                                                While searching for an email backup solution, my main hesitation was reliability. As a user, I had already seen many tools that looked promising but failed when handling large mailboxes, skipped folders, or caused authentication issues during the backup

                                                                                                              • Adding a threshold to a line chart based on date range

                                                                                                                I have a line chart that is tracking a percentage over time. It also has a filter for 50 different clients. I would like to create a threshold that is based on a portion of the date range. As I understand it, this would be done by adding a column to the

                                                                                                              • CRM gets location smart with the all new Map View: visualize records, locate records within any radius, and more

                                                                                                                Hello all, We've introduced a new way to work with location data in Zoho CRM: the Map View. Instead of scrolling through endless lists, your records now appear as pins on a map. Built on top of the all-new address field and powered by Mappls (MapMyIndia),

                                                                                                              • Workflow Down/Bug

                                                                                                                We have a workflow that sends an email to one of our internal departments 10 minutes after a record is created in a custom module. The workflow actually works correctly. However, we have now noticed that on January 8, between 3:55 p.m. and 4:33 p.m.,

                                                                                                              • Subforms and automation

                                                                                                                If a user updates a field how do we create an automation etc. We have a field for returned parts and i want to get an email when that field is ticked. How please as Zoho tells me no automation on subforms. The Reason- Why having waited for ever for FSM

                                                                                                              • Allow Managers to Create Shifts for Their Departments in Zoho People

                                                                                                                Hello Zoho People Product Team, Greetings and hope you are doing well. This feature request is related to Zoho People - please don't move it to zoho one! We would like to submit a feature request regarding shift management permissions in Zoho People.

                                                                                                              • Zoho Learn and Zoho CRM integration

                                                                                                                I would like to see an integration between Zoho Learn and Zoho CRM. 1. To be able to add articles in a related list in all modules 2. Zia to suggest related articles in a Deal or Case or Lead 3. Ability to read / search articles during a call / follow

                                                                                                              • Maintain steady traffic to your domain: How Domain Aliasing helps

                                                                                                                Consider this scenario: An organization has its primary domain as administrator.com. Now it wants to shorten its domain to admin.com because it's simpler and easier to remember. However, changing the domain completely can cause the following problems:

                                                                                                              • Why Sharing Rules do Not support relative date comparison???

                                                                                                                I am creating a Sharing Rule and simply want to share where "Last Day of Coverage" (Date field) is Greater than TODAY (Starting Tomorrow). However, sharing rules don't have the option to compare a date field to a relative date (like today), only to Static

                                                                                                              • How do I migrate OLM file to Gmail?

                                                                                                                Migrating emails from Outlook for Mac to Gmail can be challenging because Gmail does not support OLM files directly. This limitation often causes confusion and delays, especially when users need quick access to important emails and mailbox data on a web-based

                                                                                                              • CRM 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 files

                                                                                                              • Next Page