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

    • What's New in Zoho Inventory | September 2026

      Hello users, September brings a range of new features and enhancements across Zoho Inventory. From improved inventory operations and reporting capabilities to greater customization, automation, and enhancements to Delivery Challans, there’s plenty to

    • Mirror Component in Zoho CRM: Access real-time related data without leaving your record

      Hi everyone, This feature is now available for the JP, CA, SA, UAE, and AU DCs. We're excited to bring to you Zoho CRM's mirror component, which presents relevant data on a record's details page and keeps everything users need in one place without having

    • 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

    • Create custom rollup summary fields in Zoho CRM

      Hello everyone, In Zoho CRM, rollup summary fields have been essential tools for summarizing data across related records and enabling users to gain quick insights without having to jump across modules. Previously, only predefined summary functions were

    • How to mix different types of inputs (such as dropdown list and textbox)

      Hi, I'm creating a form called "Room Reservations" for a company. I created a "table" using "Matrix Choice". I created "Room 1", "Room 2" and "Room 3" with the "Questions". I would then like to create two columns with the "Answers", one called "Department"

    • Feature Request: Render Markdown (.md) files in Zoho Cliq

      Hi, We regularly share Markdown (.md) files in Zoho Cliq. However, when we open these files in Cliq, the content does not render as Markdown—it displays as plain text. This forces us to copy/paste the content into an external Markdown viewer to read it

    • Dealing With One-Time Customers on Zoho Books

      Hello there! I am trying to figure out a way to handle One-Time customers without having to create multiple accounts for every single one on Zoho Books. I understand that I can create a placeholder account called "Walk-In Customer", for example, but I

    • Cash Basis VAT RETURN REPORT Required in Saudi Arabia

      Zoho Books in Saudi Arabia not showing TAX RETURNS report on CASH Basis.. It only showing accrual basis. Oforur requirement is both reports (Cash Basis and Accrual Basis ) , same like indian Edition of Zoho Books showing. CASH BASIS RETURN is our Basic

    • Tips & Tricks Series - #4 Customize your manual PDF before export

      Hello everyone! We’re back again with our Tips & Tricks series. Today, we’ll look at how you can customize your manual PDF before exporting it. With Zoho Learn, you can personalize the exported PDF with options such as headers, footers, colors, and custom

    • Digital Marketing Agency: Transforming Your Brand's Online Presence

      Imagine trying to build a house on your own without the necessary tools or expertise—it’s overwhelming, right? Digital marketing is the same.

    • 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

    • Reach us through our official support channels

      Dear Customers, Thanks a lot for choosing Zoho! Our applications are built to help achieve your day-to-day business goals. We are committed to engaging with you, to understand and develop solutions that enhance your productivity. We are happy and ready

    • I cannot add user to my account

      I have an account, I deleted a user from the account and I have one unused licence which lasts for 23 days, I tried adding a new user and it said This user is not allowed to add in Zoho. Please contact support-as@zohocorp.com for further details, please

    • Domain Activation Issue

      I purchased a domain through Zoho, and as I understand it, you were supposed to send me a domain activation link. However, I never received it. As a result, I was unable to activate the domain, and it is now suspended. Because of this, I am not receiving

    • Grouping by Stage *type* in widgets

      Hi Can I ask for a new feature? I'd like to be able to group by stage type in a Deal widget. That is by whether the Deal is in an Open Stage, a Closed Won Stage, or a Lost stage. Currently I can group by Stage, but if we have 10 open stages and one Closed

    • Please release domain bravovietnam.com from an old account

      Hello Zoho Support, I am trying to set up Zoho Mail with my domain bravovietnam.com on my account office@bravovietnam.com. Every time I add the domain, I get: "This domain is already associated with this account" — pointing to a DIFFERENT, older account

    • ChatGPT Plugin / MCP Server auth error

      Hi all I'm trying to connect the ChatGPT plugin for Zoho CRM but after username stage of the auth process, I get this error from the URL https://mcp.zoho.eu/mcp-client/ {"error_description":"Invalid request url, Request is not as per defined in oauth

    • Need Multiple currency for Suppliers and Buyers

      Hello, We need multiple currency support for buyer and suppliers, We are doing international business and we often sell goods in foreign currency as well as local currency, However zoho does not support this, I am trying Free agent and xero they support all currencies for suppliers Bills & expenses as well as buyers invoices, Kindly work on this feature will be great help to decide using zoho books Thank you

    • Enhanced Zoho CRM and Office 365 calendar synchronization features!

      Dear customers, We're excited to share some significant improvements to our Office 365 calendar synchronization features, aimed at providing you with more control and a more personalized experience. What’s new Choose your Office 365 calendar: During the

    • Zoho Books Support

      Dear Team, Zoho Books offers a demo before you purchase zoho books. But after that when he actually purchases the product he has to rely on toll free number or help documents. But this might get frustrated in the initial period. Specially in initial period.

    • How to add a fee based on payment method

      I currently accept both ACH payments and credit card. I want to add a 3% fee to a number of my subscription plans if the customer chooses to use a credit card (and not ACH/checking). How do I do this? Is there an in-built feature, or would i have to create

    • What's New in Zoho Invoice | July – September 2026

      Hello everyone! We're back with the latest updates and enhancements we've rolled out in Zoho Invoice from July to September 2026. Here's what's new this quarter: Zoho Invoice is Now Available in Nigeria Introducing the Super Admin Privilege E-Invoicing

    • Address limits per customer by edition

      I’m on the Standard edition and have reached a limit of 30 addresses under a single customer. Before I move to an annual Professional subscription, I need to confirm the following: What is the maximum number of addresses allowed under one contact, and

    • Export from List view

      I'm constantly having the issue where my users are building lists in ListView for various objects and then realising they cant export the data, then they have to go and build the data set in reports to export. I would like to see the ability to export to excel/csv from ListView.

    • Cannot apply tags to multiple items at once

      It is very frustrating needing to apply tags to notes individually. Even worse that it takes multiple clicks to do it. Can there please be an update to: 1.) Allow us to apply tags to batches of notes in one go. 2.) Make it less clicks to add a tag 3.)

    • Get all hiring updates via Zoho Cliq bot notifications

      We’re introducing a new way to stay updated on recruitment activities: Cliq Bot notifications. Now you can receive Zoho Recruit notifications directly in Zoho Cliq—alongside your existing in-app alerts and emails. Whether it’s a candidate status change,

    • Notes Acknowledgement

      It would be great to have emojis that can be used for Notes. Emojis such as Thumbs Up to let someone know you agree with them or a emoji for thanks. It's a simple way to acknowledge that you read someone's note. Moderation update: Emoji reactions for

    • Is it possible to log text messages from iphone into Zoho CRM

      My team is more and more utilizing text messaging to communicate with clients. Does Zoho have a solution for logging these text messages when clicking "Send Text Message" from the Zoho app. Much like when you call, you get prompted to log a call, can

    • Project Finances: Fully Accessible within Projects

      Project finances and work items are now on the same screen and it transforms the way you run your project. Managing your project finances is now much easier and in the same screen as your work items. Access quotes, invoices, bills, sales orders, and purchase

    • UI / UX Improvements

      Please consider changing the Dependency Details window from a column-based layout to a list-based layout, or allowing users to choose their preferred layout. The current column-based view uses screen space inefficiently and makes navigation difficult,

    • Zoho CRM and Desk sandboxes for testing native integration

      Hello team, We are evaluating the native integration between Zoho CRM and Zoho Desk, We have sandbox instances of both products and want to test the integration there, without any effect on our production CRM or production Desk data. While setting up

    • Function #24: Automatically display deal name from Zoho CRM on quotes in Zoho Books

      Deals allow businesses to organize and visualize their sales pipeline. This provides a clear overview of all potential opportunities and helps in making informed decisions. Zoho CRM empowers you to create deals or potentials for your clients and monitor

    • Auto-Sync Field of Lookup Values When Parent Record Changes

      Hi Zoho Team, Currently, when you use a "Field of Lookup" in Zoho CRM, the value is captured as a snapshot at the time the lookup is set. If the parent record is later updated, the Field of Lookup value on the child record does NOT update and stays stale.

    • Multiple criteria in searchRecords

      Hi, is it possible to search with multiple criteria in zoho.crm.searchRecords? I have tried several variations of the following without much success. CustomerRecord = zoho.crm.searchRecords("Contacts", "(First Name|=| lee)" && "(Last Name|=| spencer)"); Thanks. Chris

    • [Request] Pivot filter date option : from set date to relative value ie from 01Jan to LastMonth

      I don't think I can currently do this... but it's worth asking if it's possible. My use case is concerning annual leave which is calculated from the beginning of the calendar year (01Jan) then each month I want to have details of leave taken etc... In

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

    • Mois de la sensibilisation à la cybersécurité 2026 : faites de la sécurité un réflexe avec Zoho

      Imaginez : vos systèmes informatiques répondent aux normes de sécurité en vigueur et votre entreprise est assurée contre les cyberattaques. Pourtant, un matin, tout bascule. Vos données sont chiffrées et un message glaçant s’affiche à l’écran : « Si vous

    • Specifying time increments on a Date/Time field

      Hi all, Im using a Date/Time field in my CRM module. At the moment the increments are 30 minutes. How can I change these to be 15 minutes? Thanks

    • What's new in Zoho Workplace | August 2026

      Hello Zoho Workplace community! Here's a roundup of all the new features and announcements that went live across Zoho Workplace applications in August. Zoho Mail Zoho Mail is now available in AWS Marketplace! AWS Marketplace users can access and subscribe

    • What's new in Zoho Social - Q3 recap

      Hello everyone, We've rolled out a bunch of exciting updates in Q3, and we're thrilled to walk you through them. Here's a quick look at everything we released in July, August, and September to help you experiment with content, automate engagement workflows,

    • Next Page