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






                    Zoho Campaigns Resources




                          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


                                                          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

                                                                                                          • Enhancing Zia's service with better contextual responses and article generation

                                                                                                            Hello everyone, We are enhancing Zia's Generative AI service to make your support experience smarter. Here's how: Increased accuracy with Qwen One of the key challenges in AI is delivering responses that are both contextually accurate and empathetic while

                                                                                                          • Simultaneous use of WhatsApp Account in SalesIQ and ZohoDesk

                                                                                                            Hi, We have only one number registered in Meta, it's possible use same account for two apps? All times here we try is stopping in SalesIQ. Regards,

                                                                                                          • External lookup fields to synchronise with Analytics

                                                                                                            Hello. I suggest adding external lookup custom fields to the Zoho Analytics integration settings. Currently, these types of fields are not available for synchronisation, so they cannot be used to generate reports with related tables in Analytics. Thank

                                                                                                          • Can we create Sprint with tasks from Multiple projects?

                                                                                                            Hi Team, We were using Zoho Sprints for quite sometime. Currently we have started the process of Sprint method. We couldnt create the active sprint board with the tasks from multiple projects. I would like to know whether this is possible or Any timeline

                                                                                                          • We should have an option to Toggle Off KB Article Links in AI Answer Bot Replies

                                                                                                            Hi everyone, I'm creating this topic to share a feature idea that I think would improve the customer experience when using the AI Answer Bot for self-service. The Current Behavior (The Problem) Currently, when the AI Answer Bot generates a summary or

                                                                                                          • Boot Loop After Removing Service from Client via Admin

                                                                                                            We have multiple laptops experiencing a boot loop / unable to login after the Zoho Remote service was removed from their machine remotely via the desktop client. The Windows sign-in screen is not available, and users are unable to login. This seems like

                                                                                                          • Request Backend Correction — Domains Mapped to Same Help Center (Multi-Brand Setup Failure)

                                                                                                            Hello Zoho Desk Support Team, I need assistance correcting a domain-to-brand mapping issue in our Zoho Desk instance (The Blue Ribbon Project). Both of our verified domains currently point to the same Help Center instead of separate brand portals. Current

                                                                                                          • is there any option to enable the participants interact - can write on the screen, while the screen is shared by the host?

                                                                                                            this is most expected features - for teaching children. is there any option to enable the participants interact - can write on the screen, while the screen is shared by the host?

                                                                                                          • How to disable the Login button in Desk Helpcenter

                                                                                                            Hey there, I'm testing out whether the help center within Zoho Desk could replace our existing Customer FAQ. I tried to customize the themes for the public help center frontend, but stumbled across the login button in the navigation bar. Is there any

                                                                                                          • Very long loading times | bad performance [ZOHO DC: EU]

                                                                                                            Hello there, we have recently noticed that the loading times have become extremely long when retrieving tickets and ticket details. For example, I open any ticket and get the following view. The subject and standard information (ticket owner, status etc.)

                                                                                                          • Client Portal ZOHO ONE

                                                                                                            Dear Zoho one is fantastic option for companies but it seems to me that it is still an aggregation of aps let me explain I have zoho books with client portal so client access their invoice then I have zoho project with client portal so they can access their project but not their invoice without another URL another LOGIN Are you planning in creating a beautiful UI portal for client so we can control access to client in one location to multiple aps at least unify project and invoice aps that would

                                                                                                          • Introducing the locking option for CRM records

                                                                                                            Last modified on 06/04/2023: Record locking option in CRM is now available for all Zoho CRM users in all DCs. Note that it was an early access feature available only upon request. Hello All, Hope you're doing well! We're thrilled to introduce our latest

                                                                                                          • Create custom rollup summary fields in Zoho CRM

                                                                                                            Hello everyone, In Zoho CRM, rollup summary fields have been essential tools for summarizing data across related records and enabling users to gain quick insights without having to jump across modules. Previously, only predefined summary functions were

                                                                                                          • Remembrance Day to Remember – Recalling Values

                                                                                                            The phrase “at the eleventh hour” refers to the 11th hour of the 11th day of the 11th month in 1918, when the hostilities of World War I came to an end—but it still holds meaning today. Remembrance Day (Veterans Day in the US) is observed on November

                                                                                                          • CRM 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 files

                                                                                                          • Subforms in stateless forms

                                                                                                            I think the title says it all. We need to be able to add subforms to stateless forms. Currently the only workaround is to create a Form and delete each record upon submission of the form. I need to build an interface to update our inventory. Basically

                                                                                                          • Paste issues in ZOHO crm notes

                                                                                                            Hi, since a week or so I have issues with the paste function in ZOHO CRM. I use "notes" to copy paste texts from Outlook emails and since a week or so, the pasting doesnt function as it should: some text just disappears and it gives a lot of empty lines/enters.....

                                                                                                          • Standard Payment Term is not pulled from account to quotation

                                                                                                            Hey Team There seems to be something off. I do have "Net 30" as my default payment term in Zoho Books for my customers. If, from the customer overview or quote section, I create a new Quotation, the payment terms field stays blank and doesn't get the

                                                                                                          • Zoho Analytics Export API

                                                                                                            Hi Team, I’m working on some integration tasks and wanted to confirm if it’s possible to retrieve a Zoho Analytics table as JSON data using a Deluge script. I’ve already stored my custom data from multiple sources and combined it into a single source.

                                                                                                          • Best way to display complex Bookings Consultation Descriptions on Zoho Site?

                                                                                                            I am a new user so apologies if this has been asked before. I couldn't find any answers in the forum. We offer 18 complex Consultations to our subscribers. Our current platform lets me put detail on these Consultations thoroughly (200-300 words) during

                                                                                                          • Gmail is ramping up its email sender policy as of November 2025

                                                                                                            Hello marketers, As you may be aware, Gmail introduced a guideline for bulk senders starting February 2024. If not, here's a quick refresher straight from Google: After this policy was announced first in 2023 and soft-implemented in February 2024, we

                                                                                                          • Modifying iframe data of Zoho booking iframe

                                                                                                            Hello, I have integrated a Zoho Bookings embedded iframe into my website. Currently, I am pre-filling the booking form with default values as part of our process flow. However, I want to ensure that if an input field is already populated with a default

                                                                                                          • Zoho CRM Workflow and Function Backup Options

                                                                                                            Hi everyone! I have been able to make several backups of my CRM data and noticed that the Workflows and Functions are not included in these backups. To my knowledge, there is no backup feature for workflows and functions, which is problematic in of itself.

                                                                                                          • Enhance Sign CRM integration

                                                                                                            Hello all, I'm working on a custom Deluge script to enhance the integration between Zoho CRM and Sign by using a writer merge template for additional flexibility. I want to replicate the post-sign document integration that exists between CRM and Sign

                                                                                                          • YouTube Live streaming? how to? Zoom has this feature, built-in. Can't find it on zoho meetings.

                                                                                                            YouTube Live streaming? how to? Zoom has this feature, built-in. Can't find it on zoho meetings.

                                                                                                          • Is or will be possible to associate meeting transcription and summary, made by Zia, to meeting/contact/account record in CRM?

                                                                                                            Would be useful to keep context and track jobs, better if it will be auto

                                                                                                          • Zoho API to create ticket

                                                                                                            I'm developing an integration to create tickets via API, but, locally it works (send and recieve requests). In production it also works sending requests, but, my file don't recieve any response data. My URL is available in Zoho API Console and I have

                                                                                                          • Desk Field Not Showing in Analytics

                                                                                                            Hi there, I recently added a field to our Zoho Desk Ticket Information. I went and added the data retrospectively to the tickets. It is also marked as required, so all new tickets cannot be closed off without it being filled in. When I try to run a report

                                                                                                          • Export data using advanced export options and customizable settings

                                                                                                            Hello everyone, The user interface for exporting data has been revamped with updates to make data exports more flexible and efficient for users. These updates not only enhance usability but also bring advanced capabilities to help users extract precise

                                                                                                          • Retainer invoice in Zoho Finance modlue

                                                                                                            Hello, Is there a way of creating retainer invoices in the Zoho Finance module? If not can I request this is considered for future updates please.

                                                                                                          • Moving data from one pipeline to another

                                                                                                            Hey all, I've got some complex pipelines to build and I'd like to seperate them into seperate pipelines rather than have one mammoth one. If I create 2 pipelines, is there any easy way to use the output of Pipeline1 to be the input into Pipeline2? Or

                                                                                                          • How to export/find all deluge code.

                                                                                                            Hi, I have a large app wich contains several forms, reports, html views, I need to find thow my application if any contains specific word, I could find it manually by editing app and see on every section(field code, on succes, on load, etc) but I would like to do it faster. Is there a way to at least export it to a file the whole deluge code on my application?

                                                                                                          • Have Some Bugs in Zoho CRM Ask Zia Assistant

                                                                                                            Hi Support Team, I have found some bugs in Zoho CRM Ask Zia Feature Please Check below screenshot, insight option is showing twice i think its in early access that's why its have some bugs .

                                                                                                          • COD with Partial payment

                                                                                                            Two reasons why we need COD with partial payment option. 1) Since we deal heavy weight products our shipping costs are too high. If shipment is rejected by customer we incur huge loss. 2) Some competitors place fake orders with different names and return

                                                                                                          • Slicers are now available in Zoho Sheet—filter your data interactively

                                                                                                            At Zoho Sheet, we diligently track user requests and feedback. In line with this, based on extensive user requests, we've integrated Slicers to pivot tables and are delighted to announce its release. Slicers are interactive visual filters that have add,

                                                                                                          • Resizing a Record Template Background Inage

                                                                                                            Hi everyone, I have an issue which I can't seem to resolve: Basically, I'm designing a record template in certificate form. I've specified A5 landscape. I've set my background image the same dimensions with total pixels at 443,520. Whatever I try, when

                                                                                                          • Updated font library: New font styles and custom font options in Zoho Sheet

                                                                                                            Zoho Sheet's font library now supports 500+ font styles in 60+ languages! The updated font library is stacked with new font styles, and some of the previously available font styles have been replaced with equivalent options. There are two ways you can

                                                                                                          • Introducing Data Bars: Graphically represent changes in data within the cells

                                                                                                            Conditional formatting has helped millions of spreadsheet users analyze and highlight their data more efficiently. In addition to the classic rules, color scales, and icon sets available in Zoho Sheet, you can now apply Data Bars, a convenient method

                                                                                                          • Default Font Size in Desk

                                                                                                            How do I set my default font size in Desk? It takes me about 45 minutes to find the place to set it, then, when I sign out of Zoho and log back in, it's back to font 10 again. Seems like this would be simple, but like everything with Zoho, it's buried

                                                                                                          • Tip #19 - Create checkbox tracker in your spreadsheet

                                                                                                            Hello Sheet users! We are here with yet another tip to help you get the most out of Zoho Sheet. Spreadsheets can be used to handle a variety of tasks, but ever tried using checkboxes to track the progress of your action items dynamically? Here's a sample

                                                                                                          • Next Page