Kaizen #175 - Leverage Settings Widget for Zoho CRM Extensions

Kaizen #175 - Leverage Settings Widget for Zoho CRM Extensions



Howdy, innovators!

Welcome back to a fresh week of Kaizen.

This week, we will delve into configuring a Settings widget in Zoho CRM for the effective functioning of extensions. It centralizes around key configurations that will be carried out to various integrations in an extension. A user-friendly settings widget enhances the usability and flexibility of your extensions. 

Why use a Settings Widget?

A Settings Widget plays a crucial role in making extensions user-friendly and adaptable to specific business needs. Following are a few key advantages of using the settings widget:
  • Seamless Setup Post-Installation: Users can configure critical parameters right after installing the extension.
  • Dynamic Customization: Users can revisit and modify configurations at any time, ensuring that the extension adapts to changing needs without re-installation or development
  • Improved User Experience: Allows the end-users to control how the extension interacts with their workflows and data.
  • Enhanced Control: Provides an overview and centralized control, making maintenance, troubleshooting, and updates simpler and faster.

Business Scenario: Notification Settings for Lead Import Extension

Let’s take a real-world use case to understand the value of this settings widget.

Imagine an organization named Zylker, using Zoho CRM along with a lead import extension. This extension pulls in leads from multiple sources like web forms, social media, or third-party marketing tools.

Requirement

Whenever a new lead enters a Zoho CRM organization through this extension, the sales team wants to receive an instant notification on a specific Zoho Cliq channel for that organization. This ensures they never miss a lead. 

Solution

By adding a Settings Widget to the extension, users can:

> Select a Preferred Zoho Cliq Channel: From the settings page, users can choose the channel where notifications should be sent.

> Modify the Channel Anytime: Based on team restructuring or communication preferences, users can revisit the settings and update the channel as needed.

With this setup, the settings widget becomes the control center, ensuring the efficient functioning of both the extension and the sales process. 

Building a Settings Extension Widget

Let us create a sample settings widget for the above business scenario. 

Create a Private Extension Widget

       1. Log into Zoho CRM, navigate to Setup > Marketplace > Extension Builder, and create a new extension by selecting Zoho CRM as the service.  

            

      2. The private extension that you have created will be listed in the Extensions page. Choose your extension and click the edit icon. 

            You will then be redirected to the Zoho Developer Console.
 
Dependency Configuration

Now, let us configure a couple of dependencies required for this use case in the developer console.  

Connectors 

To notify a Zoho Cliq channel, Connectors authorize the end user's Zoho Cliq account with the extension and grant access to the necessary data. Follow these steps to create a connector with the required APIs for the widget.

      3. In the console, navigate to Utilities > Connectors on the left-side menu.

      4. Click Create Connector and provide the required details using the guidance available on the Server-based Application help page.

           

      5. Use the generated Redirect URL to register your application in Zoho's API Console. After registration, enter the Client ID and Client Secret in the developer console.  

           

      6. Create Connector APIs for the following: 
  •  GET List of all Channels to fetch all the available channels from your Zoho Cliq Account.  



    The Authorization header is automatically added to all the Connector APIs. 
  • POST Message in Channel to notify the incoming leads in the channel. 



    You can include dynamic place holders in the URL, header, or request body using this format ${place_holder}.
      7. Once the APIs are configured, publish and associate the connector with the extension. 

            
          
           Refer to the Connectors help document to learn more. 

Variable 

Variables are required to store the admin's preferred channel details and retrieve them when a lead enters Zoho CRM through the extension. Upon installing the extension, this variable is automatically created in your Zoho CRM org. 

      8. Go to Build > Custom Properties and create a variable. 

         

Set the variable's permission to Hidden to prevent the CRM users from accessing/modifying the variable data from the Zoho CRM Variables page. This ensures that variables can only be configured through the extension.

For more information, refer to the Custom Variables help document

Idea
Tip

In your Zoho CRM, go to Setup > Security Control > Profiles and restrict permissions for your extension to prevent unauthorized access to the settings page.

Building a Connected App 

      9. In the console, go to Utilities > Connected Apps on the left-side menu.

      10. Follow the steps provided in this kaizen to create a new Zoho CRM widget for this use case. 

