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 #222 - Client Script Support for Notes Related List
Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore howKaizen #217 - Actions APIs : Tasks
Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.Kaizen #216 - Actions APIs : Email Notifications
Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes areKaizen #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.
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
Free Webinar : Unlock AI driven business insights with Zoho Inventory + Zoho Analytics
Are you tired of switching between apps and exporting data to build customized reports? Say hello to smarter & streamlined insights! Join us for this exclusive webinar where we explore the power of the Zoho Inventory–Zoho Analytics integration. LearnCritical Issue: Tickets Opened for Zoho Support via the Zoho Help Portal Were Not Processed
Hi everyone, We want to bring to your attention a serious issue we’ve experienced with the Zoho support Help Portal. For more than a week, tickets submitted directly via the Help Portal were not being handled at all. At the same time no alert was postedHide/Show Subform Fields On User Input
Hello, Are there any future updates in Hide/Show Subform Fields "On User Input"?Cloning Item With Images Or The Option With Images
Hello, when I clone an item, I expect the images to carry over to the cloned item, however this is not the case in Inventory. Please make it possible for the images to get cloned or at least can we get a pop up asking if we want to clone the images asArchiving Contacts
How do I archive a list of contacts, or individual contacts?WorkDrive and CRM not in sync
1/ There is a CRM file upload field with WorkDrive file set as the source: 2/ Then the file is renamed in WorkDrive (outside CRM): 3/ The File in CRM is not synced after the change in WorkDrive; the file name (reference) in CRM record is not updated (hereCustom validation in CRM schema
Validation rules in CRM layouts work nicely, good docs by @Kiran Karthik P https://help.zoho.com/portal/en/kb/crm/customize-crm-account/validation-rules/articles/create-validation-rules I'd prefer validating data input 'closer to the schema'Adding Default Module Image into mail merge field
As with most people finding their way to these forums i have a specific requirement that doesn't seem to be supported by Zoho I have created 2 custom modules to suit my purpose 1 is an inventory type module that lists aluminium extrusions, and all relevantSync Data from MA to CRM
Currently, it's a one-way sync of data from the CRM to MA. I believe we should have the ability to select fields to sync from MA to the CRM. The lead score is a perfect example of this. In an ideal world we would be able to impact the lead score of aIs it possible to roll up all Contact emails to the Account view?
Is there a way to track all emails associated with an Account in one single view? Currently, email history is visible when opening an individual Contact record. However, since multiple Contacts are often associated with a single Account, it would be beneficialUpdate CRM record action
Currently, MA only offers a "Push Data" action to push data to a CRM module. This action is built to cover the need to both create a new record and update an existing record. Because it has been implemented this way all required fields on the CRM moduleNotes badge as a quick action in the list view
Hello all, We are introducing the Notes badge in the list view of all modules as a quick action you can perform for each record, in addition to the existing Activity badge. With this enhancement, users will have quick visibility into the notes associatedWhat's new in Zoho One 2025
Greetings! We hope you have all had a chance by now to get hands-on with the new features and updates released as part of ZO25. Yes, we understand that you may have questions and feedback. To ensure you gain a comprehensive understanding of these updates,Good news! Calendar in Zoho CRM gets a face lift
Dear Customers, We are delighted to unveil the revamped calendar UI in Zoho CRM. With a complete visual overhaul aligned with CRM for Everyone, the calendar now offers a more intuitive and flexible scheduling experience. What’s new? Distinguish activitiesAdd deluge function to shorten URLs
Zoho Social contains a nice feature to shorten URLs using zurl.co. It would be really helpful to have similar functionality in a Deluge call please, either as an inbuilt function or a standard integration. My Creator app sends an email with a personalisedEdit default "We are here to help you" text in chat SalesIQ widget
Does anyone know how this text can be edited? I can't find it anywhere in settings. Thanks!Quick way to add a field in Chat Window
I want to add Company Field in chat window to lessen the irrelevant users in sending chat and set them in mind that we are dealing with companies. I request that it will be as easy as possible like just ticking it then typing the label then connectingHow to create a two way Sync with CRM Contacts Module?
Newbie creator here (but not to Zoho CRM). I want to create an app that operates on a sub-set of CRM Contacts - only those with a specific tag. I want the app records to mirror the tagged contacts in CRM. I would like it to update when the Creator appZoho Sheet for Desktop
Does Zoho plans to develop a Desktop version of Sheet that installs on the computer like was done with Writer?Allow Manual Popup Canvas Size Control
Hello Zoho PageSense Team, We hope you're doing well. We would like to request an enhancement to the PageSense popup editor regarding popup sizing. Current Limitation: Currently, the size (width and height) of a popup is strictly controlled by the selectedWhere is the settings option in zoho writer?
hi, my zoho writer on windows has menu fonts too large. where do i find the settings to change this option? my screen resolution is correct and other apps/softwares in windows have no issues. regardsHow to set page defaults in zoho writer?
hi, everytime i open the zoho writer i have to change the default page settings to - A4 from letter, margins to narrow and header and footer to 0. I cannot set this as default as that option is grayed out! so I am unable to click it. I saved the documentDevelop 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.How to import data from PDF into Zoho Sheet
I am looking to import Consolidated Account Statement (https://www.camsonline.com/Investors/Statements/Consolidated-Account-Statement) into zoho sheet. Any help is appreciated. The pdf is received as attachment in the email, this document is passwordZoho Projects Android app: Integration with Microsoft Intune
Hello everyone! We’re excited to announce that Zoho Projects now integrates with Microsoft Intune, enabling enhanced security and enterprise app management. We have now added support for Microsoft Intune Mobile Application Management (MAM) policies throughCant't update custom field when custom field is external lookup in Zoho Books
Hello I use that : po = zoho.books.updateRecord("purchaseorders",XXXX,purchaseorder_id,updateCustomFieldseMap,"el_books_connection"); c_f_Map2 = Map(); c_f_Map2.put("label","EL ORDER ID"); c_f_Map2.put("value",el_order_id); c_f_List.add(c_f_Map2); updateCustomFieldseMapWrapping up 2025 on a high note: CRM Release Highlights of the year
Dear Customers, 2025 was an eventful year for us at Zoho CRM. We’ve had releases of all sizes and impact, and we are excited to look back, break it down, and rediscover them with you! Before we rewind—we’d like to take a minute and sincerely thank youAbout Zoneminder (CCTV) and Zoho People
Hi team I would like to implement a CCTV service for our branches, with the aim of passively detecting both the entry and exit of personnel enrolled in Zoho Peeple, but my question is: It is possible to integrate Zoho People with Zoneminder, I understandIntroducing the Zoho Projects Learning Space
Every product has its learning curve, and sometimes having a guided path makes the learning experience smoother. With that goal, we introduce a dedicated learning space for Zoho Projects, a platform where you can explore lessons, learn at your own pace,Create CRM Deal from Books Quote and Auto Update Deal Stage
I want to set up an automation where, whenever a Quote is created in Zoho Books, a Deal is automatically created in Zoho CRM with the Quote amount, customer details, and some custom fields from Zoho Books. Additionally, when the Sales Order is convertedHow to show branch instead of org name on invoice template?
Not sure why invoices are showing the org name not the branch name? I can insert the branch name using the ${ORGANIZATION.BRANCHNAME} placeholder, but then it isn't bold text anymore. Any other ideas?Admin asked me for Backend Details when I wanted to verify my ZeptoMail Account
Please provide the backend details where you will be adding the SMTP/API information of ZeptoMail Who knows what this means?Unable to remove the “Automatically Assigned” territory from existing records
Hello Zoho Community Team, We are currently using Territory Management in Zoho CRM and have encountered an issue with automatically assigned territories on Account records. Once any account is created the territory is assigned automatically, the AutomaticallyKaizen #223 - File Manager in CRM Widget Using ZRC Methods
Hello, CRM Wizards! Here is what we are improving this week with Kaizen. we will explore the new ZRC (Zoho Request Client) introduced in Widget SDK v1.5, and learn how to use it to build a Related List Widget that integrates with Zoho WorkDrive. It helpsSet connection link name from variable in invokeurl
Hi, guys. How to set in parameter "connection" a variable, instead of a string. connectionLinkName = manager.get('connectionLinkName').toString(); response = invokeurl [ url :"https://www.googleapis.com/calendar/v3/freeBusy" type :POST parameters:requestParams.toString()Possible to connect Zoho CRM's Sandbox with Zoho Creator's Sandbox?
We are making some big changes on our CRM so we are testing it out in CRM's Sandbox. We also have a Zoho Creator app that we need to test. Is it possible to connect Zoho CRM's Sandbox to Zoho Creator's Sandbox so that I can perform those tests?I Need Help Verifying Ownership of My Zoho Help Desk on Google Search Console
I added my Zoho desk portal to Google Search Console, but since i do not have access to the html code of my theme, i could not verify ownership of my portal on Google search console. I want you to help me place the html code given to me from Google searchTimeline Tracker
Hi Team, I am currently using Zoho Creator – Blueprint Workflows, and I would like to know if there is a way to track a timeline of the approval process within a Blueprint. Specifically, I am looking for details such as: Who submitted the record Who clickedPrimary / Other Billing Contacts
If you add an additional contact to a Zoho Billing Customer record, and then mark this new contact as the primary contact, will both the new primary and old primary still receive notifications? Can you stop notifications from going to the additional contactsMissing Import Options
Hello, do I miss something or is there no space import option inside of this application? In ClickUp, you can import from every common application. We don't want to go through every page and export them one by one. That wastes time. We want to centralizeNext Page