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
Unified Notes View For Seamless Collaboration
To facilitate better coordination among different departments and team members, the notes added to a record can now be accessed in all its associated records. With this, team members, from customer service representatives to field technicians, can easilyQ4 Europe In-person Zoho User Group Meetup: Streamlining Your Business Processes & Introduction to Zoho CRM for Everyone
Hello Zoho Community, We are excited to announce our upcoming Zoho User Group meetup in Europe! This session is designed to help you streamline your business processes using Zoho CRM, with a special focus on enhancing customer interactions and leveragingFormula fields - Request for dynamic recalculation / proper implementation
Hi Guys, I have a big problem with Zoho formula fields. They don't recalculate each time the record is viewed - only when a record is edited. Formula fields should be updated dynamically each time a record is retrieved. As an example: I have a formulaItems attribute questions
Many of my items have attributes, such as size and color. How can I add new fields to the "New Items" screen to capture that in my Purchase Orders, Items, and Sales Order pages? I only see these attribute fields when adding an Item Group. Also, on theOrganize and Track Phases with Phase Custom Views
Phase Custom Views let you filter and display phases based on specific criteria. This helps you focus on what’s most relevant for you and your team. Filter phases using criteria such as budget, status, and more. Share views with specific users or teamsRecord Asset Received as Payment
How exactly would you account for this in books? For example, I receive a mini computer for a review and I get to keep it after the video is published. Would debit my normal asset account (e.g. Computers) and credit an income account (e.g. Other Income).Invoice Line Item Report
Is it possible to run an 'Invoice Line Item Report'? The 'Invoice Details Report' shows one row per invoice. I would like one row per Invoice Line Item.Transform Your Customer Support with AI-Powered Chatbots in Zoho SalesIQ
Ever wondered how some companies seem to have superhuman customer support? Let's uncover their secret! In the digital age, customer expectations are skyrocketing. Did you know that according to McKinsey, 75% of consumers expect a response within fiveProgressive Invoicing
Progressing invoicing is needed for many industries. It would be great to see it implemented into Zoho Books as well. Set up and send progress invoices in QuickBooks Desktop (intuit.com)Client Script - mapping data from different module
Dear ZOHO Team Firstly I need to describe the need - I need to have data from Contacts module based on lookup field - the 5 map limit is not enough for me because I have almost 20 fields to copy So I have decided to make a Customer Script - and from unknownDORA compliance
For DORA (Digital Operational Resilience Act) compliance, I’ll want to check if Zoho provides specific features or policies aligned with DORA requirements, particularly for managing ICT risk, incident reporting, and ensuring operational resilience inFiles Uploaded to Zoho WorkDrive Not Being Indexed by Search Engines
Hello, I have noticed that the files I upload to Zoho WorkDrive are not being indexed by search engines, including Google. I’d like to understand why this might be happening and what steps I can take to resolve it. Here are the details of my issue: FileZoho Creator Upcoming Updates - December 2024
Hi all, We're excited to be back with the latest updates and developments on the Creator platform. Here's what we're going over this month: Deluge AI assistance Rapid error messages in Deluge editor QR code & barcode generator Expandable RTF and multiCustomer can't comment on SO or Invoice
Hi I just saw that my customers are not able to submit a comment either on invoices or sales order. What happens if my customer hits submit is just nothing. only a red line appears on top of the page which probalby indicates an error. I'm not able toZoho Creator customer portal limitation | Zoho One
I'm asking you all for any feedback as to the logic or reasoning behind drastically limiting portal users when Zoho already meters based on number of records. I'm a single-seat, Zoho One Enterprise license holder. If my portal users are going to add records, wouldn't that increase revenue for Zoho as that is how Creator is monetized? Why limit my customer portal to only THREE external users when more users would equate to more records being entered into the database?!? (See help ticket reply below.)See Calendar When Creating Meetings On Record Page
It would be a great user experience to see you calendar while you are creating a meeting on a record page. Here is how I imagine it could look:Saved filters, layout rule support, related list quick navigation, and more
Hello Everyone, We're excited to share some new features and enhancements in the Zoho CRM iOS and Android apps that will improve your mobile experience. These updates will make your CRM journey more efficient and user-friendly. Here's a look at what'sPower of Automation: Automatically send an email to all portal users with today's list of Open tasks.
Hello Everyone, A Custom Function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as to when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. Requirement:-Introduction of Robotics Process Automation in Zoho products
It will be great if Zoho can start advancing from automation to robotics process automation. For a start, it can be started with smart document understanding. Provide OCR engines Google cloud, Microsoft Azure Computer vision OCR, Microsoft OCR, OmnipageLock a custom field on a deal record but keep all other fields editable?
I have a custom field, which auto-populates a job number upon converting a lead to a deal but the automation breaks if someone accidentally edits that field. I want to lock that field but keep all other fields open. Is this possible? I've tried throughAdd Feature To Hide Plugin Sections On Record View
Hi team, I'm trying to help a client tidy up their CRM. When it comes to record view some sections and fields are visible no matter what Layout Rules are applies and they are not removeable from the layout editor. I would like to see an option to hideCreator Simplified #10: Predefine Form Field Values and Make Them Read-Only for Users
Hey Creators, Ready for this week's tip in the Creator Simplified series? Today, we will explore how to have read only fields in a form. Use Case: Assume a scenario where the default value for a Department field needs to be English Literature, but youfetch records from analytics table from creator
I have a creator workflow that I am working in that will compare data from within the app to a table in zoho analytics. Is there a way to fetch a record from Analytics? I have attempted a custom connector with analytics and tried to use it with invokeDirectly Edit, Filter, and Sort Subforms on the Details Page
Hello everyone, As you know, subforms allow you to associate multiple line items with a single record, greatly enhancing your data organization. For example, a sales order subform neatly lists all products, their quantities, amounts, and other relevantAbility to Change Custom View After Cadence Creation
Dear Zoho Team, I hope you are well. We would like to request an enhancement to the Cadence feature in Zoho CRM. Currently, during the creation of a Cadence, we can select a Custom View under the "Who is this for?" section. However, once the Cadence isZoho Creator Integration with QuickBooks: A Step-by-Step Guide
Introduction: Integrating Zoho Creator with QuickBooks allows you to sync your business data between the two platforms, providing a seamless experience for managing accounting, invoicing, and financial data. This integration helps automate workflows andNote not being pulled for other modules in email template
Hi there, Currently i am creating an email template that is able to pull the data from notes field in estimate module and email it to procurement team where they will be able to receive the email with the contents of the note, i am unable to replicateNo Sales Returns on SO's with Dropped Shipped items + Inventory Items
We have encountered an issue in Zoho related to sales orders that include both dropshipped items and inventory items. Specifically, it is currently not possible to create sales returns for the company’s own inventory items from these sales orders. ThisPre-fill TO and CC fields for Email Templates
This would be a game changer to be able to set either specific email addresses or merge fields based on deal role titles into email templates. Please pass this along to *hopefully* add to future features of Zoho CRM.Pick list - Cannot save list "Special Characters not Allowed" error message
Bulk uploading values. All values are pretty standard - with the exception of a "-" (dash). Like: Industry - Prepared Food Is the simple dash a special character too? JanFlow with CRM
Hello, I have a simple flow that uses a web hook to enter data into a Sales Order. I have the web hook sending Flow data which has a PO field. If the PO has a special character like - or / or \ the task fails. How can I get the flow to be okay with theMaking the Resolution Tab Mandatory
Hello Everyone! This edition is here to show you how to make the Resolution mandatory when closing a ticket. The Ticket Resolution tab helps keep a record of the solution provided for the ticket query. The resolution can serve as a quick reference toRemove County field from Customer Address input screen (or allow input to be deleted)
We are in the USA and have just noticed that there is now a County field in the Customer Address input screen (and maybe other areas of Zoho Books, but this is the one affecting us at the moment). County is not important to our business, and in fact weNotificación de cumpleaños
Hola: Se puede enviar alguna alerta de felicitación al personal que cumple años, que se dispare solo? Si existe como se puede hacer? SaludosAutomation#25: Move Tickets to Unassigned When the Owner Is Offline
Hello Everyone, Welcome to this week's Community Series! 'Tis the holiday season—a time when work often takes a brief pause. The holiday spirit is in full swing at Zylker Techfix too, with employees taking some well-deserved time off. During this period,Callback URLs
I need to connect to an external service through an API that requires me to provide a Callback URL so that a status update can be sent back when the API request has been processed. Is there a way to do this in Creator without having to use a middlewareEmail signature not being included if user creates ticket / sends email
When I create a ticket (send email), the signature doesn't appear to be added to the ticket. Can you confirm if this is the case? It would obviously be useful to include the user's signature even when sending a client an email and not only on replieZoho Notebook window ignores taskbar
When maximized to full screen, the Zoho Notebook window ignores the presence of the taskbar and overlaps it. What could be the problem? Linux Mint 22 Cinnamon. Zoho Notebook 3.2.0URL for job opening
I would like to ask you to add this feature to the product: create an unique url for each job opening on Zoho Recruit, so that I can add a link to it when I post the opportunity in a mailing list or on a forum.Document images
We used to be able to rotate the images but this has now been removed ???Next Page