Kaizen #157: Flyouts in Client Script

Kaizen #157: Flyouts in Client Script




Hello everyone! 

Welcome back to another exciting edition of our Kaizen series, where we explore fresh insights and innovative ideas to help you discover more and expand your knowledge!In this post, we'll walk through how to display Flyouts in Client Script and break down the key differences between Flyouts and pop-ups in Client Script, including when to use each one.

In this Kaizen post, 

1. What are Flyouts in Client Script?
2. Flyout- ZDKs and functions in Client Script
3. Use Case
4. Solution
        4.a. Create a Widget for EMI Calculator.
        4.b. Create a Client Script to render the Widget as Flyout.
5. Difference between flyout and popup in Client Script
6. Summary
7. Related links

1. What are Flyouts in Client Script?

Flyouts are floating User Interface that can be moved around and controlled using Client Script. Widgets can be used to render a flyout. The flyout can run independently, and any Client Script can communicate with it. 

2. Flyout- ZDKs and functions in Client Script :

  • createFlyout(name, config) - Creates a flyout. You can specify the heading, dimensions, and animation type using the config parameter.
  • getFlyout(name) - To Fetch the details of a flyout.
  • open(config, data) - Opens the created flyout.
  • notify(data, options) - Notifies and waits for data in a flyout. The options can be wait: true (Client Script execution will wait for a response from the widget) or wait: false - (Client Script execution will not wait for a response from the widget)
  • close() - Closes the active flyout.

Click here for more details about the ZDKs and functions related to flyouts.

3. Use Case :

Sales Advisors in a Finance Consulting Company regularly rely on an EMI calculator to help customers with loan queries. To improve their efficiency and eliminate the need to switch between different windows, the admin manager intends to integrate the calculator directly into CRM. The EMI calculator should appear on the Create Page of the Loans module and remain active until the user closes it.

4. Solution: 

To achieve this in Zoho CRM, we can use Widgets to create an EMI calculator and render them using flyouts in client script whenever the create Page of Loan page loads.

4.a. Create a Widget for EMI Calculator
Install Zoho CLI, and follow the steps given in this document to create the Widget app folder. Then update the html, javascript, and css code as per your requirement.

index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="style.css" />
  9.   </head>
  10.   <body>
  11.     <div class="loan-calculator">
  12.       <div class="top">
  13.         <h2>EMI Calculator</h2>
  14.         <form action="#">
  15.           <div class="group">
  16.             <div class="title">Amount</div>
  17.             <input type="range" min="1000" value="30000" max="50000" step="500" class="loan-amount" id="loanAmount" />
  18.             <div class="slider-label">$<span id="loanAmountValue"></span></div>
  19.           </div>
  20.           <div class="group">
  21.             <div class="title">Interest Rate</div>
  22.             <input type="range" min="5" value="6" max="100" step="1" class="interest-rate" id="interesRate" />
  23.             <div class="slider-label"><span id="interesRateValue"></span></div>
  24.           </div>
  25.           <div class="group">
  26.             <div class="title">Tenure (in months)</div>
  27.             <input type="range" min="6" max="100" step="1" value="12" class="loan-tenure" id="tenureMonth" />
  28.             <div class="slider-label"><span id="tenureMonthValue"></span></div>
  29.           </div>
  30.         </form>
  31.       </div>
  32.       <div class="result">
  33.         <div class="left">
  34.           <div class="loan-emi">
  35.             <h3>Loan EMI</h3>
  36.             <div class="value">123</div>
  37.           </div>
  38.           <div class="total-interest">
  39.             <h3>Total Interest Payable</h3>
  40.             <div class="value">1234</div>
  41.           </div>
  42.           <div class="total-amount">
  43.             <h3>Total Amount</h3>
  44.             <div class="value">12345</div>
  45.         <div class="right">
  46.           <canvas id="myChart" width="400" height="400"></canvas>
  47.         </div>
  48.       </div>
  49.     </div>
  50.     <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
  51.     <script src="https://live.zwidgets.com/js-sdk/1.2/ZohoEmbededAppSDK.min.js"></script>
  52.     <script src="main.js"></script>
  53.   </body>
  54. </html>
  • Click here to view the complete code.
  • Once you have added the code, upload the zip file by following the below steps.
  • Go to Setup > Developer Space > Widgets.
  • Click Create New Widget and Fill in the details.

