Using Zoho CRM Skill to Build Widgets

Using Zoho CRM Skill to Build Widgets


Hello everyone!
Welcome back to another exciting Kaizen post.
In the previous Kaizen posts, we introduced the zoho-crm skill.md and explored how it can help with Zoho CRM APIs, Client Scripts, complex COQL queries, and Skill to build Queries.

In this post, we will use the Zoho CRM skill to build a complete Zoho CRM Widget: a sales pipeline visualization that opens in a Zoho CRM Web Tab. The Widget retrieves Deal data, displays key metrics, and visualizes the pipeline using charts and filters.

Table of Contents

  1. Prerequisites
  2. What is a Zoho CRM Widget?
  3. Use Case
  4. New to Zoho CRM Skill?
    1. Creating the Widget with the Zoho CRM Skill- Prompt
    2. Preparing the Widget Workspace Automatically
    3. What Happens After You Submit the Prompt?
  5. Testing the Widget Locally
  6. Registering the Widget in Zoho CRM
  7. The Final Result
  8. Packing the Widget for Internal Hosting
  9. Conclusion
  10. Related Links

Prerequisites

Make sure that:
  1. Node.js and npm installed.
  2. Developer permissions enabled for your Zoho CRM profile.
  3. Permission to create Widgets in Zoho CRM.
  4. An AI coding agent with the zoho-crm skill installed.

What is a Zoho CRM Widget?

A Zoho CRM Widget is an embedded, iframe-based user interface built using HTML, CSS, and JavaScript.

Widgets can be used in several CRM locations, including:
  1. Web Tabs
  2. Dashboards
  3. Custom Buttons
  4. Custom Related Lists
  5. Wizards
  6. Blueprints
  7. Signals
  8. Settings
In this post, we will use the Web Tab placement.

Web Tab - Widget

A Web Tab allows us to open a custom interface from the CRM navigation menu. This makes it suitable for a full-page sales pipeline experience. The completed Web Tab will look like a dashboard, but it will be opened as a Web Tab Widget, not placed inside a CRM Dashboard.

Use case

Sales managers often need an overview of their pipeline without opening several modules and reports.
For this demonstration, we will build a Web Tab called Data Visualization.

The Widget will display:
  1. Total number of Deals
  2. Total pipeline amount
  3. Deals grouped by Stage
  4. A Deal Stage funnel chart
  5. Closing Date filters
  6. Pipeline filters
  7. A relationship graph connecting Deals to their related Accounts and Contacts through CRM lookup fields, with zoom/pan, hover tooltips showing a record's key details, and click-to-open navigation into the record's CRM module
  8. Loading, empty, and error states
  9. An Apply button that refreshes the funnel and graph together.
The Widget will retrieve data from these CRM modules:
  1. Deals
  2. Accounts
  3. Contacts
For this use case, the skill identifies Widget as the appropriate primitive because we need a custom user interface embedded within Zoho CRM.

New to Zoho CRM skill?

If you are new to the skill, see Kaizen #258: Getting Started with zoho-crm SKILL.md for an overview of supported agents, installation options, and project- or global-level installation.

Creating the Widget with the Zoho CRM skill

Prompt
Here, /zoho-crm is the skill. 
Quote
/zoho-crm  Build a Web Tab Widget called "Data Visualization Sandbox" that shows a Deals-by-Stage funnel and a graph of how Deals relate to Accounts and Contacts, with Closing Date and Pipeline filters.

Interaction requirements for the relationship graph:
  1. Support zoom in/out and pan
  2. On hover over a node, show a popup with the record's key details
  3. On click, navigate to/open that record in its respective CRM module
This prompt specifies the Widget placement, data source, functionality, and development workflow. 

Note: The developer must still review the generated code, verify API names, test the Widget, and configure the Web Tab in Zoho CRM.

The following video shows the prompt being submitted and the skill building the Widget.
View the video in full-screen mode


Preparing the Widget workspace automatically

