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

                                                                                                                • API credit COQL COUNT

                                                                                                                  The docs describe API credits in COQL from the LIMIT perspective: https://www.zoho.com/crm/developer/docs/api/v8/COQL-Overview.html When using aggregate functions such as `COUNT` or `SUM`, is that billed as 1 API credit?

                                                                                                                • Passing the CRM

                                                                                                                  Hi, I am hoping someone can help. I have a zoho form that has a CRM lookup field. I was hoping to send this to my publicly to clients via a text message and the form then attaches the signed form back to the custom module. This work absolutely fine when

                                                                                                                • Super Admin Logging in as another User

                                                                                                                  How can a Super Admin login as another user. For example, I have a sales rep that is having issues with their Accounts and I want to view their Zoho Account with out having to do a GTM and sharing screens. Moderation Update (8th Aug 2025): We are working

                                                                                                                • One Contact with Multiple Accounts with Portal enabled

                                                                                                                  I have a contact that manages different accounts, so he needs to see the invoices of all the companies he manage in Portal but I found it not possible.. any idea? I tried to set different customers with the same email contact with the portal enabled and

                                                                                                                • Disable Zoho Contacts

                                                                                                                  We don't want to use this app... How can we disable it?

                                                                                                                • Default Ticket View - Table?

                                                                                                                  Guys, We mostly use the table view to queue tickets. Maybe I am missing it - but how can I set that view as 'default" for all our agents? Thanks JV

                                                                                                                • Zoho One IS BUGGY

                                                                                                                  Here are some things that just don't work: - Disabling applications from certain Spaces - Adding users (probably only for me) - Renaming applications in Zoho One Portal (fixed by now) - Reordering applications in Spaces When I try to reorder: It feels

                                                                                                                • Paid Support Plans with Automated Billing

                                                                                                                  We (like many others, I'm sure) are designing or have paid support plans. Our design involves a given number of support hours in each plan. Here are my questions: 1) Are there any plans to add time-based plans in the Zoho Desk Support Plans feature? The

                                                                                                                • Merge Fields that previously worked are now giving an Error!

                                                                                                                  Saving a URL Link button on the Deal module. The below fields used to save without issue at all, but now produce an error of "URL contains unsupported merge field!" ${Contacts.Mailing Street} ${Contacts.Mailing City} ${Contacts.Mailing State} ${Contacts.Mailing

                                                                                                                • Move email between inboxes?

                                                                                                                  Is it possible to move emails from one team inbox to another? We would like to be able to have a single "catch-all" inbox for incoming requests, and then move the email to the appropriate department inbox. I was hoping we would be able to accomplish this

                                                                                                                • Clarification on Zoho Forms 1-User Plan: Multiple Submitters and Approvers

                                                                                                                  Question Content (Copy–Paste Ready) Hello Zoho Team, I would like clarification regarding Zoho Forms pricing and user limits. I am planning to subscribe to the ₹700/month (1 user) plan. My use case is as follows: Only 1 person (myself) will create and

                                                                                                                • CRM Cadences recognise auto-responses

                                                                                                                  I have leads in a Cadence. I get an auto-responder reply "I'm out of the office..." Normally Cadences seems to know that isn't a real reply and keeps the lead enrolled in the cadence. However, today, Cadences has UNENROLLED a Lead who sent an auto-reponse

                                                                                                                • App for Mac OS X please!

                                                                                                                  It would be awesome to have a mail app for Mac OS X that included all the cool features such as steams, calendar, tasks, contacts, etc. Most people prefer native apps, rather than running it through a web browser. I know that we can use the IMAP, CalDAV,

                                                                                                                • Facing Issues with Sites Mobile font sizes

                                                                                                                  my page renediaz.com is facing issues mobile view, when i try to lower font sizes in home page, instead of changing the size, it changes the line space

                                                                                                                • Zoho Books Payroll

                                                                                                                  How am I supposed to do payroll and pay my employees with Zoho Books? I think it's pretty strange that an accounting software doesn't have the ability to perform one of the most common functions in business; paying your employees. Am I missing something,

                                                                                                                • Different Task Layouts for Subtasks

                                                                                                                  I was wondering how it would be possible for a subtask to have a different task layout to the parent task.

                                                                                                                • 60 Days Into Zoho - Tiktok Branding Startup -7 Questions?!

                                                                                                                  Wsp Everybody I co-own a TikTok Branding / Consulting Startup & have been using Zoho for the past 60 days - Am now looking to make our overall operations & processes more Efficient & Effective! Curious to know how others are using the platform & what's

                                                                                                                • Notifications in Cliq client for Linux

                                                                                                                  If I got it right, Cliq desktop client for Linux does not use the generally accepted notification method via org.freedesktop.Notification interface. For this reason, Cliq notifications do not look and behave as all other notifications. Is it possible

                                                                                                                • Canvas templates can now be shared with different CRM organizations

                                                                                                                  ----------------------------------------Moderated on 14th February, 2023------------------------------------------- Dear all, This feature is now open for all users in all DCs. To learn more about importing and exporting canvas templates, read our help

                                                                                                                • Unable to produce monthly P&L reports for previous years

                                                                                                                  My company just migrated to Books this year. We have 5+ years financial data and need to generate a monthly P&L for 2019 and a monthly P&L YTD for 2020. The latter is easy, but I'm VERY surprised to learn that default reports in Zoho Books cannot create

                                                                                                                • Change Last Name to not required in Leads

                                                                                                                  I would like to upload 500 target companies as leads but I don't yet have contact people for them. Can you enable the option for me to turn this requirement off to need a Second Name? Moderation update (10-Jun-23): As we explore potential solutions for

                                                                                                                • Drag 'n' Drop Fields to a Sub-Form and "Move Field To" Option

                                                                                                                  Hi, I would like to be able to move fields from the Main Page to a Sub-Form or from a Sub-Form to either the Main Page or another Sub-Form. Today if you change the design you have to delete and recreate every field, not just move them. Would be nice to

                                                                                                                • Passing Info from Function to Client Script

                                                                                                                  Hello, I have recently started making use of client script for buttons, allowing me to give the user information or warnings before they proceed. This is great. However, I have never quite managed to pass back any extra information from the function to

                                                                                                                • Reply to Email for SO/PO

                                                                                                                  Hello, We are new to Zoho Books and running into an issue. Our support@ email is our integration user. When our team is sending out PO/SO's we are updating the sender email, but for some reason many of our responses are coming back to our support@ email

                                                                                                                • ZOHO Payroll Canada

                                                                                                                  Any plans on the roadmap for Canada?

                                                                                                                • What's New in Zoho Billing | January 2026

                                                                                                                  Excited about the latest enhancements in Zoho Billing? Our January updates bring an intelligent AI assistant, smarter subscription management, and improved tax compliance, saving you time and reducing manual work. Dive into the details below to see how

                                                                                                                • Zoho Books Sandbox environment

                                                                                                                  Hello. Is there a free sandbox environment for the developers using Zoho Books API? I am working on the Zoho Books add-on and currently not ready to buy a premium service - maybe later when my add-on will start to bring money. Right now I just need a

                                                                                                                • Multi-currency and Products

                                                                                                                  One of the main reasons I have gone down the Zoho route is because I need multi-currency support. However, I find that products can only be priced in the home currency, We sell to the US and UK. However, we maintain different price lists for each. There

                                                                                                                • Cliq iOS can't see shared screen

                                                                                                                  Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? Regards

                                                                                                                • ZOHO Writer Folders

                                                                                                                  Hi We would love to have ability to create folders on the left hand side. We would then be able create and store our documents within each folder Hope you can provide this feature soon ! dux.centra

                                                                                                                • COQL API in JS Widget only pulling 200 records

                                                                                                                  Hello! We've been building a custom homepage widget using the Zoho JS SDK, and it seems that this https://help.zwidgets.com/help/latest/ZOHO.CRM.API.html#.coql only allows 200 records. I thought the limit was 2000 for COQL queries, but am I mistaken?

                                                                                                                • How can Data Enrichment be automatically triggered when a new Lead is created in Zoho CRM?

                                                                                                                  Hi, I have a pipeline where a Lead is created automatically through the Zoho API and I've been trying to look for a way to automatically apply Data Enrichment on this created lead. 1) I did not find any way to do this through the Zoho API; it seems like

                                                                                                                • Do buttons and vba msgbox work on mobile, specifially the iPhone zoho sheets app?

                                                                                                                  In Zoho sheets on the web, I inserted a button and assigned a VBA macro to it. It pops up a msgbox with some text. When I go onto the iPhone mobile zoho sheets app, the button is there. When I click on that button, the spinning asterisk appears for a

                                                                                                                • Different form submission results for submitter and internal users

                                                                                                                  I'm looking for suggestions on how to show an external submitter a few results while sending internal users all the results from the answers provided by the external user. The final page of our form has a section with detailed results and a section with

                                                                                                                • Column letter from number

                                                                                                                  Hello, I am trying to select a cell and i have the column number. How do i do this or is there a way of getting the letter from the number? Thank you

                                                                                                                • Help Desk Services Solution

                                                                                                                  I am here looking for Help Desk services solution for organization. I also searched this on many different website and found many solutions. We are bit confused to which one to choose. One of my friend suggest me this platform, and i am hoping i will

                                                                                                                • Remove 'This is an automated mail from Zoho Sign' in footer

                                                                                                                  Hi there, Is it possible to remove or change the text under the e-mail templates? I can't figure out how to do that: Would love to hear from you. Kind regards, Tristan

                                                                                                                • Formatting and slow

                                                                                                                  Creating campaigns are difficult.  I'm fairly computer literate but some of the way Zoho Campaigns formatting works is painful.  Images fail to upload or are very slow. To top it off, syncing the contacts is a pain as well as temperamental links to create Segments. At this rate I'm afraid we might need to migrate back to Mailchimp.

                                                                                                                • Boost your Zoho Desk's performance by archiving tickets!

                                                                                                                  The longer your help desk operations are, the more likely it is to accumulate tickets that are no longer relevant. For example, ticket records from a year ago are typically less relevant than currently open tickets. Such old tickets may eventually lead

                                                                                                                • Paste emails to create segment

                                                                                                                  We are moving over from Mailchimp to ZOHO. However Mailchimp allows me to create a segment by pasting in emails from excel (or importing a .csv) can I do the same in Mailchimp?

                                                                                                                • Next Page