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

        All-in-one knowledge management and training platform for your employees and customers.






                              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

                                                              • Sticky Posts

                                                              • Kaizen #198: Using Client Script for Custom Validation in Blueprint

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

                                                              • Kaizen #226: Using ZRC in Client Script

                                                                Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In this

                                                              • Kaizen #222 - Client Script Support for Notes Related List

                                                                Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore how

                                                              • Kaizen #217 - Actions APIs : Tasks

                                                                Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.

                                                              • Kaizen #216 - Actions APIs : Email Notifications

                                                                Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are


                                                              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

                                                                                                                • Ignroe_filtrers and drill through

                                                                                                                  I have two charts, where one is connected to the other using drill-through. The issue is with the second chart (the drill-through target). It contains an aggregation formula that uses the ignore_filters function. Under normal conditions, the formula works

                                                                                                                • Installation error: Zoho Books Extension in Zoho Bookings

                                                                                                                  Dear Zoho Support Team, I am reaching out for assistance with an integration issue that I believe is related to a recent change in my subscription model. Background: I initially started with individual subscriptions for Zoho Sites and Zoho Bookings. To

                                                                                                                • zoho creator panel add formula

                                                                                                                  Hello. I'm using zoho panels which works good for me but i need to add an extra calculation the predefined sum function provided by zoho. not sure if this is possible? The code zoho is generating for the sum is as follows; <text margin='0px' padding='0px'

                                                                                                                • Kaizen #238: Fetching Employee Data from Microsoft SQL Server into Zoho CRM Using Queries

                                                                                                                  Hello everyone! Welcome back to the Kaizen series! Many organizations manage workforce data such as employee designations, contact details, salary bands, and joining dates in an HRMS backed by Microsoft SQL Server, while their sales teams work in Zoho

                                                                                                                • Du prompt à la production : comprendre le fonctionnement du MCP

                                                                                                                  Le Model Context Protocol (MCP) est un protocole ouvert qui standardise la manière dont les applications se connectent aux modèles de langage (LLM). En termes simples, le MCP est le « USB-C des agents IA » : une interface universelle qui relie l’intelligence

                                                                                                                • Add Flexible Recurrence Options for Meeting Scheduling in Zoho Cliq (e.g., Every 2 Weeks)

                                                                                                                  Hello Zoho Cliq Team, We hope you are doing well. Currently, when scheduling a meeting inside Zoho Cliq, the recurrence options are limited to Daily, Weekly, Monthly, and Yearly. There is no ability to set a meeting to occur every X weeks — for example,

                                                                                                                • filter on sheets mobile (iOS, iPadOS) does not work

                                                                                                                  re-posting this as a question because reporting as a problem netted zero responses... I have this issue on every spreadsheet, whether imported or created natively in Zoho Sheets. I can use on desktop without issue: but on iOS the filter dropdowns are

                                                                                                                • Inactive License for free account.

                                                                                                                  I recently upgraded my Cliq subscription not my team (on the free version), are unable to login to their accounts. The error message received is Inactive License Looks like you have not been covered under the current free plan of users. Please contact

                                                                                                                • Zoho Books recurring invoicing link to a Zoho CRM Deal?

                                                                                                                  With the Zoho CRM Finance Integration setup, normally when creating an invoice via Zoho CRM Finance Integration on a Deal, it creates the invoice in Zoho Books with the CRM Deal *Potential link for that invoice. Alternatively, if you create the invoice

                                                                                                                • No background for video recordings, no playback speed, can't even playback longer recordings - have to download…

                                                                                                                  Hi. We utilize heavily video messages on Slack, but wanted to migrate to Cliq with Zoho One, however very basic yet very frequently used feature is missing: backgrounds for video recordings and playback speed. We were not happy with Slack's 5 minute limits

                                                                                                                • Introducing PDF conversion in Deluge

                                                                                                                  Hello everyone, We're pleased to introduce built-in PDF conversion capabilities in Deluge with the launch of the convertToPDF task. As PDF is one of the most widely used formats in professional environments, this task helps streamline document generation

                                                                                                                • Changing naming convention for Estimates

                                                                                                                  Hi there, How do I customise the naming of the filenames for estimates when sending them? Currently they are named literally just ES11.PDF or whatever the number of the estimate is. There is no Company name, description of the work, customer name, date

                                                                                                                • Email templates for estimates

                                                                                                                  Hi there, When I send an estimate the option to choose a template appears. However it is common to need to make some minor personalizations and modifications to the email before sending ie. adding a second person to the greeting, or adding a small note

                                                                                                                • How to transfer uploaded files from Zoho Survey to external systems?

                                                                                                                  Hi everyone, I'm currently integrating Zoho Survey with an external system and have run into a limitation I haven't been able to solve yet. I'm using webhooks to send submitted survey data (JSON) to my external API, which works perfectly for all standard

                                                                                                                • Editing Estimates

                                                                                                                  Hi team, How do I delete line items in an estimate when editing it? I can't see any option to do this - no X, no trashcan, no drop down... And how do I revert to the original estimate after cloning? I cloned to see if the option to edit were disabled

                                                                                                                • Reading emails sent from Zoho

                                                                                                                  Hi there, How do I view an email sent from Zoho, for example an email which contains an estimate? I can see there is a tab in the screen for that estimate which is labelled 'Emails' and I can see a summary of the email sent listed there, but I cannot

                                                                                                                • Feature Request: Mass update selected Contacts to Accounts

                                                                                                                  I can't believe this isn't an ability already. It's a quick fix that would save hours of manual entry time. This looks like it had been requested 3-4 years ago with no answers from staff! Please add all contact fields into the "mass update" menu. You

                                                                                                                • Support Bots and Automations in External Channels

                                                                                                                  Hello Zoho Cliq Team, How are you? We actively use Zoho Cliq for collaboration, including with our external developers. For this purpose, external channels are a key tool since they work seamlessly within the same interface as all of our other channels

                                                                                                                • How To Implement an Auto-Check-out Feature for Attendance?

                                                                                                                  If an employee forgets to check out, the system should automatically check out the employee at 6:30 PM

                                                                                                                • Set Default Status of Assembly to "Assembled" When Entered in UI

                                                                                                                  I've just discovered the new "confirmed" status of Assemblies within Inventory. While I understand the intent of this (allowing for manufacturing planning and raw material stock allocation), it was initially confusing to me when manually entering some

                                                                                                                • Sender Email Configuration Error.

                                                                                                                  Hello Team, Hope you are all doing well. We are in the process of creating the Zoho FSM environment in the UAE. When we try to add the sender email address “techsupportuae@stryker.com”, we receive the error message: “Error occurred while sending mail

                                                                                                                • Share saved filters between others

                                                                                                                  Hi, I am in charge to setup all zoho system in our company. I am preparing saved filters for everybody, but the only one can see its me. How can others see it? Thanks

                                                                                                                • Webinar Alert: Learn how to decode your landing page performance with analytics

                                                                                                                  Every click, scroll, and drop-off tells a story. Are you listening? Join our Landing Page Analytics webinar to understand how data can reveal what’s working and what’s costing you conversions. In this session, you'll discover The most important metrics

                                                                                                                • Campaign Status Field in CRM

                                                                                                                  I'm wanting to create a custom view in CRM that shows all those who have recently hard bounced in past campaigns so we can clean up the database. An old Zoho article said it was possible, but I don't see the option to push campaign status field to CRM,

                                                                                                                • Zoho Forms for Vertical Studio Subscriber Organizations

                                                                                                                  We’re excited to introduce the Zoho Forms integration with Vertical Studio. This allows you to capture data using forms and send it directly to your Vertical Studio modules. With this integration, form submissions can be used to create or update records,

                                                                                                                • Zoho Flow not handling Boolean properly

                                                                                                                  Hi, I have a checkbox in one system that I'm trying to sync with a checkbox in Zoho CRM. The value from the source system comes in as blank (unticked) or 1 (ticked). I've written the following custom function to convert the output to either boolean false

                                                                                                                • Printing invoice from creator using writer

                                                                                                                  Hello. I have created my invoices using Zoho Writer and i'm sending data to them from Zoho Creator by selecting a row in a report and then clicking a button which has workflow connected to it to send the date to the invoice in writer. This is working

                                                                                                                • How to Initiate WhatsApp Message on SalesIQ?

                                                                                                                  I've just activated a Business WhatsApp phone number through SalesIQ because of its touted omnichannel chat approach. Sounds exciting. I understand that when a customer sends me a WA message, I can reply to it on SalesIQ and keep the chat going, perfect.

                                                                                                                • i want to delete organization or tranfer ownership

                                                                                                                  I accidentally created a Zoho organisation and now I cannot accept an invite from another organisation. I am the Super Admin and cannot leave. Please either delete my organisation or transfer ownership so I can leave.

                                                                                                                • Bulk upload images and specifications to products

                                                                                                                  Hi, Many users have asked this over the years and I am also asking the same. Is there any way in which we can bulk upload product (variant) images and product specifications. The current way to upload/select image for every variant is too cumbersome.

                                                                                                                • Zoho FSM API Delete Record

                                                                                                                  Hi FSM Team, It would be great if you could delete a record via API. Thank you,

                                                                                                                • Marketing Tip #26: Optimize product images for SEO

                                                                                                                  Product images can do more than make your store look good. They can also help customers discover your products through search. Since search engines can’t "see" images, they rely on text signals to understand what an image is about. Two small actions make

                                                                                                                • Allow rejected records (Approval process) to re-enter Blueprints

                                                                                                                  Cannot seem to get my head around the key differences between the Blueprints and the Approval Process. For me it seems like different flavours of more or less the same thing - especially now that we have the option of Record Locking. Have a quote to sales

                                                                                                                • Every time an event is updated, all participants receive an update email. How can I deactivate this?

                                                                                                                  Every time an event is updated in Zoho CRM (e.g. change description, link to Lead) every participant of this meeting gets an update email. Another customer noticed this problem years ago in the Japanese community: https://help.zoho.com/portal/ja/community/topic/any-time-an-event-is-updated-on-zohocrm-calendar-it-sends-multiple-invites-to-the-participants-how-do-i-stop-that-from-happening

                                                                                                                • Streamlining E-commerce Photography with AI Background Tools

                                                                                                                  Hey Zoho Community, I’ve been messing around with ways to make product images less of a headache for fashion brands on Zoho Commerce. You know how boring generic backdrops can get, and how much time traditional photoshoots eat up, right? I tried out this

                                                                                                                • Add @Mention Notifications in Zoho Cliq for Zoho Project Mentions

                                                                                                                  Hello Zoho Projects Team, We hope you are doing well. We would like to submit a feature request regarding "Projects Bot" Cliq bot notifications for @mentions inside Zoho Projects comments (Tasks and Issues). Current Behavior: At the moment, when someone

                                                                                                                • WO Completion Status Not Updating Automatically

                                                                                                                  Hello Latha, Hope you are doing well. Over the past few days, we have been facing an issue with WO completion. When an AP is marked as complete, the work order status is not automatically updating to “Completed,” and we have to mark it manually. Could

                                                                                                                • Is it possible to create a meeting in Zoho Crm which automatically creates a Google Meet link?

                                                                                                                  We are using Google's own "Zoho CRM for Google" integration and also Zoho's "Google Apps Sync" tools, but none of them provide us with the ability to create a meeting in Zoho CRM that then adds a Google Meet link into the meeting. Is this something that

                                                                                                                • Customer Message Edit/Delete Function & Backend Visibility Inquiry

                                                                                                                  目前客服已发送的对话支持编辑和删除功能，请问在 Zoho 系统后台，是否可以查看客服具体发送了什么内容，以及删除或修改了哪些信息？如果无法查看，这个功能是否可以通过设置关闭客服的编辑和删除权限？如可以，请告知具体设置路径。 Currently, customer service agents are able to edit and delete messages after sending them. In the Zoho system backend, is it possible to view

                                                                                                                • In App Auto Refresh/Update Features

                                                                                                                  Hi,    I am trying to use Zoho Creator for Restaurant management. While using the android apps, I reliased the apps would not auto refresh if there is new entries i.e new kitchen order ticket (KOT) from other users.   The apps does received notification but would not auto refresh, users required to refresh the apps manually in order to see the new KOT in the apps.    I am wondering why this features is not implemented? Or is this feature being considered to be implemented in the future? With the

                                                                                                                • Next Page