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

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





    Access your files securely from anywhere


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

                                                                                    Get Started. Write Away!

                                                                                    Writer is a powerful online word processor, designed for collaborative work.

                                                                                      Zoho CRM コンテンツ






                                                                                        Nederlandse Hulpbronnen


                                                                                            ご検討中の方





                                                                                                  • Recent Topics

                                                                                                  • Why can't I see the delivered Zoho Campaign automation email on Zoho CRM lead record?

                                                                                                    I recently did update the field mapping on our Leads sync services between Zoho CRM and Zoho Campaigns. The end goal is to create tailored email drip campaigns with the use of segments and automation. I understand you can build cadences, email templates,
                                                                                                  • Why can't I see the email from Zoho Campaigns Automation under Zoho CRM Leads module?

                                                                                                    I recently did update the field mapping on our Leads sync services between Zoho CRM and Zoho Campaigns. The end goal is to create tailored email drip campaigns with the use of segments and automation. I understand you can build cadences, email templates,
                                                                                                  • Linkedin - Recruiter System Connect

                                                                                                    Hi there! Does anyone here know how to connect Zoho Recruit to Linkedin Recruiter via Recruiter System Connect?
                                                                                                  • Lead Owner not importing all users only main user

                                                                                                    I have set up 3 users, 1 CEO, 2 Managers, all users have been verified. I'm using the Free ZOHO version. When I go to import Leads my Excel file has these 3 users listed as the Lead Owner. However when the import completes only 1 user is displayed as
                                                                                                  • Custom Function to Format Phone / Mobile numbers in Australian Standard format

                                                                                                    So I got sick of phone numbers being formatted incorrectly and Zoho not doing anything to standardise phone numbers to meet E.164 formats. So I went and coded my own function to fix this. And figured I'd share with the community This is specifically for
                                                                                                  • Getting Data into zoho calendar from a creator app

                                                                                                    So how do you get a date that's created in an app, for example when a site visit is due, into the zoho calendar for the field engineers.
                                                                                                  • Create deal from estimate

                                                                                                    Hello, I have integrated CRM and books. I created an estimate on CRM but I would like to allocate that estimate to a deal with the contact. How can I do this please?
                                                                                                  • Lookup field, odd issue

                                                                                                    So I tried creating and app that has the names of engineers so I can use that for a lookup in the other apps that are being created . I add the look up in a new app, launch the app and when I try to fill out the form its just blank in the drop down menu
                                                                                                  • Linkedin Plugin

                                                                                                    H, Is there a plugin to allow the connection to LinkedIn and simplify editing? I've looked at a few, but they all seem to be outdated and not working... What do you use or can you recommend?
                                                                                                  • Custom module - change from autonumber to name

                                                                                                    I fear I know the answer to this already, but thought I'd ask the question. I created a custom module and instead of having a name as being the primary field, I changed it to an auto-number. I didn't realise that all searches would only show this reference.
                                                                                                  • Automating leave alerts in Zoho Cliq

                                                                                                    The constant ebb and flow of employee absences can disrupt projects and hinder productivity. With Zoho Cliq's leave alert automation, you can easily keep your team informed. Real-time notifications can be sent to team chats, ensuring that everyone stays
                                                                                                  • 100 record view limitation

                                                                                                    I have just migrated from another CRM and am starting in ZOHOcrm with over 5000 contacts. It seems that my searches and sorts are limited to 100 live records....or am I missing something. This seems to be very limiting...in a lot of scenarios (mass email,
                                                                                                  • Remove the link between app admin roles and org admin privileges

                                                                                                    Greetings Zoho One Team, Currently, assigning someone as an admin in certain Zoho apps, such as Cliq, Connect, Mail, Vault, or Forms (and maybe other apps as well) automatically grants them org admin privileges, even though they are not listed as org
                                                                                                  • Strange pop up windows when sales order saving.

                                                                                                    Hi, May I ask what's the meaning of this pop up window. Our client script don't have this setting..
                                                                                                  • How to increase number of contacts shown in CRM Campaign ?

                                                                                                    Hello Everybody, I can't find a way of increase the number of contacts displayed per campaign. It is limited to 10 contacts which is very distressing when I need to update the status of several contacts. What a huge waste of time and energy Is there a
                                                                                                  • Add option "Avoid custom home pages" to profiles

                                                                                                    We need our sales agents and members on each department in general to keep the same Home designed by their Managers. Let all users to create custom home pages is a huge mistake. The homepage creation must be limited by profile so only Managers are allowed
                                                                                                  • Key Highlights of 2024: Recalling a Year of Progress and Advancements!

                                                                                                    As we step into 2025, we’re excited to share the progress and developments we’ve made to simplify and streamline your travel and expense management in the past year. Let’s take a look back at some of the key updates and enhancements that have helped us
                                                                                                  • Enhanced duplicate check for Leads in CRM

                                                                                                    Hello Everyone, We are excited to announce that you can now check for duplicate entries in leads by comparing them with similar records in the Contacts Module. Previously, when you added a lead, only the converted leads were checked for duplicates. This
                                                                                                  • No longer get Cliq notifications on phone if app not started

                                                                                                    On Android, I used to get notifications on my phone whether I was in the app, or it was started. Then about a month ago, I stopped seeing notifications on my phone UNLESS I had already started the app. So if I reboot my phone, and never start the app,
                                                                                                  • CUSTOMER RUNNING BALANCE WHILE PRINTING RETAIL INVOICE IN ZOHO BOOKS

                                                                                                    This is basic problem in zoho books where at the time of printing retail invoice, we can't add customer running balance. Kindly provide this feature as every other accounting software has customer credit balance option at the time of invoice printin
                                                                                                  • PRICE INCLUSIVE OR EXCLUSIVE IN ITEM MASTER CHECK BOX

                                                                                                    please provide checkbox or tick box to specify price mentioned in item master is inclusive or exclusive of taxes for better information. The feature is available in odoo and its very helpful.
                                                                                                  • MORE BUGS: Client Script, Deluge and Widget JS SDK don't work as expected when trying to retrieve a record that has been "rejected" as part of an approval process.

                                                                                                    Client Script $Page.record is null when accessing a record that has been "rejected" as part of an approval process. Deluge zoho.crm.getRecordById(moduleName, recordId) returns {"status":"failure"} when recordId is a valid, but rejected record. OK... I
                                                                                                  • Unable to add organization consultants and contractors in Zoho People

                                                                                                    Hello Team: I am unable to add my few consultants and contractors in Zoho People. How to add these people as Users?
                                                                                                  • Mandatory verification of custom domains in portal

                                                                                                    Hello all, Happy New Year! Wishing you a successful and fruitful year ahead. We are committed to ensuring a safe and secure experience for all users of Zoho Creator users. As part of this commitment, we regularly introduce updates to ensure our platform
                                                                                                  • Lost all my notes, help :(

                                                                                                    The thumbnails correctly preview the text, the file info correctly shows the amount of characters, but all of my notes just get stuck at this screen when I open them. :( ... I have so many projects in here, I don't know what to do, is there any way to
                                                                                                  • Zoho Calendar 2024: A Year in Review

                                                                                                    Hello, community members! Happy new year from all of us here at Zoho Calendar. As we turn the page to a new year, we extend our heartfelt gratitude to every member of our Zoho Calendar community for your continued support and enthusiasm. Your feedback
                                                                                                  • How manage to hardware and software contracts.

                                                                                                    So I have been tasked with setting up on crm a way of managing our software and hardware contracts. with a filter switch, so if they are no longer on say a hardware contract but still on a software, we would like the history about the hardware contract
                                                                                                  • Function #4: Schedule Customer Statements

                                                                                                    Regularly sending statements to customers is an imperative part of many business processes as it helps foster strong customer relationships and provides timely guidance on payments. While you can generate the statement of accounts and have it sent over
                                                                                                  • Automation#27: Retain Ticket Owner on Moved Tickets

                                                                                                    Hello Everyone! This week, we present to you a custom function that retains the ticket owner when a ticket is moved from one department to another. Here’s more to help you understand the custom function: At Zylker Techfix, Alex, the Support Engineer manages
                                                                                                  • CASE Module - email function

                                                                                                    HI there, I dont know if this has been asked or answered before as i couldnt find it on the forums. Issue: when a new case is raised, it goes under case tab and everything is captured. Then how do i send emails to the client who raised case with the details
                                                                                                  • Zoho CRM Workflow Merge Tag For a File Upload

                                                                                                    Hello, is there anyway to add a merge tag for a file upload field in Zoho CRM Workflow emails? I don't see it as an option in the drop down. Thanks, Hannah Moderation Update: I'm locking this post as a similar discussion is ongoing in the thread linked
                                                                                                  • Custom function daily limit and procedural programming

                                                                                                    Dearest Zoho Today, support confirmed that if I call a custom function from another custom function then I will use up two, with regards to my daily limit. A few times, we have blown our daily limit and that means that ordinary business processes don't
                                                                                                  • Lookup field - Can I avoid using advanced search?

                                                                                                    I have a lookup field in my app that has surpassed 500,000 records, now basic search is disabled and I'm forced to use advanced search. That adds multiple steps to what used to be very simple. Before: Select field > Type last digits of product code and
                                                                                                  • Zoho Flow reads record Tag as number instead of text string. How do I change it?

                                                                                                    I have experience with flow and have a number of them working. This flow is supposed to add a record in a custom module when a Contact record is edited or created with a specific tag. Trigger criteria is "Tag contains 'Athlete' ". However, the flow does
                                                                                                  • Calendar Overflow in Open URL popup

                                                                                                    Hi everyone, When Opening a form which has a date field in openurl popup, this happens. Is there any way I can change the calendar width and height or is there any other possible way this can be changed? Thanks.
                                                                                                  • Deluge Script - "Mismatch of data type expression" Error When Retrieving Account ID

                                                                                                    Hi everyone, I'm working on a Deluge Script in Zoho Creator to create Accounts and Locations. I'm running into a "Mismatch of data type expression" error when trying to retrieve the ID of a newly created Account. Here's the relevant part of my code: accountResponse
                                                                                                  • Issue with Exact Phone Number Match in Zoho CRM Search Record API

                                                                                                    Hello Everyone, I am working on a custom function that works as a REST API. This function receives API calls via a third-party webhook, where the payload data contains various details, including phone numbers, names, dates, etc. A single payload can contain
                                                                                                  • PDF API FROM ZOHO CREATOR DELUGE SCRIPT

                                                                                                    Hi I am in need of using a PDF Api to compress and Merge PDF files from zoho creator. Any support on this would be really helpfull any sample code for any PDF API would be extremely heplfull
                                                                                                  • Update field in “Validations on form submission”

                                                                                                    Hello, I have a hidden field in my form. I created a workflow that is executed when a record is created and triggered an event in the “Validations on form submission”. At this point I retrieve an external ID and need to add this value to the hidden field
                                                                                                  • Stop automatic email linking to deals after it is closed lost or Won & Done?

                                                                                                    How do I closed automatic linking of emails to deal which are closed or Won & Done? This is really important for us because sometimes if a new RFQ comes in the email is gets linked into an old deal which is lost or won and done.
                                                                                                  • Next Page