Code Logic for the Settings Panel
  • Create a drop-down field called Select Cliq Channel to the settings panel. This dropdown should dynamically list the channels from your Zoho Cliq account by invoking the GET Cliq Channels API. Follow the given Invoke Connector method to execute Connector APIs.           
 // Initialize Zoho Embed SDK
        ZOHO.embeddedApp.on("PageLoad", function () {
            fetchCliqChannels();
        });

        ZOHO.embeddedApp.init();

        // Fetch Cliq channels
        async function fetchCliqChannels() {
            const channelDropdown = document.getElementById("cliqChannel");
            try {
                console.log("Fetching channels from Zoho Cliq...");
                const req_data = {
                    "parameters": {}
                };
                const response = await ZOHO.CRM.CONNECTOR.invokeAPI("leadgeneration.zohocliq.listofallchannels", req_data);
                console.log("Response from Zoho Cliq:", response);
                const parsedResponse = JSON.parse(response.response);
                const channels = parsedResponse.channels;
                if (channels && Array.isArray(channels)) {
                    channelDropdown.innerHTML = channels.map(channel => `<option value="${channel.unique_name}">${channel.name}</option>`).join('');
                } else {
                    throw new Error("Invalid response structure");
                }
            } catch (error) {
                console.error("Error fetching channels:", error);
                if (error.code === '403') {
                    console.error("Authorization Exception: Please check your API permissions and authentication.");
                }
                channelDropdown.innerHTML = '<option value="">Failed to load channels</option>';
            }
        }

  • Add a Save Configuration button that stores the selected channel name and channel ID in the variable created earlier. To save the selected data into the variable, use the invokeAPI() function, with the namespace as crm.set
 // Save configuration
        async function saveConfiguration(event) {
            event.preventDefault();
            const channelDropdown = document.getElementById("cliqChannel");
            const selectedChannelUniqueName = channelDropdown.value;
            const selectedChannelName = channelDropdown.options[channelDropdown.selectedIndex].text;

            if (!selectedChannelUniqueName) {
                alert("Please select a channel.");
                return;
            }

            const settings = {
                unique_name: selectedChannelUniqueName,
                name: selectedChannelName
            };

            const data = {
                "apiname": "leadgeneration__Cliq_Channel",
                "value": JSON.stringify(settings)
            };

            try {
                const response = await ZOHO.CRM.CONNECTOR.invokeAPI("crm.set", data);
                console.log("Updated settings:", response);
                document.getElementById("setupStatus").innerText = "Configuration saved successfully!";
            } catch (error) {
                console.error("Error saving configuration:", error);
                document.getElementById("setupStatus").innerText = "Failed to save configuration.";
            }
        }

  • When a lead enters Zoho CRM through the extension, it should trigger a function that:Retrieves the saved channel details:  
                  > Retrieves the saved channel details: Uses the Get Organization Variable JS SDK to call the Zoho CRM GET Variable API to fetch the saved channel details.
                        
                     

                  > Notifies the channel: Sends a message to the retrieved channel using the Post Message API

Info
Info

-> A complete working code sample for the use case is attached at the end of this post for your reference.  

-> The test function for triggering notifications is also included in the attachment. You can use the same snippet in your extension to initiate the notification process.

-> Ensure to replace the unique names of your Connector APIs and Variable.

      11. Fill in the details of the application as shown in this image and upload the widget ZIP file packed using the Zoho CLI command. 

             

      12. Click Save.  

Configure the Settings Widget

      13. Navigate to Build > Settings Widget in the left menu.  

      14. Provide a Name and the Resource Path of your widget.   

      15. Click Save.

             
Info
The Settings Widget for Extension is available upon request. Contact support@zohocrmplatform.com to enable it for your account. 

Packaging, Publishing and Deploying 

      16. Go to Package > Publish on the left-side menu and publish the extension.   

      17. The review process for listing an extension in the Marketplace will take from three weeks to one month

            For the demo, we will proceed with deploying the extension using the private plugin deployment link.

            

      18. Now, replace the URL of your Zoho CRM page with the deployment link from the Developer Console and approve the extension installation.  

Try it Out! 

Once installed: 

A pop-up will appear, prompting you to authorize Zoho Cliq for the required configurations. 

If you do not already have a Zoho Cliq account, you can sign up directly from the pop-up and proceed with the authorization.


> After authorization, you will be redirected to the Settings widget page, where you can select and save your preferred Cliq channel.

