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

                                                                                                          • Work with Contacts who use multiple Emails / Manage obsolete Email addresses without loosing Emails in Context

                                                                                                            Hello List Work with Contacts who use multiple Emails Only after 1 week in using Zoho CRM productively we have contacts which randomly use 2 different email addresses. From the concept I've understood that Zoho CRM  offers two email fields which are recognized internally as such. Email Secondary Email But the email integration seems to check only Email and not Secondary Email and also not other custom fields defined as email type. Although I added the secondary email to a contact CRM created a second

                                                                                                          • Lead to Contact Conversion with multiple email address fields

                                                                                                            We are a B2C business with a strong repeat cycle, and as such it's not uncommon for customers to use multiple email addresses with us. We have both our Contacts & Leads modules set up with 3 email fields. (Primary Email / Secondary Email / Historic Email)

                                                                                                          • ViewID and Zoho Desk API

                                                                                                            I'm looking at the documentation for Listing contacts and it looks like you can filter by ViewID. I assume this is views created in a department or all departments. Is this correct? And if so, how do I find the ViewID for that view? EDIT: I see the view

                                                                                                          • Ability to Link Reported Issues from Zoho Desk to Specific Tasks or Subtasks in Zoho Projects

                                                                                                            Hi Zoho Desk Team, Hope you're doing well. When reporting a bug from Zoho Desk to Zoho Projects, we’ve noticed that it’s currently not possible to select an existing task or subtask to associate the issue with. However, when working directly inside Zoho

                                                                                                          • Automatically Update Ticket Status in Zoho Desk Based on Actions in Zoho Projects

                                                                                                            Hi Zoho Desk Team, Hope you’re doing well. We’re using the Zoho Desk–Zoho Projects integration to manage tasks related to customer tickets, and it works well for linking and tracking progress. However, there are a few important automation capabilities

                                                                                                          • Print Tickets

                                                                                                            We have field engineers who visit customers. We would like the option to print a job sheet with full details of the job and account/contact details.

                                                                                                          • Zoho Desk integration with Power BI

                                                                                                            Hi, I want to be able to create a Power BI report which has live updates of ticket data from zoho desk, is this possile at all? Thanks Jack

                                                                                                          • Ability to Attach Images When Reporting Issues to Zoho Projects from Zoho Desk

                                                                                                            Hi Zoho Desk Team, Hope you’re doing well. We’re using the Zoho Desk–Zoho Projects integration to report bugs directly from support tickets into the Zoho Projects issue tracker. This integration is extremely useful and helps us maintain smooth coordination

                                                                                                          • Ability to Choose Task List and Add Subtasks When Creating Tasks from Zoho Desk

                                                                                                            Hi Zoho Desk Team, Hope you’re doing well. We’re using the Zoho Desk–Zoho Projects integration to seamlessly connect customer tickets with project tasks. While the integration works great overall, we noticed two important limitations that affect our workflow

                                                                                                          • Sync Task Status from Zoho Projects to Zoho Desk

                                                                                                            Hi Zoho Desk Team, Hope you’re doing well. We’re actively using the Zoho Desk–Zoho Projects integration, which helps our support and project teams stay aligned. However, we noticed that when we change a task’s status in Zoho Projects, the change is not

                                                                                                          • Default/Private Departments in Zoho Desk

                                                                                                            1) How does one configure a department to be private? 2) Also, how does one change the default department? 1) On the list of my company's Zoho Departments, I see that we have a default department, but I am unable to choose which department should be default. 2) From the Zoho documentation I see that in order to create a private department, one should uncheck "Display in customer portal" on the Add Department screen. However, is there a way to change this setting after the department has been created?

                                                                                                          • Can we do Image swatches for color variants?

                                                                                                            We want to do something like the attached screenshot on our new zoho store. We need image swatches instead of normal text selection. We want to user to select an image as color option. Is this doable? I don't see any option on zoho backend. Please h

                                                                                                          • Zoho CRM IP Addresses to Whitelist

                                                                                                            We were told to whitelist IP addresses from Zoho CRM.  (CRM, not Zoho Mail.) What is the current list of IP Addresses to whitelist for outbound mail? Is there a website where these IP addresses are published and updated?  Everything I could find is over

                                                                                                          • Color of Text Box Changes

                                                                                                            Sometimes I find the color of text boxes changed to a different color. This seems to happen when I reopen the same slide deck later. In the image that I am attaching, you see that the colors of the whole "virus," the "irology" part of "virology," and

                                                                                                          • The difference between Zoho Marketing Automation and Zoho Campaigns

                                                                                                            Greetings Marketers! This post aims to differentiate between Zoho Marketing Automation and Zoho Campaigns. By the time you get to the end of the post, you will be able to choose a product that objectively suits you. What is Zoho Marketing Automation?

                                                                                                          • How to use Rollup Summary in a Formula Field?

                                                                                                            I created a Rollup Summary (Decimal) field in my module, and it shows values correctly. When I try to reference it in a Formula Field (e.g. ${Deals.Partners_Requested} - ${Deals.Partners_Paid}), I get the error that the field can’t be found. Is it possible

                                                                                                          • Zoho Mail Android app update - View emails shared via Permalink on the app.

                                                                                                            Hello everyone! In the latest version(v2.8.2) of the Zoho Mail Android app update, we have brought in support to access the emails shared via permalink within the app. Earlier, when you click the permalink of an email, you'll be redirected to a mobile

                                                                                                          • Let us view and export the full price books data from CRM

                                                                                                            I quote out of CRM, some of my clients have specialised pricing for specific products - therefore we use Price Books to manage these special prices. I can only see the breakdown of the products listed in the price book and the specialised pricing for

                                                                                                          • Weekly Tips: Manage External Images in Zoho Mail

                                                                                                            When you receive emails every day, whether from clients, newsletters, or services, many of them contain external images that automatically load when you open the message. While this can make emails look more engaging, it can also impact your privacy and

                                                                                                          • How to display Motivator components in Zoho CRM home page ?

                                                                                                            Hello, I created KPI's, games and so but I want to be able to see my KPI's and my tasks at the same time. Is this possible to display Motivator components in Zoho CRM home page ? Has someone any idea ? Thanks for your help.

                                                                                                          • Introducing Record Summary: smarter insights at your fingertips

                                                                                                            Hello everyone, We’re excited to introduce the Record Summary feature. This powerful addition makes use of Zia to simplify how you interact with your CRM data, providing a seamless, consolidated view of critical record information. Scrolling through the

                                                                                                          • Account in Quick View Filter

                                                                                                            I have a report that I often run against a specific Account. Every time, I have to go into the edit menu and change the Advanced Filter. I would prefer to use the Quick View Filter, but it does not allow me to use the one and only field that makes any

                                                                                                          • Insert Cookie Policy in Zoho Sites

                                                                                                            Hello, i need to insert a banner on my site because i'm in Italy so i have to respect EU laws for Cookie Policy and Privacy Policy. I see that i need to insert a code in <head> section of my site to show a banner/popup with cookie info. How i can do this? Thank you Luca

                                                                                                          • Unable to confirm Super Admin assignment — confirmation button not working

                                                                                                            I’m trying to change the roles within my organization. I am currently a super admin and would like to add another user as a super admin. When I attempt to confirm the action, a screen appears asking for my password to verify my identity. However, when

                                                                                                          • Delegates should be able to delete expenses

                                                                                                            I understand the data integrity of this request. It would be nice if there was a toggle switch in the Policy setting that would allow a delegate to delete expenses from their managers account. Some managers here never touch their expense reports, and

                                                                                                          • Let's Talk Recruit: Meet Zia, your all-in-one AI assistant (Part-2)

                                                                                                            Welcome back to Let’s Talk Recruit series. In Part 1, we introduced Zia and how AI is reshaping the way recruiters work. This time, we’re taking a closer look at how far Zia has come and how each update continues to simplify your everyday tasks. When

                                                                                                          • How do I fully delete a user account

                                                                                                            Hi, I have two old accounts on my CRM which are inactive and show as 'Closed' in the list of users. BUT they are basically still there. How do I fully delete these accounts? They appear in some parts of CRM still such as the on the contact record emails section. The on screen view of inactive users shows: [username] Closed CEO, Administrator User does not exist Cheers W

                                                                                                          • Function #9: Copy attachments of Sales Order to Purchase Order on conversion

                                                                                                            This week, we have written a custom function that automatically copies the attachments uploaded for a sales order to the corresponding purchase order after you convert it. Here's how to configure it in your Zoho Books organization. Custom Function: Hit

                                                                                                          • DKIM Now Mandatory - Changes to Zoho Forms Email Policies

                                                                                                            Hello Zoho Forms Users, This post is to inform you about an important update regarding the authentication of all email domains in your Zoho Forms account. This year, we are doubling down on our commitment to deliver a secure, seamless, and empowering

                                                                                                          • stock

                                                                                                            bom/bse : stock details or price =STOCK(C14;"price") not showing issue is #N/A! kindly resolve this problem

                                                                                                          • Kaizen #8 - Handling Recurrence and Participants in the Events Module via API

                                                                                                            Hello everyone! We are back this week with an exciting post—Handling recurrence and participants in the Events module through API. First things first—What is the Events module? "Events" is a part of the Activities module in Zoho CRM.  An event is an activity that happens at a given place and time. You can find Events on the user's Zoho CRM's home page, Activities home page, Calendar, and in other related records. What are the types of Events? Events are of two types—Recurring and non-recurring events.

                                                                                                          • Marketer’s Space - Get Holiday-Ready with Zoho Campaigns

                                                                                                            Hello marketers, Welcome back to another post in Marketer’s Space! Q4 is packed with opportunities to connect with your audience - from Halloween, Black Friday, and Cyber Monday, to Thanksgiving, Christmas, and New Year. In this post, we’ll look at how

                                                                                                          • Personalized demo

                                                                                                            can I know more about the personalized demo we are construction company and

                                                                                                          • User Filter not selecting All Items

                                                                                                            We are encountering 2 issues when using the user filter. When users are trying to search using the filter option, the OK button is grayed out. Users have to unselect or make a change before it filters properly. 2. When filtering and the OK button works,

                                                                                                          • Can I collect email addresses in a form??

                                                                                                            Can I add new subscribers to my email list (hosted in FloDesk) when they check a box and add their email address on a Zoho form?

                                                                                                          • Zoho CRM Android app updates: Kiosk and multiple file upload support for subforms

                                                                                                            Hello everyone, We've rolled out new enhancements to the Zoho CRM Android app to bring better mobile CRM experience and efficiency. Let's take a quick look at what's new: Kiosk Multiple file uploads for subforms Kiosk Kiosk is a no-code tool in Zoho CRM

                                                                                                          • Alerts for mentions in comments

                                                                                                            We are testing the use of Writer internally and found that when a user is mentioned in a comment, there is no email alert for the mention. Is this something that's configurable, and if so, where can we enable this option?

                                                                                                          • Subform Disabled Fields Should Remain Disabled on Edit/View

                                                                                                            Currently, when we disable a subform field using on user input or on add new row, it works perfectly during the initial data entry. However, when the record is saved and reopened for viewing or editing, these disabled fields become editable again. This

                                                                                                          • Is it really true that I can't set the default 'deposit to' account in 2025?

                                                                                                            I've been using Books for 7 years and the default account has never been a problem. I usually manually reconcile invoices and have never had a thought about which account. It has always been my account. However, I recently noticed that for the past 4

                                                                                                          • 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

                                                                                                          • Next Page