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
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 #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 achievedKaizen #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.Kaizen #210 - Answering your Questions | Event Management System using ZDK CLI
Hello Everyone, Welcome back to yet another post in the Kaizen Series! As you already may know, for the Kaizen #200 milestone, we asked for your feedback and many of you suggested topics for us to discuss. We have been writing on these topics over theKaizen #197: Frequently Asked Questions on GraphQL APIs
🎊 Nearing 200th Kaizen Post – We want to hear from you! 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 #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.
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
How to I get checkboxes on a subform to update via deluge
Hello, would someone be able to tell me what I'm doing wrong here? I am trying to take the contents of a Deals subform and add them to an invoice then update the checkbox on each row so that 'add to invoice' is unticked and 'invoiced' is ticked. The outputYour bot just got smarter: AI-Powered routing that reads between the lines
What if your bot could tell the difference? Between a visitor who just needs a quick answer, someone actively comparing options, and a frustrated customer one click away from leaving? Most bots can't. They deliver the same response to everyone, missingUrgent Security Feature Request – Add MFA to Zoho Projects Client Portal Hello Zoho Projects Team,
Hello Zoho Projects Team, We hope you are doing well. We would like to submit an urgent security enhancement request regarding the Zoho Projects Client Portal. At this time, as far as we are aware, there is no Multi-Factor Authentication (MFA) availableUnified customer portal login
As I'm a Zoho One subscriber I can provide my customers with portal access to many of the Zoho apps. However, the customer must have a separate login for each app, which may be difficult for them to manage and frustrating as all they understand is thatZoho Projects - Task Owner filter at Project level
Hi Projects Team, The feature requests I would like to raise is the ability to create a custom view at the project level for projects with tasks owned by a user or users. For example "Ashley's Projects" custom view might contain a list of project in whichCadences
I have just started using Cadences for follow-up up email pipeline. Is it just me or do you find the functionality very basic? For example, it will tell me (if I go looking for it) if someone has replied to a follow-up and been unenrolled; but it won'tZoho Books-Accounting on the Go Series!
Dear users, Continuing in the spirit of our 'Function Fridays' series, where we've been sharing custom function scripts to automate your back office operations, we're thrilled to introduce our latest initiative – the 'Zoho Books-Accounting on the Go Series'.Custom Fonts in Zoho CRM Template Builder
Hi, I am currently creating a new template for our quotes using the Zoho CRM template builder. However, I noticed that there is no option to add custom fonts to the template builder. It would greatly enhance the flexibility and branding capabilities ifWould be really awesome to have Created Time and Modified Time showing for custom functions list
It would be SO HELPFUL to be able to sort custom functions by created time/ modified time. Also seeing a created by/ modified by with the little profile picture would be supremely helpful as well. Just really hard sometimes to find a function you wereWhat's New in Zoho Analytics - October 2025
Hello Users! We're are back with a fresh set of updates and enhancements to make data analysis faster and more insightful. Take a quick look at what’s new and see how these updates can power up your reports and dashboards. Explore What's New! ExtremeTicket Export Does Not Include Ticket Threads
Dear Zoho Desk Support Team, I hope you’re doing well. I would like to report an issue regarding the ticket export functionality in Zoho Desk. Currently, when exporting tickets, the ticket threads or conversation history are not included — only the ticketPayments made notification
This is a really wonderful feature but we can only use it for about 50% of payments made & have to revert to sending statements which is a real chore. Credits applied to the bills paid in the notification aren't included & this causes great confusion in the accounts receivable departments. Please, please add this required feature asap ! .....Ability to add VAT to Retainer Invoices
Hello, I've had a telephone conversation a month ago with Dinesh on this topic and my request to allow for the addition of VAT on Retainer Invoices. It's currently not possible to add VAT to Retainer Invoices and it was mutually agreed that there is absolutely no reason why there shouldn't be, especially as TAX LAW makes VAT mandatory on each invoice in Europe! So basically, what i'm saying is that if you don't allow us to add VAT to Retainer Invoices, than the whole Retainer Invoices becomesZOHO DESK link with Power BI
HI, I am using ZOHO Desk for last two years and now my client is asking to integrate ZOHO desk data to Power BI so that they can use Data for reporting. Kindly guide in details so that i can give access to ZOHO desk export data for more visibility.URLs being masked despite disabling tracking
Hey, We had disabled click tracking from an email update we are sharing with our users. Despite this, the URL the end user is receiving is masked, and looks like "https://qksyl-cmpzourl.maillist-manage.net/click/1d8e72714515cda6/1d8e72714515ca70" insteadZoho CRM - Calendar Cards View - Let Users Decide What Is Displayed On Calendar Entries
Imagine planning your week of face-to-face meetings across three counties. You’re trying to group appointments by location to make the best use of your time, but Zoho CRM’s calendar doesn’t show where each meeting is happening. You’re left trying to rememberDashboard Autorefesh
Good day, I am a dashboard that displays the number of tickets based on "Product Name". This dashboard is displayed on a big TV for the team to monitor. Can the dashboard auto-refresh every few minutes to display the new values? Currently, we have closedDeferred/ Unearned revenue
Dear Zoho Team, Just in case you have missed out my query posted few days ago: We issue invoices relating to 12-month web hosting service. When we issue the invoice, we should record the entire amount of the invoice as DEFERRED/UNEARNED REVENUE (ie. $10Report Hover Setting
Would be great if we will able to show information to the user while hovering a record in a report.Bigin Android app update: Zoho Books integration
Hello everyone! We’re excited to introduce Zoho Books integration on the latest version(v1.8.5) Bigin Android app. Once the integration is completed in the web(bigin.zoho.com), the Zoho Books tab will be visible in detail View of Contacts, Companies,Audit Log enhancements: Increased retention period, better user visibility, and more
Hello everyone, The Audit Log brings in the following enhancements which improve the overall ability to manage data. Why did we make these updates? Extended Data Retention: Audit data can now be filtered and exported for a 60-day period, doubling theQuestion Regarding Managing Sale Items in Zoho Books
Good day, I was wondering about something. Right now, Zoho Books doesn’t seem to have a way to flag certain items as being on sale. For example, if I want a list of specific items to be on sale from October 1 to October 12, the user would have to export[WEBINAR] Smooth year-end closure with Zoho Books (KENYA)
Hello there, This webinar is for all Kenyan businesses looking to wrap up their financial year smoothly! Join our free session to learn how Zoho Books can simplify your year-end process. What to expect from this webinar: - All the latest updates in ZohoSystem flaws and lack of response from Zoho
I have had to go on here as no-one is replying to my emails regarding my problem (been 10 days and no email reply) and your chat facility online through your Zoho Books software opens and closes immediately, so not functioning properly. I actually calledCustomer Grouping
Hi, how can I group multiple customers into single group. So that I can have idea of accounts receivables of all the customers in single group. Like if there are multiple subsidiaries of same company we have having a business with, and want to view theTwo currencies
More and more I am finding that internattional payments' fees are unpredictable. I would like, on my invoices that are in a foreign currency (eg. USD$ or EUR€) for there to be a GBP£ TOTAL display alongside the invoice's currency total. This would makeZoho Books | Product updates | September 2025
Hello users, We’ve rolled out new features and enhancements in Zoho Books. From PayNow payment method to applying journal credits to invoices and bills in other locations, explore the updates designed to enhance your bookkeeping experience. IntegrateGST Slabs Redefined: Stay Compliant Using Zoho Books!
Hello Everyone! The Government of India is rolling out new GST rates, a major reform aimed at simplifying the current tax structure starting 22 September 2025. GST will move from four slabs (5%, 12%, 18%, 28%) to two main slabs (5% and 18%), plus a specialZoho Books | Product updates | October 2025
Hello users, We’ve rolled out new features and enhancements in Zoho Books. From iOS 26 updates to viewing reports as charts, explore the updates designed to enhance your bookkeeping experience. Zoho Books Updates for Apple Devices At WWDC 2025, AppleNeed Inactive accounts to be visible in Reports in Zoho Books
I N=need Inactive accounts to be visible in Reports in Zoho Books to do recons of the accounts but when i see the same they are not visible in the Accountant - Account Transactions reportEdit item custom fields
Getting this error : Transactions have been created with the custom field. Hence it cannot be deleted. Not trying to delete it, just trying to change which modules to show in or to not show at all in transactions !Zoho Books - How to Invoke a Custom Function in Schedulers
We have multiple schedulers that send emails to customers in batches. Currently, we are maintaining the same code across several schedulers. Is it possible to use a custom function inside a scheduler script? If yes, how can we invoke the custom functionUse Zoho Books to bill for work done in Zoho Desk??
I'm trying to see if something is possible (and if yes, how). We use Zoho One to manage our business. We have a lot of clients that will put in a ticket (via portal) to have work done. Out techs will pick up the ticket, do the work, and then log the timeZoho Finance Suite - Customer Custom Tabs - Dynamic Link
Hi Finance Suite team, When creating a Custom Tab for a Client Portal, there is no option to add dynamic parameters. This would be very helpful for adding Zoho Analytics dashboards which can be dynamically filtered through the URL to only show informationModular Permission Levels
We need more modular Permissions per module in Books we have 2 use cases that are creating problems We need per module export permission we have a use case where users should be able to view the sales orders but not export it, but they can export otherBlueprint or Validation Rules for Invoices in Zoho Books
Can I implement Blueprint or Validation Rules for Invoices in Zoho Books? Example, use case could be, Agent confirms from client that payment is done, but bank only syncs transactions tomorrow. in this case, Agent can update invoice status to done, andFeature Enhancement Request – Text Formatting Options in Item Description (Zoho Books/Quotes Module)
Dear Zoho Development Team, Greetings from Radiant360 Integrated Technical Services LLC. We would like to bring to your attention a functional limitation we've encountered within the Item Table / Quote Description section of Zoho Books (and Zoho CRM Quotes).Add Option to Mass Dispatch by User
Hello! We are using the dispatch console to dispatch service appointments to our service ressources. Right now, the process is our dispatcher verifies each ressource's route for the day and dispatches it after validation. Sadly, there doesn't seem toBank Receipt Catagorization
Hi, how can I match a bank deposit to multiple customer's invoices ? For e.g. A single person paid to us on behalf of different five customers. I need to keep the separated invoices for each customerPer Level Approval for admins
We need Process admins like Zoho CRM in Zoho Books for per stage approval Currently in books, admins only have the option for Final Approval But for example, in cases like when an employee is on leave, we can't just approval one level we only have optionNext Page