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

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

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

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 Campaigns Resources




                          Zoho Developer Community



                              Bootcamp
                              Community
                              Pricing
                              Webinars
                              What's New
                              Integrations
                              Contact Support
                              Contact Sales
                                Zoho Survey Resources
                                  Features
                                  Survey Templates
                                  Integrations
                                  Community
                                  iOS Mobile Surveys
                                  Pricing
                                  Android Mobile Surveys
                                  Insurvey Blogs
                                  Insight Blogs
                                  Tips & Tricks





                                              Latest Feature Updates

                                                • Desk Community Learning Series


                                                • Digest


                                                • Functions


                                                • Meetups


                                                • Kbase


                                                • Resources


                                                • Glossary


                                                • Desk Marketplace


                                                • MVP Corner


                                                • Word of the Day


                                                • Ask the Experts




                                                    Zoho SalesIQ Resources


                                                          Manage your brands on social media
                                                          Access Zoho Social

                                                            Zoho Pagesense Resources


                                                                Zoho TeamInbox Resources

                                                                  Zoho DataPrep 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

                                                                                                          • Workflow workdrive rollout

                                                                                                            Hi! When will workflow be rolled out to all users? Thanks.

                                                                                                          • Help Center and SEO: Any Benefit to My Domain-Mapped Website Ranking?

                                                                                                            First of, I love the Help Center which I've just decided to integrate into my website to replace its old-fashioned FAQs. So much more to achieve there now! Lots of new benefits to the site visitors and to me in terms of organizing and delivering all the

                                                                                                          • Blueprint status change

                                                                                                            I want to change the Blueprint status of a workflow. The status is completed automatically when I added the record through API call. But I want to make it active, I don't see any options for this. Even if I draw transition from any stage , it is not visible

                                                                                                          • Support french language options

                                                                                                            Greetings, I want to use Zoho with the french language portal, however the supplied translation is not very good (google translate). There are many basic mistakes on the main most important sections (my requests, submit a request). Is there a way for

                                                                                                          • Automation #7 - Auto-update Email Content to a Ticket

                                                                                                            This is a monthly series where we pick some common use cases that have been either discussed or most asked about in our community and explain how they can be achieved using one of the automation capabilities in Zoho Desk. Email is one of the most commonly

                                                                                                          • filter broke my data

                                                                                                            I uploaded a file recently from Sheets and it has top 2 rows frozen, with table headers in second row and each one is filterable. somehow my first 2 columns became unfiltered and no matter what I do I cannot reapply the filter?? also didn't realize they

                                                                                                          • Introducing the Workflow and Actions APIs for Zoho CRM

                                                                                                            We are absolutely thrilled to announce the release of Workflow APIs and Actions APIs in Zoho CRM’s v8 API suite! This powerful new set of endpoints gives developers unprecedented programmatic control over business automation. For years, Workflow Rules

                                                                                                          • Zoho CRM Analytics - Allow To Reorder Dashboards

                                                                                                            I would like to suggest that you add the ability to reorder dashboards in the Analytics Module. I can see that this has been requested some time ago, the latest 9 years ago. I am not sure if this is a big or small endeavor, but such a small fix can go

                                                                                                          • Zoho Form URL displays incorrect name

                                                                                                            Hi, I have a form I created called "Design Request form". It displays this way everywhere I look. However, in the URL, it shows up as "DesignJobRequestFormFINAL011325PROOFV1B" and I'm not sure why. I can't find where to fix this. Does anyone have any

                                                                                                          • Consumers are talking about your business. Are you listening?👂

                                                                                                            A loyal customer might be praising your product in a forum. A frustrated user could be posting a harsh review on a public site. An excited partner may have left a comment on your campaign. A domain expert might be deconstructing your product. A prospect

                                                                                                          • What counts as a Temp for Billing Purposes in Workerly

                                                                                                            I'm considering trying this product but am not sure how the temp count is used for billing purposes. For example, if we keep a large data base of 500 potential workers.....are we billed for that or only if they are assigned to a client at a given point

                                                                                                          • Form name incorrectly displayed in URL

                                                                                                            Hi, I have a form I created called "Design Request form". It displays this way everywhere I look. However, in the URL, it shows up as "DesignJobRequestFormFINAL011325PROOFV1B" and I'm not sure why. I can't find where to fix this. Does anyone have any

                                                                                                          • I can't receive mail

                                                                                                            Hello, I can't receive e-mail. I no longer receive e-mails to the e-mail I received for ​my site. I also edited the DNS settings, but it doesn't work at all.

                                                                                                          • 1‑to‑1 invite missing post-setup (needs re-invite) vs channel invite auto-joins without business prompt

                                                                                                            1. Zoho Cliq 1‑to‑1 external invite The inviter sent a 1‑to‑1 invite to an invitee who didn’t have a Cliq account. After the invitee completed account setup and created a business/organization, the website redirected them to Cliq, where they opened Cliq

                                                                                                          • 【開催報告】東京 ユーザー交流会 Vol.3 2025/10/17 Zoho サービスの活用促進を外部ツールとの連携で実現！

                                                                                                            ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 10月17日(金)に新橋で「東京 ユーザー交流会 Vol.3」を開催しました。ご参加くださったユーザーの皆さま、ありがとうございました！ この投稿では、当日のセッションの様子や使用した資料を紹介しています。残念ながら当日お越しいただけなかった方も、ぜひチェックしてみてください😊 ユーザー活用事例セッション：Zoho Flowと決済システムの連携 あみろくの岡島さんに、Zoho サービスの活用事例として、Zoho Flow を活用した外部サービスとの連携事例をご共有いただきました。

                                                                                                          • received email opens in a new tab every time I log in

                                                                                                            as per the title: since about when I first made my email account, every single time Ive logged in to view my inbox, a new tab opens for an email I viewed once as if restoring a closed session. I thought I just didnt understand the "starting up" settings

                                                                                                          • Engage with your customers at scale using WhatsApp Marketing Template messages

                                                                                                            Hi everyone, To make it easier for organizations to communicate with customers, Desk now allows you to send individual, mass, and bulk WhatsApp template messages from both the Ticket and Contact modules. How is this going to benefit your business? WhatsApp

                                                                                                          • Importation Tickets error

                                                                                                            Hi, I'm newbie here 🤓 So, i'm importing data from csv, but when I try advance to mapping fields the importer tool show this message: Previously I try import, other data, and not show errors in this step. Some ideas? Best Regards,

                                                                                                          • Showing description in timesheet and timelogs.

                                                                                                            I am wondering if it’s possible in version 5 of Zoho People to have the description show by default or with a manipulation on the user’s part. Let me show you what I mean. As you can see this is the view for the users. Now if they want to see the full

                                                                                                          • Direct “Add to Google Calendar” Option in Zoho Meeting

                                                                                                            Hello Zoho Meeting Team, Hope you are doing well. We would like to request an enhancement related to the “Add to Calendar” functionality in Zoho Meeting. Currently, when we open Zoho Meeting and view our meetings under My Calendar, there is an Add to

                                                                                                          • Workaround: openURL in Blueprints - An alternate approach

                                                                                                            There is a roundabout way to open a URL in blueprints after a save event. By using the 'onBeforeMandatoryFormSave' in Client Script, you can open an external URL. Now, the problem is, this is designed to be run BEFORE the blueprint is saved, not after,

                                                                                                          • MTD SA in the UK

                                                                                                            Hello ID 20106048857 The Inland Revenue have confirmed that this tax account is registered as Cash Basis In Settings>Profile I have set ‘Report Basis’ as “Cash" However, I see on Zoho on Settings>Taxes>Income Tax that the ‘Tax Basis’ is marked ‘Accrual'

                                                                                                          • Migrate file from Single File Upload to Multi File Upload

                                                                                                            Dears, I have created a new field Multi File Upload to replace the old Single File Upload field. I'd like to ask you guys what is the best way to migrate the files to the new field?

                                                                                                          • Open "Live Chat" from a hyperlink?

                                                                                                            Hi, I often write paragraphs and text on our company website, and usually say you can get in touch with us via live chat. Can the chat window be triggered to pop open without clicking the chat graphic in the bottom window, and use it in a hyperlink? ie:

                                                                                                          • Zoho Sites search box

                                                                                                            Is there a Search box that can be added to a Zoho site? It would be for searching within the site only.

                                                                                                          • What stops me from packaging and shipping an order when the inventory is negative?

                                                                                                            It seems if the inventory value is negative, that Zoho Inventory should not allow me to create a Package and Ship it.   But, there seems to be nothing to stop me from doing that other than when I go to physically package the item and realize that there is no stock. There also seems to be nothing on the screen that even indicates to me that I should not package and ship.  To me this is the fundamental point of an inventory system.  Am I doing something wrong?   

                                                                                                          • Conditional formatting based on another field

                                                                                                            Hi I have two fields on my form stage 1 complete and stage 1 deadline.  I am trying to setup conditional formatting so that if stage 1 complete is after stage 1 deadline the record is highlighted in red. I need both stage 1 complete and stage 1 deadline

                                                                                                          • Is there API Doc for Zoho Survey?

                                                                                                            Hi everyone, Is there API doc for Zoho Survey? Currently evaluating a solution - use case to automate survey administration especially for internal use. But after a brief search, I couldn't find API doc for this. So I thought I should ask here. Than

                                                                                                          • Using IMAP configuration for shared email inboxes

                                                                                                            Our customer service team utilizes shared email boxes to allow multiple people to view and handle incoming customer requests. For example, the customer sends an email to info@xxxx.com and multiple people can view it and handle the request. How can I configure

                                                                                                          • The sending IP (136.143.188.15) is listed on spamrl.com as a source of spam.

                                                                                                            Hi, it just two day when i am using zoho mail for my business domain, today i was sending email and found that message "The sending IP (136.143.188.15) is listed on https://spamrl.com as a source of spam" I hope to know how this will affect the delivery

                                                                                                          • Changing a Single-Line Text field into a Multi-line Field without losing data

                                                                                                            Is it possible to change a Single-Line Text field into a Multi-line Field without losing data. I have a module with data for which I would like to change a single-line field into a multi-line field but I'm worried it might delete the pre-existing da

                                                                                                          • Webhook - Google Sheets

                                                                                                            I have 2 forms that are both integrated with Google Sheets. I've set up a webhook to pull form 1 data from Google Sheets to prefill data in Form 2. The issue I have is that the forms name fields are First Name & Last Name but the Google sheets integration

                                                                                                          • Verified Mark Certificate

                                                                                                            Hello Dears, Can anyone help and check my mail or direct me to the desired person who can add the verification tag to my mail https://www.zoho.com/blog/mail/email-authentication-with-bimi.html

                                                                                                          • Appointment booking is temporarily unavailable

                                                                                                            Embeded Zoho booking page in my WordPress website. When someone starts a booking, after choosing time and date, an error appears before payment - "Appointment booking is temporarily unavailable due to restricted settings." Used the embeded code given

                                                                                                          • Cannot connect to 365 business calendar and Teams, says personal but it is not.

                                                                                                            hi I have a number of users connected to their 365 business accounts. Adding a new user and it thinks hes got 365 personal edition. He does not.... Anyone know what's going on. Trying for days now. Bookings go into his MS calendar but as its thinks its

                                                                                                          • Limited review (/questions) for Bookings 2.0

                                                                                                            Hi all, I'm writing this review of Bookings 2.0 for two reasons: 1) it may be of interest to others, and 2) I'd like to be corrected if I'm wrong on any points. It's a very limited review, i.e. the things that have stood out as relevant, and particularly

                                                                                                          • Zoho Bookings - Reserve with Google

                                                                                                            Does Zoho Bookings plan to to integrate with Reserve with Google?

                                                                                                          • Tip #3: How to change your booking page language

                                                                                                            Displaying your booking page in your target audience's language can greatly increase customer satisfaction. By speaking their language, you will help customers feel more comfortable scheduling with you and create a stronger connection with them. Let's

                                                                                                          • Bigin Android app update: Alerts while creating tasks outside of working days, conflicting events and calls.

                                                                                                            Hello everyone! In the most recent version of the Bigin Android app, we have brought in support to display an alert if task is being scheduled outside of the working days. Also, when scheduling an event or call in the Activities module, a conflict alert

                                                                                                          • Bigin update: Link email messages to pipeline records.

                                                                                                            Hello everyone! In the latest version of the Bigin iOS(v1.11.9) and macOS(1.8.9) app, we have brought in support for an option to link email to pipeline records. This helps you to view emails specific to a deal, especially when a contact is associated

                                                                                                          • Next Page