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. 

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

-> 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.

             

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.

 

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

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

Previous Kaizen: Kaizen #174 - Client Script Commands | Kaizen Collection: Directory

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.

• Topic Participants

• Kiruthiga G

  

• 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

• No Response from Zoho Support in 8 Days - Typical?

  I have a couple of issues I'm trying to work through. Initially, I was getting support from support@zohofsm.com, but I have not received a response in 8 days (11 on another question). Is this typical? Can I pay for support? For context, I am not spamming

• Add QUOTE OWNER profile image to a Quote Template

  I can add their email address.. phone number, DOB. I need to add a users profile picture so when they assign a template to a quote they own it adds their picture to the cover page. I've tried hacking a solution together but there has to be an easier way.

• Zoho Connections Desk API relative URL PATTERN_NOT_MATCHED

  While i am trying to do this: async function fetchTicketsFromDesk(timeFilter = 'current_month') { try { const response = await ZOHO.CRM.CONNECTION.invoke("desk_connection", { url: "/api/v1/tickets", method: "GET", }); const data = response.details ? JSON.parse(response.details)

• Zoho CRM - Custom Views for Portal Users

  I'm looking for an option to customise custom views for portal users in CRM. It would be great if "portal user" was a permission on custom views.

• 【参加無料】10/17(金) 東京 ユーザ交流会 Vol.3 参加登録 受付開始！

  ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 10/17(金)に、東京・新橋で「東京 ユーザー交流会 Vol.3」を開催します！ 今回のユーザー事例セッションのテーマは、「Zoho Flowを活用した他社の決済サービスとの連携事例」です。 さらに、Zoho Flowに限らず、Analytics や Campaigns などの多彩なZohoサービスの活用方法について、豊富なご経験をもとにご紹介いただきます。 また、Zoho社員セッションでは、Zoho CRMを活用して日々の営業業務を効率化する具体的な事例をお話しします。業界を問わず、幅広い方にご参考いただける内容となっています！

• Zoho Meeting Plug compatibility with newer versions of Outlook

  Documentation states that the zoho meeting plug in for outlook is only compatible with versions up to Outlook 2019 What is available to users of more up to date versions of outlook/office 365?

• Getting Attachments in Zoho Desk via API

  Is there a way to get attachments into Zoho Desk via an API?      We have a process by which a zoho survey gets sent to the user as a link in a notification.    The survey has several upload fields where they can upload pdf documents.    I've created

• Introducing Zoho's own SMS gateway

  We're thrilled to announce the launch of our own SMS gateway feature within Zoho Marketing Automation! This new feature enables seamless SMS campaign management alongside your email marketing initiatives, providing a more integrated and efficient way

• Embedding in Desk articles

  We would like to embed documents in our Desk articles. When we use an iframe for the embed, we get scrollbars and a frame border. Neither of those is acceptable. I've spoken with the Desk Support team about what we want and they tell me that it cannot

• Zoho CRM button to download images from image upload field

  Hello, I am trying to create a button in Zoho CRM that I can place in my record details view for each record and use it to download all images in the image upload fields. I tried deluge, client scripts and even with a widget, but feel lost, could not

• Mass Update Contacts In Zoho Campaigns

  Is there a way to mass update contacts in zoho campaigns? I want to be able to change the content of a field for a few hundred contacts, and can't go through all of them individually.

• report showing assignment type

  Hi, We've created a number of workflows to allow us to auto assign tickets to agents based on keywords and other criteria. I'm struggling to create a report that would show me what is the percentage of tickets that are assigned automatically via workflows

• Option to Disable Knowledge Base Section in Feedback Widget Popup Hello Zoho Desk Team

  Hello Zoho Desk Team, How are you? We are actively using Zoho Desk and would like to make more use of the Feedback Widget. One of the ways we implement it is through the popup option. At the moment, the popup always displays the Knowledge Base section,

• Placeholders in Ticket Templates

  We should be able to use placeholders in ticket templates. When we create a new ticket, our description field is shown to the client in the email they receive.  It would be very handy to be able to personalize that description field in our ticket templates to pull in the name of the client that the ticket is for. Using them in the subject field as well, so we can auto populate Account Names, etc. 

• when the record is created the tag want to Show as Opportunity how i achive this using Deluge Script

  In the quotation i have the work flow schedule for create opportunity record in the module , on that time the quotation tag select as opportunity created. How i achive this using Deluge Script . this like i want to Do tag1 = Map(); tag1.put("name","Nurturing

• Delete a channel

  I need delete a channel in tickets.

• Copy / Duplicate Workflow

  I have workflows setup that are very similar to each other. We have a monitoring system watching servers, and all notifications - no matter what client it is about - will come from a  noreply@ address which is not very helpful in having it auto assigned to the right account. I have setup a workflow that will change the contact name of the ticket (currently it would say noreply@) to the correct customer which is based on the subject line, as that mentions which server the alert it is about. I need

• Subtasks don't update parent task's times

  Hi there: I've recently upgraded to premium and check that subtasks completion % don't update the proportional completion of the parent tasks related to it.  We've been challenging with the problem of having to update twice or sometimes 3 times the completion of the related tasks. I've seen posts similar to this, of 3 years old.  Is there any roadmap for making this happen in a future release? Thanx César Ratto Lima, Perú.

• Should I Use DMARC?

  When I configure Zoho Mail's DMARC settings, it's mandatory to fill in the RUA and RUF (Aggregate notification email address*, Forensic notification email address*) addresses. When we enter an email address in these fields, we receive reports from the

• Mail ToDo & Tasks Webhooks

  Our company uses Zoho ToDo inside Mail to manage our tasks. When I create a task and assign it to a team member it does not notify them unless I add a reminder via mail. I'm trying to create a webhook for when a task is created to send a cliq message

• Can't upload attachments.

  I can't upload attachment in Zoho Mail.

• Tip #44 – Get Deeper Insights with Zoho Assist’s Custom Reports – ‘Insider Insights’

  In today’s fast-paced IT environment, having a clear view of your remote support activities is more important than ever. Zoho Assist’s Custom Reports feature gives IT teams the ability to generate tailored reports that provide actionable insights and

• Message "...does not support more than 100 distinct values..." WHY????

  I get this message on one of my reports: Sorry, Zoho Reports currently does not support more than 100 distinct values in columns. 'Account Name * Sum(Amount),Count(Amount Tier)' contains more than 100 distinct values.  Possibly, you can apply filter to reduce the number of distinct values in 'Account Name' or drop the 'Account Name' field in Rows. I want to list all ACCOUNT NAMES (about 500) with SALES BY ACCOUNT.  What is blocking this?

• Need Easy Way to Update Item Prices in Bulk

  Hello Everyone, In Zoho Books, updating selling prices is taking too much time. Right now we have to either edit items one by one or do Excel export/import. It will be very useful if Zoho gives a simple option to: Select multiple items and update prices

• Let's Talk Recruit: Super-charge hiring with Zoho Recruit add-ons

  Welcome back to our Let’s Talk Recruit series! This time, we’re diving into something that might seem like a small upgrade but has a huge impact on recruiter productivity: Zoho Recruit add-ons. Think about how much of your day is spent in your inbox or

• Vendor Signatures Needed for Purchase Orders

  Hello everyone, We have a unique requirement that necessitates that Vendors & Suppliers formally acknowledge our Purchase Orders upon receipt. I was hoping that there would be an option to do so in Zoho Books, but that does not appear to be the case.

• Is there an API to "File a Ticket" in Desk

  Hi, Is there an API to "File a Ticket" in Desk to zoho projects?

• Store "Sign in with Google/Microsoft/GitHub etc." details

  Quite often now, users are using a sign-in provider like Google or Microsoft to sign into various apps and services. It would be great if Vault could remember which providers you use for each website and sign you in with that provider instead of a username

• Critical Issue: Tickets Opened for Zoho Support via the Zoho Help Portal Were Not Processed

  Hi everyone, We want to bring to your attention a serious issue we’ve experienced with the Zoho support Help Portal. For more than a week, tickets submitted directly via the Help Portal were not being handled at all. At the same time no alert was posted

• Tip of the Week #72– Assign thread ownership to avoid confusion.

  When teams handle a large volume of emails, managing threads becomes important to stay organized. Without a clear system, duplicate replies, missed follow-ups, or confusion over responsibilities can happen. Thread assignment solves this by designating

• Unarchive tickets

  How can I manually unarchive tickets?

• Optimize your Knowledge Base for enhanced accessibility by adding alt tags for images

  Let's learn why alt tags are crucial for your articles. You can add alternative tags (alt tags) and alternative text (alt text) to the images you share on your community forums or when embedding them in articles. Alt tags refer to the HTML attribute,

• FSM trying again

  have not linked FSM yet to the rest of out Zoho suit. It certainly looks like the apointment and service part is more manageable for our staff. The question is that our engineers multi task examples 1. deliver products to customers not fitted 2. Service

• Feature Request: Conditional Field Mandatoriness Based on Display Status

  Hello Zoho Creator Team, I would like to suggest an enhancement to improve the flexibility of form validations. Currently, when we need a field to be mandatory only if it's displayed on the form, the only option is to: Set the field as not mandatory in

• Data Migration Strategies for Moving to a Cloud Solution

  Hi everyone, I’ve been working on moving some of our critical systems, including CRM and project data, to a Zoho cloud solution, and one of the biggest challenges I’ve encountered is data migration. Transferring large volumes of data while keeping it

• Commerce Order as Invoice instead of Sales Order?

  I need a purchase made on my Commerce Site to result in an Invoice for services instead of a Sales Order that will be pushed to Books. My customers don't pay until I after I add some details to their transaction. Can I change the settings to make this

• How to set different item selling prices for Zoho Commerce and Zoho Books

  Item selling prices for Zoho Commerce and Zoho Books are in sync. If we update the Item selling price in Books, the same will happen in commerce and vice versa. I need a separate commerce selling price for online users and a separate books selling price

• Time Entry Notifications

  Hi All - I have support staff who place notes of their work in the time entry section of Zoho Desk. Is there a specific workflow or setting I need to enable to have the ticket holder updated via email when an entry is saved?

• How to report 'Response violation' OR 'Resolution violation'

  Hi, I want to report on SLA Violation Type. I grouped my tickets on this column. It seems I only get 'Response and Resolution Violation' or 'Not Violated'. The former seems to be given to a ticket if only the Response Time was violated. I would expect

• [Webinar] Automate sales and presales workflows with Writer

  Sales involves sharing a wide range of documents with customers across the presales, sales, and post-sales stages: NDAs, quotes, invoices, sales orders, and delivery paperwork. Generating and managing these documents manually slows down the overall sales

• Next Page