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.





    Access your files securely from anywhere







                            Zoho Developer Community





                                                  Use cases

                                                  Make the most of Zoho Desk with the use cases.

                                                   
                                                    

                                                  eBooks

                                                  Download free eBooks and access a range of topics to get deeper insight on successfully using Zoho Desk.

                                                   
                                                    

                                                  Videos

                                                  Watch comprehensive videos on features and other important topics that will help you master Zoho Desk.

                                                   
                                                    

                                                  Webinar

                                                  Sign up for our webinars and learn the Zoho Desk basics, from customization to automation and more

                                                   
                                                    
                                                  • Desk Community Learning Series


                                                  • Meetups


                                                  • Ask the Experts


                                                  • Kbase


                                                  • Resources


                                                  • Glossary


                                                  • Desk Marketplace


                                                  • MVP Corner




                                                            • Sticky Posts

                                                            • Kaizen #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.
                                                            • Celebrating 200 posts of Kaizen! Share your ideas for the milestone post

                                                              Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQs
                                                            • Kaizen #193: Creating different fields in Zoho CRM through API

                                                              🎊 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.
                                                            • 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! Commands


                                                            Manage your brands on social media



                                                                  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

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

                                                                                              Get Started. Write Away!

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

                                                                                                Zoho CRM コンテンツ






                                                                                                  Nederlandse Hulpbronnen


                                                                                                      ご検討中の方




                                                                                                            • Recent Topics

                                                                                                            • report showing assignment type

                                                                                                              Hi, We've created a number of workflows to allow us to auto assign tickets to agents based on keywords and other criteria. I'm struggling to create a report that would show me what is the percentage of tickets that are assigned automatically via workflows
                                                                                                            • Time Entry Notifications

                                                                                                              Hi All - I have support staff who place notes of their work in the time entry section of Zoho Desk. Is there a specific workflow or setting I need to enable to have the ticket holder updated via email when an entry is saved?
                                                                                                            • How to report 'Response violation' OR 'Resolution violation'

                                                                                                              Hi, I want to report on SLA Violation Type. I grouped my tickets on this column. It seems I only get 'Response and Resolution Violation' or 'Not Violated'. The former seems to be given to a ticket if only the Response Time was violated. I would expect
                                                                                                            • Critical 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 posted
                                                                                                            • Should I Use DMARC?

                                                                                                              When I configure Zoho Mail's DMARC settings, it's mandatory to fill in the RUA and RUF (Aggregate notification email address*, Forensic notification email address*) addresses. When we enter an email address in these fields, we receive reports from the
                                                                                                            • Power of Automation :: Quick way to associate your Projects with Zoho CRM

                                                                                                              A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate complex tasks and
                                                                                                            • Formula field with IF statement based on picklist field and string output to copy/paste in multi-line field via function

                                                                                                              Hello there, I am working on a formula field based on a 3-item picklist field (i.e. *empty value*, 'Progress payment', 'Letter of credit'). Depending on the picked item, the formula field shall give a specific multi-line string (say 'XXX' in case of 'Progress
                                                                                                            • Unable to retrieve Contact_Name field contents using Web API in javascript function

                                                                                                              Hello, I've added a field in the Purchase Order form to select and associate a Sales Order (Orden_de_venta, lookup field). I've also created a client script to complete some fields from the Sales Order (and the Quote), when the user specifies the related
                                                                                                            • Restricting contact creation

                                                                                                              Hi all! I am looking to use Zoho Desk in a part of the business that takes end user enquiries. These are generally single interactions, and not linked to an account name. As Desk is Account centric, has anyone designed a way to manage these incoming emails
                                                                                                            • Import Holiday Calendars

                                                                                                              HI Zoho Is there anyway of importing an online calendar like https://www.calendarlabs.com into the business hours calendars, to speed up setup of holiday calendars. Also could we also request a feature where you can specify a Holiday as hours, i.e it could be that the company is on a 1/2 day due to a holiday or when it is Eid in the UAE and they are only allowed to work restricted hours so we need the calendar to be flexible to allow for this. Regards Jamie
                                                                                                            • Filtering Tickets based on Email headers

                                                                                                              We're starting to get a lot more junk coming into our Zoho Desk, which is then triggering unnecessary email alerts to agents. Once thing we could do to cut this junk in half, is to filter tickets based on email headers. Any email containing the `List-Unsubscribe`
                                                                                                            • Zoho Books - France

                                                                                                              L’équipe de Zoho France reçoit régulièrement des questions sur la conformité de ses applications de finances (Zoho Books/ Zoho Invoice) pour le marché français. Voici quelques points pour clarifier la question : Zoho Books est un logiciel de comptabilité
                                                                                                            • Feature Request: Conditional Field Mandatoriness Based on Display Status

                                                                                                              Hello Zoho Creator Team, I would like to suggest an enhancement to improve the flexibility of form validations. Currently, when we need a field to be mandatory only if it's displayed on the form, the only option is to: Set the field as not mandatory in
                                                                                                            • Im Stuck in an EDIT ONLY WITH WIZARD issue

                                                                                                              So I found Wizards to be a really helpful tool in minimizing the exposure of redundant, superfluous fields to staff that would never otherwise have to edit those fields. My issue is, that when the record (in this case a lead) is created with a wizard,
                                                                                                            • Data Migration Strategies for Moving to a Cloud Solution

                                                                                                              Hi everyone, I’ve been working on moving some of our critical systems, including CRM and project data, to a Zoho cloud solution, and one of the biggest challenges I’ve encountered is data migration. Transferring large volumes of data while keeping it
                                                                                                            • Bulk Moving Images into Folders in the Library

                                                                                                              I can't seem to select multiple images to move into a folder in order to clean up my image library and organize it. Instead, I have to move each individual image into the folder and sometimes it takes MULTIPLE tries to get it to go in there. Am I missing
                                                                                                            • Error 550 5.4.1

                                                                                                              I’ve tried sending an email to someone but keep receiving this back. Any help would be greatly appreciated 
                                                                                                            • Automatic Matching from Bank Statements / Feeds

                                                                                                              Is it possible to have transactions from a feed or bank statement automatically match when certain criteria are met? My use case, which is pretty broadly applicable, is e-commerce transactions for merchant services accounts (clearing accounts). In these
                                                                                                            • Has Anyone successfully integrated Zoho and Sage Intact?

                                                                                                              Hey all, We’re evaluating Zoho One + Sage Intacct and I’m trying to connect with anyone who has actually implemented the two together.Specifically, I’d love to know: -- Which functions you kept in Zoho vs. Intacct (e.g., Product Catalog, AR/AP, invoicing,
                                                                                                            • Store "Sign in with Google/Microsoft/GitHub etc." details

                                                                                                              Quite often now, users are using a sign-in provider like Google or Microsoft to sign into various apps and services. It would be great if Vault could remember which providers you use for each website and sign you in with that provider instead of a username
                                                                                                            • Placing a condition before converting the LEAD

                                                                                                              Hi,  I need some assistance with Lead conversion. I need to place certain conditions before allowing the user to convert the lead.  For example: up until the certain status's doesn't equal "green" don't allow to convert lead.  I tried creating this using
                                                                                                            • Subform edits don't appear in parent record timeline?

                                                                                                              Is it possible to have subform edits (like add row/delete row) appear in the Timeline for parent records? A user can edit a record, only edit the subform, and it doesn't appear in the timeline. Is there a workaround or way that we can show when a user
                                                                                                            • How can I filter a field integration?

                                                                                                              Hi,  I have a field integration from CRM "Products" in a form, and I have three product Categories in CRM. I only need to see Products of a category. Thanks for you answers.
                                                                                                            • Adding image in HTML report page

                                                                                                              Hi, I want to know two things: 1. Can anyone advise how to add an image in HTML report. The tagged used is <img> but what path do I mention for the image to be added in the HTML report. 2. Also, I want to know if I am creating an application for the market
                                                                                                            • How to change view of HTML report based on device but always print in A4

                                                                                                              Hello everyone, I am aware that HTML report view can be configured to adjust according to the screen size like Laptop, Tablet and mobile using media queries. But my concern is no matter on which device the reports is opened when printed should always
                                                                                                            • Age Calculation

                                                                                                              I've attempted to calculate the age of someone based on their birthday input by using the formula field. It works but I don't want all those decimals on there. I then tried to use "set variable" after birthday input but I get a field type mismatch, long vs. floating. Any ideas would be wonderful.
                                                                                                            • Search on Custom Field

                                                                                                              We're working on an integration with the Zoho FSM API and are trying to retrieve companies based on a custom field we added to the Companies module. However, we can't find a way to filter or query records using custom fields through the API. We have a
                                                                                                            • in zoho creator Sales Returns form has sub form Line Items return quantity when i upate the or enter any values in the sub form that want to reflect in the Sales Order form item deail sub form field Q

                                                                                                              in zoho creator Sales Returns form has sub form Line Items return quantity when i upate the or enter any values in the sub form that want to reflect in the Sales Order form item deail sub form field Quantity Returned\ pls check the recording fetch_salesorder
                                                                                                            • Sendmail function / custom action?

                                                                                                              I've setup a function hoping to email various business departments the details of a record once all work in that record is complete so gone about setting up a custom action in such way that each record line on the report has a button to click. Question is how do I actually include data from that record in the email that is sent when the button is clicked? I had thought that since this were being sent per record the email would include the data which had been entered
                                                                                                            • API to post drafts for social media

                                                                                                              I we want to post draft posts to our zoho social account and then approve and schedule them within Zoho social. is this possible with for example: https://apis.zoho.com/social/v2/post TIA Jon
                                                                                                            • Integración Books para cumplir la ley Crea y Crece y Ley Antifraude (VeriFactu)

                                                                                                              Hola: En principio, en julio de 2025, entra en vigor la ley Crea y Crece y Ley Antifraude (VeriFactu). ¿Sabéis si Zoho va a cumplir con la ley para cumplir con la facturación electrónica conectada a Hacienda? Gracias
                                                                                                            • Is there an API to "File a Ticket" in Desk

                                                                                                              Hi, Is there an API to "File a Ticket" in Desk to zoho projects?
                                                                                                            • Unarchive tickets

                                                                                                              How can I manually unarchive tickets?
                                                                                                            • Canvas View in Zoho Recruit

                                                                                                              Is it possible or would it be possible to have the new 'Canvas View' in Zoho Recruit?
                                                                                                            • What impactful sales coaching techniques have you used to boost your team's performance?

                                                                                                              I'm curious about the real-world impact of sales coaching on team performance. What specific techniques or strategies have you found most effective in driving consistent improvement and growth in your sales team? Any success stories or lessons learned
                                                                                                            • Adding Taxes to paid consultations in Zoho Bookings

                                                                                                              I created a 'paid' consultation under Zoho Booking and integrated it with payment gateways for online/instant payment before a booking is done. How can I add 'taxes' to the price of consultation? I can add taxes to other Zoho apps (liks Books, Checkout,
                                                                                                            • Zoho 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 information
                                                                                                            • Optimize your Knowledge Base for enhanced accessibility by adding alt tags for images

                                                                                                              Let's learn why alt tags are crucial for your articles. You can add alternative tags (alt tags) and alternative text (alt text) to the images you share on your community forums or when embedding them in articles. Alt tags refer to the HTML attribute,
                                                                                                            • Feature Request - Insert URL Links in Folders

                                                                                                              I would love to see the ability to create simple URL links with titles in WorkDrive. or perhaps a WorkDrive extension to allow it. Example use case: A team is working on a project and there is project folder in WordDrive. The team uses LucidChart to create
                                                                                                            • FSM trying again

                                                                                                              have not linked FSM yet to the rest of out Zoho suit. It certainly looks like the apointment and service part is more manageable for our staff. The question is that our engineers multi task examples 1. deliver products to customers not fitted 2. Service
                                                                                                            • Next Page