Kaizen #23 - Widgets

Kaizen #23 - Widgets

Hello Everyone!

Welcome to another week of Kaizen!
In this post, we are going to discuss Widgets in detail. 

First things first—What are Widgets? 

Widgets are embeddable UI components that you can create and add to your Zoho CRM. You can use widgets to perform functions that utilize data from third-party applications. You can build widgets for Zoho CRM using our JS SDK.

For instance, 
You want your sales representatives to handle new requirements/customization requested by prospects by raising internal tickets. The respective team can analyse the tickets and proceed with taking further actions. Although it is available as a different ticketing software, switching between them can be time-consuming and strenuous. Using widgets, you can make it available inside Zoho CRM itself thus, saving time and effort. 

Simply put, widgets give you the power to merge all your work that might be separated in different software into Zoho CRM. Thus, making your work easy and swift. 

Where can you use widgets?

Currently, you can add widgets to:
  • Custom Buttons
  • Related Lists
  • Webtabs
  • Homepage Dashboards

Steps to create a widget

Step 1: Installing the CLI (Command Line Interface)
Step 2: Creating a widget
Step 3: Adding and Hosting Widgets
Step 4: Using Widgets


Step 1: Installing the CLI

The command line interface is a text-based interface to access a third-party application using commands. Here, we are going to use the zet CLI for explanation.

Installing the necessary components

Pre-requisites:

1. Download the nodejs source code from "https://nodejs.org/en/download/".
2. Once you have installed Node JS, run the following command to verify it.
$ node -v
$ npm -v


Installing zet

Zet is a CLI that helps you to build and package widgets in Zoho CRM.
Run the following command to install the zapps CLI node package. Ensure that your system has Node JS 6 or above. 

$ npm install -g zoho-extension-toolkit


Run the following command to ensure that the installation was successful.

$ zet //Help information about 'zet' command will be shown.

Creating a project

1. Run the following command to create a new project.

$ zet init

This command will show the list of Zoho Services for which you can create a project template.



In this case, select Zoho CRM as the service. Provide a name for your widget. The sample project will be created in the respective folder directory.



2. To open the project, run the following command.

cd {Project_Name}



Step 2: Creating a Widget

Now, you can start designing and including the UI components for the Widget in the widget.html file. You can find this file in the "app" folder of your project. This file must contain the structure, design, and components of the Widget.



The HTML code for ZenDesk widget

This widget helps you handle new requirements/customization requested by prospects by raising internal tickets. The respective team can analyse the tickets and proceed with taking further actions. 

<html>
   <head>
      <link rel="stylesheet" href="../css/style.css">
      <link rel="stylesheet" href="bootstrap.min.css">
      <script src="ZohoEmbededAppSDK.min.js"></script>
      <script src="custom.js"></script>
      <script src="jquery-min.js"></script>
      <script src="bootstrap.min.js"></script>
      <script src="moment.js"></script>
   </head>
   <body>
      <div class="container">
         <h2>Create Ticket</h2>
         <form action="javascript:void(0);" onsubmit="createTicket();">
            <div class="form-group">
               <label for="subject">Subject:</label>
               <input type="text" class="form-control" id="subject" placeholder="Enter Subject" name="subject">
            </div>
            <div class="form-group">
               <label for="description">Description:</label>
               <textarea class="form-control" id="description" rows="5" placeholder="Enter Description" name="description"></textarea>
            </div>
            <button type="button" onclick="des()" class="btn btn-success">CREATE</button>
            <button type="submit" class="btn btn-primary">CLOSE</button>
         </form>
      </div>
      <script type="text/javascript">
         $(document).ready(function(){
         initializeWidget();
         })
      </script>
   </body>
</html>
To use the Zoho CRM APIs in the widget, you can use the API helpers provided in the JS SDK.

Example HTML code with API helpers:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Heatmaps</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="ZSDK.js"></script>
      <script src="ZohoCrmHelper.js"></script>
      <script>
         var id;
         ZOHO.embeddedApp.on("PageLoad", function(data){
         id= data.EntityId;
         });
         ZOHO.embeddApp.init()
         .then(function(){
                                             ZOHO.CRM.API.getRecord({Entity:"Accounts",RecordID:id})//CRM API helper
         .then(function(errData){
         console.log(data)
         })
         });
      </script>
   </head>
   <body></body>
