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

    • 【Zoholics Japan 2026】ITreview 口コミ投稿キャンペーンを実施します！

      ユーザーの皆さま、こんにちは！ 2026年9月25日（金）開催の「Zoholics Japan 2026」会場にて、 Zoho CRM・Zoho Workplace・Zoho Mail を対象とした「ITreview 口コミ投稿キャンペーン」を実施します！ Zoholics にご来場いただく皆さま、ぜひこの機会に普段お使いの Zoho 製品について、率直なご感想をお聞かせください。 【キャンペーン内容】 対象製品： ・Zoho CRM ・Zoho Workplace ・Zoho Mail キャンペーン実施時間：

    • Contact removed when picking ticket template.

      hi new to Desk rolling out to company, replacing Freshdesk. Is there way to keep the in context contact when selecting a template? When you choose a template you lose the contact!

    • Using IMAP configuration for shared email inboxes

      Our customer service team utilizes shared email boxes to allow multiple people to view and handle incoming customer requests. For example, the customer sends an email to info@xxxx.com and multiple people can view it and handle the request. How can I configure

    • Global Sets for Multi-Select pick lists

      When is this feature coming to Zoho CRM? It would be very useful now we have got used to having it for the normal pick lists.

    • Bank Transaction Rules Link Under Each Bank Account

      Hello, can you'll move the "transaction rules" button or link back under each bank account? It is now on Bank Overview, if I am working on a specific bank account, I don't want to go out to overview to check the rules. That button displays rules for all

    • Nested notebooks

      Dear Sir/Madam, I would like to know if it is possible to nest notebooks. It would be very helpful when there are too many, as it would improve organization. Thank you for your response. Best regards.

    • 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

    • Zoho CRM

      Cuándo voy a adjuntar un archivo .pdf en un registro en el campo Archivo obtengo el siguiente error:

    • Implement Meeting Polls in Zoho Bookings

      Dear Zoho Bookings Support Team, We'd like to propose a feature enhancement related to appointment scheduling within Zoho Bookings. Current Functionality: Zoho Bookings excels at streamlining individual appointment scheduling. Users can set availability

    • Recording Salaries and wages in zoho books with bank fees

      Hello Community, I am posting this questions to understand the best way to record the salary and payroll expenses in zoho books. The way it works here, For example if I have 3 employees and each employee salary is lets say $1000. I usually use the bank

    • API - Available Stock Definitions

      Okay, Zoho team... your copywriters fell down on the job for this one :) I think these warrant a bit more explanation as to what they include and what they don't.

    • [BUG] WebTabs in ZohoCRM now have a spurious "\" displayed along with some additional HTML Head code included

      An example of the issue can be seen below:

    • CNIL - Suivi de Pixel

      Bonjour à tous, À la suite de la nouvelle recommandation de la CNIL sur les pixels de suivi dans les e-mails, savez-vous si Zoho Campaigns permet : de conditionner le suivi des ouvertures au consentement de chaque contact ; de proposer un lien permettant

    • Scheduled import

      The tutorial shows a scheduled import option but this option doesn't appear to be available when using Zoho DB.

    • #4 Choosing How My Invoice Should Look

      Day 4: Meera had the basics sorted. Her business name was there, the address looked right, and her logo finally appeared where it should. But the invoice still did not quite look like hers. Her old studio used invoices that were clean, tightly laid out,

    • Transaction rules for "Owner's Contribution" ?

      I have a bank account where a lot of the deposits are "Owner's Contributions" (i.e., the business owner investing money in the company). Is it possible to create a Transaction Rule to automatically recognize these? They all have the same verbiage from

    • DYK 12: Turn Email into Work Items

      Did you know you can add work items to your Zoho Projects portal directly from your inbox? The initial step of important collaborations start over an email, and most of these require an immediate follow-up by creating a task, or reporting an issue. During

    • Custom Function not getting package details when triggered from Workflow Rules.

      I have a custom function for Packages that submits a form in our Creator app that we use to generate custom shipping labels (internal staff complete deliveries so we cannot generate shipping labels straight from Inventory). When the function is executed

    • how to Solve Conflict Invoices in Zoho POS

      Hello Team, I am facing a repeated issue in Zoho POS while saving a sale that contains service-based items. My products are intentionally created as Service (Non-Inventory) items because I do not want to track stock for them. However, every time I try

    • ¿Cuándo estará disponible la edición de Zoho POS para México?

      He estado revisando las capacidades de Zoho POS y su evolución dentro de la estrategia de Zoho for Retail, y me parece que existe una oportunidad muy interesante para el mercado mexicano. Zoho POS ya ofrece funcionalidades para gestionar ventas, inventario,

    • Important update for Zoho RPA Windows Agent users

      Hi everyone, We would like to share an important update for Zoho RPA Windows Agent users running Windows Server 2016 or Windows Server 2019. The new Zoho RPA Windows Agent 6.0.0 and later versions are not supported on Windows Server 2016 and Windows Server

    • Multi-Option Estimates: One Estimate, Multiple Choices

      Every service request can have multiple solutions. Multi-Option Estimates help you present these different solutions in a single estimate with its own name, parts, price, and total. Each option can differ in scope, approach, or price — whatever choices

    • Marketing Tip #32: Improve SEO and customer confidence with an FAQ section

      Before making a purchase, customers often have simple questions about delivery times, returns, product usage, or sizing. If they can’t quickly find answers, they may leave your store without buying. Adding a clear FAQ (Frequently Asked Questions) section

    • ZOHO Campaigns in ZOHO Analytics - Campaigns vs Contacts Table

      There seems to be information in the Zoho Campaigns table such as Unique Opens and Unique Clicks that can't be found in the Campaigns vs Contacts table where only Opens and Clicks are shown on a per contact level. Is there a way to bring Unique Opens

    • How to change an employee mail id

      Hi, Does the administrator have the rights to edit an  employees mail id. 

    • Cousin Domain Verification in Zoho Mail: Identify and block look-alike domains

      Phishing attacks often rely on domain names that closely resemble legitimate ones. This makes it difficult for users to identify fraudulent emails at first glance. Zoho Mail's Cousin Domain Verification feature allows administrators to define trusted

    • How do I add 2 agents under the same email?

      I have 2 agents who use the same email address. I added one, but when adding the second agent, it says that the email is already registered. How do I configure this properly?

    • Zoho Desk API modifiedTimeRange returns HTTP 500 around 2026-03-08T02:00:00.000Z

      Hello Zoho Support Team, We are experiencing a reproducible HTTP 500 Internal Server Error when querying the Zoho Desk API search endpoint with a specific modifiedTimeRange boundary. ### API Endpoint GET /api/v1/tickets/search ### Reproduction Steps &

    • Updating an Invoice Line Item's Discount Account via API Call / Deluge Custom Function

      I need help updating an invoice line item's discount account via API. Below is a screenshot of the line item field I am referring to. Now the field to the left of the highlighted field (discount account) is the sales income account. I am able to modify

    • Associate project with timer on iPhone

      When I start the timer without first associating a project (on my iPhone), its starts fine but now when I need to associate a project, and click on the link, I get a list of EVERY project I've ever put into Zoho Books. It used to just show active projects.

    • Sales Tax Refund on Commerce Order

      I've looked high and low. Relatively new to ZOHO but not to systems in general. How do we produce a refund for sales tax charged and paid for by a customer in error? This does not impact inventory stock. Simply for accounting and getting the $ back to

    • Importing Chart of Accounts from Quickbooks -- "Debit or Credit"?

      I'm trying to switch from QB to Zoho Books. I've prepped my chart of accounts and put it into the format following the structure of the sample CSV file. But one thing that does not exist at all on the Quickbooks side is the Zoho column for "Debit or Credit".

    • Long term pricing for customers managing multiple organizations

      I've been using Zoho extensively for quite some time and genuinely think it's one of the most powerful and customizable business platforms available. Between Zoho Books and Zoho Analytics, I've invested a significant amount of time building automations,

    • Default Status for Appointments to Completed

      We use Zoho Bookings integrated with Zoho Desk to book time for tech support sessions, we've configured it to only allow for a contact to book a single session to avoid customers overbooking time that may not be needed. The trouble is, once a session

    • Customer User Fields for use in Rules

      Hi, I would like to be able to add custom fields to the users, such as Department or Role, which can then be used in Rules, Reports, etc. as a condition. A use case is limiting Global lists or Choices based on the users Custom Field, so one form can be

    • Add ZeptoMail to Zoho One

      Hi Zoho Team, I would like to request that ZeptoMail be added as a fully included application within Zoho One. Why this is important Zoho One is positioned as a unified business operating system that brings the applications an organization needs under

    • Item image on document

      I know what I am asking may not be possible, but I will ask anyway, maybe I will get lucky, and someone else is doing it. My business is based on special orders only from various online stores. When I send a quote to a client, I generate a separate quote

    • Dashboard Metric Drill-Down Shows Stale Data

      Summary: When clicking between different metric components on a custom dashboard, the drill-down list shows data from the previously opened metric instead of the one just clicked. Steps to Reproduce: Create a custom dashboard with multiple pre-defined/templatized

    • Allow Reauthorizing CRM Connections Without Revoking First

      Currently, when a Zoho CRM connection needs to be reauthorized or authorized with another account, we first have to revoke the existing authorization and then authorize it again. This creates a gap where the connection is unavailable, and any functions,

    • Programmatic Itemized Expenses?

      It does not appear that it is possible to create itemized expenses programmatically (via the API)? Is this correct, or am I misunderstanding the situation?

    • Next Page