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
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 #197: Frequently Asked Questions on GraphQL APIs
🎊 Nearing 200th Kaizen Post – We want to hear from you! 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 #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.Celebrating 200 posts of Kaizen! Share your ideas for the milestone post
Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQsKaizen #193: Creating different fields in Zoho CRM through API
🎊 Nearing 200th Kaizen Post – We want to hear from you! 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.Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands
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
Zoho Cliq - Incident alert (Server outage - IN DC) | August 28
We've received server down alerts and are currently investigating the issue (IN DC) to find the root cause. Our team is actively working to restore normal operations at the earliest. Status: Under investigation Start time: 09:44:21 AM IST Affected location:Claude + MCP Server + Zoho CRM Integration – AI-Powered Sales Automation
Hello Zoho Community 👋 I’m excited to share a recent integration we’ve worked on at OfficehubTech: ✅ Claude + MCP Server + Zoho CRM This integration connects Zoho CRM with Claude AI through our custom MCP Server, enabling intelligent AI-driven responsesHow to conditionally embed an own internal widget with parameters in an html snippet?
Hello everyone, I'm trying to create a dynamic view in a page using an HTML snippet. The goal is to display different content based on a URL parameter (input.step). I have successfully managed to conditionally display different forms using the followingSync more than one Workdrive
Hello Please I'm facing some difficulties since some days. In my company we have many zoho accounts in different organisations. And I have to find a way to sync all these Workdrives. I spend many hours to search it on zoho Workdrive but no solution. Could someone help me ? Any idea how I can achieve it ? Thanks in advance. RegardsHow can I see content of system generated mails from zBooks?
System generated mails for offers or invices appear in the mail tab of the designated customer. How can I view the content? It also doesn't appear in zMail sent folder.Limitations on editing a message in Cliq
Hi I've checked the documentations and there's no mention of how many times a message can be edited. When trying with code, I get various numbers such as ~1000 edits or so. Please mention if there's a limit on how many times one can change a message viaProblem with reports due to "Connected" items change - Yes this IS a problem
Now that the change has been made to use "connected" items I can no longer run the reporting I need in CRM. I should be able to start with Deals as the parent, connect down to the Account (Account_Name) on the deal as the child, then to any child itemsCRM x WorkDrive: File storage for new CRM signups is now powered by WorkDrive
Availability Editions: All DCs: All Release plan: Released for new signups in all DCs. It will be enabled for existing users in a phased manner in the upcoming months. Help documentation: Documents in Zoho CRM Manage folders in Documents tab Manage filesNarrative 10: Assignment Rules - Streamlining Ticket Management
Behind the scenes of a successful ticketing system: BTS Series Narrative 10: Assignment Rules - Streamlining Ticket Management In the complex world of customer support, a flood of incoming tickets can hit the help desk in seconds. Businesses must do moreFree webinar! Digitize recruitment and onboarding with Zoho Sign and Zoho Recruit
Hello, Tired of being buried in onboarding paperwork? With the integration between Zoho Sign and Zoho Recruit, a powerful applicant tracking system, you can digitize and streamline the entire recruitment and onboarding process, all from one platform.Custom form - Duplicate Value Present
I am new to Zoho People. I create a new form on Zoho People quite simple. A date (by default the current date) and a radio button with 3 options (Yes, No, Not applicable) I defined the date as ‘No duplicate’ as only one entry by date is allowed. I added:Zoho API connection issues
Hi, Today at around 1930 GMT our application started experiencing intermittent timeouts from the Zoho API. These intermittent timeouts are not enabling our app to work properly. The API connection was working just fine before. HTTPSConnectionPool(host='www.zohoapis.com',Query Regarding our Partnership between AIC-JKLU and Zoho
Dear Zoho Team, I am writing to raise a concern on behalf of AIC-JKLU, one of Zoho’s incubator partners. Recently, our startups have been facing difficulties while trying to get themselves onboarded on Zoho through our dedicated partner link. Unfortunately,Getting events in the future
Hi I am trying to get events in the future by calling this API Endpoint https://www.zohoapis.eu/crm/v8/Events?fields=Event_Title,Created_By,Created_Time,Start_DateTime But that gives me all events in the database. How do I make a query that returns allHow can I see content of system generated mails from zBooks?
System generated mails for offers or invices appear in the mail tab of the designated customer. How can I view the content? It also doesn't appear in zMail sent folder.Created Date/Invalid Fields
Since Saturday we have suddenly had issues with our webhooks and data retrieval from CRM. Specifically how Created Date is handled. It appears there was some sort of change within CRM that broke a lot of our code that has been in place for several years.Problem for EU users connecting Zoho CRM through Google Ads for Enhanced conversions
Has anyone else experienced this problem when trying to connect Zoho CRM through Google Ads interface to setup enhanced conversions? Did you guys get it fixed somehow? The Problem: The current Google Ads integration is hardcoded to use Zoho's US authenticationintegration zoho form - drive
I integrated my form with Google Drive. The report of user submissions from the Google Form becomes a Google Sheets table. When I used Google Forms for the same task, the summary sheet adapted to the form. For example, if I added a new field to the form,Revenue Management: #9 Revenue Recognition in Media & Publishing
Media & Publishing industry has evolved in recent times. It offers subscriptions, bundles digital and print access, runs sponsored content, and sometimes even sells ad spaces. If you run a media or publishing business, you will always get into a situationZoho CRM Community Digest - July 2025 | Part 2:
Hello, Everyone! We’re closing out July with a can’t-miss highlight: Zoholics Europe 2025! Happening from September to October, it’s your chance to level up your CRM skills, covering everything from automation and CPQ to dashboards and advanced workflows.How can I trigger a flow action only once while updating contact?
Hi, we have a trigger to merge&mail file when the field YYY is filled out. For this acion I used "Create or update module entry". But unfortunately we get tens of email on a day with this merged file, because the contact is being regularly updated. TheClone a Module??
I am giong to repurpose the Vendors module but would like to have a separate but very similar module for another group of contacts called Buyers. I have already repurposed Contacts to Sellers. Is it possible to clone (make a duplicate) module of VendorsCopy a Record Template from one Form to another
I have a Creator application with several forms. I developed a record template for one of the reports/forms but want to use most of it for another of the form/report combinations in the application. Is there a way to copy the template (code or otherwise) to another form?Tip of the Week #70 – Create common team signatures for your shared inboxes
Did you know that a small detail, such as an email signature, can make a big difference in how your brand is perceived? One simple yet smart way to enhance your team’s communication is by creating common team signatures for your shared inboxes. InsteadEnhanced data export features: XLSX format, custom character encoding, and selective record export
Greetings all, Here are a few enhancements related to exporting CRM data, including the ability to export data in XLSX file format now. The Export feature under Data Administration now offers new options that expand its flexibility and enable users toTip #42 – How to manage data security with Privacy Settings – 'Insider Insights'
Data privacy is a cornerstone of trust in remote support. Through Privacy Settings in Zoho Assist, you can set up how data is gathered, stored, and handled in your organization. These settings ensure compliance, data protection for sensitive details,Zoho DataPrep and File Pattern configuration
I'm using Zoho data prep to ingest data from One Drive into Zoho Analytics... The pipeline is super simple but I can't any way to get all the files that I need. Basically I need to bring all the files with a certain pattern and for that I'm using a regexIntroducing Dark Mode / Light Mode : A New Look For Your CRM
Hello Users, We are excited to announce a highly anticipated feature - the launch of Day, Night and Auto Mode implementation in Zoho CRM's NextGen user interface! This feature is designed to provide a visually appealing and comfortable experience forQuick Item Search & Auto-suggestion for Invoices
Hi Team, I am facing an issue while creating invoices in Zoho Books. Currently, I have to type the full item name in the correct sequence and spelling for it to appear. For example, my item name is: "Distemper Acri Silk Special White 10kg" If I type somethingEmpowered Custom Views: Cross-Module Criteria Now Supported in Zoho CRM
Hello everyone, We’re excited to introduce cross-module criteria support in custom views! Custom views provide personalized perspectives on your data and that you can save for future use. You can share these views with all users or specific individualsTicketbai! en el Pais Vasco
Hola a todos, En enero de 2.022 se va a implantar en el país vasco un nuevo sistema de facturación, denominado ticketbai!, ¿hay alguna previsión de realizar las adaptaciones en zoho books o zoho invoices? Ignoro la cantidad de clientes que tienen estasZoho CRM mobile app feature update: home page widgets, field tooltips and user image upload
Hello everyone! Your business doesn't pause when you're on the move, and neither should your CRM. That's why in our latest update, we've introduced a few new features to make your mobile CRM experience smoother and more efficient. Let's take a quick lookZoho CRM Plain Text Template: Line Breaks and Formatting Issue
Hello, I'm following the instructions to create email templates in Zoho CRM, but I'm having a problem with the plain text version. https://help.zoho.com/portal/en/kb/zoho-sign/integrations/zoho-apps/zoho-crm/articles/zoho-crm-email-templates#Steps_to_create_a_custom_email_templateOptimizing Task Handling: Auto-Remove Recurrence for cancelled Tasks.
Hello Everyone, A Custom function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. Requirement:Important updates to your connectors
Hello everyone, Greeting from Zoho Creator! We're excited to announce that we'll be rolling out significant backend updates to Zoho Creator's built-in connectors to enhance security by following the latest frameworks. The existing version of some of theCreate, collaborate, and manage agreements with Zoho Sign
Agreements drive business. We launched Zoho Sign in 2017 as a simple digital signature tool to sign agreements from anywhere, at any time. Over the years, we've learned that most agreements go through last-minute changes before they're signed. Our usersFunction #25: Automatically generate purchase orders from a sales order
We kicked off the "Function Fridays" series with the goal of helping you automate your everyday accounting tasks. As we delve into today's post, I'm delighted to announce that we're here to present the 25th custom function in this series. While it isHas Anyone successfully integrated Zoho and Sage Intact?
Hey all, We’re evaluating Zoho One + Sage Intacct and I’m trying to connect with anyone who has actually implemented the two together.Specifically, I’d love to know: -- Which functions you kept in Zoho vs. Intacct (e.g., Product Catalog, AR/AP, invoicing,5名限定 課題解決型ワークショップイベント Zoho ワークアウト開催のお知らせ (9/25)
ユーザーの皆さま、こんにちは。Zoho ユーザーコミュニティチームの藤澤です。 9月開催のZoho ワークアウトについてお知らせします。 今回はZoomにて、オンライン開催します。 ▷▷参加登録はこちら：https://us02web.zoom.us/meeting/register/6OSF2Bh6TumsMIlDwaY_PQ ━━━━━━━━━━━━━━━━━━━━━━━━ Zoho ワークアウトとは？ Zoho ユーザー同士で交流しながら、サービスに関する疑問や不明点の解消を目的とした「ZohoZoho Desk: Ticket Owner Agents vs Teams
Hi Zoho, We would like to explore the possibility of hiding the ‘Agents’ section within the Ticket Owner dropdown, so that we can fully utilise the ‘Teams’ dropdown when assigning tickets. This request comes from the fact that only certain agents andNext Page