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:
- The admin needs a single place to define and manage the master list of onboarding steps for the organization.
- 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:
- A Settings widget that lets the admin define and manage the master list of onboarding checklist items for the organization.
- 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
- 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.
- 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
- 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.
- 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.
New to Zoho Recruit?
Zoho Campaigns Resources
Topic Participants
Sabitha M
Sticky Posts
Building Toppings #8 - 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.Building Toppings #7 - Using schedules and workflow functions
Hello Biginners, In our previous forum post, we explored install and uninstall actions and learned how to trigger custom logic the moment a topping is added or removed from an organization. In this post, we'll look at how to automate actions during regular,Building Toppings #6 - Install and uninstall actions
Hello Biginners! In our previous forum post, we explored creating connections - specifically, custom service connections in the Bigin Developer Console. In this post, we'll focus on another feature that can be used in every topping: install actions. We'llBuilding Toppings #5 - Creating and configuring custom service connections in Bigin Toppings
Hello Biginners, Integrating Bigin with external applications extends its capabilities and enables customized functionalities. In our last post, we saw how to create a default service connection. Today, we'll see how to create a custom service connectionBuilding Toppings #4 - Setting up and using connections in Bigin toppings
When building a topping to extend Bigin's functionality and connect it with third-party applications, creating and handling connections is an important step. Connections provide a secure way for your topping to authenticate and communicate with other
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Zoho Orchestly Resources
Zoho Creator Resources
Zoho WorkDrive Resources
Zoho CRM Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
ご検討中の方
Recent Topics
OpenAI Is Moving to the Responses API: Here's What It Means for SalesIQ
OpenAI has deprecated its Assistants API and is moving to the Responses API. If you're using OpenAI Assistants with SalesIQ, you may be wondering if you need to make any changes to your existing setup. You don't. SalesIQ has already taken care of theNeed Native Support for docx files in Zoho Writer
Absolutely love Zoho Writer, but often need to share files by email with people who are in the Office ecosystem. Downloading a file as docx, then sending it by email, getting the comments back, converting it to Zoho format, editing it, then convertingCRM integration issues
hi Just start testing Campaigns. Read up on up on these issues but can not find an answer. I am super admin. 1) its only showing 1002 contacts, I have a 2500 plan which is confirmed in dashboard. I says it sync'd 1400. I've looked at missing contacts,What's New in Zoho Expense: Integrated Business Travel and AI-Powered Expense Management
This release brings a wide range of updates across Zoho Expense, including new AI-powered capabilities, enhancements to corporate cards, expense management, audits, and more. Keep reading to know how the new updates can transform your travel and expenseChatGPT 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 oauthProject Management Platforms for AI Agents: What Matters Most?
Zoho Projects is already going beyond basic AI assistance with MCP, AI Bridge, and integrations that let AI models access project data and perform actions. That raises an interesting question: what should a project management platform for AI agents actuallySync workdrive feature inside ZohoCRM
Hi, I'm exploring the new workdrive/ZohoCRM connector released by Zoho to replace the free extension workdriveforCRM which is decomissioned https://marketplace.zoho.com/app/crm/zoho-workdrive-for-zoho-crm I'm rather upset with this long awaited feature,Adding Custom Status Options in Work Order Action Menu
Hello FSM Team, We would like to inquire if it is possible to add more custom options in the Work Order action/status dropdown (e.g., Cancel, Terminate, Non-Billable, Void, etc.). Currently, the available options are limited, and we are unable to customizeMTA - BAD IP reputation by outlook/hotmail
Messages to Microsoft email servers are bouncing back due to poor reputation. Message: 4.7.650 The mail server [136.143.188.206] has been temporarily rate limited due to IP reputation. For e-mail delivery information see https://postmaster.live.com (S775)Timesheet Task Icons
In the image below which shows the task field drop down when creating a timesheet against a project and task. What do the icons mean the the right side column against each task? I can't find any documentation or guide that explains what the no entry sign,Open Records in a New Browser Tab
Hi FSM Team, Just a suggestion: It would be helpful to have a right-click → Open in New Tab option in FSM, similar to CRM. This should ideally work for any clickable record or module, allowing users to open multiple records in separate tabs without losingFacturation électronique 2026 - obligation dès le 1er septembre 2026
Bonjour, Je me permets de réagir à divers posts publiés ici et là concernant le projet de E-Invoicing, dans le cadre de la facturation électronique prévue très prochainement. Dans le cadre du passage à la facturation électronique pour les entreprises,Marketing Tip #18: Make your online store mobile-friendly to improve traffic
Most online shoppers browse on their phones first. If your store is hard to read, slow to load, or tricky to navigate on mobile, they’ll bounce fast. A mobile-friendly store doesn’t just look nice; it improves engagement, reduces drop-offs, and helpsCannot add note to record on mobile
In the latest version of the mobile app - if a record already has notes associated with it - you can add a note via the mobile app - if a record does not have previous notes there is no way to add a new one - it allows me only to send emailDashboards for Customers
Is it possible to build dashboards for each customers in the community for their tickets?Custom color coding for your entities
Our brains are fine tuned to recognize colors before any text or shapes, making color coding a powerful tool to organize data and find items quickly. Color coding of our day-to-day work help with quickly processing the information, reducing cognitiveThe Social Wall: August 2026
Hello everyone. Welcome to the August 2026 edition of The Social Wall. This month, we're bringing you updates that make it easier to reach your audience, manage more channels, and streamline your publishing workflow. Here’s what’s new. WhatsApp bulk messagingCheck out in Meetings
Why there is no check out in Meetings of Zoho CRM, very difficult to trackHow do I get to "Admin Panel"
I just started a Cliq account. I am the sole administrator. As I read the documentation, I keep seeing reference to an "Admin Panel". I see no way to access this from my Cliq account. How do I access this panel?【初開催！ オンライン】Zoho Campaigns メール配信の基礎・活用勉強会を開催します！ 10/15 参加無料
ユーザーの皆さま、こんにちは。 Zoho コミュニティグループの中野です。 Zoho ユーザーコミュニティ初となる、メールマーケティングをテーマにしたオンライン勉強会を開催します！ ▶︎イベント詳細・参加登録はこちら 今回取り上げるサービスは「Zoho Campaigns」です。 「Zoho CRMとZoho Campaignsのどちらからメールを配信すればよいか分からない」 「一斉配信はできるようになったけれど、現在のリスト管理や設定が正しいか不安」 「メールを送るだけで終わり、配信後の改善につなげられていない」Marketing Tip #46: Run flash sales the right way
A flash sale can do a lot for your store. It can clear slow-moving inventory, spike revenue on a slow day, or reward your most loyal customers. But if done carelessly, flash sales can backfire. Customers start expecting discounts, stop buying at fullIntroducing 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 dragCheckbox not displaying correctly in subform
Greetings: I have shared my app (wv) with support. I am having problems with a checkbox field not displaying correctly in a subform. The main form is called volunteers and the subform is called volunteers_subform. The field in question is called roles. When you access the subform by itself the checkbox lookup displays as checkboxes. But when you view it in the main volunteers form, it displays as a multi-select dropdown instead. I have attached jpegs showing the difference. Any thoughts?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 formValid characters for use in email addresses using Zoho's apps/APIs
We have found an issue with the + sign character in zoho subs - we are allowed to create a customer with an email address that has a plus sign but the API doesn't allow the + so the billing portal is not created. We are going to prevent users from usingExpand Zoho Analytics Spatial Capabitlities
Dear Analytics team Thanks for the great product - I'm a big fan on Analytics and the monthly release highlights is one of my favourite emails to receive. I'd like to request expansion and improvement of Zoho Analytics spatial data capabilities, namely:Automate customer follow-ups with Sequences in Bigin
Greetings, We hope you're all doing well! We're happy to announce a new feature that we've added to Bigin. Following up with every lead at the right time can be challenging, especially when your team is managing multiple conversations across emails, calls,Displaying only unread tickets in ticket view
Hello, I was wondering if someone might be able to help me with this one. We use filters to display our ticket list, typically using a saved filter which displays the tickets which are overdue or due today. What I'd really like is another filter thatCan we have an automated TDS Receivable Recon with Form 26AS of Income Tax Portal ?
Can we have an automated TDS Receivable Recon with Form 26AS of Income Tax Portal ?Customers would like to add tips when paying in Client Portal
I am happy with the clean interface of the Client Portal. However, I am running into a challenge: my customers would like to be able to add tips/gratuities when making payments. Currently, this is very clunky because they have to 1) manually over-pay,Tag Limi?
is there any way to create more than 20 tags?prefill_data for Creator + Merge & Sign
Hello, Is there an option to use prefill_data for signer fields from creator? I see the option for CRM but it will not work with creator? I have tried passing the value in the signer data, and that also does not work. Alternatively, is there a way toCan I Build a Gaming Website Using Zoho? Need a Quick Roadmap
Hi Dear Members, I want to create a gaming website using Zoho. Is it possible? My goal is to build a sleek, unique, easy-to-navigate, and fast-loading website for a gaming project. I want the site to look professional, user-friendly, and optimized forRemove Due Date from Statements
Is it possible to remove the Due Date on the Invoice transation line on statements? I have figured work arounds to get the Invoice detail on the Statement but cannot work out haw to simplify the stament by removing the "- due on xx/xx/2026" - it reallyWhat Should an Agent-Native Project Workspace Look Like
AI is moving beyond assistants that simply answer questions. With tools like MCP, agents can now interact directly with project data and perform actions. That makes me wonder: what should an agent-native project workspace actually look like? For me, itunable to join meeting due to speaker issue
unable to join meeting due to speaker issueHow to add formatting in zoho.cliq.postToUser(...) message?
In a CRM Deluge function, I'm trying to use the message formatting guidelines given here: https://www.zoho.com/deluge/help/cliq/posting-to-zoho-cliq.html#message-formats My message is: message: #Title text. The result in Cliq is: #Title text. (no largeMarketing Tip #50: Sell digital products and use them to grow your store
Physical products need packaging, shipping, and stock management. Digital products need none of that. Once created, they can be sold an unlimited number of times, delivered instantly, and never go out of stock. What counts as a digital product? A digitalCan I import customer data from Zoho Invoice to Zoho CRM?
I have been using zoho invoice for a couple of years and have built up my client list here. I am now giving Zoho CRM a shot and am hoping I can get a lot of my already established data (financial trading records) over to zoho crm? Can anyone tell me if this is possible and how can I do it?Turn off Mobile Optimize
Hello is it possible to stop the automatic mobile optimization of my site as it looks much better on a mobile in full site format rather than mobile format. ThanksNext Page