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 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
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! CommandsKaizen #165 : How to call Zoho CRM APIs using Client Script
Welcome back to another exciting Client Script post! In this post, we will discuss one of the most frequently asked questions: How do you call Zoho CRM APIs from Client Scripts? In this kaizen post, 1. Ways to make calls to Zoho CRM APIs using ClientKaizen#162 : Add Tags and Open Pre-filled Email Drafts via Client Scripts
Hello everyone! Welcome to another informative Kaizen post. In this post, let us see how to accomplish the following using Client Script. 1. How to auto-tag a record based on field update? 2. How to Open a pre-filled email draft This post will provideExtension Pointers - JS SDK series #4: Managing data from a widget using ZOHO.CRM.HTTP
Handling and managing the data between two applications is a major factor for an efficient business. There are a variety of ways to handle data between Zoho CRM and other third-party applications. You can use deluge CRM tasks, create connectors, use APIKaizen #152 - Client Script Support for the new Canvas Record Forms
Hello everyone! Have you ever wanted to trigger actions on click of a canvas button, icon, or text mandatory forms in Create/Edit and Clone Pages? Have you ever wanted to control how elements behave on the new Canvas Record Forms? This can be achieved
New to Zoho TeamInbox?
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 Campaigns 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
Translate any published presentation to the language of your choice
As part of our constant effort to enrich your presentation experience, Zoho Show has rolled out a new feature for translating published presentations. Consider the following scenario: Zylker IT services, a multinational corporation, has announced productBlueprint: multi-select lookup field not available in the criteria option
I read this old forum post which stated that multi-select lookup fields are now selectable as an option in a Blueprint transition configuration: https://help.zoho.com/portal/en/community/topic/blueprint-multi-select-lookup-field-not-available-within-blueprint-transitionApply Credit Note Automatically
We need the ability to apply open Credit Notes toward invoices generated by recurring invoice as the first, priority payment. This should be an option that we can enable/disable in the recurring profile and/or the Credit Note. Other invoicing systems can do this. I'm not sure why Zoho Invoice doesn't have it. Here's an example for a Recurring Invoice... If a customer has open Credit Notes, and a saved credit card set for auto-pay, once an invoice goes out, the credit balance gets automatically appliedWorkflow for "Expenses" module?
Hi there, over the last 2 years, Zoho Expense has seen tremendous growth and we are happy with it. But, sometimes it is frustrating to see things are being implemented halfheartedly, or so it seems. For example, There is the possibility to create workflowsRecord Template - Conditionally printing sections
Is there a way to conditionally print a section of a Record Template? More specifically I am printing records from a Form "Invoice". That Form has 3 SubForms. I'd like to print the content of those SubForms using a Record Template but only if they have at least one line item. If they have no line items, I'd like to hide the headers for that section on the printout.User can choose the PDF report
Hi. I would like to find out if a user (Creator or customer portal) to choose from the different PDF customised reports that have been built?Query table pull last 12 months
I am tying to pull the following criteria and the date is always what causes me the issue. I want to pull people (pco_id) who have entries of "event_id" being these 2 events and whos "kind" is Regular or Guest and where the event_starts_at (date column)PLEASE FIX Search options and consider a Global seach option
A recent update has removed the ability to search for addresses and phone numbers under contacts. We cannot find where this moved to (If it is still available). Please put these options back as we cannot locate specific projects anymore. Also please consider allowing for a Global search. This would really improve the search engine. For example: If I search for "Sally Jones" then all invoices , estimates, vendors etc.. would populate.. Please let me know if you need any more information. Thank You....Customize your calendar based on personal preferences
Greetings, We're happy to introduce a few new capabilities to the Activities module's Calendar View! Now you can tailor your calendar's appearance and notification settings to suit your needs. In the past, the Calendar View lacked customization optionsBUG ALERT: Client Script + Commands -> $Page contextual data is not updated
When using the new Client Script Commands feature, there is an issue with the Client Script $Page contextual data not accurately being updated each time a Command is run. Assuming a Client Script Command called "Client Script Command Bug" with the followingShow iFrame of related List inside of Blueprint Transition
Hey, is it possible to show an iFrame of a related list like this inside of a Blueprint transition?Lookup Fields not Converting
I manage holiday properties. I have a lookup to the Accounts (Properties) in the Leads module. The lookup is connected to the property address field. When I convert it the lookup field does not update in Deals, although the property address does. There2024: A Year of Transformation with Zoho Forms
As we close the curtain on another exciting year, it’s time to reflect on the strides Zoho Forms has taken in 2024. From empowering businesses with advanced tools to simplifying workflows and enhancing user experiences, our updates this year were allStop selling out of stock Items.
Hi I have been using Zohobooks for a around 8 month now. I am not involved in selling process but my staff cant stop selling product which they do not hold in stock, this is a big headache for me as physical count never matches what is shown on the books.Bigin API Token Request ("invalid_client")
Hi people, I tried to connect to the API without success, I've read all of the documentation multiple time and tried just about everything. I tried to do it with Python Request module and with Postman, passing the information through both the URL parameterCustomer Happiness not clickable when using API
Is there a way to automatically add the Customer Feedback links when generating email drafts via the API? Currently, the feedback links are only added when generating an email draft using the UI. I tried using the endpoint described in https://desk.zoho.com/DeskAPIDocument#CustomerFeedback#CustomerFeedback_GetthecustomerfeedbackplaceholderlinkSend To Zoho Sign not Showing
The button send to Zoho sign is not showing on my Zoho CRM . Is there additional steps I need to take after installing Zoho Sign to CRM ?How to Get An Image's URL once it's uploaded to library?
I manage to find URLs to the images I uploaded to my library, but after a day, it seems the links stop working like its only temporary. Where can I find the ACTUAL solid URL for my images that I upload to my Library so I can use them for my custom template / HTML coded template? Thanks, Mac【Zoho CRM】インポート機能のアップデート：既存データへのタグ追加が可能に！
ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 今回は「Zoho CRM アップデート情報」の中のインポート機能のアップデートをご紹介します。 Zoho CRMのタグは、データを効率的に分類、認識するためのラベルです。 タグ付けは次の3つの方法で行えます： 個別タグ付け：少数のデータを手動でタグ付け 自動化：特定のタイミングで繰り返しタグ付け 一括更新：インポート機能でタグを追加または更新 今回のアップデートでは、インポート時に既存のタグを残したまま、新しいタグの追加、既存タグを置き換えできるようになりました。Link to Desk tickets
Hello, We are using Analytics to analyze data in Desk. Is there a way to embed a link to a ticket in reports? We'd love to be able to see the drill down data, and click a value in a result row that would launch the Desk Ticket in another window/tab. Thanks in advance for any ideas!Bluerprints: How to connect the created record back?
I've a blueprint which creates another record as part of an 'After' transition. But the two records don't seem to be linked together. If it's not automatic - how do I get the created record ID to link it to the original record? Thanks!Populate a Related List Item based on a Stage
I would like to know if I can populate a CLOSED DEAL section in a contact that populates only when a Deal (something in the Deal Module) is listed as Closed - Won. I'd like another section that is just called deals, which shows me all other deals thatBeing able to draw inside a module ?
I was wondering if anyone know of a solution for this request. We would like to be able to draw directly from one module in the CRM and have it attached to that record. Here is an example. Paul would go to the customer once he as done the measuring, he2 serial numbers for 1 item (Mac address and Serial number)
There is a way to track 2 serial number type for 1 Item. Ex: Some electronic devices have a MAC address and a serial number. I need to track those 2 numbersHolidays
Hi; For defining Holidays, you need to add logic to handle the year as well as the month & day. We need to be able to enter Holidays for the next year. I need to add a holiday for January 2, 2017, but I can't until January 1st, which is a Sunday and weDelete a department or category
How do I delete a Department? Also, how do I delete a Category? This is pretty basic stuff here and it's impossible to find.Remove or hide default views
I'm looking to only have the views pertinent to my organization. Is there a way to show only my custom views (or separate them to a different area or something)? If not, this should be a feature as switching from Zendesk we had this option...Analytics Module: Can you move items from one dashboard to another?
Is there a way to move items from one dashboard to another? I want to rearrange my dashboard now that I know what i'm doing but i don't want to remake my various widgets? Edit: Hey Zoho, This would be a good feature: to be able to move/copy widgets toCopy Widget to another Dashboard
I can see the option to clone a widget to the same dashboard but is it possible to copy it to another dashboard?Is there a way to print the dashboard?
I would like the capability of printing the dashboard - is that possible?Custom Deal Name in Lead Conversion Mapping
I know there are ways to change the name of a Deal after conversion using a custom function, so no need to repost that information. I would like to see the CRM Improved with Deal Name Customisation and I think the Lead Conversion Mapping page would beIntroducing Record Summary: smarter insights at your fingertips
Hello everyone, Building on the recent launch of Zoho's in-house Zia Large Language Model (Zia LLM)—a major milestone in Zoho CRM’s AI capabilities—we’re excited to introduce the Record Summary feature. This powerful addition makes use of Zia LLM to simplifySuppress "spreadsheet will not be saved" message on published sheet
I have published a sheet and have one column on that sheet that the user can edit (a dropdown picklist where the user can select the status for each line). Is there a way to suppress the Zoho Sheet message "Any changes made to this published spreadsheetMissing "Email Authentication" tab
Backstage is alerting users about "Unauthenticated Domains" with a large prompt in the backend. It adds a link to learn more. On this tutorial page, it shows where to find the "Email Authentication" tab in this screenshot. However, in our Backstage, thatShow item Cost value on Item screen
The Item screen shows Accounting Stock and Physical Stock. It would be very helpful if value information could be displayed here as well, for instance Cost Price. Currently, to find the Cost Price (as used for inventory valuations) from inside the itemZoho Analytics to Zoho Sheets - automatic update?
Hi all, If I create a zoho sheet from an Analytics Report or Analytics Data, is there a way for the zoho sheet to automatically update as the Report / Data in analytics updates?Integration with Moodle
Greetings, I hope find all doing well and safe. I've recently returned to using Zoho Flow after a break and was hoping to connect my WooCommerce store with Moodle, the world's most widely used learning management system. My goal was to automatically enrollHow to Record Loan with interest
I have received loans from friend he give me like 2 loans so far one is one year repayment and one short, how to properly record his payment, and repayment and give him statement for each loan he give meTask status - completed - other options
I have a dumb question I know i can make custom statuses for the tasks - but is there anyway to make additional "completed" statuses like for instance if i have a task "call back customer" and i leave a vm for them to call back marking it "completed -Task module and related-to field
In modules other than the Task Module I can add several lookup fields to provide a variety of relationships. In the Task module lookup fields are not available. There is only one "related to" field which I want to use for Company. But I want to relateNext Page