Extension pointers #4: Working with widgets to power-up extension capabilities (Part-1)
Connected apps help bring Zoho CRM together with the third-party applications and services.
Connected apps provide support for exchanging data between Zoho CRM and third-party applications, authenticating other applications using single sign-on, and authorization methods to access Zoho CRM data. There are few ways connected apps offer integration facilities:
- Widgets
- SAML
Widgets
Widgets are embeddable UI components that can perform certain functions using data from third-party applications. You can enhance the existing functionality of your CRM by embedding these widgets into it.
SAML
Security Assertion Markup Language (SAML) is an XML-based standard that allows exchange of authentication data between services. Zoho supports the Single Sign-on (SSO) feature in connected apps through SAML. SSO is a session and user authentication service that permits a user to use one set of login credentials to access multiple applications. Here, Zoho acts as the identity provider (IdP) and the third-party application acts as the service provider (SP).
In this post, we will explore how a widget can be used in building a connected app. We will look at the steps to install the CLI and create a project for a widget in it.
Zoho CRM integrations with widget support
If you know how to build extensions that integrate Zoho CRM with third-party applications, then you know how to handle the exchange (get and set) of data between the services. When you build these types of integrations and push data into Zoho CRM, you will be pushing the data into standard or custom modules in Zoho CRM.
Let's think about it from a scenario where you need to show data from the third-party application in a customized view in CRM. In this case, you can create your own customized GUI component and embed it into Zoho CRM. Similarly, if you need to add a new feature to Zoho CRM along with a customized UI, you can create your own customized GUI and embed it into Zoho CRM to perform that functionality.
- Are there any prerequisites to build a widget?
- If so, what are they?
- How do you create a widget?
- How do you embed widgets in Zoho CRM?
- How do you test a widget?
You will find the answers to all your questions in this post.
Widgets are GUI components that can be embedded in Zoho CRM to extend its functionality. Let's look at a telephony widget as an example. A CRM sales representative needs to have regular calls with potential leads as part of their strategy to increase their customer base. Embedding a telephony widget into Zoho CRM helps the representatives make calls by simply clicking on the telephone icon in Zoho CRM. Using widgets, a dial pad can be easily embedded in Zoho CRM and the dial operations can be handled from the CRM itself.
To gain the benefits of widgets, you will need to understand the following steps:
- Installing CLI: Install a command line interface and set up the development environment to create a widget.
- Creating a widget: Add the required resource files of a widget.
- Embedding a widget: Create a connected app and embed the widget in Zoho CRM ready for use.
Before looking at the steps to install a CLI, let's take a look at its prerequisites.
Prerequisites
Node.js
- Serves as the base platform for creating a widget.
- An open-source, cross platform, javascript environment that executes javascript code outside of a browser.
npm (Node Package Manager)
- The default package manager for the Node.js environment.
- Contains all the essential packages to create a widget.
JS SDK
- Certain Zoho CRM APIs are required for the javascript code to interact with Zoho CRM.
- These Zoho CRM APIs are bundled together and are available in the JS SDK.
Command Line Interface (CLI)
- CLI is a text-based interface that is used to interact with software through commands and get a response.
- ZET (Zoho Extension Toolkit) CLI is the tool that enables you to build, test, and package extensions for Zoho products.
Installing ZET CLI and Creating a Widget
Creating widgets for Zoho CRM enhances functionality and simplifies your work.
To build a widget and integrate it with Zoho CRM, you need to set up the required development environment. Visit this page and download the latest version of Node.js. This will include the Node Package Manager.
Run the following commands to verify and check the installed versions of Node.js and Node Package Manager:
|
Next, install ZET CLI. Run the following command to install the zapps cli node package:
|
To verify if the installation was successful, run the following command. This command displays certain basic options and commands for your reference.
|
Now you are ready to create a new project for your widget. Use the command: zet init.
This command prompts you to select the Zoho service you want to create a widget for followed by the project name. Choose Zoho CRM and enter the project name. The project will be initialized with the NPM dependencies.
|
Move to the project directory's' location and check the list of folders in it.
|
Change the directory location to the app folder. The app folder includes the widget.html file and is the appropriate folder to store all the required resources.
|
To include the required resources, let us set up a directory structure in the app folder by creating folders for HTML, CSS, and JS. It is always a good programming practice. Provide structure, definition, and logic for your widget by adding HTML, CSS, and JS files into the appropriate folders in your project:
- HTML files for the UI layer need to be added to the HTML folder. CSS files need to be added to the CSS folder.
- Define your desired business logic through Java script and add the files to the JS folder.
- In addition to these JS files, you will have to add the JS SDK ZohoEmbededAppSDK.min.js from here.
Run the validate command to check if your project resource files pass all the validation rules.
|
Use the run command to start a local server with the current directory as context.
|
Copy the URL produced and paste it in your browser to see the output locally.
Finally, run the pack command to pack all the files in the project. It will zip the files an place them in the dist folder of the project.
|
After testing the widget locally and packing it into a zipped file, the next step is to host the widget and embed it in Zoho CRM.
In this post, we have covered the steps to install ZET CLI and create a widget project. In the next post, we will explain how a widget can be associated with a connected app and be embedded into Zoho CRM in an extension. For more information, keep following this space.
Access your files securely from anywhere
New to Zoho Recruit?
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
Nanditha Somasundaram Somasundaram
Sticky Posts
Kaizen #198: Using Client Script for Custom Validation in Blueprint
Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.Kaizen #197: Frequently Asked Questions on GraphQL APIs
🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.Celebrating 200 posts of Kaizen! Share your ideas for the milestone post
Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQsKaizen #193: Creating different fields in Zoho CRM through API
🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.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! Commands
New to Zoho TeamInbox?
Zoho TeamInbox 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
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
calendar I created in Zoho Creator not being imported to Google calendar any longer
A calendar that I created in my Zoho Creator app is no longer updating (or showing up at all) in my google calendar. It used to export appointments I set up in my app to google calendar. I cannot figure out how to correct this.Create Encrypted Zoho Forms URL for SMS Pre-Population forms using zfcrm_entity=
Hello Zoho Forms Community and Zoho Team, I’m trying to send a Zoho Forms URL via SMS with pre-populated CRM contact data, inspired by a post from four years ago by GlennP (https://help.zoho.com/portal/en/community/topic/passing-the-crm). Our form isPassing the CRM
Hi, I am hoping someone can help. I have a zoho form that has a CRM lookup field. I was hoping to send this to my publicly to clients via a text message and the form then attaches the signed form back to the custom module. This work absolutely fine when[Important announcement] Zoho Writer will mandate DKIM configuration for automation users
Hi all, Effective Dec. 31, 2024, configuring DKIM for From addresses will be mandatory to send emails via Zoho Writer. DKIM configuration allows recipient email servers to identify your emails as valid and not spam. Emails sent from domains without DKIMColor 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," andCondition to skip recipient signature
Is there a way, alone or with a Zoho Form integration, to skip a recipient signature when a condition is set? This happens because in this template, not always all the recipients need to sign it. Sometimes its just a few. We are using a Zoho Form integrationMail Merge Stuck in Queue
I am trying to send Mail Merge's and it never sends out to the full list. It always hits a portion and the rest remain in the "Queue" - the emails I am sending are time sensitive, so I need this to be resolved or have a way to push the emails throughIs Zoho tables still being developed?
Has this product been abandoned? I haven't seen any useful new features or stability improvements over the past six months or more. I think Tables is a great concept, filling a niche between spreadsheets and full database tools, but the current implementationZoho CRM sync
Just wondering if the plan is for the Zoho CRM implementation to always be just an import and not a sync? At the very least, a one-way sync that kept the data in Tables up-to-date would increase the amount of usecases, but ideally the option to two-wayHow to create a directory report from one-to-many relationship
Hi all, Newbie here. I'm converting an Access DB to Creator. I've learned Forms are tables and Reports are used to edit table rows, not Forms. I've got the data loaded and can maintain it with the Reports already done. I've done filtering and sorting,How to Delete Old Tasks/Streams Assigned by Deactivated Users? 'Operation Not Permitted' Error
Hello, I’m using Zoho Mail and have several old tasks assigned to me in Tasks and Streams. These tasks were created by former employees whose accounts are now deactivated. When I try to delete these tasks, I get an "Operation Not Permitted" error. TheseProfile date settings
At present I have "EEE, MMMM dd, yyyy" but this takes an exessive amount of column space, we should be able to input our own format. I would like to use "EEE, MMM dd, yy" - a much shorter version of the above but with the same abbreviated info, requiringWich version of Backstage is included in Zoho One
Hello I am in the event business and i am considering Zoho One to replace my current tools. I will need Backstage to manage my events but I am wondering wich version of backstage will I get if I subscribe to Zoho One. Thank you GuillaumeHow to restore deleted campaigns?
I accidentally deleted my first campaign that went out today (08/21/18). How do I restore it?Organize and Clone Task Custom Views
We have rolled out two new enhancements to task custom views: Custom View Groups and Custom View Clone. Custom View Groups Similar to predefined view groups, we have introduced groups for custom views to help organize and categorize them. My Custom Views:Unveiling Cadences: Redefining CRM interactions with automated sequential follow-ups
Last modified on 01/04/2024: Cadences is now available for all Zoho CRM users in all data centres (DCs). Note that it was previously an early access feature, available only upon request, and was also known as Cadences Studio. As of April 1, 2024, it'sStock Count History in Product Details – Zoho Inventory
Hello Zoho Team, When I perform a Stock Count for a product in Zoho Inventory, I would like to view the history of those stock counts later — especially from the product details page. Currently, I can perform the count and update the quantity, but I’mKits: Option to Hide Associate Items on Documents
The new Kit type of Composite Item is very helpful, and we're already using it in several different ways. One problem is that there seems to be no way to hide the components on some documents, including Package Slips. There is an option given in settingsPick List Issues
I have created a pick list that looks at a table in a sheet, it selects the column I want fine. Various issues have come along. The option to sort the pick list is simplistic, only allows an ascending alphabetical sort. Bad luck if you want it descending.Zoho Books CREDIT LIMIT is completely USELESS due to a BUG!!! Please fix it ASAP!!
Credit Limit should not be taken into account if payment terms on the Invoice are without credit. If selected Credit 0 days (Prepayment) why in this world would a notification pop up saying credit limit is exceeded and not allowing to create an invoice?Show 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 itemShow all items making up the composite item in transactions
Dear Zoho, Currently, when we select a composite item in Zoho Inventory for a transaction, we do not receive a breakdown of the individual items that make up the composite. This makes it challenging for our team to accurately pick, pack, and ship theIs it possible to adjust the web browser tab title (when a ZoHo Desk ticket is opened)
Hi All, When I open a ZoHo Desk ticket in a web browser, the tab title (text that appears at the top of the browser tab) uses the logic: *company icon picture* (xxxx) #ticket number - company name See below (highlighted in red) for reference. CompanyConfigure ChatGPT in Zoho Cliq | Now with GPT-4!
Updated for GPT-4 Support: The post and scripts has been revised to take advantage of the new GPT-4 model's capabilities. Please use the updated version for enhanced performance and accuracy. If you have been on the internet for the past few months, youEditing the text on the Help Center home page
Is it possible to edit the "Welcome to Help Center" message anywhere? This one: We'd like to be able to tailor it a little more ourselves.Upcoming Changes to LinkedIn Parsing in Resume Extractor
Starting 31 July 2025, the Zoho Recruit Resume Extractor will no longer support direct parsing of candidate data from LinkedIn profiles. Why Is This Change Needed? In accordance with LinkedIn’s platform policies, extracting profile data through browserHow to Initiate WhatsApp Message on SalesIQ?
I've just activated a Business WhatsApp phone number through SalesIQ because of its touted omnichannel chat approach. Sounds exciting. I understand that when a customer sends me a WA message, I can reply to it on SalesIQ and keep the chat going, perfect.Have completed Zoho Sign documents attach automatically to contact and/or account
Hello, Just used ZohoSign for the first time to get an e-signature on an important document. Setting up the template was nice and easy and configuring the request to go to the right people and training a member of staff was also very easy. HOWEVER WhyRich Text For Notes in Zoho CRM
Hello everyone, As you know, notes are essential for recording information and ensuring smooth communication across your records. With our latest update, you can now use Rich Text formatting to organize and structure your notes more efficiently. By using"In Zoho CRM, during the Blueprint transition to the QC stage, I want to make the 'Packing Proof' image field mandatory."
@Dr Saurabh Joshi @Haiku Technical Support @Ishwarya SG @Sparrow Hill President @Hugh Marshall "In Zoho CRM, during the Blueprint transition to the QC stage, I want to make the 'Packing Proof' image field mandatory."Using email "importance" as workflow-criteria
I'd like to set up a workflow that triggers if an incoming email has been flagged as "high importance" but I'm not seeing any way to do that. Hopefully I'm just missing something obvious...?Send emails directly via Cases module
Greetings all, The ability to send emails from the Cases module, which users have been eagerly anticipating, is now available, just like in the other modules. In Zoho CRM, Cases is a module specifically designed for managing support tickets. If your organizationCurrency transition
We are using Zoho CRM in Curacao, Dutch Caribbean. Our currency is currently the ANG. Curacao will be transition ing from using the ANG (Antillean Guilder) to using the XCG currency (Caribbean Guilder) on March 31st 2025, see: https://www.mcb-bank.com/caribbean-guilder.Update Lead Status in Zoho CRM When a Meeting is Booked via Microsoft Bookings
Hi everyone, I’m trying to streamline our lead management process and would like to automatically update the Lead Status in Zoho CRM whenever a meeting is booked through Microsoft Bookings. Has anyone successfully implemented this kind of integrationHow to link web sales payments through Stripe to invoices?
I have just set up an online shop website which accepts payments through Stripe. The payment appears in Zoho Books through the Stripe feed as 'Sales without invoices'. In order to keep Zoho Inventory in step, I manually (for now) create a Sales InvoiceZoho Website Site Speed Up & Setting
We are experiencing slow loading speeds on our Zoho website and would like assistance in optimizing its performance. Kindly review the site and suggest or implement necessary improvements to enhance speed, especially related to: > Caching mechanisms >Kaizen #199: FAQs on Multi-Select Lookup (MxN) Field in Zoho CRM
Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone. GotNFC Support
Hi, I would like NFC Support like Zoho Creator, to pre-fill field values by scanning an RFID device. Zoho Creator NFC here: https://www.youtube.com/watch?v=F4JoMWnF82I Both on a Field's User Input (Mobile Apps), in additon to QR Code & Barcode today,Zoho Desk Android app update: Enhanced UI of the History tab.
Hello everyone! In the latest Android version(v2.9.10) of the Zoho Desk mobile app, we enhanced the UI of the 'History' tab within a ticket. Also, we have introduced a filter option to easily search the history based on the actions performed on the ticket.UK Registration for VAT with existing stock/inventory
We have an existing inventory of stock and are investigating how to handle the conversion from a UK VAT unregistered company to a UK VAT registered company. Enabling VAT registered status looks extremely easy, but we cannot find any way within Books toNext Page