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

    • [Webinar] Conversational AI: The new paradigm for agentic analytics

      From hard coding to powerful agents, data and analytics is undergoing a tectonic shift, and conversational agents are at the forefront of this transformation. This goes beyond democratizing business intelligence; it's about accelerating the path from

    • Make Rich Text fields available in Canva Print Views

      Everything is on the title. I don't really understand why this is not already possible as Rich Text Fields are available in Canva Detailed Views for example.

    • How to RSVP an invite using the Zoho API

      Perhaps I am missing something, but I don't see any way to use the Zoho API to RSVP an Invite. This what I've tried: PATCH https://calendar.zoho.com/api/v1/calendars/{cal}/events/{event} ?attendeedata={"attendees":[{"email":"me@example.com","status":"ACCEPTED"}],

    • Is Zoho Assist Secure Connect even practical for 1 person shop?

      I was gun ho with Zoho Assist to replace my existing Remote Access product I have been using but I need to implement MFA on each unattended connection. Right now each of these connections in my other product has a rotating token that I have enter off

    • FSM service call view

      "Why can't we sort by assigned service resource in the service call view?"

    • Zia Agents looks promising, but I still cannot deploy my first agent or connect WhatsApp after weeks of support tickets

      Hi Everyone, I am posting here because I am stuck and need practical help from someone who has successfully deployed a Zia Agent with WhatsApp. Zia Agents looks like a very promising product. I have watched the platform expand quickly, and I have noticed

    • Marketing Tip #46: Run flash sales the right way

      A flash sale can do a lot for your store. It can clear slow-moving inventory, spike revenue on a slow day, or reward your most loyal customers. But if done carelessly, flash sales can backfire. Customers start expecting discounts, stop buying at full

    • Send Notify on new Ticket to a Team based on customers email address AND only on these addresses

      Hi ZohoDesk, I would like to have Team A receive a Notification on every ticket created. I would like Team B to receive a Notification email only if the incoming ticket contains elements of a certain group of customer's email addresses only.  They should

    • Inventory API - Retrieve all uploaded product / item images

      I know that I can get the primary image for each product / item or composite item, by using the /image endpoint.  https://inventory.zoho.com/api/v1/compositeitems/<item-id>/image?authtoken=<TOKEN> This will return only one photo, even if the item has multiple images uploaded. Is there a way to retrieve all images stored for an item via the Zoho Inventory API?

    • Drop Down Menu - Adding up values

      I have a form that has 22 drop down fields each having a value of 0-10 to choose from. Is it possible to have it add up the total value of those selected numbers and have it tally it up in another field at the end? So example: if each of the 22 fields

    • Change Last Name to not required in Leads

      I would like to upload 500 target companies as leads but I don't yet have contact people for them. Can you enable the option for me to turn this requirement off to need a Second Name? Moderation update (10-Jun-23): As we explore potential solutions for

    • 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

    • Next Page