> If you need to update the settings later, you can find them on the Installed Extensions page under the respective extension.

 

Notes
Note

The demo videos above use a testing function to notify the channel. You can deploy it anywhere in your extension to trigger a notification whenever a lead enters a Zoho CRM organization through the extension.

Find the function in the attachments at the end of this post.

Similar Scenarios

  • Sales Territory Management: An extension that auto-assigns incoming leads to sales reps can use a settings widget to allow managers to define territories and sales rep mappings dynamically.
  • Custom Field Mapping: For extensions that sync data between Zoho CRM and external systems, a settings widget can let users map CRM fields to external system fields.
  • Automated Email Preferences: In email automation extensions, the settings widget can allow users to specify email templates, recipients, or trigger conditions for follow-ups and campaigns.
Adding a Settings Widget to your Zoho CRM Extensions not only enhances user experience but also boosts the flexibility and efficiency of your extension. Whether it is notifying sales teams or customizing field mappings, a well-designed settings page is a game-changer for your extensions. 

Explore the Widget section in our Kaizen collection to try out various widget types and discover their unique use cases. 

If you have any queries or a topic to be discussed reach out to us at support@zohocrm.com or drop your comment below. 

Until next time, keep innovating!

Cheers! 

----------------------------------------------------------------------------------------------------------------------------------------

Related Reading

  1. Zoho CRM Widget - An Overview, Installation and Creation, Mobile Compatibility, Telephony Widget Extension, and other Kaizens.
  2. Widget SDKs - An Overview, Invoke Connector and Get Organization Variable.
  3. Zoho Developer Console - An Overview, Creating Extensions, Building Connected Apps, and A Quick Start Guide.
  4. Zoho Extensions - Custom Variables and Connectors
  5. Zoho Cliq - GET List of Channels and POST Message in Channel.
  6. Zoho Marketplace - An Overview
----------------------------------------------------------------------------------------------------------------------------------------