The Hosting should be "Zoho" and mention the html page of the app folder that you uploaded.

Notes
Note: 
The widget should be of "button" type in order to render through a Client Script.

4.b. Create a Client Script to render the Widget as Flyout

Configure a Client Script for Create Page(Standard) Loans module, that triggers during onLoad event as shown below. Click Next. Click here to know how to configure a Client Script.



Enter the following script and click Save.
  1. ZDK.Client.createFlyout('EMIFlyout', {
  2.     header: 'EMI Calculator',
  3.     animation_type: 1,
  4.     height: '400px',
  5.     width: '450px',
  6.     close_on_exit: false
  7. });

  9. ZDK.Client.getFlyout('EMIlyout').open(
  10.     { api_name: 'EMI_CALCULATOR_WIDGET', type: 'widget' },
  11.     { data: loanDetails }
  12. );

In the above script, createFlyout() will create a new flyout with header.
Below is the syntax and parameter detail.



Now Open the flyout and render the Widget in the flyout using open() method and specify the api_name of the widget.



Here is how the Client Script renders the flyout.



5. Difference between flyout and popup in Client Script

Flyout
Pop up
A flyout can be moved around the page.
​​
A pop-up cannot be moved anywhere on the page.


It can run independently in a separate thread. The user can interact with the background interface without closing the flyout.

The user cannot interact with the background without closing the pop up.

Use flyouts, when you need to exchange data to and fro between a Widget and Client Script. You can use ZDK.Client.sendResponse() to pass data from a widget rendered as a flyout to the Client Script.


Use popup, when you need to interrupt the screen to gather input from the user or display a message before proceeding. Use $Client.close() to pass data to the Client Script, which will also close the popup.
​​


In the scenario discussed in this post, if you want to make it mandatory for the user to read or interact with the EMI Calculator before entering any value in the create Page(Standard), then you can use pop-up instead of Flyout. Both pop up and flyout can be used to display widgets, and their dimensions can be altered.
Refer to this post to know how to render widgets as pop up using Client Script.

