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
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
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 thisKaizen #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 howKaizen #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
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
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
Groups and Moderation
Hi, I have set up a Group in my organisation but am having trouble with moderation. The members are a mix of addresses within the organisation and external emails addresses. The issue is how to set moderation to be off whenever any of the members sendsIntroducing Radio Buttons and Numeric Range Sliders in Zoho CRM
Release update: 1. 2 March 2026: Currently out for CN, JP, AU and CA DCs (Free and standard editions). For other DCs, this will be released by mid-March. 2. 26 March 2026: CA, SA, AU, JP, CN DCs - Free, Standard, Professional, Enterprise, Ultimate, CRMZoho CRM Sandbox now supports integrations
Hello everyone, We are now expanding Zoho CRM Sandbox to support integrations with other Zoho products. You can connect, configure, and validate the behavior of your integrated tools within a safe, isolated environment - testing end-to-end without touchingArchiving Contacts
How do I archive a list of contacts, or individual contacts?Introducing the New Zoho Assist Quick Support Plugin
We are thrilled to announce the new Zoho Assist Quick Support Plugin, the upgraded and enhanced version of the Zoho Assist Customer Plugin. This new plugin allows organizations and IT administrators to deploy it directly onto their customers’ devices,What's New - June 2026 | Zoho Backstage
Hello everyone! We’ve rolled out a new set of improvements across Zoho Backstage to help you manage events more efficiently and provide a better experience for your attendees. Take a look at what’s new in this month’s update. Assign attendees later andMore Zia AI capabilities are included across additional Zoho Desk editions
Hello everyone, We are expanding the availability of AI-powered features in Desk to the other paid subscriptions from 7th July 2026. Right now, the following AI-based features are available for Enterprise edition users: Intelligence: Sentiment analysis,Summer release '26 should be called Enterprise Summer Release '26
Summer release '26 should be called Enterprise Summer Release '26 because almost all updates or the more useful ones, are limited for Enterprise subscriptions. us with Basic or Premium susbcriptions are basically left in the cold.Previous conversation title on new messenger widget translation
The title of previous conversations title on the new messenger widget personalisation appears in english even when spanish is selected as default languageExport Tickets from the Help Center
Hello everyone! We are now allowing end users to export tickets directly from the help center. The ticket export allows users to: Filter tickets by Department, Priority, and Account before exporting. Download files from Export History (Setup > Data administrationAccount Duplication Control in Zoho CRM
The Goal Prevent users from creating duplicate Account records in Zoho CRM. Accounts should be sourced from ERP and synced into Zoho—no. Allow to create Accounts if they don't exist in our ERP. What I've Implemented removed Account creation permissionsError 1011 saving website personalisation — blocking all changes (corrupted "home_page.content" field)
When trying to save changes under Settings → Brands → MY COMPANY → Website → Personalisation → Messenger, I receive the following error: "Either the request parameters are invalid or absent" upon checking on the developer console of the browser I getCanvas View: Add font family selection (incl. Google Fonts / Hebrew & RTL fonts)
Hi Zoho CRM team, The Canvas design suite (List View, Tile View, Table View and Record Detail) currently allows customizing font weight, size, color, alignment and case - but there is no option to choose the font family. All text is rendered in the built-inThis user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details
Hello, Just signed up to ZOHO on a friend's recommendation. Got the TXT part (verified my domain), but whenever I try to add ANY user, I get the error: This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details I have emailed as well and writing here as well because when I searched, I saw many people faced the same issue and instead of email, they got a faster response here. My domain is: raisingreaderspk . com Hope this can be resolved. Thank youIssue embedding image Zoho Books email signature
I am trying to embed my company logo to my email signature using the image url tool on the settings but I keep getting the following error: Enter a valid public image URL I am using a public link from either WorkDrive or OneDrive and I still get the sameE-Mail Distribution List
How do I create an e-mail distribution list in Zoho Mail?Tip #80- Secure Connect: Add an Extra Layer Before You Connect – 'Insider Insights'
Tip 80 – Secure Connect: Add an Extra Layer Before You Connect – 'Insider Insights' Hello Zoho Assist Community! Picture this: your support team relies on unattended access to keep the business running. Servers need overnight patches. Remote workstationsBusiness Whatsapp is not Showing
I’ve attached a screenshot from the Zoho CRM Android app when clicked the call button. It is showing Personal WhatsApp, which is not installed on the phone. Also, the installed WhatsApp Business account is not showing.How to access a unified inbox for more than one zoho accounts (using paid workplace services)
Hello, we are using zoho for a few months and also suggest your services, setting them up for our clients. Several from our clients, our company as well, use more than 1 email addresses. Using the web version, we are only able to add them as accountsModify a standard wedget to create my own customized wedget ?
Below is the std wedget available for dashboard which is great to show the the overdue, current, and all tasks as well as issues for each team member. My problem is this; The list of users cannot be edited (there are admin users which are not relavantAdvanced Formatted Resume Templates for Applications
Advanced Formatted Resume Templates can now be created and used directly from the Applications module, with support for application module fields. Until now, Advanced templates were limited to the Candidates module. That meant resumes generated from ApplicationsZoho Books | Product updates | July 2026
Hello users, We’re excited to bring you the latest updates in Zoho Books for July 2026! This month's release introduces Terminal Payments, CMP-08 filing for composition taxpayers, SEPA Credit Transfer support, the new Receipts and Payments Report forBoost your CRM communication with new font types, sizes, and default reply-to options while composing emails
Hello Everyone, We’re excited to introduce a series of impactful enhancements to the email composer settings in Zoho CRM. These updates enable you to personalize and optimize your customer interactions with greater efficiency. So what's new? Add customZoho CRM Community Digest - June 2026| Part 2
Hello Everyone! Welcome to the second half of our June Zoho CRM Community Digest! We are keeping the momentum going with powerful updates to filter out unnecessary email syncs, a revamped CRM Import tool, smarter follow-up updates in cadences, and ZiaMigrate from Zoho Mail to G Suite
I am unable to find any documentation on how one can migrate from Zoho Mail to another platform, like G Suite or Office 365. Please point me to the right documentation. Thank you.Zoho Desk Android app - Option to set an email template as default
Hello everyone! We have enhanced the Email Template section in our app by introducing the ability to set a template as default directly from the Zoho Desk Android app, making it easier to access your preferred template without repeated manual selection.Zoho Desk Android and iOS app update: Odia Language
Hello everyone! We have now brought in support to access the Zoho Desk app in Odia language. Please update the app to the latest version directly from the Play Store/ App Store or using the links below: Zoho Desk - Play Store Zoho Desk - App Store OnceHow to check Leads with no Task (open activity)
Hi everyone, I was wondering if there’s a way to view leads that don’t have any tasks assigned or open activities linked to them.How do I migrate from Office 365 to Zoho Mail?
Check out Advik Email Migration Wizard, this software is specially developed to move mailboxes from Office 365 to Zoho Webmail. In addition you can migrate from Gmail, Yahoo, Rediffmail and 80+ webmail servers to ZOHO MAIL. Isn't it amazing? This is an all in one email migration solution. Steps to export emails from Office 365 to Zoho Webmail are as follows; Run Advik Email Migration Tool in your system. Select Office 365 as source and enter its login credentials. Select mailbox folders and chooseFeature Request: Include Creator-applicable Deluge updates in the Creator Release Notes
I'd like to put forward a suggestion about how Deluge updates are surfaced to Zoho Creator developers, and I'm hoping the Creator team will consider it. Zoho Creator is built on Deluge. Every workflow, custom function, validation and schedule we writeBridging the gap between incident management and project delivery
As an organization, you can have structured backup plans to handle issues that arise during project execution. Despite best efforts, even efficient processes can fall into an escalation trap where a red flag travels up the tiers but no real action follows.Update on default settings for AI features in Cliq
Hello all, We'd like to provide clarity on a recent change to AI feature defaults in Cliq. As part of our regular review of AI features conducted in April 2026, we re-evaluated how these features are enabled by default. We've decided that the AI featuresAssociate Zoho Billing Invoices with multiple Zoho FSM Work Orders
Hello Latha, We are writing a custom Deluge automation script in Zoho FSM to handle monthly consolidated billing. The script successfully compiles line items from multiple completed Work Orders, interfaces with the Zoho Billing API, and generates a singleHow do I delete all my leads so I can start again?
How do I delete all my leads at one time so I can start again?Le cauchemar de PEPPOL avec Zoho Books
Après de longues hésitations — car je défends toujours les produits Zoho malgré leurs imperfections —, je me suis décidé à poster cet avis sur ce forum. En effet, depuis plus de 5 mois, les nombreux soucis relatifs à la facturation par PEPPOL semblentWhat is a realistic turnaround time for account review for ZeptoMail?
On signing up it said 2-3 business days. I am on business-day 6 and have had zero contact of any kind. No follow-up questions, no approval or decline. Attempts to "leave a message" or use the "Contact Us" form have just vanished without a trace. It stillnumber auto generate
There is a basic need for a function to auto generate numbers. Presently the help pages layout several confusing and non-working ideas. You will not get my subscription without a simple auto number function.Mailbox delegation - A secure way to enable collaboration
Admins often encounter scenarios where a user needs another team member to access and manage their mailbox during extended leave, role transitions, or while handling high email volumes. In such situations, ensuring business continuity without sharingService currently unavailable
The Zoho Mail Webmail is working, the Mail Admin Console is not: "Our service is temporarily unavailable, please try after sometime." How long must I wait to retry? edit: To add to this, the Webmail is not working 100% - I can open mail in the inbox,Email Opt Out Question
Has the problem where if a customer is emailed opt out prevents you sending standard emails? For me this feature is simply to stop any email marketing and should not block people from receiving emails via Zoho mobile, which makes no sense.Next Page