</html>
3. Once you have created the widget, you can host the widget locally and test.

To host the widget locally:

$ zet run



You can test the widget using the host address received. 



Once you have tested the widget and find no problems with it, you can package the widget and host it internally or externally. 

Internal Hosting

You can host your application's static content using Zoho CRM's internal hosting. With the help of Zoho's CLI, you can create, develop, test, and package your widgets. You have to upload the files of the application in a zip format. 

Also, if you choose to run your widgets through internal hosting, you need not host your application elsewhere. In general, you can choose internal hosting, if you have created the application. 

External Hosting

Some services are available from third-party sources. They allow you to use their software from their websites. In order to make those applications available in your CRM, you can choose external hosting.

Validating and Packaging the application

1. To validate your application, run the following command,

$ zet validate

This will validate your app package and identify violations, if any. They should be corrected before updating the zip in our developer console.

2. To generate an uploadable zip of your application, run the following command,

$ zet pack

This will create a zip file of the application under the "dist" folder of your project directory, which can be uploaded to the CRM.



Step 3: Adding a widget

To add a widget:

1. Go to Setup > Developer Space > Widgets.



2. Click Create your First Widget.


3. In the following pop-up,
  • Give the widget a Name (mandatory).
  • Provide a description about the widget (optional).
  • Select the preferred Widget type.
  • Select the preferred Hosting type.
4. To host the application internally:      
  • Select Zoho from the Hosting drop-down.
  • Click Upload.
  • Select the compressed (ZIP) file of your application (Maximum size limit is 25MB)
  • Provide the Index URL of your application in the CRM. The base URL is automatically generated for internal hosting. 


5. To host the application from external sources,
  • Select External from the Hosting drop-down.
  • Enter the URL of the website where the application is hosted. For instance, here is an example to add a heatmap widget through external hosting.


6. Click Save.

Step 4: Using a widget

Once the widget is added to your CRM, it can be used from the component to which it was associated to. Below are the two sample widgets.

1. ZenDesk

Using this widget, users can raise internal tickets from Zoho CRM itself. They need not open a new tab to do the same. 


2. Heatmap
​
This widget displays a heatmap of the distribution of sales in a city. You can get an idea of the locations where the sales are booming, and plan accordingly.


A widget can also be used in Dashboard, Custom Button, or Related List. Refer to Widgets - Usage for more details.

We hope you found this post useful. Stay tuned for more!
Cheers!

