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

    • How to add line breaks in formula with Concat?

      I am trying to combine different fields with a formula field, but want to add line breaks.  I.e. the current code looks like:  Concat(${Contacts.Company_Name}, ' ' ,${Contacts.First_Name}, ' ' ,${Contacts.Last_Name}) And the result should be:  John Doe

    • 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

    • Join the Zoho Desk Virtual Classroom Training (VCRT)

      Hello everyone, Have you heard about Zoho's Virtual Classroom Training (VCRT)? Zoho Desk's Virtual Classroom Training offers end-to-end training for Zoho Desk users. Join the VCRT and get hands-on guidance for setting up Zoho Desk and getting your business

    • Zoho CRM's revamped timeline view now extends to 3 years and support notes, filters, and email statuses

      Editions: All DCs: All Release plan: These enhancements are being rolled out to customers in a phased manner. They will be available to most organizations by the end of May. For organizations with huge volumes of data, they will be available by the end

    • Zoho Mail App Unable to connect to server

      Hi all, For the last two weeks, my Zoho Mail App on my iPhone which has worked fine up to this point has been unable to connect to the mail server. I can't access my emails even though I will get notification banners on the screen saying that they have been received. I can open Safari on my phone and then log in that way. This issue happens when I'm connected to wifi and on my phone data.  I've tried deleting the app several times and reinstalling, and have updated to the latest version. But it still

    • Specific ListView Canvas on Canvas Home Page Always Loads Most Recent ListView, Not the One Specified

      I had mentioned this to ZOHO, but I mainly wanted to see if others in the Community are also facing this problem. I created a Canvas ListView for a Custom Module, and then created a Canvas Home page (technically on a tab item, but I'm not sure if that

    • Add the Zoom Option to the Camera

      Hi, I use the ZOHO Forms Camera so I can manage metadata, compression, etc. but this doesnt have the zoom parameter activated, so when we have photos in a tight space and want to use 0.5 for example, we can't, can this be enabled please. Thanks Dan

    • Manage booking pages from your Android phone

      Hello everyone! We are happy to announce that users can now add and manage booking pages from their Bigin Android app. It is a multi-step form that users can create for purposes like booking appointments, scheduling calls or meetings, conducting webinars,

    • New UI - Color Preference Not Saving Permanently

      Small, not very urgent problem I'd like to share regarding the new UI theme color. I've changed my theme preference to the default blue color around 20 times by now. It always reverts to a green color theme. I've followed the instructions of changing

    • reset password

      Hi I need to reset my password and need help

    • Automating Employee Birthday Notifications in Zoho Cliq

      Have you ever missed a birthday and felt like the office Grinch? Fear not, the Cliq Developer Platform has got your back! With Zoho Cliq's Schedulers, you can be the office party-cipant who never forgets a single cake, balloon, or awkward rendition of

    • Unbundle feature for composite items

      We receive composite items from our vendors and sell them either individually or create other composite items out of them. So, there is a lot of bundling and unbundling involved with our composite items. Previously, this feature was supported in form

    • Inventory Barcode Creation - Add Picture of Item

      Hi I am trying to set up bar code labels and include a picture of the item on the label - any idea on how to add that field to the barcode generator?

    • Is it possible to set a value to a field based on certain conditions

      Greetings Say i have a field that i want to set its value based on the value of another field.. for example if "number" field has value greater than 10, i want to set my field's value to X. Or if radio group had option 1 selected, then i want to set my

    • 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

    • Protect backed up and exported data using password encryption

      Hello everyone, Protecting live data is crucial for any organization or product, as it contains sensitive customer information. However, protecting data does not end within the platform. Backup and export files often contain sensitive information and

    • Smarter holiday planning with yearly-specific Holiday Lists

      Hello everyone! Managing holidays and business hours is now easier and more efficient. Holiday Lists now support holidays that fall on different dates every year, while business hours now supports more than one holiday list. This helps businesses manage

    • Zoho Projects - Cloning a task does not trigger task workflow when created

      Hello! I have a Project where my team uses a set of tasks from a tasklist as templates, so we could simply clone it and drag it to another list in kanban view to avoid creating a new one from scratch. The process works well, but after cloning it the new

    • Best way to setup Inventory bin tracking for products with multiple boxes/crates

      Hi - we need some advice from the community on setting up Items in the Inventory for products with multiple crates. We have large products in our warehouse where the product is delivered as two large (double pallet) crates. We've setup the Items for these

    • 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

    • not able to access Zoho from home WIFI

      for some reasone i am not able to access Zoho on my laptop or my iphone while i am connected to my home Wifi, i am able to access these sites both on laptop as well as Iphone and associated apps on any other Wifi as well as when I am on my 4G connection

    • Five Guided Conversations Updates in Zoho Desk

      Hello everyone, Guided Conversations is getting updates that make it easier to create more inclusive customer experiences, retain important conversation context, customize your widget, keep track of changes, and connect with external services. Here are

    • zoho desk

      Hello, Did Zoho Desk have any issues today? Are tickets coming in late? I have an email account linked, and messages seem to be arriving with a delay—some email threads aren't coming through completely, and so on.

    • An important update for Zoho Cliq desktop users

      The latest version of the Zoho Cliq desktop app (v1.8.0) will no longer be supported on macOS 10.15 Catalina and earlier versions. This is because the framework we use (Electron) no longer supports some older macOS versions. If you’re using macOS 10.15

    • Simplify eSignatures: Automate document workflows with Zoho WorkDrive

      Hello everyone, We’re excited to invite you to our upcoming live webinar, where Zoho WorkDrive and Zoho Sign will come together to show you how to simplify and automate document workflows. From creating and collaborating on documents to approvals, e-signatures,

    • Function #7: Fetch a value from Deal in Zoho CRM to the related Estimate in Zoho Books

      We're here with another function for those using the integration with Zoho CRM. You know that potentials can be linked to transactions in Zoho Books. But if you're including additional details about a Deal (potential) in Zoho CRM and you want to inherit

    • Turn off workflow Applied pop-up

      hi We are new to Desk. I have a rule to set to "waiting for customer" when agent sends reply. This comes up every time. How to i turn off? Or am i seeing as admin.

    • Workflows being applied and the Large unwanted popup

      When a workflow is being applied do to an action, then the Agent is left with a large Window asking if they would like the see the changes this workflow did. Is there any way to disable this prompt from appearing?

    • Maintenance notice for Zoho CommunitySpaces US data centers on August 23, 2026

      Dear customers, We have scheduled a maintenance activity for Zoho CommunitySpaces in our United States (US) data centers on August 23, 2026, from 1:30 a.m. to 2:00 a.m. During this 30-minute maintenance window, Zoho CommunitySpaces will be temporarily

    • Knowledge base: The nitty-gritty of SEO tags

      A well-optimized knowledge base with great SEO can benefit your company by allowing customers to find help articles and support resources using search engines. This enables customers to quickly and efficiently find the information they need without direct

    • zoho desk: Can tickets be created from Microsoft Teams messages?

      I am trying to see if there is a way to integrate Microsoft teams with zohodesk. we have a few customers who prefer to communicate requests through Teams, and it would be great to create tickets when they do.

    • ´´Send Email Reply´´ action does not work when the message body contains placeholders.

      Hi Community, I am working on a workflow where the Customer contact is notified via email when their ticket status goes On Hold. To do that, I chose the Send Email Reply action, and the minute I add a placeholder, the workflow does not work and the ticket´s

    • 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

    • Zoho Forms Spam Submissions

      Hello community! It seems that after updating the Recaptcha settings on our newsletter form (Zoho Forms), we keep getting low quality spam emails subscriptions. I first used 0.5 treshold on invisible google captcha, then raised it to 0.7 but to no avail.

    • Migration from Hosted Exchange Server

      I am looking for documentation on how to migrate from a hosted version of Microsoft Exchange to Zoho Mail.  The existing material is very good for non-hosted Exchange or local Outlook account but I have been unable to locate information to move from a hosted Exchange environment. This is complicated by not being able to have access to the Exchange Server (other than login credentials) and the lack of a local PST file (local Outlook uses OST files). I am to the point that all I need to do is migrate

    • Subform edits don't appear in parent record timeline?

      Is it possible to have subform edits (like add row/delete row) appear in the Timeline for parent records? A user can edit a record, only edit the subform, and it doesn't appear in the timeline. Is there a workaround or way that we can show when a user

    • 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 Business Calling API

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

    • 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

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

    • Next Page