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

        All-in-one knowledge management and training platform for your employees and customers.








                              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 #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 this

                                                              • 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


                                                              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

                                                                                                                • Customize 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 for

                                                                                                                • Mejoras 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 appear

                                                                                                                • Saving 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 way

                                                                                                                • How 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 like

                                                                                                                • Conditional 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,

                                                                                                                • Timesheet invalid data error

                                                                                                                  Getting the "Invalid Date" error when trying to add a time sheet to an appointment in a work order. I initially though the work order was corrupt or something so I deleted the work order and recreated it. I added the first time sheet to the AP and saved

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

                                                                                                                • Mandatory 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 important

                                                                                                                • Different Task Layouts for Subtasks

                                                                                                                  I was wondering how it would be possible for a subtask to have a different task layout to the parent task.

                                                                                                                • Enable Free External Collaboration on Notecards in Zoho Notebook

                                                                                                                  Hi Zoho Notebook Team, I would like to suggest a feature enhancement regarding external collaboration in Zoho Notebook. Currently, we can share notes with external users, and they are able to view the content without any issue. However, when these external

                                                                                                                • Using data fields in Zoho Show presentations to extract key numbers from Zia insights based on a report created

                                                                                                                  Is it possible to use data fields in Zoho Show presentations along with Zoho Analytics to extract key numbers from Zia insights based on a report created? For example, using this text below: (note that the numbers in bold would be from Zia Insights) Revenue

                                                                                                                • Free webinar: AI-powered agreement management with Zoho Sign

                                                                                                                  Hi there! Does preparing an agreement feel like more work than actually signing it? You're definitely not alone. Between drafting the document, managing revisions, securing internal approvals, and rereading clauses to make sure everything still reflects

                                                                                                                • WhatsApp Channels in Zoho Campaigns

                                                                                                                  Now that Meta has opened WhatsApp Channels globally, will you add it to Zoho Campaigns? It's another top channel for marketing communications as email and SMS. Thanks.

                                                                                                                • CRM For Everyone - Bring Back Settings Tile View

                                                                                                                  I've been using CRM for Everyone since it was in early access and I just can't stand the single list settings menu down the left-hand side. It takes so much longer to find the setting I need. Please give users the option to make the old sytle tile view

                                                                                                                • Lets have Dynamics 365 integration with Zohobooks

                                                                                                                  Lets have Dynamics 365 integration with Zohobooks

                                                                                                                • Add notes in spreadsheet view

                                                                                                                  It would be great if we could Add/edit notes in the spreadsheet view of contacts/leads. This would enable my sales teams to greatly increase their number of calls. Also viewing the most recent note in the Contact module would also be helpful.

                                                                                                                • Opening balances - Accounts Receivable and Payable

                                                                                                                  Our accounting year starts on 1st August 2013 and I have a Trial Balance as at that date, including Accounts Receivableand Accounts Payable balances, broken down by each customer and supplier. Q1 - do I show my opening balance date as 31st July 2013 or

                                                                                                                • Announcing Kiosk 1.1 - Customize screen titles, configure new fields & actions, use values from your Kiosk to update fields, and more.

                                                                                                                  Hello all We are back again with more enhancements to Kiosk. So what's new? Enhancements made to the Components Add titles for your Kiosk screens and adjust its width to suit your viewing preferences. Three new fields can be added to your screen: Percentage,

                                                                                                                • Limited System because of Limited Number of Fields for Car Dealership

                                                                                                                  Dear Zoho Support, we want to have all the information about a car inside of a car record. We want to have Zoho CRM as our single source of truth for our data, but the limited number of fields are not allowing that. The data consist of: technical data

                                                                                                                • Cancel Subscription

                                                                                                                  Hi , Im want to cancel my account but without success please help me to do it

                                                                                                                • Making an email campaign into a Template

                                                                                                                  I used a Zoho Campaign Template to create an email. Now I want to use this email and make it a new template, but this seems to be not possible. Am I missing something?

                                                                                                                • Direct Access and Better Search for Zoho Quartz Recordings

                                                                                                                  Hi Zoho Team, We would like to request a few enhancements to improve how Zoho Quartz recordings are accessed and managed after being submitted to Zoho Support. Current Limitation: After submitting a Quartz recording, the related Zoho Support ticket displays

                                                                                                                • Multiple Cover Letters

                                                                                                                  We are using the staffing firm edition of Recruit and we have noticed that candidates cannot add more than one cover letter. This is a problem as they might be applying for multiple jobs on our career site and when we submit their application to a client,

                                                                                                                • URGENT: Deluge issue with Arabic text Inbox

                                                                                                                  Dear Deluge Support, We are facing an issue that started on 12/Feb/2026 with custom functions written using Deluge within Qntrl platform. Currently, custom functions do not accept Arabic content; it is replaced with (???) characters. Scenario 1: If we

                                                                                                                • File Conversion from PDF to JPG/PNG

                                                                                                                  Hi, I have a question did  anyone every tried using custom function to convert a PDF file to JPG/PNG format? Any possibility by using the custom function to achieve this within zoho apps.  I do know there are many third parties API provide this with

                                                                                                                • Now in Zoho One: Orchestrate customer journeys across apps with Zoho CommandCenter

                                                                                                                  Hello Zoho One Community! We’re excited to introduce Zoho CommandCenter as a new capability available in Zoho One. For the whole customer journey As Zoho One customers adopt more apps across sales, marketing, finance, and support, a common challenge emerges:

                                                                                                                • annualy customer report

                                                                                                                  we need a report per customer that looks like this invoic number cleaning laundry repair management 01 january xxx euro xx euro xx euro xxx euro 02 february xxx euro xxx euro x euro xxxx euro and so on the years 12 months is that possible to make and

                                                                                                                • Totals for Sales Tax Report

                                                                                                                  On the sales tax report, the column totals aren't shown for any column other than Total Tax. I can't think of a good reason that they shouldn't be included for the other columns, as well. It would help me with my returns, for sure. It seems ludicrous

                                                                                                                • Free Webinar: Zoho Sign for Zoho Projects: Automate tasks and approvals with e-signatures

                                                                                                                  Hi there! Handling multiple projects at once? Zoho Projects is your solution for automated and streamlined project management, and with the Zoho Sign extension, you can sign, send, and manage digital paperwork directly from your project workspace. Join

                                                                                                                • Exported Report File Name

                                                                                                                  Hi, We often export reports for information. It is time consuming to rename all the reports we export on a weekly basis, as when exported their default name is a seemingly random string of numbers. These numbers may be important, I'm not sure, but I am

                                                                                                                • Automatic Refresh on Page?

                                                                                                                  Hi everyone, We use a page as a dashboard which shows data for the laboratory and tasks pending etc. Is there a way to set the page to automatically refresh on a X time? Many thanks TOG

                                                                                                                • How do I edit the Calendar Invite notifications for Interviews in Recruit?

                                                                                                                  I'm setting up the Zoho Recruit Interview Calendar system but there's some notifications I don't have any control over. I've turned off all Workflows and Automations related to the Calendar Scheduling and it seems that it's the notification that is sent

                                                                                                                • Add RTL and Hebrew Support for Candidate Portal (and Other Zoho Recruit Portals)

                                                                                                                  Dear Zoho Recruit Team, I hope you're doing well. We would like to request the ability to set the Candidate Portal to be Right-to-Left (RTL) and in Hebrew, similar to the existing functionality for the Career Site. Currently, when we set the Career Site

                                                                                                                • App for Mac OS X please!

                                                                                                                  It would be awesome to have a mail app for Mac OS X that included all the cool features such as steams, calendar, tasks, contacts, etc. Most people prefer native apps, rather than running it through a web browser. I know that we can use the IMAP, CalDAV,

                                                                                                                • How to integrate Zoho CRM, Zoho Forms and a WIX Web Site

                                                                                                                  Attached video demonstrates how to use Zoho Forms included in Zoho One, to design a Contact Us form to be embedded into a WIX web site and integrated into Zoho CRM.

                                                                                                                • Next Page