Kaizen #95 How is a Widget used in a Blueprint?

Kaizen #95 How is a Widget used in a Blueprint?

Hey folks!!
Let's continue the discussion from Kaizen #23 and focus on exploring the concept of Widgets in Blueprints.

What are Widgets?

Zoho CRM's widgets are custom components that you can add to your Zoho CRM system to extend its functionality, provide additional data, or integrate with external services. These widgets can be built using Zoho's widget SDK (Software Development Kit), which allows developers to build and integrate custom applications directly into Zoho CRM.

What are Blueprints?

Blueprints in CRM help you design processes with pre-defined conditions and enable the system to follow a specific flow. A record can only move to the next state if it satisfies the given condition; otherwise, it remains in the same state. Blueprints help in converting leads into customers and developing your business. A transition button acts as an intermediary between two states, holding the condition and facilitating the flow within the system.

For instance, when a person approaches a bank for a loan, the bank needs to check the person's previous loan's status. They need to verify whether he has any existing loans or any defaults from other banks or from the same bank. The bank will provide loans based on the person's current and past borrowing behaviours. This can be achieved using widgets in blueprints.

The Flow Representation

                                              
Let's consider that a person named Shane has applied for a loan. His details will be in the "Loans" Module in the CRM. The bank employee responsible for processing the loan applications will review Shane's credibility and decide whether to approve or reject the loan.
  • If Shane has not settled any of his previous loans and has a bad repayment history, the bank will decline his new loan request, and the record will be marked as 'Rejected' state.
  • If there are few current active loans with a good repayment history, the bank will approve the loan, and the status of the newly sanctioned loan will be 'Active.'
In this use case, we cannot use any inbuilt CRM's blueprint options to show a popup of Shane's previous loan details and make a decision. Therefore, we will associate a custom widget to assist the banker in making the decision during the Blueprint transition.

How do I create a widget in the Blueprint?

  1. Go to Setup > Developer Space > Widgets.
  2. Click Create New Widget.


Note : The widget is hosted internally (Zoho) in the post. Please refer to this page to view the source code.

Sample Codes

index.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <title>User Details</title>
  5.   <link rel="stylesheet" href="index.css">
  6.   <script src="https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js"></script> 
  7. //Import this JS SDK to use SDK methods
  8.   <script src="index.js"></script>
  9. </head>
  10. <body>
  11.   <div class="container">
  12.     <h1>User Details</h1>
  13.     <div class="details">
  14.       <h2>Basic Details</h2>
  15.       <p><strong>Name:</strong> <span id="name"></span></p>
  16.       <p><strong>Email:</strong> <span id="email"></span></p>
  17.       <p><strong>PAN ID</strong> <span id="panId"></span></p>
  18.       <p><strong>Address</strong> <span id="address"></span></p>
  19.       <!-- Add more fields as needed -->
  20.     </div>
  21.     <div class="details">
  22.       <h2>Current Loan Requests</h2>
  23.       <p><strong>Loan ID:</strong> <span id="loanId"></span></p>
  24.       <p><strong>Loan Type:</strong> <span id="loanType"></span></p>
  25.       <p><strong>Amount:</strong> <span id="amount"></span></p>
  26.       <!-- Add more fields as needed -->
  27.     </div>
  28.     <div class="loan-history">
  29.       <h2>Loan History</h2>
  30.       <div class="loan-history-table">
  31.         <table>
  32.           <thead>
  33.             <tr>
  34.               <th>S. No</th>
  35.               <th>Bank Name</th>
  36.              .
  37.              .
  38.             .
  39.           </tr>
  40.           </thead>
  41.           <tbody id="loanHistoryTableBody">
  42.             <!-- Loan data will be dynamically populated here -->
  43.           </tbody> 
  44.         </table>
  45.       </div>
  46.     </div>
  47.   </div>
  48.   <div class="buttons">
  49.     <button id="button1" onclick="closePopup()">Decline</button>  //When the decline button is clicked, a method is called to close the widget pop-up
  50.     <button id="button2" onclick="moveToNextState()">Approve</button> //When the Approve button is clicked, a method is called to move the record to the next state.
  51.   </div>
  52. </body>
  53. </html>
To use the Zoho CRM APIs in the widget, you can use the API helpers provided in the JS SDK.