You do not run the following commands yourself before prompting the agent. The zoho-crm skill's Widget workflow runs them automatically as its first step and informs you as each step completes.
  1. zet --version: Checks whether the ZET CLI is already installed
  2. npm install -g zoho-extension-toolkit: Installs the CLI, but only runs if the version check shows it's missing.
  3. zet init: Creates the Widget project, selects Zoho CRM as the service, and derives the project name from the Widget name specified in the prompt.  In this example, the project name is Data_Visualization.
  4. zet validate: After creating the Widget, the Skill automatically validates it using the zet validate command while processing your prompt. You do not need to run the validation command manually. The validation checks the Widget code and configuration for errors, structural issues, and rule violations.
Points to remember: 
  1. Zoho CRM skill  automatically handles the ZET CLI setup and Widget project initialization required for the Widget workflow.
  2. For manual initialization and execution of Widget, refer to the Kaizen index for Zoho CRM Widgets.

What happens after you submit the prompt?

After you submit the prompt, the AI coding agent uses the zoho-crm skill's Widget guidance to implement the requested functionality in your local project. The agent may ask for permission to create or modify files or run commands. Once you approve the requested permissions, it proceeds with the implementation.

The project structure may look like this:

The key files include widget.html, app.js, and style.css; D3.js is included under vendor. Review the code to confirm the requested functionality is implemented. The folder structure alone does not verify that the Widget works as expected.

You can see the important code here.

Testing the Widget locally

From the project directory, start the local development server: zet run

ZET will display a local URL, similar to http://127.0.0.1:5000/app/widget.html. Use the URL shown in your terminal, the address or port may differ.

To test CRM data access and the embedded SDK, register the local URL in Zoho CRM using External Hosting, then open the Widget from CRM. Opening the URL directly in a browser is useful for basic UI checks, but CRM features may require the Widget to run inside CRM.

At this stage, verify that:
  1. The Widget loads without a blank screen.
  2. The loading state is displayed.
  3. CRM data is retrieved.
  4. Key Performance Indicators (KPI) values are shown.
  5. Filters update the results.
  6. The funnel renders correctly.
  7. The relationship graph is readable.
  8. Empty and error states behave as expected.

During development, register the Widget in CRM using External Hosting so that you can test it within the CRM environment.

Registering the Widget in Zoho CRM

After the local Widget is ready:
  1. Open Setup in Zoho CRM.
  2. Go to Developer Hub.
  3. Open Widgets.
  4. Select Create Widget.
  5. Enter Data Visualization as the name.
  6. Select Web Tab as the placement.
  7. Choose External Hosting.
  8. Enter the local Widget URL.
  9. Save the Widget.


Associate the created Widget with the Web Tab
Go to Setup > Customization > Web Tab:
View the video in full-screen mode


The Final Result

The Widget can then be opened from the CRM navigation menu as a Web Tab. The important distinction is that this is a Web Tab Widget. It is not added as a component inside the CRM Dashboard.
Open the new Web Tab and test the complete experience.
View the video in full-screen mode


The final result is a custom sales pipeline workspace that runs inside Zoho CRM without requiring users to switch to another application.

Packing the Widget - only for internal hosting

Once the Widget has been successfully validated, you can package it using the following command: zet pack

Note: 
  1. You only need to run zet pack if you plan to switch the Widget to Internal Hosting. CRM requires a ZIP file to be uploaded for Internal Hosting.
  2. If you continue using External Hosting, as described in this post, you can skip the packaging step. The Widget configuration will continue to point to your running server URL.
  3. The zet pack command creates a ZIP archive, typically in the dist directory. You can upload this ZIP file in the Widget configuration when switching from External Hosting to Internal Hosting.

Automatically handled by Skill
  1. ZET CLI check/install
  2. zet init
  3. Widget implementation
  4. zet validate
Developer/user handles
  1. Review generated code
  2. Test the Widget
  3. Configure/register the Widget in CRM
  4. zet pack if Internal Hosting is required

Conclusion

In this post, we used the Zoho CRM skill to build a sales pipeline visualization as a Web Tab Widget. The Skill helps developers turn their requirements into a Widget by guiding them toward the appropriate Zoho CRM patterns and references.

Have you used Widgets to build custom CRM dashboards, Web Tabs, or record-level tools? Share your use cases in the comments.