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

                                                                                                          • Zoho製品と生成AIツールの活用について

                                                                                                            いつもありがとうございます。 弊社では、Zoho Oneを契約し、CRMを軸として、見込み客の管理から商談、その後の受注や請求の管理、サポート業務(Desk)、業務データのレポーティング(Analytics)などを行っております。 Zohoサービス自体には、Ziaというツールが搭載されているかと存じますが、それ以外の外部の生成AIツールと連携した活用などもできるのでしょうか?具体的には、CopilotなどがZohoに登録されているデータや情報を見て、対話型で必要なデータを提示してくれたり、商談や蓄積されたメモなどを分析してユーザが知見を得られるような活用ができないか、と考えております。
                                                                                                          • File Field Validation

                                                                                                            Hello all, We are tracking our customer NDA agreements in our CRM and have created 2 fields to do so, an execution date field and a file upload field. I want to create a validation rule to ensure that when the execution date field is populated that the
                                                                                                          • Work with Contacts who use multiple Emails / Manage obsolete Email addresses without loosing Emails in Context

                                                                                                            Hello List Work with Contacts who use multiple Emails Only after 1 week in using Zoho CRM productively we have contacts which randomly use 2 different email addresses. From the concept I've understood that Zoho CRM offers two email fields which are recognized
                                                                                                          • Subforms in Stateless Forms

                                                                                                            Stateless Forms are very useful, but we can't build complex data entry pages without Subforms. Can this be implemented? This would make Stateless Forms truly powerful.
                                                                                                          • New Field in CRM Product Module Not Visible in Zoho Creator for Mapping

                                                                                                            I created a new single-line field in the Products module in Zoho CRM. Zoho CRM and Zoho Creator are integrated, but the newly created field in CRM is not visible in Zoho Creator when I try to map fields.
                                                                                                          • Send WhatsApp voice messages from Bigin

                                                                                                            Greetings, I hope all of you are doing well. We're happy to announce this enhancement we've made to Bigin. Bigin's WhatsApp integration now supports audio messages, so you can record and send voice messages. This makes it easier to handle customer questions
                                                                                                          • Microsoft Teams now available as an online meeting provider

                                                                                                            Hello everyone, We're pleased to announce that Zoho CRM now supports Microsoft Teams as an online meeting provider—alongside the other providers already available. Admins can enable Microsoft Teams directly from the Preferences tab under the Meetings
                                                                                                          • I want to subscribe 1 professional user but the email only 250 per day?

                                                                                                            When I subscribe 1 professional user, I am only able to send 250 email per day? So less? Or is it typo, 2500 rather than 250? Any sale agent or friends can clear my doubt? Thank You
                                                                                                          • Cliq does not sync messages after Sleep on Mac

                                                                                                            I'm using the mac app of Cliq. When I open my mac after it was in sleep mode, Cliq does not sync the messages that I received. I always have to reload using cmd + R, which is not what I want when using a chat application.
                                                                                                          • How to add a % Growth column for year-over-year comparison (2024 vs 2025)

                                                                                                            Hello, I am trying to build a monthly revenue comparison between 2024 and 2025 in Zoho CRM Analytics. My current setup is: Module: Deals (Affaires) Filter: Stage = Closed Won Date field: Closing Date Grouping: By Month Metrics: Sum of Amount for 2024,
                                                                                                          • How do you map a user picklist field to another user picklist field.

                                                                                                            In Zoho Projects, I'm trying to map a custom field (user picklist) in Task Details to a field (user picklist) in the Project Details. How do you get the two to map to each other? This is what I currently have that works for my other fields but doesn't
                                                                                                          • Explore Competitive 3D Scanner Prices at Protomont Technologies

                                                                                                            The genesis of Protomont Technologies emerged from the collaborative efforts of the founders in 2019, both the founders shoulder an enormous experience in the world of 3D Printing. Protomont Technology aims to craft your vision with creativity, empowering
                                                                                                          • New and improved API resources for Zoho Sign Developers

                                                                                                            Hello, Developers community! We know that for you, an API's real value depends on how quickly, easily, and reliably you can integrate the it with your application. That's why we're excited to talk about the recent improvements to our developer resources,
                                                                                                          • stock

                                                                                                            bom/bse : stock details or price =STOCK(C14;"price") not showing issue is #N/A! kindly resolve this problem
                                                                                                          • Marketing Tip #5: Improve store speed with optimized images

                                                                                                            Slow-loading websites can turn visitors away. One of the biggest culprits? Large, uncompressed images. By optimizing your images, your store loads faster and creates a smoother shopping experience leading to higher sales. It also indirectly improves SEO.
                                                                                                          • Why can I not choose Unearned Revenue as an account on items?

                                                                                                            Hello, I do not understand why we don't have the ability to code an item to unearned revenue. It is not an uncommon situation to have in business. I understand that there is the Retainer invoice as an option, however that doesn't really work for us. Our
                                                                                                          • Form Submission Emails

                                                                                                            Is there a current delay with submission emails being sent? We've had 10-20 forms completed today but only a handful of emails.
                                                                                                          • Rules not working properly

                                                                                                            I created a rule to display certain fields on certain states. But it seems to be not working. It hides the fields even when I selected California, (which is a state that should show the fields when selected)
                                                                                                          • Notebook font size issue

                                                                                                            If I copy something from somewhere and paste it in my notebook, the font size becomes smaller.
                                                                                                          • Sign in process is beyond stupid. I'd rather plug my phone into USB and copy files than sign in to this POS.

                                                                                                            792 clicks and fields to fill in just to get into a 3rd rate app is too stupid for me.
                                                                                                          • Ampersand in URL parameter // EncodeURL does not work

                                                                                                            Hi Zoho, I have a url link with a parameter. The parameter is including ampersand in some cases (Can be "H&M" or "P&I") When trying to use %26 instead of "&"  (the result I get using EncodeURL()) I get H%26M instead of H&M in the parameter field. How can I solve this? Thanks! Ravid
                                                                                                          • how can we create in zoho crm a new contact when the looup does not find a similar existing one

                                                                                                            In forms/integrations/zoho crm / ne w record tab, contact name is to be mapped with my form contact name. When I go in biew edit/lookup configuration, I don t get the options (help dedicated page simply repeat the same info you get in the app) and does
                                                                                                          • Directory Websites

                                                                                                            Directories are a good website category to gain search engine traffic. Directories for a professional service category as an example can help their members in search results over their individual website. It would be nice to have a directory template
                                                                                                          • Manage Task on Mobile

                                                                                                            How do we manage our task on mobile devices? It seems that there should be a standalone mobile app to handle the new task features. The new features released in regards to Task management are great by the way! Now we need to bring that all together in
                                                                                                          • Set Default Payment Method & Default account

                                                                                                            Hi, I would like to know how to set the default payment method and default bank account when recording payments in zoho books. At present we have to change these fields everytime we record a payment, which leads to potential error and as we have a very
                                                                                                          • Customer Portal on Zoho Desk

                                                                                                            Hi, I'd like to know more about the items below I found when setting up the Customer Portal on Zoho Desk. Could someone help me explaining these in details? Especially the 2nd and 3rd point. Thanking you in advance! Permissions Customers can sign up for Customer Portal Customers can view tickets of their organization (contacts) Customers must register to access Customer Portal Display Community in Customer Self Service portal
                                                                                                          • Slow Performance on desk.zoho.com. 11/3/2025

                                                                                                            I’m not seeing any active service alerts for desk.zoho.com, but everyone on our account is currently experiencing very slow load times when opening or navigating tickets. We’ve already tried the standard troubleshooting steps — clearing cache and cookies,
                                                                                                          • "Authorize to Access Your Account"

                                                                                                            Hi, I'm trying to log into cliq on my phone but I can't. It says "Authorize to access your account - Verify your identity to access your account using oneAuth credentials", and asks for a password. I tried maybe 100 different passwords and nothing works.
                                                                                                          • Books API Receiving an Error that Doesn't Make Sense when Creating Credit Note - trying to use 'ignore_auto_number_generation' argument

                                                                                                            Hello, I'm working on a newly created routine and I'm getting an error that doesn't make sense when trying to create a new Credit Note. Here is my POST request. Endpoint: https://www.zohoapis.com/books/v3/creditnotes?organization_id=########## Body:     {
                                                                                                          • Computer Showing Offline in Unattended Access

                                                                                                            I have a computer that was connected to the internet but showing offline in Assist. I tried uninstalling the program and deleting it from Zoho Assist the reinstalling and it still does not show up. I have been a user for several months and am not pleased with the lack of connectivity with Assist. If this continues I will have to find another product. The computer I reinstalled it on is not even showing up in Assist now. The name is NYRVLI-PC. Thanks
                                                                                                          • Closing Accounting Periods - Invoice/Posting dates

                                                                                                            Hi, I have seen in another thread but I'm unsure on how the 'transaction locking' works with regards to new and old transactions. When producing monthly accounts if I close December 24 accounts on 8th Jan 25 will transaction locking prevent me from posting
                                                                                                          • Zoho CRM Portal Error

                                                                                                            Hi, We’re experiencing an issue with the Zoho CRM Portal. When we try to access it, we receive an HTTPS connection error: net::ERR_CERT_COMMON_NAME_INVALID. If we proceed past that, we then get a 400 Bad Request error. Could you please help us resolve
                                                                                                          • Can we do Image swatches for color variants?

                                                                                                            We want to do something like the attached screenshot on our new zoho store. We need image swatches instead of normal text selection. We want to user to select an image as color option. Is this doable? I don't see any option on zoho backend. Please h
                                                                                                          • Meeting impossible to use when sharing screen

                                                                                                            he Meeting tool in Brazil is practically unusable when sharing anything, whether it’s a presentation or simple navigation. When accessed via Cliq, the situation gets even worse: even basic calls fail to work properly, constantly freezing. And as you are
                                                                                                          • Integrating Zoho CRM EmbeddedApp SDK with Next.js — Initialization and Data Fetching Issues

                                                                                                            You can get an idea from my code I have given in end: First, I worked on a React project and tried the same thing — it worked. My goal was to import the Zoho script and then load contacts using the Zoho Widget SDK, which was successful in React. Now,
                                                                                                          • Feature enhancement: Highlight rows based on a cell value

                                                                                                            Hello Sheet users, We're excited to announce a new feature enhacement, shaped directly by your valuable feedback! As you might know, conditional formatting is a great tool for anyone dealing with large data sets. Previously, if you’ve ever wanted to draw
                                                                                                          • Script Editor not an option

                                                                                                            I am trying to apply a script to a sheet and Script Editor is not an option. I don't want to go outside Sheets to do this (like Creator) if it can be done inside Sheets.
                                                                                                          • monetizing the courses

                                                                                                            Can I add a price for course enrollment ?
                                                                                                          • Can we add zoho books features like invoices estemates etc on our zohocommerce website. When our customer login with their account they can able to see all books features in one place on zohocommerce?

                                                                                                            Can we add zoho books features like invoices estemates etc on our zohocommerce website. When our customer login with their account they can able to see all books features in one place on zohocommerce?
                                                                                                          • Copy paste from word document deletes random spaces

                                                                                                            Hello Dear Zoho Team, When copying from a word document into Notebook, often I face a problem of the program deleting random spaces between words, the document become terribly faulty, eventhough it is perfect in its original source document (and without
                                                                                                          • Next Page