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

        • Need to set workflow or journey wait time (time delay) in minutes, not hours

          Minimum wait time for both Campaigns workflows and Marketing Automation journeys is one hour. I need one or the other to be set to several minutes (fraction of the hour). I tried to solve this by entering a fraction but the wait time data type is an integer

        • Zoho Assist Remote Desktop on Android grey screen

          With Zoho Assist Remote Desktop for Android when I connect to an unattended device I see only a Grey Screen. It worked fine before. This is a recently issue. I tried to clean data and cache, reinstall app, try and old version... but nothing. Always grey

        • Integration Multiple WooCommerce Stores

          Currently, Zoho Marketing Automation supports connecting only one WooCommerce store per account. For businesses managing multiple brands or stores, this creates operational challenges, as they are forced to maintain separate accounts for each store. Suggested

        • Introducing Smart Fields in Zoho Forms

          Hello form builders! We are excited to introduce Smart Fields in Zoho Forms - a faster way to add calculations to your forms without writing formulas. Instead of creating multiple fields and configuring complex calculations yourself, you can now drag

        • Feature Request: Add Sort by Cell Color and Text Color functionality

          Hello Zoho Sheet Development Team, I am writing to suggest a feature enhancement for Zoho Sheet. Currently, the platform supports "Filter by Color," which is incredibly useful. However, there is no native option to "Sort by Color" (by cell fill or text

        • MCP for Zoho Sign is not working

          I'm using the mcp builder at mcp.zoho.com and selected Zoho Sign. I have created it 4 different times but my other mcp servers are working. However, mcp for zoho sign WILL NOT WORK. It throws a 400 error. I've checked everything. I tried with both Grok

        • Automating CRM backup storage?

          Hi there, We've recently set up automatic backups for our Zoho CRM account. We were hoping that the backup functionality would not require any manual work on our end, but it seems that we are always required to download the backups ourselves, store them,

        • 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

        • Android screen dissapeared

          While running assist on an android tablet, screen poofs out of existence, have to restart sharing.

        • Kaizen #229: Email-Deal Associations in Zoho CRM

          Hi All, Welcome back to another week of Kaizen! Emails are a core channel for customer communication in any CRM system. In Zoho CRM, emails can be associated with records across multiple modules. In this post, we will focus on email associations with

        • Cross-application Deluge calls fail when application link name starts with a number

          I encountered an issue when calling a custom function in another Zoho Creator application within the same account. The target application’s URL/application link name began with a number, similar to: 27_example_application The following cross-application

        • Bank charges

          Hello, team zoho I have a difficulty, in the form to register the payment of the customer has a field "bank charges" more when registering an expense or payment to the supplier that field does not appear. And I think that's a mistake because in my account

        • Bank Feeds - Multiple Orgs / Multiple LLCs

          Hi, We are migrating our books over from another service, and trying to connect our bank feeds. We have 3 separate LLCs, and 3 separate orgs in Zoho Books. We want to connect the bank feeds for each entity to each org. However, when we connect the 2nd

        • WORK DRIVE CUSTOMIZATION

          WORK DRIVE CUSTOMIZATION Create folder for every Case by “Contact Name “in Work Drive under Associate Deals Folder Directory: User Work Drive Accounts: Route Directory Associate Cases Case Name, Case Number Client Upload- Shared with contact (for collaboration)

        • 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

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

        • BANK CHARGES

          When paying a supplier via credit card we are charged a fee. I process the payment through payments made and then enter the fees in bank charge. However i get this message :  Bank charges are applied. Please select a bank account. And it will not let

        • JOIN with Select and TOP not returning data to results

          hi when I add TOP to yellow it does not return cl."Id", cl."Date",cl."Outcome", cl."Membership" from the join. Remove it and they appear. The TOP and the ON seem to work as in the number of rows returned. Doing the classic join log table and return only

        • [Free webinar] Blueprint as a business process engine - Creator Tech Connect

          Hello everyone, We are excited to invite you to another edition of the Creator Tech Connect webinar. About Creator Tech Connect The Creator Tech Connect series is a free monthly webinar comprised of pure technical sessions, where we dive deep into the

        • Allow Email Attachments to Be Opened Directly in Zoho CRM

          Hi all, It would be very helpful if attachments linked to an email in Zoho CRM could be clicked and opened directly from the email preview. Currently, the attachment names are displayed, but the experience of viewing them is unnecessarily limited. Users

        • 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

        • Zoho email suddenly stopped working - any ideas to fix this ?

          Zoho email suddenly stopped working. although got this sent to me Reporting-MTA: dns; mx.zohomail.eu Arrival-Date: Wed, 26 Aug 2026 12:48:05 +0100 Original-Recipient: rfc822; Final-Recipient: rfc822; Status: 421 Action: delayed Last-Attempt-Date: 26 Aug

        • GCLID and Zoho Bookings

          Is there anyway to embed a Zoho Bookings signup on a landing page and pass the GCLID information? More specifically, can this be done using auto-tagging and not manual tagging the GCLID? I know Zappier has an integration to do this but is there a better

        • Calendar Booking - Rescheduled and cancelled appointments not deleting in G Suite calendar

          We started using the built in calendar booking feature and are really liking it! However, we are having one issue.  If a client reschedules an appointment using the reschedule feature the original appointment doesn't get deleted out of our g suite calendar

        • Automate pushing Zoho CRM backups into Zoho WorkDrive

          Through our Zoho One subscription we have both Zoho CRM and Zoho WorkDrive. We have regular backups setup in Zoho CRM. Once the backup is created, we are notified. Since we want to keep these backups for more than 7 days, we manually download them. They

        • Backup to external location (Dropbox etc)

          Dear Zoho Team, I've set the CRM Backup schedule to once a month, which when complete sends me an email. Of course I then need to manually login and download the file. Nice but VERY 20th century and relies on us humans not to fail. Can you please provide

        • Cloud backup for CRM

          This is an idea / feature request for ability to periodically export CRM backup to an external cloud provider, similar to Zoho Vault: https://www.zoho.com/vault/data-backup.html Alternatively I would help being able to access manual data backup programatically

        • Introducing throw statements in Deluge

          Hello everyone, We're introducing a powerful addition to Deluge that gives you more precise control over error handling in your scripts. Whether you're calling an external API, validating user input, or enforcing a business rule, there are moments when

        • Introducing throw statements in Deluge

          Hello everyone, We're introducing a powerful addition to Deluge that gives you more precise control over error handling in your scripts. Whether you're calling an external API, validating user input, or enforcing a business rule, there are moments when

        • WhatsApp Coexistence

          Hello, please implement WhatsApp Coexistence, we need to track staff whatsapp chats on their PC and they need to be able to use WhatsApp on their mobile in around the office and warehouse, as we video call customers and send them product pictures. Thank

        • Zoho Creator to Zoho Writer for prefilled documents...

          In response to the question about connecting Zoho Creator to Zoho Writer for prefilled documents, I wanted to share a working implementation that demonstrates how to use the record_id parameter with the Zoho Writer Merge API. This allows Writer to automatically

        • Upload a video to embed into an article

          How can we upload a video to embed into the article...? We can upload images but this only seems to support image files. And the video option seems to just support YouTube, Vimeo and DailyMotion which is no good, we need to create our own videos and upload

        • PAN - Aadhar Link Status

          Can Zohobooks also get latest PAN-Aadhar Linking Status from Income Tax Portal ?

        • 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

        • Zoho Writer for Android - Headings

          Hello Zoho team, I have created structured doc with headings in writer web version on pc. Then I have opened it in my phone. Write is crashing while used function: menu "three dots", Document Navigation, Headings. Zoho Writer for Android 6.1.4 Samsung

        • The in between line spacing management

          In the Microsoft Word, when we write something there is a tool from where we can manage the line spacing. Here in writer app in mobile it is by default 1.5. I request Zoho Team to give the option from where I can control Line Spacing, Remove space between

        • Zoho Books | Product updates | September 2026

          Hello Partners, We've rolled out new updates to Zoho Books. From a brand-new Nigeria edition expanding our presence on the African continent to the new Super Admin privilege, here's everything that's new this month. Nigeria Edition Now Live [Nigeria Edition]

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

        • Pulling data from lookup fields

          If I try to pull in CRM data from a lookup field, it only shows a number and not the actual name. Is there a way to get around this? It impossible to do reports using lookup field data.

        • 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

        • Next Page