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
Zoho FSM Video Tutorials
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Sneha Sridharan
Sticky Posts
Announcing the new SKILL.md for Zoho CRM and the updated OAS repository!
We are introducing a new zoho-crm skill to make working with Zoho CRM Developer tools (like APIs, functions, widgets, client scripts, queries etc) easier and faster, with the help of AI in your preferred AI harness like Claude Code, Codex, Cursor, VSCodeKaizen #261 : Using Zoho CRM Skill to generate complex COQL queries
Hello everyone, In the previous Kaizen posts, we introduced the zoho-crm SKILL.md and discussed how it can help you when you are working with Zoho CRM APIs and Client Script. In this Kaizen, we will focus on using the Zoho CRM `SKILL.md` with GitHub CopilotKaizen #256 - Build an Arrival Readiness Web Tab in Zoho CRM
Hi everyone! Welcome back to the Kaizen series! In the post, we discuss a use case in hospitality industry: how an Arrival Readiness web tab widget can be used to let reception staff identify and resolve issues before arrival of guests. Use case In theKaizen #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
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Billing Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Open Quote Ammount
Night, Is there a way to print the quote for a customer to show the dollar total for open quotes. Thanks RudyMinor Problem: Dashboard Forgets Cash vs Accrual
The dashboard doesn't reflect my cash/accrual choice from settings, AND doesn't remember what I've set it to.information on a suggestion how to treat old records in the - pipeline deals, notes, activities (tasks- events-calls) and emails etc.
Hi, I would like information or a suggestion on how to treat old records in the - pipeline deals, notes, activities (tasks- events-calls) and emails etc. ? As each option (pipeline deal, notes, activities, emails etc.) counts as a record and as we advanceAutomating Employee Birthday Notifications in Zoho Cliq
Have you ever missed a birthday and felt like the office Grinch? Fear not, the Cliq Developer Platform has got your back! With Zoho Cliq's Schedulers, you can be the office party-cipant who never forgets a single cake, balloon, or awkward rendition ofzoho stream web notifications
since im locked out of IMAP and cant use my mail app that lets my team collaborate and chat below emails, im trying out the zoho version of this... zoho streams. On the bottom of an email in the zoho mail web app, i "comment" and mention another user.New in Zoho CRM: Pre-fill Public Forms with CRM Data
Public forms just got more flexible! With the new Pre-fill Public Forms with CRM Data option in the Zoho Forms integration, people filling out your public forms can search for a CRM record, select the right one, and have the form automatically populateHEIC File Type Viewer
Hi, It would be nice to be able to click on the images in the All Entries/Reports Tables which are HEIC the same as JPG, PNG, etc. so they open in a viewer from Zoho or the Attachment Service, today HEIC requires you to download each image and open itZoho Books | Product updates | October 2026
Hello users, October brings a range of new features and enhancements to Zoho Books, designed to simplify compliance, streamline accounting workflows, and improve inventory management. From the launch of the Nigeria Edition and France’s e-invoicing capabilitiesSpecific ListView Canvas on Canvas Home Page Always Loads Most Recent ListView, Not the One Specified
I had mentioned this to ZOHO, but I mainly wanted to see if others in the Community are also facing this problem. I created a Canvas ListView for a Custom Module, and then created a Canvas Home page (technically on a tab item, but I'm not sure if thatprint preview
We are using microsoft edge, till 12 sep we were getting directly print option. Now we are getting this preview option we have to click print option again. How to bypass this-preview option?Zoho Projects - Has something changed regarding to linking Projects and Deals via the API?
I am trying to link Zoho Projects to Deals in CRM using the API, but each time, the Deal Contact is added as a Client user and receives an email invite asking them to join the organisation. These are internal projects and the customer should not haveConnection into Cliq?
I have the SalesIQ chat widget on my site using the Zohobot but I'm not always on and my employees don't keep it open all the time. We do have Cliq open all the time though so I'd love a way to manage those discussions directly in Cliq as they come in.Kaizen #264 - Using zoho-crm Skill to Write Functions
Hello CRM wizards, Welcome back to another week of Kaizen. In our previous Kaizens, we explored how the zoho-crm skill can assist you across various Zoho CRM developer tools. This time, let us see how it can help you write Deluge Functions, from simpleEdit Pinned Comments in Zoho Desk
It's great that private comments can now be pinned to the top of the ticket but what would be extremely helpful would be to allow for the pinned comment to be edited vs. having to find the comment in the ticket to edit it.Recover accidentally deleted mail account
Email account was accidentally deleted from admin console.mail sent to gmail goes directly to spam
Hi TKIM and SPF are configured and verified. E-mails coming from zoho to my personal gmail account are going directly to the spam folder. How can I solve this? I can send you guys the headers privately if you need to.Shopify Integration: How do I change the default Unit of Measure from KG to PCS
For those using Shopify with Zoho Inventory, has anyone managed to have imported items default to PCS/EA instead of KG? If so, where is this configured? I can only find weight units in Shopify, not a sales unit of measure.flexible subscription plan
Greetings! We currently have 5 Standard plans, but would like to add 5 mail-lite one just to receive emails (do not need other business features or storage. As Super Admin, I tried to do that my self but didnt see the option on your sales platform. Pleasemail
We want our tracked links in campaign and journey emails to use our own domain instead of the shared maillist-manage.net domain. We have already created the CNAME links.rexven.com → customer-campaign.zoho.com (DNS only). Does our plan support a customUseless support and impossible to add users for whom I paid for
Over a week ago i signed up for 5 emails addresses and 10GB, and so far I only have 1 email working, no access to the dashboard. Remote connection with "support"....useless Screen grabs sent to "support" useless Messages to "support"... now not answeringMr
can't access my emailReduce Mail Lite Renewal from 2 licenses to 1
Hello Zoho Support, I have a Mail Lite 5GB subscription with 2 licenses. have deleted the unused user, and now only 1 user/license is being used. My subscription is due for renewal, but the renewal page still shows 2 licenses and does not give me an optionAdding additional records dynamically to a subset of fields
I'm trying to create a service ticket layout which will be passed to a Creator application for Field Service Management (FSM) purposes. We need to be able to define a specific subset of service product fields such as "Service Product", "Service Product Serial Number", "Service Product Warranty End Date" and "Service Product Current Warranty Status". We may need to record more than one of these subsets, in case the customer has more than one product which has to be serviced on their site. It seemsPush error with Zoho Books and Zoho CRM
I have successfully linked Books and CRM but I have some push errors with the following message: "The customer associated to this record is not linked to module chosen in the current contact sync configuration." I am unable to work this out, could you help please.Function #24: Automatically display deal name from Zoho CRM on quotes in Zoho Books
Deals allow businesses to organize and visualize their sales pipeline. This provides a clear overview of all potential opportunities and helps in making informed decisions. Zoho CRM empowers you to create deals or potentials for your clients and monitor{"code":57,"message":"You are not authorized to perform this operation"}
In my trial version of Zoho account, I am trying to integrate Zoho CRM Contact Module with Zoho books but when i call API it gives such type of error {"code":57,"message":"You are not authorized to perform this operation"}. I am using refreshed tokenAllow widgets to be placed between native sections in the Ticket Properties panel
One of our biggest frustrations with the Tickets module is how rigid the Ticket Properties panel is. Every section there is built only from native Zoho Desk fields. We can add sections, rearrange fields, and pick layouts, but we can’t put anything custom#13 Understanding Your Zoho Invoice Limits
Ravi's busiest month was also the month his invoicing stopped working. He had been using Zoho Invoice comfortably for months. Then, just when business picked up, he hit a limit he hadn't expected. The problem wasn't that he had missed a payment or forgottenMap Dependency Upgrades in Zoho CRM
Map Dependency Fields enhancements are now available across all DCs. Hello everyone, We’ve introduced a set of enhancements to Map Dependency Fields to make setup simpler, faster, and more intuitive. Map Dependency helps control how values appear acrossHow to Allocate Incoming Purchase Stock to Specific Sales Orders in Zoho Inventory?
Hi all, We are using Zoho One Enterprise and need guidance on managing sales order–wise allocation of incoming stock in Zoho Inventory. Our workflow is: A customer order is received, and the Sales Order is confirmed. The sales team immediately createsHow to disable automatic ticket closure emails for specific outgoing communications?
Is there a way to disable the automatic "Ticket Closed" email notification for specific tickets or outgoing emails? Currently, every time we send an email to a customer, the system automatically sends a "Ticket Created" email, followed by a "Ticket Closed"Zoho Webinar - Sharing System Audio (NOT AVAILABLE)
Hi, We are having a serious problem with Zoho Webinar. In the webinars we run, we very often share the audio from a video we are streaming directly from YouTube or other applications. Until recently we were using Zoom, but as we use other Zoho applicationsWhat's new in Zoho Workplace | September 2026
Hello Zoho Workplace community! Here's a roundup of all the new features and announcements that went live across Zoho Workplace applications in September. Zoho Mail Compose Options Across Templates You can now use the Undo, Redo, and New List optionsUnable to export reports despite enabled report export permissions
Hi Zoho Community, We are unable to export reports in Zoho CRM. When attempting an export, we receive the following error: “Cannot Export Report — You do not have permission to export one or more modules used in this report. Please contact your administrator.”What does "Tickets for Review" do?
What is the purpose of the va nilla view " Tickets for Review?"Set department automatically for incoming calls
Is it possible, when receiving an incoming call through Zoho Desk (using Twilio integration), for the department to be auto-selected based on the phone line being called? Currently, we have to manually select the department from the dropdown menu whenZoho Desk training for administrators in EU and US region
Hello Everyone, Get ready for the certified Virtual Classroom training for our Zoho Desk users in Europe and the US. Our in-house Zoho Desk expert, @Dheeraj | Zoho Desk, will conduct the virtual classroom training. This training focuses on simplifyingSupport Plan: Recuring Issue
Hi Zoho Team, Could you please look into this recurring alert and provide clarification on why this restriction is still in place? This issue has become a bottleneck in our workflow, significantly limiting our automation capabilities. We are unable toWebinar de Zoho People: tecnología para RR. HH.
¿Y si RR. HH. pudiera estar tan conectado con el negocio como el resto de tu organización? La gestión de personas está evolucionando, y los departamentos de Recursos Humanos necesitan herramientas que les permitan ir más allá de las tareas administrativasZoho CRM still doesn't let you manage timezones (yearly reminder)
This is something I have asked repeatedly. I'll ask once again. Suppose that you work in France. Next month you have a trip to Guatemala. You call a contact there, close a meeting, record that meeting in CRM. On the phone, your contact said: "meet meNext Page