Extension pointers #4: Working with widgets to power-up extension capabilities (Part-1)

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 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.

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.


  • 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.
  • 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:

  • node -v
  • npm -v

Next, install ZET CLI. Run the following command to install the zapps cli node package:

  • npm install -g zoho-extension-toolkit

To verify if the installation was successful, run the following command. This command displays certain basic options and commands for your reference.

  • zet

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.

  • Zoho Service: Zoho CRM
  • Project Name: WidgetProjectDemo

Move to the project directory's' location and check the list of folders in it.

  • cd WidgetProjectDemo
  • ls

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.

  • cd app

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.

  • zet validate

Use the run command to start a local server with the current directory as context.

  • zet run

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.

  •   zet pack

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.

      Zoho Developer Community

                                Zoho Desk Resources

                                • Desk Community Learning Series

                                • Digest

                                • Functions

                                • Meetups

                                • Kbase

                                • Resources

                                • Glossary

                                • Desk Marketplace

                                • MVP Corner

                                • Word of the Day

                                    Zoho Marketing Automation

                                            Manage your brands on social media

                                                  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 WorkDrive Resources

                                                                      Zoho Campaigns Resources

                                                                        Zoho CRM Resources

                                                                        • CRM Community Learning Series

                                                                          CRM Community Learning Series

                                                                        • Tips


                                                                        • Functions


                                                                        • Meetups


                                                                        • Kbase


                                                                        • Resources


                                                                        • Digest


                                                                        • CRM Marketplace

                                                                          CRM Marketplace

                                                                        • MVP Corner

                                                                          MVP Corner

                                                                            Design. Discuss. Deliver.

                                                                            Create visually engaging stories with Zoho Show.

                                                                            Get Started Now