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

    • Add Comprehensive Accessibility Features to Zoho Writer

      Hello Zoho Writer Team, We hope you are doing well. We would like to submit a feature request to enhance Zoho Writer with a full set of accessibility tools, similar to the accessibility options already available in the Zoho Desk agent interface. 🚧 Current

    • MAKING ENTRY TIME MORE USER FRIENDLY AND FASTER O PREVENT TAB TIME

      I AM CURIOUS TO KNOW IF WE CAN MAKE IT MORE USER FRIENDLY WHILE MAKING BILLS , I MAJORLY USE OVER DESKTOP SO I AM SUGGESTING TO REMOVE TAB TIME WHILE ENTERING BILL OR MAKING INVOICE DIRECT JUMP TO ONLY REGULAR PARTS OF THE BILL . YOURS RAKESH 782866

    • Email Forwarding to Zoho Desk Failing After Migration from Gmail to Outlook (Microsoft)

      We recently migrated from Gmail to Microsoft Outlook. Since the migration date, emails sent by our customers are no longer being received by Zoho Desk. I tried setting up the email forwarding rules in Outlook similar to what we had in Gmail, but it still

    • Shopify B2B Integration: Option to Match Customers by Company Name

      It would be great if the Shopify integration could include Company Name as a customer matching option. At the moment customers can only be matched by: Email Name Email and Name Phone For businesses using Shopify B2B, the company is often the customer

    • Free Methods to Convert PST to MBOX on Mac & Windows

      Converting PST files to MBOX is often needed when moving Outlook mailbox data to email clients such as Thunderbird, Apple Mail, or other MBOX-supported applications. The process can be different on Windows and macOS, and free methods may involve several

    • Print checks for owner's draw

      Hi.  Can I use Zoho check printing for draws to Owner's Equity?  This may be a specific case of the missing Pay expenses via Check feature.  If it's not available, are there plans to add this feature?

    • Deliver exceptional customer experience with Field Service Management in Zoho Service Plus

      The advent of automation and personalization in the AI era has raised customer expectations exponentially for faster resolution of issues with less tolerance to friction in the process. Fast, accurate, and intelligent service that understands customer

    • Zoho Extensions 101: Building extensions for Zoho People

      Hello developers! Welcome to our new video series on building extensions for Zoho People! If you're new to extension development or looking for guidance on building extensions for Zoho People, you're in the right place. We've curated a series of videos

    • Build A Happier Workforce With Zoho People

      The success of an organization depends on its people. Therefore, a comprehensive and cloud-based HRMS software is an integral part of the IT ecosystem for the business. With a wide number of key modules to define the structure of an organization, manage

    • How to import PST files in Office 365?

      You can import PST files into Office 365 using native Outlook applications, the Microsoft Purview network upload method, or specialized third-party migration tools. Choosing the right method depends on whether you are migrating a single mailbox or executing

    • Project Change Orders and Additions

      We are in the process of migrating from QuickBooks Online to Zoho Books. We have Zoho One and like the ability to sync all of our data across everything. And I like that projects work in a way that's less dumb than QuickBooks. I'm trying to figure out

    • Support Recording Payments in a Different Currency Than the Invoice Currency

      We would like to request the implementation of a feature that allows users to record customer payments in a currency different from the currency of the original invoice. Current Limitation in Zoho Books Currently, if an invoice is issued in USD, Zoho

    • Customer Statement Showing Incorrect Negative Balance Due to Unused Advance

      Dear Zoho Support Team, We are facing an issue with the Customer Statement in Zoho Invoice related to customer advances/mobilization advances. The issue is that when a customer has made an advance payment that has not yet been fully utilized against invoices,

    • 【10/15・残席わずか】Zoho Championに学ぶ！Zoho Campaigns メール配信の基礎・活用勉強会

      皆さま、こんにちは。ゾーホージャパンの中野です。 10月15日（木）、Zoho コミュニティ初となる「Zoho Campaigns メール配信の基礎・活用勉強会」をオンラインで開催します！ 今回の登壇者は、Zoho の導入・活用支援に豊富な経験を持つZoho Champion の岡安 裕一さんです。 「一斉配信はできるけれど、現在の設定や運用が正しいか自信がない」 「Zoho CRMとZoho Campaignsのどちらから配信すればよいか分からない」 「リストとセグメントの違いや、配信停止の扱いを整理したい」

    • WorkDrive API: allow the modification time to be set when updating an existing file (x-last-modified-date is honoured on create, ignored on update)

      Hi, I contribute to the Zoho WorkDrive backend of rclone, the open-source sync/copy tool. I would like to raise one specific, narrow API gap that currently makes reliable syncing to WorkDrive impossible, and ask whether it can be addressed. What already

    • 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

    • Kiosk / CRM Timezone Oddity

      I grant you this is much easier to see than to explain, and snapshots here won't help much and I don't want to snapshot my record anyway in a forum, so bear with me... Effectively... As there had been discussions on times coming through in different timezones

    • Restricted Account - "This user is not allowed to add in Zoho" - citbinvestment.com.

      Hi Zoho Support Team, I am attempting to set up user mailboxes for my domain citbinvestment.com, but I am receiving the following error: "This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details." > My MX, SPF,

    • 👍 Zoho CRM's Notes now gets Reactions and a new look

      Available in SA and JP DCs. Rolling out to other DCs in phases. Hello everyone, Notes help users capture important updates, collaborate with teammates, and maintain context for records. Now with Note Reactions, users can quickly acknowledge updates, express

    • Contact Sharing: Hide email alias from global address list

      As the superadmin, I would like to hide my domain aliases from appearing in the global address list. Currently, my end users can see all my aliases. The aliases also appear as type-in addresses when composing a new email. This is a potential security

    • Incorrect Currency Shown

      On Bills, each line shows the rate in the wrong currency (home currency).

    • This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details

      Hello, Just signed up to ZOHO on a friend's recommendation. Got the TXT part (verified my domain), but whenever I try to add ANY user, I get the error: This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details I have emailed as well and writing here as well because when I searched, I saw many people faced the same issue and instead of email, they got a faster response here. My domain is: raisingreaderspk . com Hope this can be resolved.  Thank you

    • [Free webinar] Beyond prompt-to-app: Vibe coding with Zoho Creator | Creator Tech Connect (October 2026)

      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 consisting of purely technical sessions, where we dive deep into

    • Zoho Recruit Staffing version Interview using Zoho Meeting

      I would like to understand whether Zoho Meeting has a native integration with Zoho Recruit – Staffing Edition. As of now, I am unable to find the native Zoho Meeting integration within the Staffing Edition of Zoho Recruit. Could someone please confirm

    • Payroll needs to automatically remit taxes, not just give me the calculations

      Wagepoint, PayEvo, Waveapps, etc... All your competitors deposit employee payroll, but they ALSO remit taxes automatically. Get with the program, your Payroll app is extremely sparse.

    • New enhancements to user management

      Hello everyone, We're excited to introduce a few enhancements to user creation and user preferences in Bigin! These updates give administrators more flexibility while inviting users, and give users more control over how their data is displayed. With this

    • How to add PHONE number to the Activites view

      This just seems like something so obvious and I can't believe I can't find it.  When I add a TASK for a person that I want to call back, I'd like to be able to see that persons PHONE NUMBER in the actives list. Ive added every field possible in the views, and the best that it gets is the person's name, but not their phone number. I'd like to be able to just print my tasks, seeing the person I need to call back with their phone number. Is there a way to do this in the FREE edition?  thanks.

    • Public dashboard table does not load in mobile view - TypeError reading 'viewType'

      Our public dashboard links have worked for years. We made no changes. Now the table widget does not load on mobile browsers. It loads fine on desktop, and it loads on a phone when we use "Request desktop site." Chrome DevTools shows this error in mobile

    • Cannot format "start date" field in Zoho Flow

      I am trying to recreate a flow that connects Inventory package creation to Zoho projects (where a task is created in a defined project). I've been able to troubleshoot everything EXCEPT the date fields; specifically the "start date" - which is quite important

    • Bank Transactions page shows too few transactions due to large header area

      In the Banking → Uncategorized Transactions screen, a lot of vertical space is being used by the account header, balance details, tabs, buttons, etc. Because of this, on a normal desktop screen I can see only around 2 transactions at a time, even though

    • Zoho Mail Android app update (v3.6.5) - Enhancements in Email Composer and Google Meet support

      Hello everyone! We are excited to introduce new enhancements in the Zoho Mail Android app (v3.6.5). Let's dive into what's new. Drag and drop email addresses between recipient fields You can now drag and drop the email addresses across the recipient fields:

    • Migration from QuickBooks to Zoho Books for the U.S. Company

      Is there any automation tool available to migrate data from QuickBooks to Zoho Books for a U.S.-based company? If yes, could you please provide the details?

    • Feature Request: Integración con la Lista del Artículo 69-B del SAT para Zoho Books México

      Feature Request: Integración con la Lista del Artículo 69-B del SAT para Zoho Books México Hola equipo de Zoho, Durante los últimos meses he observado una necesidad recurrente entre varios clientes en México relacionada con el cumplimiento fiscal del

    • Introducing Zoho Key Service, a simpler way to access LLMs without API keys

      Available in the Professional, Enterprise, and Ultimate editions in the US, IN, AU, JP, and CA DCs. Hello everyone, We are excited to bring Zoho Key Service (ZKS) in Zoho CRM, a simpler way for organizations to access and use third party LLMs. You can

    • Single Folder Archival in Zoho Mail

      Dear Zoho Mail Community, Have you noticed and wondered what the banner is about in your Zoho Mail's Archive Policy Settings? In Zoho Mail, users have traditionally archived emails to keep their inbox and active folders clean. While this helped reduce

    • Trigger Workflow Rules from subform row actions

      Hello all, Previously, workflow rules could only be configured at the module level, which meant subform data had to be tracked and managed manually. With this update, workflow rules can now be triggered directly by actions within subform rows, giving

    • Free Plan mail accounts details

      In the zoho mail pricing there's a free plan that includes: FREE PLAN Up to 25 Users 5GB* /User, 25MB Attachment Limit Webmail access only. Single domain hosting. I need to make sure that I'm able to create multiple email accounts in the form of: name@domain.com

    • can not use my zoho mail

      i bouht domain( avta group.com) and set up mail(Avtar@avta group.com) but i cannot receive or send emails . can you please help out.

    • Display Issues

      Hello, Our company just changed General Managers and the other one was the super admin. Since deleting his profile and making our new General Manager the super admin there have been ongoing issues. One in particular, is when creating estimates, sales

    • Introducing Night Mode for Zoho Recruit [BETA]

      Late-night hiring sessions? Long hours reviewing resumes? We heard you. Night mode [BETA] is now available in Zoho Recruit, giving you a cleaner, more comfortable workspace that’s easier on the eyes while keeping the focus on what matters most: hiring.

    • Next Page