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

    • 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

    • 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

    • 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

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

    • 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

    • 【Zoho CRM】キオスクに「ループ機能」が追加｜同じ処理を繰り返し実行可能に

      ユーザーの皆さま、こんにちは。 コミュニティグループの中野です。 Zoho CRMのキオスクに、同じ処理を繰り返し実行できる「ループ機能」が追加されました。 これまでは、同じ処理を複数回実行したい場合、同じ設定を繰り返し作成する必要がありました。 ループ機能を使うと、処理を一度設定するだけで、指定した回数や 取得したデータ数に応じて自動的に繰り返すことができます。 目次 ループ機能とは 設定方法 注意点 1. ループ機能とは ループ機能を使うと、キオスク内の画面や処理を指定した条件に応じて繰り返し実行できます。

    • Es posible cambiar el lenguaje de los modulos del ASAP?

      Es posible cambiar el lenguaje de estos textos? Tengo Zoho configurado en español pero aun así me muestra estos textos en ingles:

    • Where do I edit the "Welcome to [portal name]" message

      I am looking for a way to edit the "Welcome to" part of the message that is seen on the landing page (ex: https://help.zoho.com/portal/en/home). When I use the French interface, it doesn't make sense... I want to change it from "Bienvenue chez" to" Bienvenue au". Thanks!

    • 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

    • Automate Backups

      This is a feature request. Consider adding an auto backup feature. Where when you turn it on, it will auto backup on the 15-day schedule. For additional consideration, allow for the export of module data via API calls. Thank you for your consideration.

    • Shared Snippets Everyone

      Hi, Now that the Shared Snippets have been released and I think will be the most used feature implemented in 2023 :) Creating and Using Snippets in Ticket Responses - Online Help | Zoho Desk Maintain consistency in ticket responses with shared snippets

    • Multi-currency and Products

      One of the main reasons I have gone down the Zoho route is because I need multi-currency support. However, I find that products can only be priced in the home currency, We sell to the US and UK. However, we maintain different price lists for each. There

    • Next Page