Using widgets to extend the Bigin UI

Using widgets to extend the Bigin UI

Hello Biginners,

In our previous forum post, we explored schedules and workflow functions and learned how to automate real-time and time-based actions inside a topping. In this post we'll look at how to embed custom UI components inside Bigin using widgets.

A widget is a customizable user interface (UI) component that helps improve efficiency and user experience in Bigin. It allows businesses to embed UI components, streamline interactions, and integrate third-party applications for improved workflows. Widgets provide the flexibility to customize and expand Bigin's capabilities, which makes them the right tool whenever a topping needs to bring in a custom interface.

To understand how widgets work in practice, let's walk through a common requirement in customer onboarding.

The challenge: Tracking onboarding steps consistently across every contact

When a small business takes on a new customer, the onboarding process usually involves the same set of steps every time: scheduling an intro call, collecting a project brief, provisioning access, and so on. Most teams track these steps in spreadsheets or external tools, which quickly drift out of sync with Bigin.

Two needs come up here:
  1. The admin needs a single place to define and manage the master list of onboarding steps for the organization.
  2. The sales rep needs that checklist surfaced directly on each contact's detail page so they can track which steps are complete for that contact.
We can solve both of these needs with widgets.

Overview of the topping

We'll build a Client Onboarding Checklist topping that uses two widgets working together:
  1. A Settings widget that lets the admin define and manage the master list of onboarding checklist items for the organization.
  2. A Related List widget that appears on every contact's detail page, displays the configured checklist, and lets the sales rep track progress for that contact with a live progress bar.

Prerequisites

Before building the widgets, make sure the development environment is ready. The toolchain—Node.js, npm, the Zoho Extension Toolkit (ZET), and the Bigin JS SDK—and the exact install and verification commands are covered detail in the Bigin developer documentation on creating widgets.

You'll also need a topping created in the Bigin Developer Center, since a widget is embedded within a topping. For detailed instructions on creating a topping, refer to this post for a tutorial.

With the environment ready, we can create the widget project.

Creating the widget project

In your working directory, run:

zet init

This command prompts you to select the Zoho service you want to create a widget for, followed by the project name. Choose Bigin and enter the project name. The project will be initialized with the npm dependencies.

Zoho Service: Bigin

Project Name: Onboarding_Checklist



This recording shows the full zet init flow: selecting Bigin as the service, entering the project name Onboarding_Checklist, and initializing the project with npm dependencies.

Once the project is initialized, move into the project directory.

Inside the app folder, we'll be adding the widget files (HTML, CSS, and JavaScript).

Organizing the widget files

Since this topping has two widgets, we'll keep both of them directly inside the app folder:

settings.html: The Settings widget, which is a single self-contained file with inline styles and script

widget.html, style.css, and custom.js: The Related List widget, split across three files for better readability

Each widget's HTML file must include the Bigin JS SDK script tag inside the <head> so it can communicate with Bigin. The SDK script tag and its setup are covered in the official Bigin developer documentation on creating widgets.

(The zip file of the widget folder is added at the end of this post.)

With the file structure in place, let's build the first widget.

Building the Settings widget

The Settings widget is the admin's control panel for the topping. It opens during installation and is also accessible afterwards from the topping's settings page. This is where the admin defines and manages the master list of onboarding checklist items for the organization.

It renders an editable list of checklist items, lets the admin add or remove items, and saves the configured list so that the Related List widget can pick it up later.

Overview of the Settings widget logic

  1. Initializing the widget: When the widget loads, the Bigin JS SDK fires the PageLoad event. We use this event to load any previously saved checklist into the UI, and then call ZOHO.embeddedApp.init() to confirm the widget is ready.
  2. Adding and removing items: The addChecklistItem function renders an editable row for each item. Each row has a Remove button so the admin can drop items that are no longer needed.
With the Settings widget in place, we can build the Related List widget.

Building the Related List widget

The Related List widget is the user-facing side of the topping. It appears as a section on every contact's detail page, displays the master checklist defined in the Settings widget, and lets the sales rep track progress on that specific contact.

The widget reads the contact's record context using the Bigin JS SDK, so the same widget code automatically adapts to whichever contact is being viewed. It also shows a live progress bar and a completion banner once every item is checked off.

This widget is built from three files inside the app folder of the widget project: widget.html, style.css, and custom.js.

Overview of the Related List widget logic

  1. Reading the contact context: The Bigin JS SDK passes the current record's ID through the PageLoad event. We store this as contactId, which is what lets us track checklist progress per contact.
  2. Toggling items and tracking progress: When a checkbox is toggled, toggleItem flips that item's state and re-renders the checklist. The updateProgress function updates the progress bar, and shows the Onboarding Complete! banner once every item is done.
Once both widgets are built, the next step is to test and package them.

Testing the widgets locally

