Extension pointers #5: Working with widgets to power-up extension capabilities (Part-2)
Widgets simplify work and enhance the functionality of Zoho CRM by contextually embedding third-party services and adding new features to Zoho CRM.
In the previous post (Part 1), we mentioned what widgets are, the basic steps to install ZET CLI, and how to create a widget. Here's a quick summary of those pointers before we move into further detail with our current post.
- Widgets help embed applications in Zoho CRM and seamlessly synchronize application data into native CRM components.
- It also helps to add new features to Zoho CRM and create customized UI interfaces using the HTML, CSS, and JS library.
- Zoho Command Line Interface (ZET CLI) can be used to create, validate, package, and locally run your widgets.
After packing the widget you can embed it inside Zoho CRM as a connected app and host the widget either internally or externally on the server to get it running. As a continuation of the previous post, let's see the different ways to host widgets and how widgets can be embedded in Zoho CRM.
A widget application can be hosted either internally or externally.
Internal Hosting
Zoho's Servers are used to host an application internally. In order to host the application you created internally, you will need to upload the packed and zipped file of your project.
External Hosting
External hosting enables you to host your app externally with third-party web hosting solutions.
Where can widgets be embedded in Zoho CRM?
A widget can be embedded into different components in Zoho CRM
➤ Custom button
➤ Related list
➤ Web tab
In this post, we'll explain the steps involved in hosting a widget internally in Zoho using a connected app and embedding it in Zoho CRM Components while building an extension.
Steps to associate the Widget with a connected app of your extension and host it
1. Go to the Extension's Detail page of your extension.
2. Choose Connected Apps from the left panel of the Zoho Developer console under Utilities.
3. Provide the name and a description for the connected app. To host an application internally,
- Choose Internal Hosting
- The sandbox Zoho server URL is predefined and serves as the base URL.
- Upload the zipped file of the widget from the dist folder of your project's directory
- Click Save
Steps to Embed the widget
Once a widget is associated with your extension as a connected app, the next step is to embed and position the widget in the CRM components where you want it to serve its purpose.Now, let's see where you can embed the widgets.
Custom Button
Choose Components from the left panel of the Zoho Developer console under Build. Select the Links & Buttons tab and click Create New Button.
Provide the necessary details and select Invoke a Widget as the action you would like the button to perform.
Specify the HTML file location by appending it with the sandbox URL and click Save.
Once the custom button has been created successfully, you can test it in the sandbox testing environment to check if the functionality is working as intended. Later, when the extension is installed, the custom button will perform the functionality as defined in the widget in your Zoho CRM account.
Custom Related List
Similar to a custom button, it is possible to embed a widget into any module as a related list.
Choose Components from the left panel of the Zoho Developer console under Build. Select the Related Details tab and click Add Widgets.
Specify the sandbox URL of the widget along with the necessary details and click Save.
Web Tab
Choose Modules from the left panel of the Zoho Developer console under Build. Select the Web Tabs tab and click Create Web Tab.
Choose Type as Widget and specify the sandbox URL of the widget along with the necessary details and click Save.
Once you've embedded the widget in the required location, you can test it using the sandbox testing environment to see if the functionality is working as intended. Customize and enhance the widget's functionality as needed.
Up to this point we've explained in detail the process to install CLI, create a widget, associate the widget with a connected app, and embed it in Zoho CRM. In our upcoming post we'll see a working example of this process. Keep following this space for more information.
SEE ALSO
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
Developer
Nanditha Somasundaram Somasundaram
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 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
Introducing the 'Send as Email' option on the Zoho Desk iOS mobile app
Hello everyone! In the latest version(v2.10.2) of the Zoho Desk iOS app, we have brought in support for the 'Send as Email' option while creating a ticket. This feature enables you to reach out to the customers by sending outbound emails. The emails areDocument data extraction and import into CRM.
I've been trying to solve this for a while and I can't come up with a workable solution: In our business, we utilize many subcontractors around the world (without Zoho user accounts) to produce reports and client sites which they then submit back to usModular cannot Edit in portals
I have a custom module in CRM. If I create in either CRM or portals, I can edit it in the CRM but I can't edit in the portal. Even if it is created in the portal it wont edit. Anyone know why? I've created a new module and it works fine but this oneIntroducing Assemblies and Kits in Zoho Inventory
Hello customers, We’re excited to share a major revamp to Zoho Inventory that brings both clarity and flexibility to your inventory management experience! Presenting Assemblies and Kits We’re thrilled to introduce Assemblies and Kits, which replaces theZoho CRM and Books Integration
Evening, I have started the integration with FSM from CRM and having difficulties with the mapping. In CRM we use "Unit Price" as our cost price and mark this up on a subform to create a "Sell Price" this markup can be different on each quote dependingWhat is the Use Case for Business Messaging when Live Chat already exists?
Hi I'm excited about the new announcement for Business Messaging in Zoho Desk. However I'm unclear the use case for Business Messaging when Live Chat already exists? Is Business Messaging essentially a new version of Live Chat but built for use in thePlug Sample #13: Display CRM Products as Dynamic Carousels in Your Chatbot
Hi everyone! We’re back with another simple yet powerful plug to level up your chatbot experience. With the SalesIQ-CRM integration, you already have the ability to create leads, contacts, and deals directly within your CRM from SalesIQ, and view completeComo puedo mover un prospecto "Cliente" de modulo
Tengo un modulo llamado Seguimiento de Ventaa y otro llamado Cierre de Venta. Que cuando se marca como venta efectiva o venta no efectiva, pase a Cierre de Venta, Esto sin duplicarlo "Que esten en ambos modulos" ,Como esta en una base de datos "Excel"Zoho Books not working/loading
Hi! I haven't been able to access/load Zoho Books for the past hours. I get a time out (and it is not due to my internet connection). Could you please check this asap? Thank you!Introducing ICR in Zoho CRM: Transform your printed text into digital data
From writing on papyrus in the ancient times to creating a humble record in your CRM, the world may have evolved with how it used to record data, but data entry as such has not been simplified. It is still a repetitive and arduous chore on which businessesMax limit reached on Web Tabs for Zoho Projects
Hello, ByWater manages between 50-60 projects at a time, and we have been heavily utilizing the Web Tab feature. However, we just hit our maximum limit reached for web tabs. The main thing we use Web Tabs for is sharing a Google document with our partnersCreating a whatsapp channel in instant messaging in zoho desk - error Oops, something went wrong. Please try again later.
Creating a whatsapp channel in instant messaging in zoho desk - error Oops, something went wrong. Please try again later.Article Update Event
I'm trying to configure a webhook to fire when an article is updated or added. These are listed as available events in the documentation. However, in the webhook creation/editing screen, articles are not listed as a module when setting the event: Am IKaizen #187 - Building a Timer and Worklog Widget (Part 1)
Howdy Tech Wizards! Welcome back to a fresh week of Kaizen! This time, we are diving into a two-part series where you will learn how to build a Timer and Worklog Widget for Zoho CRM. This widget helps track active work time and log multitasking sessionsTask Permissions
Is there anyway to have some tasks restricted to view just by the owner or creator?Zoho CRM Forecast - Exclude certain Deals
We have our forecast and we use it for team forecast/targets/attainment. It works great for that. However, occassionally we have to offer Deals that are non-revenue generating, but are tracked in our CRM. They still have revenue tied to them, but ourKaizen #154 - Dynamically Update Picklist Values in Zoho CRM Workflows
Hello all! Welcome back to another interesting Kaizen post. Today, we will discuss how to add automatically or remove values from a picklist field using Deluge within a workflow. This post serves as a solution for the forum post. Use case The sales teamWhat is VoC "Unique count", counting?
Using the "Response based sentiment analysis" dashboard, here is our VoC "Overall Count by Sentiment" VoC uses Zoho Survey and email...and we have almost certainly touched (via email) more than 401 Contacts since January 1, 2025.Filter a report for a specific bank and a specific transaction type (interest income)
I am trying to run a report - any report - on a specific bank account for the interest income. I do not see it as an option. I can see the Bank Account under Account in the Filters, and I can see the Interest Income under Account in the Filters But IAbility to select Vendor Credits when creating Vendor Payments
When making vendor payments there should be the option to select open vendor credits, this way the payment shows what bills and credits are being used for the payment Right now the vendor credits must be applied to the bills prior creating a payment,Sorting Tasks by Start Date
I like using the Tasks tool so far but have one little problem that would help me tremendously. This is my favorite aspect of using Outlook for task management. When I create a task - I give the Start and Due Date. Some tasks are a little longer and may take a few days, while others only take a few minutes. For example, if a task takes 5 hours, and I want to spend 1 hour per day on it. Because of this - knowing the start date is much more important than the due date. The ability to sort by StartSingle payment link for multiple invoices or total due for a customer on Whatsapp.
I want to send a single payment link for multiple invoices or total due for a customer on Whatsapp. Currently zoho books do not have this option . While sending WhatsApp template, payment link is created for particular invoice. I want to send WhatsAppWhatsapp Customer Statement and Outstanding
Customers are asking to whatsapp statement or outstanding report or invoices regularly. Is there a way we can integrate it in Zoho Books. We already have Whatsapp Business API from Interakt and regular Whatsapp API from MessageAutoSender. How can we useOwner's Draw
Example: I have a charge account at ABC Company. During the month I charge one $50 item for my business. I also pick up a $20 item for personal use. At the end of the month, I receive a statement with a balance due of $70 and I want to PAY THE ENTIREShow both Vendor and Customers in contact statement
Dear Sir, some companies like us working with companies as Vendor and Customers too !!! it mean we send invoice and also receive bill from them , so we need our all amount in one place , but in contact statement , is separate it as Vendor and Customer,Adding google reviews
HI , is it possible to add my google reviews to my zoho website ? Thank youDisplay an image in Zoho reports report
I have a table report in which i'd like to display an image made up of data from another column, something like: <img src="records.photo"> However, when i do that, nothing happens. How do i pull it off?Currency fields and decimal places in CRM email templates
Hi, How do I get more than the standard 2 decimal places showing in a Currency field, on an email template? In the Layout for my Currency field, it is set to 6 decimal places. I want to show up to 6 places in the email template (unrounded). See attachedGST Returns India
1. Have been requesting that the documents issued section should be filled automatically. If other accounting software can do it ZOHO Books can. NOT ROCKET SCIENCE !! 2. There is an Issue with the Debit Notes not showing up in GSTR 1 ??? Sorry but this is unacceptable !! as a GST Suvidha provider and an accounting software developer both these errors are unforgivable. P.S: Another GST issue is that the GSTR 2 reconciliation has to be closed monthly to do the next month, Maybe ZOHO developers shouldGetting error "invalid warehouse_id" when trying to update any transaction in Zoho books
I got a message from Zoho saying that the Warehouse and Branch has been merged into one category "Locations" Once I migrated to this setup I was no longer able to edit any invoice / create creadit notes - got an error saying "invalid warehouse_id" I neverE-Way Bill Generation and Custom Button Requirement in Stock Transfer Module in ZOHO Books India
We would like to provide further clarification and highlight a few operational challenges we're currently facing : we are handling stock transfers between branches/warehouses within the same state under the same GSTIN. As per government rules, E-Way BillSubform data to Sheets
I have been trying to setup a Zoho Flow automation to bring any Subform input to a Zoho Sheets but it seems impossible to post the subform entries to a Zoho Sheet. Is there any way to do it via Zoho Sheet API? https://www.zoho.com/sheet/help/api/v2/#CONTENT-Insert-row-with-JSON-dataVoiding of Invoice
What's the implication in GSTR 1 and GSTR 3B when an invoice is voided?Search WorkDrive File Contents from Creator
Good afternoon, I am building out a Creator app where I want to allow users to input search terms from Creator that will return the appropriate files that contain those keywords from their Creator search. Is this possible?execute workflow when a package is create
hji, there is a wey to make a workflow when a package is sended o created ?Adding string / text fields to modules
I'm working on a custom leads module with a layout for call center agents. I need to add text fields that are for display purposes only to prompt call center agents. I haven't found any way to add a field in Zoho CRM that doesn't accept input, ie. isLooking to Hire: Zoho Creator Developer for Vendor Dashboard Portal
We are a Florida-based licensed liquor distributor using Zoho Books, Inventory, CRM, and Analytics. Many of our vendors are also our customers. We’re looking to build a centralized, secure Vendor Dashboard Portal in Zoho Creator that gives access to real-timeAutomate Zoho Meeting Creation via Blueprint (Leads & Accounts)
I need help automating Zoho Meeting creation during a blueprint transition in both the Leads and Accounts modules. Requirements: Triggered via blueprint Read meeting start time (DateTime field) and internal participants from CRM Create Zoho Meeting viaBCC Dropbox on the Agency Module
Good morning! We've recently implemented the BCC Dropbox feature on our Zoho CRM, but this only appears to be working on the Leads and Contractor (Contacts) modules. It would be incredibly useful for it to work on our Agency module too as a way of trackingSupport for Transparent, Shadowless Panels in Zoho Creator Pages
Hi Zoho Creator Team, Hope you're doing well. We would like to request more design flexibility in Zoho Creator, specifically the ability to create panels with no background, border, or shadow. Use Case: In our app, we’re designing a dashboard that usesNext Page