6. Summary
  • In this post, we have seen,
  • Flyouts in Zoho CRM.
  • ZDKs and methods to render a Flyout(Widget) using Client Script.
  • When to use a Flyout and when to use a pop up.


    Access your files securely from anywhere

          Zoho FSM Video Tutorials

            Workforce
            Mobile App
            Job Scenarios
            Scheduled Maintenance
            FSM × Desk
            FSM × Books & Invoice
            FSM × WhatsApp

            MCP Tool Guide MCP Changelog
                What's new
                Blogs
                Community
                Zia
                API resources
                Pricing
                Integrations
                Town Hall
                Custom Apps


                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

                                                                      • Announcing the new SKILL.md for Zoho CRM and the updated OAS repository!

                                                                        We are introducing a new zoho-crm skill to make working with Zoho CRM Developer tools (like APIs, functions, widgets, client scripts, queries etc) easier and faster, with the help of AI in your preferred AI harness like Claude Code, Codex, Cursor, VSCode

                                                                      • Kaizen #261 : Using Zoho CRM Skill to generate complex COQL queries

                                                                        Hello everyone, In the previous Kaizen posts, we introduced the zoho-crm SKILL.md and discussed how it can help you when you are working with Zoho CRM APIs and Client Script. In this Kaizen, we will focus on using the Zoho CRM `SKILL.md` with GitHub Copilot

                                                                      • Kaizen #256 - Build an Arrival Readiness Web Tab in Zoho CRM

                                                                        Hi everyone! Welcome back to the Kaizen series! In the post, we discuss a use case in hospitality industry: how an Arrival Readiness web tab widget can be used to let reception staff identify and resolve issues before arrival of guests. Use case In the

                                                                      • 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


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

                                                                                                                          • What does "Tickets for Review" do?

                                                                                                                            What is the purpose of the va nilla view " Tickets for Review?"

                                                                                                                          • Set same ticket Threshold for Agent-Level Thresholds

                                                                                                                            I am creating Agent-Level Thresholds for agents to auto-assign tickets in a Load-based Round Robin rule. I am unable to set the same number of Open tickets for agents when setting their Thresholds. For exampel: Agent 1 = 10 Agent 2 = 25 Agent 3 = SHOULD

                                                                                                                          • Zoho Mail MCP connector

                                                                                                                            Issue: Zoho Mail MCP connector (https://mail-organization-930963415.zohomcp.com/mcp/.../message) — OAuth authorization completes successfully in-browser ("Authentication successful"), but the issued token is rejected when the MCP client reconnects to

                                                                                                                          • Zoho Books | Product updates | October 2026

                                                                                                                            Hello users, October brings a range of new features and enhancements to Zoho Books, designed to simplify compliance, streamline accounting workflows, and improve inventory management. From the launch of the Nigeria Edition and France’s e-invoicing capabilities

                                                                                                                          • Multiple criteria in searchRecords

                                                                                                                            Hi, is it possible to search with multiple criteria in zoho.crm.searchRecords? I have tried several variations of the following without much success. CustomerRecord = zoho.crm.searchRecords("Contacts", "(First Name|=| lee)" && "(Last Name|=| spencer)"); Thanks. Chris

                                                                                                                          • Plans to make "Generate Presentation with Zia AI" available as API endpoint?

                                                                                                                            This 'Generate Presentation with Zia' feature has great potential, and we would like to be able to trigger it automatically from a workflow. https://show.zoho.com/home/ziaai/generate Is there already a way to trigger this via API? If not, is there any

                                                                                                                          • How to setup noreply@ example.com

                                                                                                                            How do I setup noreply@example.com so the mail never gets delivered. I currently have a catchall setup aswell.

                                                                                                                          • Pleas unblock E-Mail-Adress service@montana-energie.de / kontakt@montana-energie.de

                                                                                                                            Dear Zoho Support, Could you please unblock service@montana-energie.de / kontakt@montana-energie.de which belongs to a regular customer with whom we are having frequent business-related conversations. Thank you very much in advance, Erdem Kar homewise

                                                                                                                          • Unable to change alias in the from field on the ZOHO mac app

                                                                                                                            I have 1 main mail address, and 3 alias's. on the web mailbox when I create a new email, I can select the alias's from the dropdown in the from field. On the app no dropdown is available.

                                                                                                                          • Zmail mobile application

                                                                                                                            ho do i remove people from this app

                                                                                                                          • My allies email (info@xxxx.com) was been deleted by system, and I can not build the same info allies email now

                                                                                                                            Dear Zoho Mail Support Team, I am the super administrator of the Zoho organization 【Organization Name, as shown in Admin Console】. I am writing to report an urgent issue with two of our custom-domain email addresses and to request your help restoring

                                                                                                                          • Cannot create mail account

                                                                                                                            Hi, i have a problem, i can't create a mail account every time i try the error massage like this Oops! Something went wrong during mailbox creation. Please try again please help

                                                                                                                          • Amazon.it always ends up in spam

                                                                                                                            Emails from amazon.it always end up in the spam folder, even though I have added the domain and the various individual Amazon addresses for shipping, payments, and other matters to the trusted lists at the user administrator level. What should I che

                                                                                                                          • Your Authenticate email domain (SPF, DKIM, DMARC) is bad to say the least

                                                                                                                            How about actual instructions rather than vague generalities? There is no way to complete this with what is provided. Please provide specific verifiable steps.

                                                                                                                          • Generate a Zoho Sign link

                                                                                                                            From time to time I get a response "I never received your you e-document for electronic signature" is there a way to generate a Zoho Sign link to share.

                                                                                                                          • ChatGPT Plugin / MCP Server auth error

                                                                                                                            Hi all I'm trying to connect the ChatGPT plugin for Zoho CRM but after username stage of the auth process, I get this error from the URL https://mcp.zoho.eu/mcp-client/ {"error_description":"Invalid request url, Request is not as per defined in oauth

                                                                                                                          • Zeptomail in the blacklists

                                                                                                                            Hello, I noticed some hard bounces while sending emails, and upon checking the details, I see that we have been added to the blacklists of certain spam lists: Bounce category: Policy failure Reason: ip-issues Message: 5.7.1 Service unavailable; client

                                                                                                                          • Zoho Desk training for administrators in EU and US region

                                                                                                                            Hello Everyone, Get ready for the certified Virtual Classroom training for our Zoho Desk users in Europe and the US. Our in-house Zoho Desk expert, @Dheeraj | Zoho Desk, will conduct the virtual classroom training. This training focuses on simplifying

                                                                                                                          • Possible to reorder Pipelines position?

                                                                                                                            I have multiple Pipelines and want to reorder their positions, so that in the Deals module record for the Pipeline field, I have them ordered in a certain way. Is there a way to reorder the position of the Pipelines without deleting existing Pipelines

                                                                                                                          • Categorize Items with Item Headers

                                                                                                                            Hello customers, Did you ever want to classify items based on specific categories to help your customers understand your invoice better? With the new Item Header feature, you can easily categorize items in your invoices and estimates and give them a common title.  Item Headers are available in the Invoices, the Recurring Invoices and the Estimates module. It can be carried forward from estimates to invoices at the time of converting the estimates.  To add an item header: Go to the Estimates, Invoices

                                                                                                                          • Gettting "You are Offline" Messages all the time

                                                                                                                            Al of a sudden, a few days ago, I suddenly began getting a message on the bottom left side of the Mail App saying "You are Offline". Why? Does it mean I'm not getting incoming mails now? why is has started?

                                                                                                                          • Zoho CRM Quotes – Subform and PDF/Writer Limitations

                                                                                                                            Hello, I am encountering the following limitations in Zoho CRM Quotes: Custom product images cannot be uploaded in the subform – the image upload field cannot be added; only the file upload field is available. File upload placeholders cannot be used in

                                                                                                                          • Invoice Only Shipped Items

                                                                                                                            Dear Zoho, We are a company that deals with sales orders with 600-1000 lines We need to be able to do partial invoicing based on shipped items Right now when we click convert to invoice we can not only select items that have een shipped It takes hours

                                                                                                                          • Alias Email Id already exists

                                                                                                                            Hi, I just verified my domain sesque (dot) com and now I am trying to create the admin account using admin (at) sesque (dot) com, but I am getting an error saying "Alias Email Id already exists". I used to have another Zoho account with this email address,

                                                                                                                          • Allow widgets to be placed between native sections in the Ticket Properties panel

                                                                                                                            One of our biggest frustrations with the Tickets module is how rigid the Ticket Properties panel is. Every section there is built only from native Zoho Desk fields. We can add sections, rearrange fields, and pick layouts, but we can’t put anything custom

                                                                                                                          • Show backordered items on packing slip

                                                                                                                            We send out a lot of large orders, and often there are one or two things backordered. How can I fix the packing slips to show quantity ordered  & quantity packed There should also be the ability to "ship" 0 of an item so the receiver knows that things

                                                                                                                          • Deleted Module

                                                                                                                            I accidentally deleted a module and its fields. Im trying to get it back. Thanks to Youtubers flooding the internet with out of date videos I can't find how to get deleted modules back. The Recycle Bin doesn't have modules. Anyone know how to do thi

                                                                                                                          • Set department automatically for incoming calls

                                                                                                                            Is it possible, when receiving an incoming call through Zoho Desk (using Twilio integration), for the department to be auto-selected based on the phone line being called? Currently, we have to manually select the department from the dropdown menu when

                                                                                                                          • Make better hiring decisions with Compare Applications and Zia Insights (Beta)

                                                                                                                            When multiple candidates apply for different job openings, evaluating each application against the right job requirements can take time. Reviewing resumes, candidate details, and interview feedback separately can make it harder to assess role fit and

                                                                                                                          • Support Plan: Recuring Issue

                                                                                                                            Hi Zoho Team, Could you please look into this recurring alert and provide clarification on why this restriction is still in place? This issue has become a bottleneck in our workflow, significantly limiting our automation capabilities. We are unable to

                                                                                                                          • mail sent to gmail goes directly to spam

                                                                                                                            Hi TKIM and SPF are configured and verified. E-mails coming from zoho to my personal gmail account are going directly to the spam folder. How can I solve this? I can send you guys the headers privately if you need to.

                                                                                                                          • Creating packages according to actual shipping processes

                                                                                                                            Hi community. I would like to ask a question to see if there's a better method or workflow for the creation of packages in Zoho Inventory. There is a little confusion in some of Zoho's language relating to the use of term Packing Slip when connected to

                                                                                                                          • mail

                                                                                                                            We want our tracked links in campaign and journey emails to use our own domain instead of the shared maillist-manage.net domain. We have already created the CNAME links.rexven.com → customer-campaign.zoho.com (DNS only). Does our plan support a custom

                                                                                                                          • Zoho Webinar - Sharing System Audio (NOT AVAILABLE)

                                                                                                                            Hi, We are having a serious problem with Zoho Webinar. In the webinars we run, we very often share the audio from a video we are streaming directly from YouTube or other applications. Until recently we were using Zoom, but as we use other Zoho applications

                                                                                                                          • Ad-hoc approvals are now available in CRM approval processes

                                                                                                                            Released for all DCs. Hello everyone, We've introduced ad-hoc approvals in CRM approval processes. This enhancement lets approvers add additional approvers when needed, without changing the configured approval workflow. How the approval process works

                                                                                                                          • Introducing PRM: Build, manage, and scale your partner ecosystem

                                                                                                                            Growing a partner ecosystem is a good problem to have. What starts as a handful of partners can quickly turn into a maze of spreadsheets, emails, and disconnected processes. More partners mean more opportunities, greater reach, and new ways to grow

                                                                                                                          • Data Subject Requests in Zoho Mail: Retrieve and export email data for legal and compliance needs

                                                                                                                            Organizations are often required to retrieve specific email communication data in response to legal investigations or compliance audits. The Data Subject Requests (DSR) feature in the Zoho Mail Admin Console allows administrators to search for all email

                                                                                                                          • Introducing live chat for Zoho CommunitySpaces

                                                                                                                            Hello everyone, We’re happy to announce that your community members now have a direct line to you. Zoho CommunitySpaces now has a live chat widget, powered by Zoho SalesIQ, so a member can open a chat from your community and get a quick one-to-one answer

                                                                                                                          • Moving software

                                                                                                                            I need someone to customize zoho for my moving business I need to do the following . 1. Quote comes in from ezemove website or we enter customer details into the system 2. Email quote to customer based on hourly rate 3. Customer accepts quote deposit is taken 4. We convert the quote into a confirmation email and add job to the diary and assign resources to the job 5. Job gets completed and we enter invoice amount into the system and email the invoice Budget : neg | Duration : 1 month To leave a private

                                                                                                                          • How To Create a Report with Subforms from Two Modules

                                                                                                                            I want to create a report based on data in subforms over 2 separate modules. Can this be done? I tried to do it in Analytics, but one is a date field that needs to be grouped by month, and it doesn't look like Analytics can do this.

                                                                                                                          • Next Page