ZET provides zet validate to check the project's resource files, zet run to start a local server for previewing the widgets, and zet pack to package the project into a zip file inside the dist folder. Detailed usage of each command is covered in the official Bigin developer documentation.

After testing the widgets locally and packing them into a zipped file, the next step is to host the widgets and embed them in Bigin.

Embedding the widgets in the topping

Once the zip file has been generated by zet pack, the widgets need to be hosted before they can be embedded inside the topping. In Bigin, widgets are hosted through a connected app, which acts as the wrapper that holds the widget files and makes them available to the topping.

To create one, navigate to Connected Apps in the left panel of the Bigin Developer Console and click Create Connected App. Give the connected app a name (for example, Client Onboarding Widget), choose Internal Hosting as the hosting type, and upload the zip file generated from the dist folder by zet pack in the Upload Production Zip field. Save the connected app. This makes the widget files available to be embedded inside the topping.



With the connected app saved, each widget needs to be embedded in the specific section of the topping where Bigin should render it. Since this topping has two widgets, this is done in two places.

The Settings widget is embedded in the Settings Widget section of the Bigin Developer Console. Navigate to it from the left panel, name the Settings widget Client Onboarding Settings Widget, and select settings.html as the entry file. This is what makes the Settings widget open during installation of the topping.



The Related List widget is embedded by navigating to Components, then Related Details, then Add Widgets in the left panel of the Bigin Developer Console. Provide a name for the related list (for example, Client Onboarding Checklist), choose the Contacts module so the widget appears on each contact's detail page, name the widget Onboarding Checklist, and select widget.html as the entry file.



Once both widgets are embedded, publish the topping from the Developer Console. The topping is now ready to be installed and used inside Bigin.

What happens when the topping is installed

When the admin installs the Client Onboarding Checklist topping, the Settings widget opens, prompting them to configure the onboarding checklist items. The admin can add new items, remove the ones that no longer apply, and save the final list. This becomes the master checklist for the organization.

Once the Settings widget is configured, the sales rep can open any contact in Bigin. On the contact's detail page, inside the Contacts module, the Client Onboarding Checklist related list section loads with the same items the admin configured. The rep can check off each item as the onboarding step is completed.

As the rep ticks off each step, the progress bar advances and the item is struck through. Once every item is checked, the Onboarding Complete! banner appears at the top of the widget.



In this post, we explored how the Settings widget and the Related List widget work together to extend Bigin's UI and deliver a consistent, admin-managed experience across every contact. The Settings widget defines the configuration once at the org level, and the Related List widget surfaces that configuration contextually on each record.

Stay tuned for more posts, where we'll dive deeper into additional features and best practices for developing powerful toppings in Bigin.


    • Recent Topics

    • Which Zoho CRM tasks would you want an AI assistant to handle?

      I’ve started delegating my Zoho CRM work to AI – and many tasks now take me half the time. It has been so useful that we’re now working to make it available to everyone. Instead of clicking through records and tabs, I simply describe what needs to be

    • 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

    • Export Campaign to another document?

      How can I export my Campaign to Word and PDF? I want to create a PDF archive on my website with old campaigns /Peter

    • Filter isn't

      The ability to filter the history of a given flow to a specific status however it would be great to have the ability to filter to a status that isn't something for example if i want to find all history that isn't complete.

    • Zoho CRM Functions: Redesigned Interface, Rich Analytics, and Multi-Language Support

      Hello everyone! We have given Functions in Zoho CRM a major overhaul with a new interface that makes it easier to build, organize, monitor, and troubleshoot your functions throughout their lifecycle. As part of this revamp, we have also introduced a unified

    • Unable to view existing or create new WhatsApp IM templates on Zoho Desk

      Hi there, Is there a issue with WhatsApp templates in Zoho Desk currently [17 Aug 2026]? I am unable to view existing or create new WhatsApp IM templates. It's saying "Oops, something went wrong. Please try again later."

    • WhatsApp Calling Integration via Zoho Desk

      Dear Zoho Desk Team, I would like to request a feature that allows users to call WhatsApp numbers directly via Zoho Desk. This integration would enable sending and receiving calls to and from WhatsApp numbers over the internet, without the need for traditional

    • 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

    • 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

    • 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

    • Old Gmail inbox migration to Zoho mail

       Hi, I have been checking Zoho products for a while. This week finally decided to migrate my company mail accounts from Gmail to Zoho. I was looking for sometime and could not found a way to perform this; only found the way to take a backup of my old account into Zoho connecting throught pop3 server; but I'm not looking for that, I want that in my new Zoho Mail inbox appear all my mail messages and conversations as I see it in Gmail. Searching in Google and in Zoho Mail docs the workaround begun

    • 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

    • 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

    • [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"}],

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

    • 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

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

    • Next Page