index.js

  1. ZOHO.embeddedApp.on("PageLoad", async function (data)
  2. //This event is used to get the page load data
  3.  {
  4.     console.log(data);
  5.     const loanRec = await ZOHO.CRM.API.getRecord({
  6.         Entity: data.Entity, // Here, 'Entity' is 'Loans Module'
  7.         RecordID: data.EntityId //The 'ID' of the record
  8.     });
  9.     console.log(loanRec.data[0].Recipient.id);
  10.     const contactRec = await ZOHO.CRM.API.getRecord
  11. //gettind contact details
  12. ({
  13.         Entity: "Contacts",
  14.         RecordID: loanRec.data[0].Recipient.id
  15.     });
  16.     const loanHistory = await ZOHO.CRM.API.getRelatedRecords
  17. //getting related records of the contact
  18. ({
  19.         Entity: "Contacts",
  20.         RecordID: loanRec.data[0].Recipient.id,
  21.         RelatedList: "Loan_History",
  22.         page: 1,
  23.         per_page: 200
  24.     })

  25. ZOHO.embeddedApp.init(); 
  26. //used to initialize widget
  27. function moveToNextState()
  28. {
  29.     ZOHO.CRM.BLUEPRINT.proceed(); 
  30. //ZOHO.CRM.BLUEPRINT.proceed() function from JS SDK, which helps in making the blueprint transition
  31. }
  32. //method used to move a record to the next state

  33. function closePopup(){
  34.     ZOHO.CRM.UI.Popup.close();
  35. }
  36. //method used to close the widget
  37. function displayBasicDetails(data) {
  38.     console.log(data);
  39.     document.getElementById('name').textContent = data.Full_Name;
  40.     .
  41.     .
  42. }
  43. }

Associating a Widget to the Blueprint

Add the hosted 'Check Profile' widget in the 'During' transition in the blueprint.
                  
Click Add > Widgets - The list of available widgets in your CRM will be displayed. 
States in this Blueprint:
  • Approval Pending : It is the default status of a newly created record in the loan module.
  • Active: If a person has a good loan repayment history, then the loan application will be sanctioned as per the banker's decision, and the status for the newly created loan will be 'Active'.
  • Closed : When a current loan is closed by the bank, the record's status will be 'Closed.'
  • Default : When any previous loans remain unsettled and the person is unavailable when a bank approaches for repayment on or after the payment due date, it is considered a fraudulent act. Such loans will be marked as "default". In such cases, the bank will decline the current loan request, and mark it as 'Rejected'.
  • Rejected : If a person has a bad repayment loan history or defaults, the bank will decline the loan, and the record's status will be 'Rejected'.
The below GIF represents a set of records waiting for approval from the bank under the Approval Pending custom view.

When the banker accesses the individual loan request, he/she will see the 'Check Profile' transition button. Using this transition, the banker can view the custom widget that displays the loan history and other details required to make a decision.
Here, the banking personnel can approve the loan by verifying the details. If the user has a goo   score and repayment history, the record will move to the Active state (newly requested loan).

If the applicant possesses any existing outstanding loans, lacks sufficient collateral, fails to provide verifiable income proof, or exhibits a history of defaults, the bank will decline the request, and the record will be moved to 'Rejected' state. This will help a bank to avoid fraudulent acts.


How will the CRM fetch a person's loan history from a third-party website?
To retrieve a person's current and previous loan status from a third-party website, banks employ different processes in different countries. 
The credit score will be tracked based on different Unique IDs issued by each country to their citizens. These details can be fetched from their respective websites using widgets.
For example :
  • USA - Social Security Number.
  • UK - The National Insurance Number.
  • Ireland - The Personal Public Service Number.
  • India - Permanent Account Number, etc.
We hope you found this post useful. Let us know your thoughts in the comment section or reach out to us at support@zohocrm.com
Cheers!!!
Further Reading

    Access your files securely from anywhere









                          Zoho Developer Community




                                                • Desk Community Learning Series


                                                • Digest


                                                • Functions


                                                • Meetups


                                                • Kbase


                                                • Resources


                                                • Glossary


                                                • Desk Marketplace


                                                • MVP Corner


                                                • Word of the Day


                                                • Ask the Experts





                                                          Manage your brands on social media



                                                                Zoho TeamInbox Resources



                                                                    Zoho CRM Plus Resources

                                                                      Zoho Books Resources


                                                                        Zoho Subscriptions Resources

                                                                          Zoho Projects Resources


                                                                            Zoho Sprints Resources


                                                                              Qntrl Resources


                                                                                Zoho Creator Resources



                                                                                    Zoho CRM Resources

                                                                                    • CRM Community Learning Series

                                                                                      CRM Community Learning Series


                                                                                    • Kaizen

                                                                                      Kaizen

                                                                                    • Functions

                                                                                      Functions

                                                                                    • Meetups

                                                                                      Meetups

                                                                                    • Kbase

                                                                                      Kbase

                                                                                    • Resources

                                                                                      Resources

                                                                                    • Digest

                                                                                      Digest

                                                                                    • CRM Marketplace

                                                                                      CRM Marketplace

                                                                                    • MVP Corner

                                                                                      MVP Corner







                                                                                        Design. Discuss. Deliver.

                                                                                        Create visually engaging stories with Zoho Show.

                                                                                        Get Started Now


                                                                                          Zoho Show Resources

                                                                                            Zoho Writer

                                                                                            Get Started. Write Away!

                                                                                            Writer is a powerful online word processor, designed for collaborative work.

                                                                                              Zoho CRM コンテンツ






                                                                                                Nederlandse Hulpbronnen


                                                                                                    ご検討中の方




                                                                                                          • Recent Topics

                                                                                                          • Kaizen #157: Flyouts in Client Script

                                                                                                            Hello everyone! Welcome back to another exciting edition of our Kaizen series, where we explore fresh insights and innovative ideas to help you discover more and expand your knowledge!In this post, we'll walk through how to display Flyouts in Client Script
                                                                                                          • Admin Control Over Profile Picture Visibility in Zoho One

                                                                                                            Hello Zoho Team, We hope you are doing well. Currently, as per Zoho’s design, each user can manage the visibility of their profile picture from their own Zoho Accounts page: accounts.zoho.com → Personal Information → Profile Picture → Profile Picture
                                                                                                          • Published Course Not Reflecting In Hub

                                                                                                            Hi! I am trying to create micro-learning courses for our team to be available for self-guided learning. I have published the courses with enrollment settings open to all users of the hub, but they don't appear to be available for enrollment. Am I missing
                                                                                                          • Unlock Locked Users via Zoho One Mobile App

                                                                                                            Hello Zoho One Team, We have noticed that in the Zoho One web admin panel, we can unlock a locked user when needed. However, when using the Zoho One mobile app, there is no indication that a user is locked, nor is there an unlock button similar to what
                                                                                                          • Tip #47- Stay Ahead with Automated Scheduled Reports in Zoho Assist- 'Insider Insights'

                                                                                                            We’ve made it easier for you to stay informed, even when you’re busy managing remote sessions! With Scheduled Reports in Zoho Assist, you can now automatically receive detailed insights about your remote support and unattended access activities directly
                                                                                                          • Colour Coded Flags in Tasks Module List View

                                                                                                            I really like the colour coded flags indicating the status of the tasks assigned to a Contact/Deal in the module list view. It would be a great addition to have this feature available in the list view of activities/tasks. I understand you have the Due
                                                                                                          • Uploading data to S3

                                                                                                            Has anyone successfully uploaded data from Creator to S3 using the InvokeURL command or any other method in Deluge? (keywords: S3, AWS, Amazon, bucket)
                                                                                                          • UPS Label size when generated via Zoho

                                                                                                            We've integrated UPS with Zoho inventory. When creating and downloading the shipping labels they are created in a larger paper size. I'd like them to be generated to print on a 4x6 printer. Zoho have told me I need to do this within our UPS portal. UPS
                                                                                                          • Credit Management: #4 Credits on Unused Period

                                                                                                            Recall a familiar situation. You sign up for a monthly gym membership. You pay the subscription fee upfront, get motivated, and show up consistently for the first week. Then, suddenly, you get caught up in work deadlines, travel plans, or a dip in motivation.
                                                                                                          • Zoho Analytics Automatically Deletes Queries and Reports When a Synced CRM Field Is Removed

                                                                                                            We’ve encountered a serious and recurring issue that poses a massive data integrity risk for any Zoho Analytics customer using Zoho CRM integration. When a field is deleted in Zoho CRM — even an unused one — Zoho Analytics automatically deletes every
                                                                                                          • Prevent new Record Association

                                                                                                            Hello all, We have a small sales organization therefore, it's helpful for everyone on the sales team to be able to view the full list of accounts to assist in preventing duplicate accounts from being created. However we want to prevent people from creating
                                                                                                          • Tip of the Week #73– Automate workflow with Make integration.

                                                                                                            Make is a no-code workflow automation platform designed to connect your favorite apps and automate repetitive tasks across services. By integrating Make with Zoho TeamInbox, you can streamline everyday inbox management and save valuable time. With this
                                                                                                          • Viewing attachments

                                                                                                            I'm using a Web Form integrated in my web site to collect Leads several info, including a image upload. In order to to approve each lead, we have to view the image uploaded. Unfortunately, in the Leads view, the Attachments can only be downloaded, not
                                                                                                          • Kaizen #89 - Color Coding using Client Script

                                                                                                            Hello everyone! Welcome back to another exciting Kaizen post. Today let us see how you can apply color codes to the List and Detail Pages of Zoho CRM using Client Script. Need for color code in Zoho CRM When you mark things with different colors as a
                                                                                                          • Instant Sync of Zoho CRM Data?

                                                                                                            With how valuable Zoho Analytics is to actually creating data driven dashboards/reports, we are surprised that there is no instant or near instant sync between Zoho CRM and Zoho Analytics. Waiting 3 hours is okay for most of our reports, but there are
                                                                                                          • Is it possibly to directly set the tax amount on order instead of indirectly via tax rates?

                                                                                                            We own an eCommerce application and want to funnel submitted orders from that system into Zoho. We're already calculating tax in our application and just need a way to set it in Zoho. We tried to use Zoho's tax objects for tax by setting the rates to
                                                                                                          • Zoho account sign in with passkey

                                                                                                            Hello, I am trying to sign in using passkey, but the option doesn't show up in the web and is disabled in Oneauth on mobile, saying the admin has restricted the use. On the Admin page in Security MFA I can find no option for passkey. Help would be greatly
                                                                                                          • Rescheduled US meetups: Zoho Desk user meetups are coming to seven U.S. cities in October and November, 2025

                                                                                                            Hello to our Zoho Desk users in the United States, We're excited to share the revised dates for the upcoming Zoho User Groups happening across the US this summer. Our product experts are heading to seven cities throughout the country, and for the first
                                                                                                          • Checklists as templates

                                                                                                            Is it possible to save checklists as templates to reuse them in other tasks? Example: I have a web project. I maintain individual web URLs as tasks. Within the tasks the same checklist should be used again and again: - Page created in CMS - Properties
                                                                                                          • Send mass email using my secondary email

                                                                                                            Hello, When I send an email to just one person from Zoho CRM, a complete email editor appears, where I can choose which of my email addresses I want to use in the From field. When I send a mass email, there is not such option. I can only select the email
                                                                                                          • ZOHO TEAM INBOX Calendar Integration

                                                                                                            The Problem: Clients send meeting invitations to our TeamInbox address. TeamInbox receives these invites, but we cannot accept them. We do not use individual inboxes for transparency purposes. Ideal Solution: A way to accept calendar invites sent to our
                                                                                                          • Unearned / Deferred Revenue Automatic Calculation for Subscriptions

                                                                                                            As a SaaS business, we have multiple active subscriptions with varying dates and amounts. Is there a way to have a monthly automatic calculation for all of them that debits or credits the unearned revenue and revenue accounts accordingly? Alternatively,
                                                                                                          • Zoho Desk Limit for Comma Separated Queries

                                                                                                            Hi, I have just discovered a limit that I believed is not mentioned in any of Zoho's documentations. My search query looks like so: "query: {"accountId":"786050000091629966,786050000163589273,786050000163589427,786050000162753705,786050000162112971,786050000161987643,786050000160752868,786050000167089504,786050000167089378,786050000167089024,786050000167070005,786050000166295256,786050000128153693,786050000110560021,786050000046594575,786050000039106461,786050000002225356,786050000076889093,786050000047895103,786050000043365354,786050000044765191,786050000041790249,786050000040359116,786050000037945198,786050000024605077,786050000000525015,786050000155333895,786050000157741437,786050000000718125,786050000011574353,","departmentId":"786050000042648070","status":"Finished","sortBy":"createdTime","customField2":"cf_completion_date:2025-01-28T03:00:00.000Z,2025-10-28T03:00:00.000Z","customField3":"cf_billed:false"}"
                                                                                                          • Module Name doesn't exist

                                                                                                            I am trying to create a module named Activity, with plural Activities, but I have an error that module name already exists. This module is doesn't exist, and I don't have a single field called Activity or Activities.
                                                                                                          • Zoho Desk iOS and Android app update: AI powered: Reply Assistance and Refine Messages on IM module.

                                                                                                            Hello everyone! We are excited to introduce new AI powered features on the IM module of the Zoho Desk app. Reply Assistance: Reply Assistance generates suggested responses for incoming chat messages, which you can directly insert into the conversation
                                                                                                          • Unify All Zoho Video Meeting Experiences into One Standardized Platform

                                                                                                            Hi Zoho Team, We would like to share an important user experience concern regarding the current state of video meeting functionality across the Zoho ecosystem. The Problem Within Zoho, there are multiple ways to initiate or schedule a video meeting: Zoho
                                                                                                          • Is it possible to embed Youtube shorts?

                                                                                                            Hi Zoho desk support, This is Ryan from Accuver America. While I'm trying to create a knowledge base article with embed video, I ran into this issue. "www.youtube.com refuse to connect" A little bit background is that because this video is recorded on
                                                                                                          • Zoho Inventory - Move Orders

                                                                                                            Quick question about Move Orders... Why is there no status to say something like "Draft", "In Progress" and "Completed", similar to Transfer Orders? I'm assuming that when something needs to be moved it should be planned in Inventory, executed and then
                                                                                                          • Split functionality - Admins need ability to do this

                                                                                                            Admins should be able to split an expense at any point of the process prior to approval. The split is very helpful for our account coding, but to have to go back to a user and ask them to split an invoice that they simply want paid is a bit of an in
                                                                                                          • Delegates - Access to approved reports

                                                                                                            We realized that delegates do not have access to reports after they are approved. Many users ask questions of their delegates about past expense reports and the delegates can't see this information. Please allow delegates see all expense report activity,
                                                                                                          • How to include total km for multiple trips in expense report.

                                                                                                            Whenever I create a mileage report it only shows the total dollar amount to be reimbursed. The mileage for each individual trip is included but I also need to see the total distance for all trips in a report? How do I do this?
                                                                                                          • Get logged in user ID in Deluge script

                                                                                                            Hello all, How do I get the id of the logged-in user in a deluge script? the "zoho.loginuserid" function actually returns the users email address or whatever the user id they use to login to zoho with and not the id of the user record, and given that
                                                                                                          • Item Details Field - New Barcode / Document option?

                                                                                                            Is this a new feature??? its in both books and inventory.
                                                                                                          • Shared Mailbox - Mark as read for all users

                                                                                                            Hi all, Maybe someone can help me out. At the moment we have a shared mailbox without streams. When a users reads an mail or marks it as read other users will not see this. How can we resolve this? We now archive the mails when read and followed up. However
                                                                                                          • How do I increase the email attachment size in Zoho CRM ?

                                                                                                            It looks like I'm limited to 10MB when sending an attachment using the email widget on a record in Zoho CRM. Is there a way to increase the size? Or can I use some other tool? From what I'm reading online, I'm maxed out at 10MB. Any insight would be greatly
                                                                                                          • Can I export to PDF in Zoho Learn

                                                                                                            I have seen help pages where export to pdf options are available but I do not see that option available from the application. I see that exprt is available in my free trial version but that is only to html pages. I need to be able to export my manuals
                                                                                                          • Zoho Sites "pages" management page

                                                                                                            I have 80 plus pages on zoho sites. When I go to the "pages" link to view and edit pages, They are not in any kind of order, so I spend lots of time searching for pages when I need to edit or create new. How can I change the view order of all my pages
                                                                                                          • Staff rules

                                                                                                            Hi! Do you people know what are the default staff rules when a new booking is created? We have two staff members in my team (me as the admin, and my employee). As we share the same services, I'm wondering how Zoho will pick the staff for new apointments.
                                                                                                          • Add Image Upload Field to Zoho Bookings Registration Form

                                                                                                            Hi, We would like to request the addition of an image upload field to the Zoho Bookings registration form. Currently, Zoho Bookings only supports text-based fields (e.g., Single Line, Multi-Line, Email, Checkbox, Dropdown, Radio Button, and Date), but
                                                                                                          • Merge Tags Output Incorrect Placeholder Text After CRM Sync

                                                                                                            Hi everyone, I’m experiencing an issue with merge tags in Zoho Campaigns after last sync of contacts and leads from Zoho CRM (days before everything worked perfectly). Here’s the situation (seems like a default configuration in Campaigns) : My leads have
                                                                                                          • Next Page