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

      • Is there a way to show contact emails in the Account?

        I know I can see the emails I have sent and received on a Contact detail view, but I want to be able to see all the emails that have been sent and received between all an Accounts Contacts on the Account Detail view. That way when I see the Account detail

      • The Social Wall: July 2026

        Hello everyone! We're halfway through the year, and we bring to you three new updates designed to help you experiment with your content, discover your top-performing posts, and automate your engagement workflow. Instagram Trial Reels Instagram trial reels

      • Mail Id’s backup

        Dear Zoho Team, Kindly share the backup of my all mail id’s associated with Zoho account. Thanks, Saurabh Sharma +91 8851066915

      • Recurring Events Not Appearing in "My Events" and therefore not syncing with Google Apps

        We use the Google Sync functionality for our events, and it appears to have been working fine except: I've created a set of recurring events that I noticed were missing from my Google Apps calendar. Upon further research, it appears this is occurring

      • Stock Based Sort-by option in Category Pages

        In a category page product with In-Stock should come in the top of the categories product list rather than out-of-stock products. No having this option is extremely disappointing, I made the initial request about 7 months ago but still not even an update

      • Stock based sort-by option

        I have more than 300 products in a category with out of stock items count of 150. The out of stock items are coming on top of the category product page list, is there a way to show the in-stock items on top of the list & move the out -of stock items in

      • Out of Stock items showing in Commerce

        I have over 6000 items and most are not in stock, but all items are showing up in Commerce whether they are inventory or not. What option or feature can you use to hide items in Commerce at zero or negative quantities? I currently am using Commerce for

      • Creating Email template that attaches file uploaded in specific field.

        If there's a way to do this using Zoho CRM's built-in features, then this has eluded me! I'm looking to create a workflow that automatically sends an email upon execution, and that email includes an attachment uploaded in a specific field. Email templates

      • What's New in Zoho Billing | July 2026

        July brings a new set of updates to Zoho Billing to make your billing operations more efficient. These include a redesigned checkout experience, expanded Hosted Payment Page capabilities, compliance improvements, enhanced reporting, and more. Enhancements

      • Zoho CRM Community Digest - July 2026 | Part 1

        Hello everyone, July is here! The first two weeks brought six CRM updates ranging from privacy-ready webforms to a significantly more powerful Layout Rules engine, two community wins worth a look (a dashboard workaround for spotting leads with no activities,

      • What is a realistic turnaround time for account review for ZeptoMail?

        On signing up it said 2-3 business days. I am on business-day 6 and have had zero contact of any kind. No follow-up questions, no approval or decline. Attempts to "leave a message" or use the "Contact Us" form have just vanished without a trace. It still

      • Zoho CRM - Email/Message icon for Deal List View

        Hi Team, My idea is to include a message icon at the start of the row of Deals when an unread message has been received. This would really help highlight the Deals where urgent action is required. Thanks for considering this request. Regards, Ashley

      • Email notification for followers

        Is there a way to enable email notification for followers of a support ticket? ie: Ticket #123 is owned by Agent#1, Agent#2 adds themselves as a follower. Whenever ticket #123 receives an email from the customer, Agent#1 receives an email. Agent#2 would

      • Introducing parent-child ticketing in Zoho Desk [Early access]

        Hello Zoho Desk users! We have introduced the parent-child ticketing system to help customer service teams ensure efficient resolution of issues involving multiple, related tickets. You can now combine repetitive and interconnected tickets into parent-child

      • Desk Contact Name > split to First and Last name

        I am new to Zoho and while setting up the Desk and Help Center, I saw that new tickets created or submitted from the Help Center used the Contact Name field. This would create a new Contact but put the person's name in the Last Name field only. The First

      • Vendor payment unexpectedly routed through Prepaid Expenses instead of Accounts Payable

        Hello, We are investigating an unexpected accounting behavior in Zoho Books. We created vendor bills and vendor payments for two suppliers using what appears to be the same workflow, but the journal entries are different. Vendor 1 – UZ Store (works correctly)

      • Line Spacing

        I am new to zoho writer - when I create a new document or either open an existing document - everything is double spaced. I tried changing the line spacing to single but still nothing happens do you know what I can do to change this double spacing format?  

      • LinkedIn RSC is now live in Zoho Recruit

        LinkedIn Recruiter System Connect (RSC) is here. Your Zoho Recruit data (candidates, jobs, notes, stage updates, resume attachments, and more) now syncs with LinkedIn in real time. Note: LinkedIn RSC is included with your LinkedIn Recruiter Corporate

      • Managing Shopify Payout Balances in Zoho Books

        I am recording my Shopify orders as Invoices and once Shopify credits my bank account I reconcile the payout to the specific invoices and create a new transaction to account for the Shopify Merchant Fee. That is fairly straightforward to me. How should

      • Charging for WhatsApp replies starting in October 2026

        Meta has announced that it will charge for reply messages on WhatsApp starting October 1, 2026, and the free 24-hour window will no longer exist. How will Zoho SalesIQ handle this billing? https://developers.facebook.com/documentation/business-messa

      • Upcoming Change: Increased character limits for module and field labels

        To provide greater flexibility in customizing your CRM, we are increasing the maximum character limits for module labels and field labels in Zoho CRM. What's changing? Label Current Limit New Limit Module Label 25 characters 50 characters Subform Module

      • Change of Blog Author

        Hi, I am creating the blog post on behalf of my colleague. When I publish the post, it is showing my name as author of the post which is not intended and needs to be changed to my colleague's name. How can I change the name of the author in the blogs?? Thanks, Ramanan

      • SPAM (and some other) folders missing on three of my Zoho Mail accounts

        I have four email accounts with Zoho Mail. Three days ago, the Spam folder on three of these accounts vanished. It is gone on the Windows and Linux desktops as well as the web-based and Android versions, and I have tried it on multiple machines. The only

      • Using data from multiple sheets

        I am looking for a way to automate the process of taking multiple Zoho sheets and collating the data into one combined sheet (such that no duplicates occur). Currently I can only think of importing all the sheets into Excel and then running a macro to perform the task. Is there a simpler way offered by Zoho?

      • 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

      • Conflict with Google Sheets

        While I was working on a google sheet in Firefox, I suddenly started getting an error dialog in Google sheets: "Loading issue. Troubleshoot this issue by clearing application resources". It then says to clear cookes etc. etc. which didn't help. Disabling

      • Error 1011 saving website personalisation — blocking all changes (corrupted "home_page.content" field)

        When trying to save changes under Settings → Brands → MY COMPANY → Website → Personalisation → Messenger, I receive the following error: "Either the request parameters are invalid or absent" upon checking on the developer console of the browser I get

      • All new Address Field in Zoho CRM: maintain structured and accurate address inputs

        Availability Update: 29 September 2025: It's currently available for all new sign-ups and for existing Zoho CRM orgs which are in the Professional edition exclusively for IN DC users. 2 March 2026: Available to users in all DCs except US and EU DC. 24

      • 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

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

      • Tip #7 - Siri shortcuts in Zoho CRM

        Hello Everyone, Here is a tip about the 'Siri Shortcuts' feature and how it works in the iOS version of the Zoho CRM mobile app. What are Siri shortcuts? Siri Shortcuts are quick actions across your apps on iOS. They can perform an action automatically

      • Automatic Department and Employee Sync Between Zoho One and Zoho People

        Dear Zoho Support, I'm writing to propose a valuable feature request that would streamline data management and improve user experience within the Zoho ecosystem: automatic synchronization between departments and employees in Zoho One and Zoho People.

      • Nothing triggers a Journey

        I have been on the phone with Zoho support and they claim their development team needs to investigate more. However, I've found this is a pretty standard answer after a call takes any amount of time. After that, it's days and even weeks before it actually

      • Manually Backorder Sales Order and/or Change Sales Order Status

        Is there an option to manually 'backorder' a sales order, or otherwise change it's status?  In some cases, we receive orders for products that are out of stock, but we already have issued POs to our suppliers for replenishment.   Ex- we created a PO on

      • Backorder process review - Automating Removal of Sales Order from "On Hold" When PO is Received

        Hello Zoho Inventory Team, Currently, sales orders in On Hold status are released only when the bill for the purchase order is created. In our workflow, it would be much more efficient if the sales order could automatically move out of On Hold as soon

      • Kaizen #254 - Building a Temporal Lead Score Decay System in Zoho CRM

        Hello, CRM Wizards! Welcome to a fresh week of Kaizen. In this post, we will build a temporal lead score decay system that works alongside your existing scoring rules by introducing percentage-based score decay driven solely by customer inactivity. By

      • Metadata API Access to Functions

        I think it would be incredibly helpful to have api access to every function's code. Our team primarily uses deluge functions to update fields across modules according to business logic. I would like to create a visual dependancy model for our CRM, but

      • API actions/approvals endpoint returns UNAPPROVABLE despite user having full permissions and being the assigned approver

        Hi Team, We are trying to programmatically approve a record via the CRM API but consistently receive an UNAPPROVABLE error, even though the same user can approve the record without issue from the UI. Endpoint called: POST https://www.zohoapis.com/crm/v6/{module}/{record_id}/actions/approvals

      • Get a realistic picture of your revenue with Forecast Adjustments in Zoho CRM

        #crm25q1 Dear Customers, We hope you're doing well! Today, we're here with an important enhancement for business decision makers: forecast adjustments. Let's get straight to it! With technology on the rise and CX at its core, businesses are constantly

      • I am not able to check in and checkout in zoho people even location access allowed

        This issue i am facing in mackbook air m1, I allowed location in chrome browser and i also tried in safari but getting similar issue. Please have a look ASAP.

      • Next Page