Idea
Previous Kaizen: Kaizen #174 - Client Script Commands | Kaizen Collection: Directory
Info
More enhancements in the COQL API are now live in Zoho CRM API Version 7. Check out the V7 Changelog for detailed information on these updates.
    • Sticky Posts

    • Kaizen #197: Frequently Asked Questions on GraphQL APIs

      🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.
    • Kaizen #198: Using Client Script for Custom Validation in Blueprint

      Nearing 200th Kaizen Post – 1 More to the Big Two-Oh-Oh! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.
    • Celebrating 200 posts of Kaizen! Share your ideas for the milestone post

      Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQs
    • Kaizen #193: Creating different fields in Zoho CRM through API

      🎊 Nearing 200th Kaizen Post – We want to hear from you! Do you have any questions, suggestions, or topics you would like us to cover in future posts? Your insights and suggestions help us shape future content and make this series better for everyone.
    • Client Script | Update - Introducing Commands in Client Script!

      Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands
    • Recent Topics

    • Important Update : Zendesk Sell announced End of Life

      Hello Zendesk users, Zendesk has officially announced that Zendesk Sell will reach its End of Life (EOL) on August 31, 2027 (Learn more). In line with this deprecation, Zoho Analytics will retire its native Zendesk Sell connector effective October 1,
    • Zoho Sheets

      Hi, I am trying to transition into Zoho sheets, I have attached the issues encountered. Server issues, file trying to upload for more than 30 mins, even once uploaded my data aren't loaded. Simple calculations are not working I have attached the sample.
    • Zoho CRM + Zoho FSM : alignez vos équipes commerciales et techniques

      La vente est finalisée, mais le parcours client ne fait que commencer ! Dans les entreprises orientées service, conclure une vente représente seulement la première étape. Ce qui suit — installation, réparation ou maintenance régulière — influence grandement
    • Top Bar Shifting issue still not fixed yet

      I mentioned in a previous ticket that on Android, the top bar shifts up when you view collections or when you're in the settings. That issue still hasn't been fixed yet. I don't wanna have to reinstall the app as I've noticed for some reason, reinstalling
    • Power of Automation:: Automate the process of updating project status based on a specific task status.

      Hello Everyone, Today, I am pleased to showcase the capabilities of a custom function that is available in our Gallery. To explore the custom functions within the Gallery, please follow the steps below. Click Setup in the top right corner > Developer
    • ZOHO SHEETS

      Where can I access desktop version of zoho sheets? It is important to do basic work If it is available, please guide me to the same
    • Attention API Users: Upcoming Support for Renaming System Fields

      Hello all! We are excited to announce an upcoming enhancement in Zoho CRM: support for renaming system-defined fields! Current Behavior Currently, system-defined fields returned by the GET - Fields Metadata API have display_label and field_label properties
    • Billing Management: #3 Billing Unbilled Charges Periodically

      We had a smooth sail into Prorated Billing, a practice that ensures fairness when customers join, upgrade, or downgrade a service at any point during the billing cycle. But what happens when a customer requests additional limits or features during the
    • No bank feeds from First National Bank South Africa since 12 September

      I do not know how Zoho Books expects its customers to run a business like this. I have contacted Zoho books numerous times about this and the say it is solved - on email NO ONE ANSWERS THE SOUTH AFRICAN HELP LINE Come on Zoho Books, you cannot expect
    • Citation Problem

      I had an previous ticket (#116148702) on this subject. The basic problem is this; the "Fetch Details" feature works fine on the first attempt but fails on every subsequent attempt, Back in July after having submitted information electronically and was
    • Open Sans Font in Zoho Books is not Open Sans.

      Font choice in customising PDF Templates is very limited, we cannot upload custom fonts, and to make things worse, the font names are not accurate. I selected Open Sans, and thought the system was bugging, but no, Open Sans is not Open Sans. The real
    • Failing to generate Access and Refresh Token

      Hello.  I have two problems: First one when generating Access and Refresh Token I get this response:  As per the guide here : https://www.zoho.com/books/api/v3/#oauth (using server based application) I'm following all the steps. I have managed to get
    • Zeptomail 136.143.188.150 blocked by SpamCop

      Hi - it looks like this IP is being blocked, resulting in hard bounces unfortunately :( "Reason: uncategorized-bounceMessage: 5.7.1 Service unavailable; Client host [136.143.188.150] blocked using bl.spamcop.net; Blocked - see https://www.spamcop.net/bl.shtml?136.143.188.150
    • Apply transaction rules to multiple banks

      Is there any way to make transaction rules for one bank apply to other banks? It seems cumbersome to have to re-enter the same date for every account.
    • How to bulk update records with Data Enrichment by Zia

      Hi, I want to bulk update my records with Data Enrichment by Zia. How can I do this?
    • Need Guidance on SPF Flattening for Zoho Mail Configuration

      Hi everyone, I'm hoping to get some advice on optimizing my SPF record for a Zoho Mail setup. I use Zoho Mail along with several other Zoho services, and as a result, my current SPF record has grown to include multiple include mechanisms. My Cloudflare
    • How do I split a large CSV file into smaller parts for import into Zoho?

      Hi everyone, I’m trying to upload a CSV file into Zoho, but the file is very large (millions of rows), and Zoho keeps giving me errors or takes forever to process. I think the file size is too big for a single import. Manually breaking the CSV into smaller
    • Client Script Payload Size Bug

      var createParams = { "data": [{ "Name": "PS for PR 4050082000024714556", "Price_Request": { "id": "4050082000024714556" }, "Account": { "id": "4050082000021345001" }, "Deal": { "id": "4050082000023972001" }, "Owner": { "id": "4050082000007223004" }, "Approval_Status":
    • Sync Issue Between Zoho Notebook Web App on Firefox (PC) and Android App

      Hi Zoho Notebook Community, I'm facing a sync problem with Zoho Notebook. When I use the web version on Mozilla Firefox browser on my PC, I create and save new notes, and I've synced them successfully. However, these new notes aren't showing up in my
    • Messages not displayed from personal LinkedIn profile

      Hello. I connected both our company profile and my personal profile to Zoho social. I do see all messages from our company page but none from my private page. not even the profile is being added on top to to switch between company or private profile,
    • lead convert between modules

      Hello, The workflow we set up to automatically transfer leads registered via Zapier into the Patients module to the Leads module started to malfunction unexpectedly on September 25, 2025, at 11:00 AM. Under normal circumstances, all fields filled in the
    • Flow Task Limits - How to Monitor, Understand Consumption?

      So, I got an email last night saying that I've exhausted 70% of my tasks for this month, and encouraging me to buy more tasks. I started to dig into this, and I cannot for the life of me figure out where to find any useful information for understanding,
    • Cross References Do Not Update Correctly

      I am using cross references to reference Figures and current am just using the label and number, i.e. Figure #. As seen here: When I need to update the field, I use the update field button. But it will change the cross reference to no longer only including
    • Manage control over Microsoft Office 365 integrations with profile-based sync permissions

      Greetings all, Previously, all users in Zoho CRM had access to enable Microsoft integrations (Calendar, Contacts, and Tasks) in their accounts, regardless of their profile type. Users with administrator profiles can now manage profile-based permissions
    • How to Track and Manage Schedule Changes in Zoho Projects

      Keeping projects on track requires meticulous planning. However, unforeseen circumstances can cause changes to schedules, leading to delays. It becomes important to capture the reason for such changes to avoid them in the future. Zoho Projects acknowledges
    • Is there a notification API when a new note is addeding

      Trying to push to Cliq, or email notification when there's a new note added in module. How to implement this?
    • Zoho Sheet - Desktop App or Offline

      Since Zoho Docs is now available as a desktop app and offline, when is a realistic ETA for Sheet to have the same functionality?I am surprised this was not laucned at the same time as Docs.
    • Collaborate Feature doesn't work

      Hello Team. It seems that the collaborate section is broken? I can post something but it all appears in "Discussions". In there is no way how I would mark something as Draft, Approval, post or any of the other filter categories? Also if I draft a post
    • Edit Permission during and after approval?

      When a record is sent for approval Can a user request for edit permission from the approver? We don't want to give edit permissions for all the records under approval Only on a case-by-case basis How can we achieve this?
    • Zoho web and mobile application not workingn

      Both zoho forms web and mobile application aren't working. I have checked my network connections and they are fine.
    • Introducing the revamped What's New page

      Hello everyone! We're happy to announce that Zoho Campaigns' What's New page has undergone a complete revamp. We've bid the old page adieu after a long time and have introduced a new, sleeker-looking page. Without further ado, let's dive into the main
    • Prevent stripping of custom CSS when creating an email template?

      Anyone have a workaround for this? Zoho really needs to hire new designers - templates are terrible. A custom template has been created, but every time we try to use it, it strips out all the CSS from the head.  IE, we'll define the styles right in the <head> (simple example below) and everything gets stripped (initially, it saves fine, but when you browse away and come back to the template, all the custom css is removed). <style type="text/css"> .footerContent a{display:block !important;} </style>
    • Bulk Moving Images into Folders in the Library

      I can't seem to select multiple images to move into a folder in order to clean up my image library and organize it. Instead, I have to move each individual image into the folder and sometimes it takes MULTIPLE tries to get it to go in there. Am I missing
    • Latest updates in Zoho Meeting | Breakout rooms and End to end encryption

      Hello everyone, We’re excited to share a few updates for Zoho Meeting. Here's what we've been working on lately: Introducing Breakout Rooms for enhanced collaboration in your online meetings and End-to-end encryption to ensure that the data is encrypted
    • Systematic SPF alignment issues with Zoho subdomains

      Analysis Period: August 19 - September 1, 2025 PROBLEM SUMMARY Multiple Zoho services are causing systematic SPF authentication failures in DMARC reports from major email providers (Google, Microsoft, Zoho). While emails are successfully delivered due
    • Accidentally deleted a meeting recording -- can it be recovered?

      Hi, I accidentally deleted the recording for a meeting I had today. Is there a way I can recover it?
    • To Zoho customers and partners: how do you use Linked Workspaces?

      Hello, I'm exploring how we can set up and use Linked Workspaces and would like to hear from customers and partners about your use cases and experience with them. I have a Zoho ticket open, because my workspace creation fails. In the meantime, how is
    • How to access email templates using Desk API?

      Trying to send an email to the customer associated to the ticket for an after hours notification and can't find the API endpoint to grab the email template. Found an example stating it should be: "https://desk.zoho.com/api/v1/emailtemplates/" + templateID;
    • How to render either thumbnail_url or preview_url or preview_data_url

      I get 401 Unauthorised when using these urls in the <img> tag src attribute. Guide me on how to use them!
    • Update Portal User Name using Deluge?

      Hey everyone. I have a basic intake form that gathers some general information. Our team then has a consultation with the person. If the person wants to move forward, the team pushes a CRM button that adds the user to a creator portal. That process is
    • Next Page