Creating custom user interfaces using widgets

Creating custom user interfaces using widgets

In our last post, we looked at connections and how they help build a seamless integration with an example. In this post, we'll explore creating widgets in Zoho Sprints and their benefits with a real-time example.

Widgets

What and where?

Widgets are custom graphical user interface components that ease user accessibility within the product. A widget can be created:
  1. To customize a user interface to smooth and enhance the end-user experience
  2. To fetch custom input from the end user and perform the desired functionality based on the input
Widgets are supported in multiple locations while building a Zoho Sprints extension using the developer platform. Check here for more details on widgets and the supported locations.

JS SDKs and the need for them in widgets

When handling widgets, data needs to be communicated between the widget and the extension it's interacting with. In order for this communication to be handled securely, Zoho Sprints offers a defined set of JS SDKs. These JS SDKs help the widget code interact with extension. Take a look at the Zoho Sprints JS SDK bundle.

Prerequisites:

➤ In order to use the JS SDKs as part of your widget, it's necessary to include the JS SDK library CDN URL as a source in your widget code. You can find the CDN URL specific to each DC in this document.
➤ Additionally, you need to invoke the init method in order to use the JS SDKs in your widget code. Only after invoking the init method can the other JS SDK methods be used inside the widget. Learn more about the init method.

Now that we have an overview on widgets, JS SDKs, and the need for both, let's move on to how a widget can be created and utilized in an extension.

Steps to create and use a widget in an extension
  1. Create connections
  2. Create an extension and configure it's plugin-manifest.json file
  3. Design and create the widget (HTML file to be rendered and JS logic)
Let's go over each of these processes in depth using an example.

Consider this scenario. You're the manager of an organization and use Sprints to manage your client projects. Your team members are in charge of work items related to feature enhancements. When they work on a new feature request, you may want to hold a group call with your team to review it before asking them to move on with development. Similarly, if a bug-related work item needs to be completed, you might plan an issue debugging session or a one-on-one conversation with the team member who is identifying and solving the issue.

This can be accomplished by integrating Zoho Sprints with Zoho Bookings using a custom widget. Zoho Bookings is designed specifically to create numerous services, such as one-on-one calls, issue debugging, or group calls, and assign staff to them. When Zoho Bookings is integrated with Sprints, the Sprints user can plan appointments for these services directly from within the work items. For this scenario, let's go ahead and explore the steps to create and use a widget in an extension.

1. Create connections
  1. Go to Sigma and navigate to the Connections section in the left panel of your Sigma workspace.
  2. Choose Zoho Sprints as the service from the dropdown list, then select your Zoho Sprints organization.
  3. Create two default connections: Refer to our previous post on connections for guidance.
➤ Zoho Bookings to fetch services, staff, and available time details and book an appointment


➤ Zoho Sprints to fetch the details of the user who is assigned to the work item



2. Create an extension and configure a widget in the plugin-manifest.json file
  1. Navigate to the Extensions section in the left panel of your Sigma workspace.
  2. Click the New Extension button and create a new extension. You can refer to this post for detailed guidance on creating a new extension.
  3. In the plugin-manifest.json file of the extension, include the sample JSON code that was generated for the Zoho Bookings and Zoho Sprints connections.
  4. Configure a widget by providing the name, embedding location, and the URL path of the HTML file to be rendered. For our example, a widget with the following details has been created.
➤ name: Book an Appointment
➤ url: The location of the Bookevent.html file (inside app folder) that will render the user interface required for our widget. We'll be creating this file in the next section of this post.
➤ location: The work item's right navigation bar.
➤ logo: The location of a standard Zoho Sprints logo (logo.svg) that is by default available while creating the extension. You can include and use your customized logo as well.


3. Design and create the widget

Now that the extension has been created and its plugin-manifest.json file has been configured, let's go ahead and handle the widget design and the logic required to book an appointment.

