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

                                                                                                                • How do I sync multiple Google calendars?

                                                                                                                  I'm brand new to Zoho and I figured out how to sync my business Google calendar but I would also like to sync my personal Google calendar. How can I do this so that, at the very least, when I have personal engagements like doctor's appointments, I can

                                                                                                                • Zoho CRM || Unable to Bulk Assignment of Territories for Contacts

                                                                                                                  Dear Zoho CRM Support Team, I hope this email finds you well. We recently performed a bulk upload of Contacts into Zoho CRM using the official sample Excel template downloaded from the CRM. The upload itself was completed successfully; however, we encountered

                                                                                                                • How Does Knowledge Base Search and Article Recommendation Work?

                                                                                                                  Hello, I would like to understand how the Knowledge Base search engine works. Specifically, does it search based on: The article title only? The full article content? Both, the article and the content? Keywords? Tags? Also, how does the system determine

                                                                                                                • Cannot get code to work with v2.mergeAndStore!

                                                                                                                  Please can someone help me pass subform items into a repeating mail merge table row using v2.mergeAndStore? I have a mail merge template created in Writer and stored in Workdrive. This template is referenced by a custom CRM function which merges all of

                                                                                                                • Ability to CC on a mass email

                                                                                                                  Ability to CC someone on a mass email.

                                                                                                                • CRM verify details pop-up

                                                                                                                  Was there a UI change recently that involves the Verify Details pop-up when changing the Stage of a Deal to certain things? I can't for the life of me find a workflow or function, blueprint, validation rule, layout rule ect that would randomly make it

                                                                                                                • Access to Specific Zoho Desk layout for external parties

                                                                                                                  Hi, We have a partner who handles for us sales requests from specific markets. He is not a Zoho Desk user. But we want him to b part of a specific Zoho Desk layout to handle inquiries.  How to achieve it in the easiest way possible?

                                                                                                                • Is It Possible to Convert a Custom Module to a Quote?

                                                                                                                  I recently created a custom module in our CRM environment for RFQs so that our sales team can submit quote requests directly in Zoho rather than by email/phone. This allows for a cleaner overall process, minimizing potential errors and potentially encouraging

                                                                                                                • Ability to Disable System Banner Messages in Chat Flow Control

                                                                                                                  Dear Zoho SalesIQ Team, Greetings, We would like to request an enhancement related to the system banner messages in Zoho SalesIQ chat flow control. Current Behavior: SalesIQ allows configuring various automatic banner/system messages such as: Waiting

                                                                                                                • How do you do ticket add ons in Backstage?

                                                                                                                  Hi Everyone, If you wanted to have general admin tickets and allow for add ons, like camping, or car or Carbon offset. What would you do? Peace Robin

                                                                                                                • Writing SQL Queries - After Comma Auto Suggesting Column

                                                                                                                  When writing SQL Queries, does anyone else get super annoyed that after you type a comma and try to return to a new line it is automatically suggest a new column, so hitting return just inputs this suggested column instead of going to a new line? Anyone

                                                                                                                • Sort Legend & stacked bar chart by value

                                                                                                                  I'd love to see an option added to sort the legend of graphs by the value that is being represented. This way the items with the largest value in the graph are displayed top down in the legend. For example, let's say I have a large sales team and I create

                                                                                                                • Idle Chat Reminders for Agent-Handled Conversations

                                                                                                                  Dear Zoho SalesIQ Team, Greetings, We would like to request an enhancement to the Idle Chat Handling functionality in Zoho SalesIQ—specifically for chats that are handled by human agents after a bot-to-agent transfer. Current Behavior: In Zobot settings,

                                                                                                                • Layout Adjustment.

                                                                                                                  Hello Latha, Hope you are doing well. I wanted to check with you about adjusting the layout columns in the Service Report from the backend, as currently there is no capability for us to customize the layout from our end. Below is the output that I am

                                                                                                                • Snapchat

                                                                                                                  Are there any plans to add Snapchat to Zoho Social or is there any API that we can use to integrate into Zoho.

                                                                                                                • Zoho Sign "An unexpected error occured" when clients trying to sign documents

                                                                                                                  We are unable to have clients sign our documents. When attempting to complete the process an error appears saying "an unexpected error occured" and in the document history just shows "signing failure." We are at a complete standstill with no response

                                                                                                                • Service Reports.

                                                                                                                  Hello Team, I have a requirement to create multiple service reports for a single AP. That means, in one AP I have 5 service line items, and all line items are linked to assets. Once I complete the AP, I want to generate 5 individual service reports, one

                                                                                                                • ¡Vuelven los Workshops Certificados de Zoho a España!

                                                                                                                  ¡Hola usuarios de Español Zoho Community! Hace ya unos días que hemos dado la bienvenida al 2026, y promete ser un año de lo más emocionante. Y es que nos gustaría haceros nuestro particular regalo de Reyes, aunque lleguemos un poco tarde. 🎁 ¡Nos gustaría

                                                                                                                • Cancel Subscription

                                                                                                                  Hi , Im want to cancel my account but without success please help me to do it

                                                                                                                • Deprecation Notice: OpenAI Assistants API will be shut down on August 26, 2026

                                                                                                                  I recieved this email from openAI what does it means for us that are using the integration and what should we do? Earlier this year, we shared our plan to deprecate the Assistants API once the Responses API reached feature parity. With the launch of Conversations,

                                                                                                                • How to list services on quote instead of products

                                                                                                                  I need to create a customer facing estimate that displays our services. The default quote layout only allows products to be listed. Is there a way to correct this?

                                                                                                                • Making an email campaign into a Template

                                                                                                                  I used a Zoho Campaign Template to create an email. Now I want to use this email and make it a new template, but this seems to be not possible. Am I missing something?

                                                                                                                • Syncing calendar with Google Calendar doesn't work when events are sent to auto repeat

                                                                                                                  Hi... The ZOHO CRM -- GOOGLE CALENDAR sync is broken. If I create a single event on either side, sync works, but if I create an event with auto repeat on either side it doesn't work. Furthermore, events created before the sync don't show up in the calendar.

                                                                                                                • Sync your Products Module for better context.

                                                                                                                  In customer support, context is everything. The integration between Zoho Desk and Zoho CRM helps your sales and support teams function as one, delivering better customer experiences. With the latest update to this integration, you can now sync the Product module in your Zoho CRM with your Zoho Desk portal. This feature enables products from Zoho CRM to reflect in the "product" field in Zoho Desk. This can save your support team valuable time and effort.    Some things to note when syncing the two:

                                                                                                                • Invoice status on write-off is "Paid" - how do I change this to "Written off"

                                                                                                                  HI guys, I want to write off a couple of outstanding invoices, but when I do this, the status of the invoices shows as "Paid". Clearly this is not the case and I need to be able to see that they are written off in the customer's history. Is there a way

                                                                                                                • CRM gets location smart with the all new Map View: visualize records, locate records within any radius, and more

                                                                                                                  Hello all, We've introduced a new way to work with location data in Zoho CRM: the Map View. Instead of scrolling through endless lists, your records now appear as pins on a map. Built on top of the all-new address field and powered by Mappls (MapMyIndia),

                                                                                                                • Creating meetings from an email

                                                                                                                  Hi. Similar to Outlook, it would be helpful if a meeting can be scheduled from an email so that the attendees need not be manually entered every time it's created.

                                                                                                                • Please, make writer into a content creation tool

                                                                                                                  I'm tired of relying on Google Docs. I'm actually considering moving to ClickUp, but if Writer were a good content creation tool instead of just a word processor, I would finally be able to move all my development within the Zoho ecosystem, rather than

                                                                                                                • ZohoSalesIQ.Chat cannot send messages

                                                                                                                  Chat cannot send messages. Our app implements the customer service chat window functionality by integrating the Mobilisten SDK. Recently, we encountered an issue: after successful SDK initialization and visitor registration, when the `startWithQuestion`

                                                                                                                • Missed chats on WhatsApp closing after one minute

                                                                                                                  Hi, we have added WhatsApp as a channel. However, if a chat is not picked up within 2mins, the chat is marked as missed and is closed within a minute. Why are they not staying in our "missed" queue for 24 hours as per our WhatsApp preference settings?

                                                                                                                • Feature Request: Add Tax ID Display on Event Tickets

                                                                                                                  Hello Backstage Team, I’ve had several clients bring up an issue regarding tax compliance when creating events. For tax purposes, they are required to show their Tax ID on the event tickets. Currently, this isn’t an option, so they have to manually generate

                                                                                                                • Release Notes | January 2026

                                                                                                                  We have rolled out a set of powerful new enhancements across Zoho Vertical Studio that bring several long-awaited capabilities to your applications. These updates focus on deeper customization, smarter automation, better reporting, and improved usability

                                                                                                                • Email Alias: To keep emails flowing without disruption

                                                                                                                  Email Alias acts like a nickname for a user’s primary email address, allowing multiple email addresses to deliver messages into the same mailbox. Consider the scenario where an employee manages multiple responsibilities, such as responding to sales inquiries,

                                                                                                                • Zoho CRM for Everyone's NextGen UI Gets an Upgrade

                                                                                                                  Hello Everyone We've made improvements to Zoho CRM for Everyone's Nextgen UI. These changes are the result of valuable feedback from you where we’ve focused on improving usability, providing wider screen space, and making navigation smoother so everything

                                                                                                                • Prepayment of a sales order

                                                                                                                  How does everyone handle this common (at least it is common for us!) situation? We require all our orders to be fully prepaid before shipment since we manufacture made to order, custom products. Since ZOHO does not allow a sales order to be prepaid, we are forced to create an invoice at the time an order is placed to allow the customer to pay it. Our sales category is therefore skewed, since the sale was actually booked at the time an order was placed, rather then at the time it is shipped, which

                                                                                                                • Deposit on a Sales Order

                                                                                                                  Good day, 100% of my business is preorders, no inventory. I am trying to run away from QB for one of my businesses, but I require two options that I don't seem to find with Zoho Books. 1 - If there is a way to apply a deposit on a sales order, as with

                                                                                                                • Automating CRM backup storage?

                                                                                                                  Hi there, We've recently set up automatic backups for our Zoho CRM account. We were hoping that the backup functionality would not require any manual work on our end, but it seems that we are always required to download the backups ourselves, store them,

                                                                                                                • Archive Option in Conversation View

                                                                                                                  Hello, I have a suggestion\request to add an "Archive Thread" button in conversation view of Zoho Mail. The best suggestion I have is to put an "Archive Thread" button next to the "Label Entire Thread" button in conversation view. Most users don't just

                                                                                                                • Collapsing and expanding of lists and paragraphs

                                                                                                                  hello Would you ever implement Collapsing and expanding of lists and paragraphs in zoho writer ? Best regards

                                                                                                                • Does Zoho Writer have Dropdowns

                                                                                                                  I want to add a drop down field in Zoho writer. Is this possible?

                                                                                                                • Next Page