Previous 'Kaizen' - Connections in Zoho CRM
Next 'Kaizen' - CORS and the JS SDK










    Access your files securely from anywhere

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








                              Zoho Developer Community



                                  Bootcamp
                                  Community
                                  Pricing
                                  Webinars
                                  What's New
                                  Integrations
                                  Contact Support
                                  Contact Sales
                                    Zoho Survey Resources
                                      Features
                                      Survey Templates
                                      Integrations
                                      Community
                                      iOS Mobile Surveys
                                      Pricing
                                      Android Mobile Surveys
                                      Insurvey Blogs
                                      Insight Blogs
                                      Tips & Tricks





                                                  Latest Feature Updates

                                                    • Desk Community Learning Series


                                                    • Digest


                                                    • Functions


                                                    • Meetups


                                                    • Kbase


                                                    • Resources


                                                    • Glossary


                                                    • Desk Marketplace


                                                    • MVP Corner


                                                    • Word of the Day


                                                    • Ask the Experts




                                                        Zoho SalesIQ Resources

                                                              • Sticky Posts

                                                              • Kaizen #198: Using Client Script for Custom Validation in Blueprint

                                                                Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.

                                                              • Kaizen #226: Using ZRC in Client Script

                                                                Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In this

                                                              • Kaizen #222 - Client Script Support for Notes Related List

                                                                Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore how

                                                              • Kaizen #217 - Actions APIs : Tasks

                                                                Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.

                                                              • Kaizen #216 - Actions APIs : Email Notifications

                                                                Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are


                                                              Manage your brands on social media
                                                              Access Zoho Social

                                                                Zoho Pagesense Resources


                                                                    Zoho TeamInbox Resources

                                                                      Zoho DataPrep Resources


                                                                        Zoho CRM Plus Resources

                                                                          Zoho Books Resources


                                                                            Zoho Subscriptions Resources

                                                                              Zoho Projects Resources


                                                                                Zoho Sprints Resources


                                                                                  Qntrl Resources


                                                                                    Zoho Creator Resources



                                                                                        Zoho CRM Resources

                                                                                        • CRM Community Learning Series

                                                                                          CRM Community Learning Series


                                                                                        • Kaizen

                                                                                          Kaizen

                                                                                        • Functions

                                                                                          Functions

                                                                                        • Meetups

                                                                                          Meetups

                                                                                        • Kbase

                                                                                          Kbase

                                                                                        • Resources

                                                                                          Resources

                                                                                        • Digest

                                                                                          Digest

                                                                                        • CRM Marketplace

                                                                                          CRM Marketplace

                                                                                        • MVP Corner

                                                                                          MVP Corner









                                                                                            Design. Discuss. Deliver.

                                                                                            Create visually engaging stories with Zoho Show.

                                                                                            Get Started Now


                                                                                              Zoho Show Resources

                                                                                                Zoho Writer

                                                                                                Get Started. Write Away!

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

                                                                                                  Zoho CRM コンテンツ



                                                                                                    Nederlandse Hulpbronnen


                                                                                                        ご検討中の方




                                                                                                                • Recent Topics

                                                                                                                • Multiple upload field CRM

                                                                                                                  I desperately need the functionality to add more than one upload field to web to contacts form. How can I do this?

                                                                                                                • Workdrive Oauth2 Token Isn't Refreshing

                                                                                                                  I have set up oauth for a bunch of zoho apis and have never had a problem with oauth. With workdrive i am using the exact same template i usually use for the other zoho apps and it is not working. All requests will work for the first hour then stops so

                                                                                                                • Sort by age

                                                                                                                  It would be very helpful if there was a way to sort by age in the Age column. Please add this function if possible. Thanks!

                                                                                                                • Lookup Field Option Not Available in Customization

                                                                                                                  Hello, I am trying to customize different modules (e.g., Work Orders, Systems, and others), but I am unable to find the Lookup field option in the layout customization. When I go to: Setup → Customization → Modules and Fields → Add Field The Lookup field

                                                                                                                • Scheduled sending of a poll and its results

                                                                                                                  Is there a way to schedule sending a poll to all my users and have the results sent separately to the team?

                                                                                                                • Canvas View bug

                                                                                                                  I would like to report a bug. When clone a canvas view from an existing canvas view, if the original canvas view have canvas button with client script. Then the new create canvas view will have canvas button, it is make sense. But when I try to delete

                                                                                                                • How can I import OLM to Yandex Mail easily?

                                                                                                                  For migrating Mac Outlook OLM data to Yandex Mail efficiently, the Aryson OLM Converter is a reliable professional tool that ensures complete data integrity throughout the process. Unlike manual methods, which can risk inconsistent formatting or missing

                                                                                                                • Zoho recruit's blueprint configuration is not functioning as mapped

                                                                                                                  Current Status: Zoho Blueprint is not functioning as configured. Issue: We are moving a Candidate status in Zoho Recruit "for active file" but we encountered: "Status cannot be changed for records involved in Blueprint." This happens to various client

                                                                                                                • Integrating Zoho Suite and apps more with Linux

                                                                                                                  I just got introduced with Zoho just couple of months ago, and I've already planned to contribute to it, even though it's not an open-source software. Still I have found it's potential to beat the tech giants and still being respective towards data privacy

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

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

                                                                                                                • Store Submitted Forms as PDF

                                                                                                                  Hi there, Is there a method to store Form submissions as a PDF in workdrive for archival? I set the form to email the submission to the user and an internal inbox but I'd really love to store the final form as PDF in workdrive automatically. I can't seem

                                                                                                                • Important Update: Google Ads & YouTube Ads API Migration

                                                                                                                  To maintain platform performance and align with Google's newest requirements, we are updating the Google Ads and YouTube Ads integrations by migrating from API v19 to the newer v22, before the official deprecation of v19 on February 11, 2026. Reference:

                                                                                                                • Separate Items & Services

                                                                                                                  Hi, please separate items and services into different categories. Thank you

                                                                                                                • Customize Calendar view in Teamspaces Settings

                                                                                                                  Right now every customization that happens inside of the calendar view inside of CRM is only visible for the specific user. We want to be able to set up calendar views as an admin for specific roles. I would suggest to do that inside of the settings of

                                                                                                                • CRM->INVENTORY, sync products as composite items

                                                                                                                  We have a product team working in the CRM, as it’s more convenient than using Books or Inventory—especially with features like Blueprints being available. Once a product reaches a certain stage, it needs to become visible in Inventory. To achieve this,

                                                                                                                • Add an option to disable ZIA suggestions

                                                                                                                  Currently, ZIA in Zoho Inventory automatically provides suggestions, such as sending order confirmation emails. However, there is no way to disable this feature. In our case, orders are automatically created by customers, and we’ve built a custom workflow

                                                                                                                • What's new in Zoho Sheet: Simplify data entry and collaboration

                                                                                                                  Hello, Zoho Sheet community! Last year, our team was focused on research and development so we could deliver updates that enhance your spreadsheet experience. This year, we’re excited to deliver those enhancements—but we'll be rolling them out incrementally

                                                                                                                • Zoho Creator Developer Console | Improved Distribution and Lifecycle Management for apps

                                                                                                                  Hello everyone, We're excited to introduce new enhancements now in the Zoho Creator Developer Console. These updates strengthen private app distribution through licensing controls and extend environment support across all installed apps, helping teams

                                                                                                                • [Webinar] Solving business challenges- Handling the challenge of transitioning to Zoho Writer from legacy tools

                                                                                                                  Moving to Zoho Writer is a great way to consolidate your business tools and become more agile. With multiple accessibility modes, no-code automation, and extensive integration with business apps and content platforms, Zoho Writer helps solve your organization's

                                                                                                                • Feature Request - Gift Cards or Gift Voucher Capability in Zoho Commerce

                                                                                                                  Hi Zoho Commerce team, I'm comming accross more and more retail businesses who sell gift cards. As there is currently no way to manage this in Zoho Commerce, it is a blocker to addoption. This is particularly popular in Europe and North America. I recently

                                                                                                                • Highlight a candidate who is "off limits"

                                                                                                                  Hello: Is there a way to highlight a candidate who is "off limits"?  I would like to have the ability to make certain candidate and / or Client records highlighted in RED or something like that.   This would be used for example when we may have placed a candidate somewhere and we want everyone in our company to quickly and easily see that they are off limits.  The same would apply when we want to put a client or former client off limits so no one recruits out of there. How can this be done? Cheers,

                                                                                                                • Closing off tasks automatically based on project status

                                                                                                                  Is there a way to close off all open tasks when a project is set as Cancelled?

                                                                                                                • CRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive

                                                                                                                  Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage files

                                                                                                                • [Free webinar] Understanding connections and datasources in Zoho Creator - Creator Tech Connect

                                                                                                                  Hello everyone, We’re excited to invite you to another edition of the Creator Tech Connect webinar. About Creator Tech Connect The Creator Tech Connect series is a free monthly webinar featuring in-depth technical sessions designed for developers, administrators,

                                                                                                                • Bridge the Gap Between your Service and Finance Teams

                                                                                                                  In field service, the most expensive distance isn’t the drive to a customer’s home—it’s the gap between a finished job and a paid invoice. Zoho FSM leverages the power of Zoho Invoice to handle and manage billing operations. It enables you to: Instantly

                                                                                                                • Direct URL to "View Record"

                                                                                                                  I would like to create a button (Deluge Script) to jump to the "view record" without passing by the record menu, but I can not aford to find the right url. I don't want the "view record" as a single page. I want the "view record" in the application like the picture below: Thanks in advance for your help

                                                                                                                • Live Chat for user

                                                                                                                  Hi everyone, I’m new to Zoho Creator and wanted to ask if it’s possible to add a live chat option for all logged-in portal users so they can chat internally. I’m trying to create a customer portal similar to a service desk, but for vehicle breakdowns,

                                                                                                                • SalesIQ Chat Owner to CRM Lead Owner Mapping

                                                                                                                  There is no proper mapping between the SalesIQ chat owner and the CRM lead owner. When a chat is assigned to an agent, the lead created in CRM is often assigned to a different user, forcing admins to manually change ownership every time. This creates

                                                                                                                • Product line search in quotes

                                                                                                                  Is there a way to change the search setting when you add a product line to a quote. We have created a field in products called 'Part Number' and I would like when I'm adding a product line to the quote that I can search on that field. At the moment it only searches on product description. In products I can search on the 'Part Number' field Any help welcome.

                                                                                                                • 🚀 WorkDrive 6.0 (Phase 1): Empowering Teams with Content Intelligence, Automation, Accessibility, and Control

                                                                                                                  Hello, everyone! WorkDrive continues to evolve from a robust file management solution into an intelligent, secure, and connected content collaboration platform for modern businesses. Our goal remains unchanged: to simplify teamwork, strengthen data security,

                                                                                                                • Storage Limits

                                                                                                                  Hello, What is the storage limitations for each user on professional edition?  Thanks, Mekki

                                                                                                                • Dheeraj Sudan and Meenu Hinduja-How do I customize Zoho apps to suit my needs?

                                                                                                                  Hi Everyone, I'm Meenu Hinduja and my husband Dheeraj Sudan, run a business. I’m looking to tweak a few things to fit my needs, and I’d love to hear what customizations others have done. Any tips or examples would be super helpful! Regards Dheeraj Sudan

                                                                                                                • Zoho Recruit Community Meetup - London 🇬🇧

                                                                                                                  Hello Recruiters! We’re excited to announce that the Zoho Recruit team is coming to the UK for an in-person Zoho User Group (ZUG) Meetup in London! This is your chance to connect with fellow Zoho users, learn from experts, and walk away with actionable

                                                                                                                • Power Pivot and Data Modeling functionality in Zoho Sheet

                                                                                                                  When will MS Excel functionalities like Power Pivot and Data Modeling functionalities be available in Zoho Sheet?

                                                                                                                • Sender Email Configuration Error.

                                                                                                                  Hello Team, Hope you are all doing well. We are in the process of creating the Zoho FSM environment in the UAE. When we try to add the sender email address “techsupportuae@stryker.com”, we receive the error message: “Error occurred while sending mail

                                                                                                                • Global Search placement in the new UI

                                                                                                                  Having a hard time with the global search placement in the UI redesign. Surely I can't be the only one. Previously global search placement was perfect. A bar at the top/center of the page. Exactly where you would expect it to be. Since the new UI has

                                                                                                                • What's New - January 2026 | Zoho Backstage

                                                                                                                  Welcome to 2026! If you thought last year was big, buckle up. We’re stepping into this year with a singular focus: unimaginable growth, elite scalability, and performance benchmarks that leave the old ways of event management in the rearview mirror. As

                                                                                                                • Cliq on your mobile phone

                                                                                                                  Some of the employees in my company get their cliq on their mobile phones but it will not let them answer the call. The employee has to go to their laptop to access it. 

                                                                                                                • Bulk Delete Messages in Cliq

                                                                                                                  Isn't it possible to bulk delete messages in Cliq? I have them delivered to me as notifications from another service but most of them need to be deleted as not of value. I get dozens of them per day, and deleting them is already difficult is the "Delete"

                                                                                                                • stock movement report by each transaction for each item

                                                                                                                  Dear Sir we are using zoho inventory for foodstuff and we lack the transaction report which clearly shows movement of an item from Opening balance of the month to Goods received in, Supplier return out, Invoice out, Sales return In, Transfer out and Transfer

                                                                                                                • Next Page