Bookevent.html - The html code for booking an event is attached in the post.
  1. In the code snippet, first the init method is invoked. As mentioned earlier, this is mandatory in order for any other JS SDK to be used as part of the widget code.
  2. Next, the JS SDK method to get the current location details (for our example: work item) is invoked. This JS SDK returns the details of the current location, including the extension ID, team ID, project ID, Sprints ID, user ID, and work item ID.
  3. Now, using the retrieved details, the Zoho Sprints API that gets the work item details is invoked. This API returns the details of the work item including the owner or user assigned to the work item. In order to invoke any HTTP request API in your widget code, use the request SDK method provided by Zoho Sprints.
  4. The request method requires certain details like the API URL, method type, connection link name, and certain parameters or payloads to be passed to invoke the API. For the "get work item details" API, use the following parameters:
➤ connection: The connection link name of the Zoho Sprints connection created and configured in the plugin-manifest.json file
➤ method: The HTTP request type of the API (in this case it's the "GET" method)
  1. Using the work owner ID retrieved from the work item details API, the get workspace users API is invoked to fetch the details of that particular user, including their name and email. This API is also invoked using the request JS SDK method by passing the URL, connection created for Zoho Sprints, and method type as GET.
  2. Next, the Zoho Bookings APIs to get staffs and get services are invoked using the request method. Here, the connection created for Zoho Bookings is passed as a parameter to the request method.
  3. Once you click the Check Availability button, the fetch availability Zoho Bookings API is invoked, and the available time slots of the selected staff and service are returned.
  4. Next, using the Book Appointment button, based on the time slot chosen from the list of available slots for the selected staff and service, a new appointment is booked by invoking the book appointment API. The staff ID, service ID, time, and user details (the work item owner details) are sent as parameters to the book appointment API.
This will successfully book an appointment with the work item owner for the selected service, staff, and time.

Testing the extension
  1. Now, you can test the widget using the Run option in the Sigma cloud editor. For detailed guidance on testing the extension, read our post here.
  2. Once you enter into the test environment, install the extension and authorize the connections.
  3. Next, enter into the work item and access the Book an Appointment widget. Choose the staff, service, and date, and click Check Availability. The available time slots will be displayed. Choose a time slot and click Book Appointment. An appointment will be successfully booked in Zoho Bookings.


In this post, we have explored widgets and JS SDKs along with an example. We hope you found this information helpful. Stay tuned for more updates!


SEE ALSO


    • Recent Topics

    • Setting checkbox value on template in Sign from Creator

      Good day, Please help me understand how do I set a tick from a checkbox in Creator into a checkbox on a Sign template. Below is the only values on the Sign template and the code from Creator, "field_boolean_data": {}, "field_date_data": {}, "field_radio_data":

    • Cliq iOS can't see shared screen

      Hello, I had this morning a video call with a colleague. She is using Cliq Desktop MacOS and wanted to share her screen with me. I'm on iPad. I noticed, while she shared her screen, I could only see her video, but not the shared screen... Does Cliq iOS is able to display shared screen, or is it somewhere else to be found ? Regards

    • How to Delete, Disable, or Remove Streams from the Mail App?

      Is there a way to remove Streams from the mail app sidebar? I get too many notifications, it doesn't add any value to Zoho's functionality (especially since you can just make comments inside an email), and is distracting. I do not want notifications/alerts

    • Remove the mandatory Name Card buttons (or at least make them optional)

      Please remove the mandatory Name Card buttons (or at least make them optional) A recent change to the Name Card in Zoho SalesIQ (currently affecting WhatsApp) introduced mandatory buttons before a visitor can provide their name. I believe this change

    • Zoho Wont Login

      Can anyone tell me why my password stops logging in all the time? Is it a ploy to make you change your password? I have to use OTP all the time. I dont want to change passwords all the time. Over the last couple of years I've found myself using Zoho (as

    • Frustrated with Zoho Assist QuickSUpport

      Trialling Zoho Assist and I have a variety of clients. A lot are computer illiterate. Some have poor vision. The current support sessions are using apps which have desktop icons for the appropriate apps. I either connect on demand then the client approves

    • What's New in Zoho Inventory | April & May 2026

      Hello users, We're excited to roll out the latest Zoho Inventory updates for April and May 2026. These enhancements are designed to make your daily operations smoother and more efficient, from advanced inventory management and flexible pricing to automated

    • Gemini Action - Add "inineData" Support

      Thank you guys for adding a Gemini action. I like Gemini models for the "grunt work" of AI, as they have the cheapest tokens of the trustworthy providers One thing that's missing in the action, though, is the ability to pass file data. If you pass a base64-encoded

    • HR Helpdesk Cases

      We have Zoho One Enterprise. I'm trying to find HR Helpdesk Cases, but my UI does not match the documentation. I'm not sure how to move forward.

    • CRM x WorkDrive: We're rolling out the WorkDrive-powered file storage experience for existing users

      Release plan: Gradual rollout to customers without file storage add-ons, in this order: 1. Standalone CRM 2. CRM Plus and Zoho One DCs: All | Editions: All Available now for: - Standalone CRM accounts in Free and Standard editions without file storage

    • Zoho CRM Copilot Connector

      Hello, Are there plans to release a connector for Zoho CRM and Copilot? I'm in the early research stages of potentially switching our CRM solution to Microsoft Dynamics because of its out of the box integration with Copilot. The advantage being that we

    • Zoho Projects - Will there ever be a send email feature in Zoho Project?

      Hi team, Are there plans to or will there ever be a sendemail feature in Zoho Projects, brining it in line with other similar platforms like Asana, ClickUp and Monday? I know that you can add comments via email to a specific task, but I believe this only

    • Introducing Microsoft Word Integration in Zoho Contracts

      We are excited to announce a new feature that brings contract authoring and negotiation in your familiar environment — the Microsoft Word Integration. What This Integration Brings The Microsoft Word Integration connects Zoho Contracts with the Microsoft

    • Share Video Response Card ion Zobot

      I am using the zobot codeless bot builder in SalesIQ. I want to share a video but delay the next response card until after the video has finished playing or has been stopped. Is this possible?

    • Customer image field

      I created a custom image field for estimates, and it works as expected. The only issue I have is that I want to be able to place the custom image field in the estimate invoice. Is there a way I can do that, the field does not give the option to display

    • Sub Folders

      It would be great if there could be sub-folders in reports. We have a ton of individual reports and folders that would be easier to navigate this way 

    • Goals API - Zoho People

      Hi Team, I would like to get the API details for retrieving organisation-wise Goals from Zoho People. Currently, I am able to retrieve individual employee goals using the following API: https://people.zoho.com/api/v3/performance/goal/{emp_id} However,

    • Question and responses disapear

      I have a form where several people have had issues where the questions, responses or submission simply disappear when trying to complete the form. It seems to be random with no pattern of question, browser or OS. Hopefully there is a fix in the platform

    • Unable to send message;Reason:553 Relaying disallowed. Invalid Domain

      Hi, Now when I try to reply to an email, I see the Unable to send message;Reason:553 Relaying disallowed. Invalid Domain voicemessagedownloader.com error. I tested sending an email when I set it up in the past and it worked. I have checked the Zoho Organization

    • Guide customers to the right booking page with routing forms

      Greetings from the Zoho Bookings team! We're excited to introduce Routing Forms in Zoho Bookings. Routing forms let you collect information from customers before they schedule an appointment and automatically direct them to the most appropriate booking

    • Analytics Dashboard User Filters Default Value

      User Filters on Dashboard do not allow Unknown to be set as a default filter value. I have to include NULL values in my dashboard among other values but I can't include NULL/Unknown by default in Dashboard User Filters.

    • Horrible download speed

      Using a trial of Zoho Assist and downloading a 316 MB file on a 500/500 fibre connection to a remote computer on the same network took 7 mins to complete. On AnyDesk it took 1 min or so.

    • How to Backup Zoho to PST?

      I'm looking for a simple way to backup Zoho Mail emails to PST format. I tried the IMAP method with Outlook, but it seems slow and complicated for large mailboxes. I need a solution that can: Export Zoho emails to PST Preserve attachments and folder hierarchy

    • Zoho Books | Product updates | August 2026

      Hello users, July has been an exciting month for Zoho Books! This month, we're excited to introduce HTML PDF Templates, Placeholders as Pills, expanded approval workflows for Sales Returns and Journals, and significant compliance updates across the India,

    • Action required: WhatsApp now uses BSUID as the primary identifier

      Important If your support team uses WhatsApp to engage with customers, there is an important platform change you need to know about. BSUID support is now mandatory for all WhatsApp Business Platform partners and businesses. WhatsApp is introducing usernames,

    • Tip #83- Give Customers a Faster Way to Reach You with the Quick Support Plugin – 'Insider Insights'

      Hello Zoho Assist Community! Think about the last time a customer needed urgent support. They emailed in, waited for a response, got a session link, couldn't find it in their inbox, called back, and by the time the session actually started, a good chunk

    • Final Notice: Migrate Your ASAP Mobile SDK by August 31

      Alert August 31, 2026 is the deadline. After this date, older ASAP Mobile SDK versions will no longer work with the ASAP Help Widget. If your app hasn't been migrated to a supported SDK version, users will no longer be able to access the ASAP Help Widget

    • Approval Process configuration is now more flexible and fully customizable

      Hello everyone! Zoho CRM's Approval Process is back with a better user experience that makes it easier to add rules to your processes. This enhancement includes some UI updates that help you create highly structured approval stages—and more. Let's look

    • Kaizen #255 - Building a Real-Time Operational Dashboard with Zoho CRM Queries

      Hello Everyone, Welcome back to another edition of the Kaizen series, where we uncover powerful ways to extend and customize Zoho CRM. In the previous Query Kaizens, we explored how Queries can retrieve CRM data, invoke REST APIs, and even update CRM

    • 【Zoho CRM】キオスクに「ループ機能」が追加｜同じ処理を繰り返し実行可能に

      ユーザーの皆さま、こんにちは。 コミュニティグループの中野です。 Zoho CRMのキオスクに、同じ処理を繰り返し実行できる「ループ機能」が追加されました。 これまでは、同じ処理を複数回実行したい場合、同じ設定を繰り返し作成する必要がありました。 ループ機能を使うと、処理を一度設定するだけで、指定した回数や 取得したデータ数に応じて自動的に繰り返すことができます。 目次 ループ機能とは 設定方法 注意点 1. ループ機能とは ループ機能を使うと、キオスク内の画面や処理を指定した条件に応じて繰り返し実行できます。

    • Es posible cambiar el lenguaje de los modulos del ASAP?

      Es posible cambiar el lenguaje de estos textos? Tengo Zoho configurado en español pero aun así me muestra estos textos en ingles:

    • Where do I edit the "Welcome to [portal name]" message

      I am looking for a way to edit the "Welcome to" part of the message that is seen on the landing page (ex: https://help.zoho.com/portal/en/home). When I use the French interface, it doesn't make sense... I want to change it from "Bienvenue chez" to" Bienvenue au". Thanks!

    • Zoho ERP | Product updates | July 2026

      Hello users, We're back with another round of updates to help you streamline your operations. This month's release brings new features and enhancements designed to help you work more efficiently. Read on to discover everything that's new in Zoho ERP this

    • Automate Backups

      This is a feature request. Consider adding an auto backup feature. Where when you turn it on, it will auto backup on the 15-day schedule. For additional consideration, allow for the export of module data via API calls. Thank you for your consideration.

    • Shared Snippets Everyone

      Hi, Now that the Shared Snippets have been released and I think will be the most used feature implemented in 2023 :) Creating and Using Snippets in Ticket Responses - Online Help | Zoho Desk Maintain consistency in ticket responses with shared snippets

    • Multi-currency and Products

      One of the main reasons I have gone down the Zoho route is because I need multi-currency support. However, I find that products can only be priced in the home currency, We sell to the US and UK. However, we maintain different price lists for each. There

    • Remove "Subject" as a required field on quotations

      Not sure why, but Zoho has made 'Subject' a system defined required field. I'm not entirely sure why subject would be required as a key field (i.e. you cannot deactivate it or change it from required). It doesn't make much sense on many product quotations,

    • Displaying only unread tickets in ticket view

      Hello, I was wondering if someone might be able to help me with this one. We use filters to display our ticket list, typically using a saved filter which displays the tickets which are overdue or due today. What I'd really like is another filter that

    • Best way to setup Inventory bin tracking for products with multiple boxes/crates

      Hi - we need some advice from the community on setting up Items in the Inventory for products with multiple crates. We have large products in our warehouse where the product is delivered as two large (double pallet) crates. We've setup the Items for these

    • Can't find field from ZCRM for a trigger

      Hello, Currently I am revamping our CRM system and we have created second layouts from to try out new processes while not disrupting the old one. Moreover, we want to use different layouts for different processes. The issue is that when creating the ZCRM

    • Next Page