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
Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! CommandsKaizen #165 : How to call Zoho CRM APIs using Client Script
Welcome back to another exciting Client Script post! In this post, we will discuss one of the most frequently asked questions: How do you call Zoho CRM APIs from Client Scripts? In this kaizen post, 1. Ways to make calls to Zoho CRM APIs using ClientKaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provideExtension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP
Handling and managing the data between two applications is a major factor for an efficient business. There are a variety of ways to handle data between Zoho CRM and other third-party applications. You can use deluge CRM tasks, create connectors, use APIKaizen #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
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 Can I change admin account Email?
Hi, I want to change admin email address for my account (I'm using Zoho Mail). How can i do this? Thanks!Free Plan mail accounts details
In the zoho mail pricing there's a free plan that includes: FREE PLAN Up to 25 Users 5GB* /User, 25MB Attachment Limit Webmail access only. Single domain hosting. I need to make sure that I'm able to create multiple email accounts in the form of: name@domain.comCan't remove old phone number from Zoho email account and add a new one?
Every time I try to add my new number it supposedly sends me a code which I never get and I still don't know how to remove the old number.Many Deals to one Contact - Syncing issue
Hi, In our CRM we have multiple deals to a contact. We have a field in deals called "Contract Type" - sometimes they are "business" and sometimes they are "personal" deals. I want to be able to send different emails to contacts depending on this field.Introducing Assemblies and Kits in Zoho Inventory
Hello customers, We’re excited to share a major revamp to Zoho Inventory that brings both clarity and flexibility to your inventory management experience! Presenting Assemblies and Kits We’re thrilled to introduce Assemblies and Kits, which replaces theOpen a popup window from inside Record A and stay on the record after saving Record B
Hello community, Perhaps you can help me with the following topic. I have a form A with a decision box. When this decision box is checked, a form B pops up. Once Form B is saved, I need to stay on Form A to continue entering data. I've observed the followingHow to integrate single-sign-on using Linkedin in Zoho Creator
How to integrate single-sign-on using LinkedIn in Zoho Creator need step by step integration.Stage-Probability Mapping
How do I answer this question in analytics? What is the Closed-Won percentage of all Deals that reach a given stage? Another way: Of all Deals that reach the Artwork/Price Quote stage, what percentage of them become Closed-Won? I want to populate theGenerate a Zoho Sign link
From time to time I get a response "I never received your you e-document for electronic signature" is there a way to generate a Zoho Sign link to share.What’s New in Zoho Expense: January - March 2025
Hello users, We're excited to bring you the latest updates and improvements we've made to make your travel and expense management smoother and more effortless. Let's take a quick look at the important updates we've rolled-out in Zoho Expense between JanuaryAsk the Experts 19: Live Expert Panel Discussion - Inside Zoho Desk Spring Release 2025
Hello again! Have you ever needed quick insights into key indicators to help manage and streamline specific operations? Have you started using AI to enhance your customer service in Zoho Desk? From configuring simple bots using Guided Conversations toOnboarding Zoho sign documents?
I was wondering something about using the Zoho sign integration with the candidate onboarding process. We set up the entire onboarding process and we have added documents that the candidate needs to review and sign digitally using Zoho Sign. This partCreating a whatsapp channel in instant messaging in zoho desk - error Oops, something went wrong. Please try again later.
Creating a whatsapp channel in instant messaging in zoho desk - error Oops, something went wrong. Please try again later.DKIM record Missing
zoho says 'DKIM record missing' at the zohomail spf and dkim validation page. dkim record is most certainly in the wix dns settings. anyone had this issue?zohomail - sending faxes via email using thexxxxxx@faxage.com format
anyone doing this? zohomail - sending faxes via email using thexxxxxx@faxage.com format we do every so often send faxes using faxage.comPermissions on Views
Having the option of any agent creating custom views is firing back and got a situation where there are a hundred different views across the team and tickets are not being dealt in the most efficient of ways. Tickets seems to be missed by some agents, whislt others have customized their columns in a way that due dates are not visible and not being respected. There needs to be control on this function in order to have a standard set of views and the ability to prevent users from performing customizationsLooking to Hire: Zoho Creator Developer for Vendor Dashboard Portal
We are a Florida-based licensed liquor distributor using Zoho Books, Inventory, CRM, and Analytics. Many of our vendors are also our customers. We’re looking to build a centralized, secure Vendor Dashboard Portal in Zoho Creator that gives access to real-timeWhat is Resolution Time in Business Hours
HI, What is the formula used to find the total time spent by an agent on a particular ticket? How is Resolution Time in Business Hours calculated in Zohodesk? As we need to find out the time spent on the ticket's solution by an agent we seek your assistanceRepeating Images in Emails
Some emails have images that are repeated when viewed both on the web client (mail.zoho.com) and when using the Zoho Mail android app. It looks like perhaps some of the email styling is being ignored or applied incorrectly, as a brief inspection of theWhy ZOHO Function Can't Read Custom Field API In Quotes Module (Subform)
I’m using a Deluge function to transfer data from a subform in the Quotes module to a subform in the Accounts module. Everything works except for a custom picklist field in Quotes—no matter what I try, the Zoho API can’t read that field ("Status_sb").Can we customize the default client-facing icons?
Is there any way to customize the client-facing icons that display in the Zoho Bookings UI? For example, I'm using the Default page theme and would like to modify the default icon that is shown beside "Service." The icon currently being shown looks like a baseball hat to me (see attached screenshot) which has no relevance to my business or clients. It would be great if Zoho could provide a different, more generic icon (perhaps a bell icon to represent service?) or better yet allow the icons toQuick Create needs Client Script support
As per the title. We need client scripts to apply at a Quick Create level. We enforce logic on the form to ensure data quality, automate field values, etc. However, all this is lost when a user attempts a "Quick Create". It is disappointing because, fromHow to change the default module A"leads" to customised module "abc" in Zoho while integrating the leads from Skrapp!
How to change the default module A"leads" to customised module "abc" in Zoho while integrating the leads from Skrapp!Zoho Finance Limitations 2.0 #15: You can't filter any Sales Orders by their SubStatus in CRM or Analytics.
All our sales orders move through various stages and it's nice when you can filter by open orders in "50% Building" or "100% - Built" however this is not possible in CRM finance. It's a basic feature within native CRM using a picklist. My go to was Analytics,Zoho Payroll's USA and KSA editions are available in Zoho One!
Greetings! We’re excited to share that Zoho Payroll, currently available only in India and the UAE, is now introducing the KSA (Kingdom of Saudi Arabia) edition and the USA (United States of America) edition, and these editions are now available in ZohoZoho CRM Forecast - Exclude certain Deals
We have our forecast and we use it for team forecast/targets/attainment. It works great for that. However, occassionally we have to offer Deals that are non-revenue generating, but are tracked in our CRM. They still have revenue tied to them, but ourPor que utilizar o Zoho Creator 6?
No cenário atual, as empresas enfrentam o desafio constante de adaptar seus processos com agilidade e eficiência. É aí que entra o Zoho Creator 6, a mais recente versão da poderosa plataforma low-code da Zoho — e no nosso novo vídeo, mostramos exatamenteBigin iOS app update - Introducing Card Scanner and initiating WhatsApp conversations using pre-approved templates.
Hello everyone! In the latest iOS (v1.11.3) version of the Bigin app, we have introduced the following features: Card Scanner Initiating WhatsApp conversations. Card Scanner: Our new Card Scanner feature extracts contact information from business cards.Kaizen #154 - Dynamically Update Picklist Values in Zoho CRM Workflows
Hello all! Welcome back to another interesting Kaizen post. Today, we will discuss how to add automatically or remove values from a picklist field using Deluge within a workflow. This post serves as a solution for the forum post. Use case The sales teamZoho Bookings <> Oulook
When a user has their Outlook connected to Bookings should it be able to recognise existing meetings and not give those as available options ? If so, how long is the sync time : ie If i were to put a private meeting at 3pm in my Outlook, how long wouldCurrency Field Does Not show commas upon entry - leading to inaccurate entries!
Hello Zoho.. When our sales reps are entering deals and the profit/revenue it is difficult to accurately enter numbers with lots of zeros when there commas are NOT added until the record is saved. Could commas be added to this filed type as it is beingAnyone get the OpenAI API to work in Zoho Meeting?
Has anyone been able to get the OpenAI API to work in generating meeting summaries? I have been trying, but I get an error that says "OpenAI key notes request rate exceeded. Please try again later or upgrade your open AI account." I contacted Zoho supportm2 is converted to Kader when switching from Dutch to English
By default, our company works in Dutch. We sell a lot of products with m2 as a unit. Now we've noticed that if we change the language in Zoho to English, the usage unit 'm2' gets replaced by 'Kader'. We've got no idea why. I'd expect that the translationUI and other enhancements in Community module
Hello everyone, The Community module has undergone a UI revamp to improve user experience. In addition, we have introduced Status Board and Bulk Approval of posts to provide better engagement. Improved User Interface The new interface brings the followingCheck Validation Rules all fields on Quick Edit on Record Details Page
I've added validation rules for some fields in a module — let’s say 3 out of 6 fields have rules. On the Edit Page, if any of those fields have an error, I can’t save the form — which is good. But on the Details Page, I can still quick edit other fieldsE-Invoicing Automation
Do you have an API endpoint for pushing the invoice through the e-tims for KenyaEasy way to create task from call
In Bigin I would like to have easy way of creating the tast directly from the call. Now after the call I need to enter company record and create task there. There must be some easier and more user friendly way to create new task after the call!Can we have Backorder Management ?
Can we have Backorder Management ?Create Funnel to Track Email Outreach Conversion
Hello, We would like to create a funnel that measures: N° of emails sent -> N° of emails opened -> N° of emails responded We would like to measure this email response conversion rate for each of our SDRs. We use the analytics tool of Zoho CRM and notPerformance -> Extend Service -> Forms: How to use created form?
So I have created a new Annual Evaluation form (cloned from the original one) and now I want to use it in an Appaisal cycle. QUESTION: How can I associate the form with the new Appraisal Template? Also, what is the difference between an Appraiser andNext Page