Kaizen #202 - Answering Your Questions | Testing and Using REST APIs in Widgets
Hello Developers!
Welcome back to a fresh week of Kaizen!
Thank you for your active participation in sharing feedback and queries for the 200th milestone. This week, we will look at the following queries related to widget:
- Widget Testing
- Using REST API in Canvas Widgets: Make HTTP calls in widgets (e.g., to external tax or product APIs)
Here are the queries that we have already answered for you from this milestone:
- Kaizen #200 - Answering Your Questions | Token generation using the Python SDK
- Kaizen #201 - Answering Your Questions | Webhooks, Functions, and Schedules
Widget Testing
One of the queries we received was simply stated
Widget Testing
without any specific context. Since the user has not provided detailed input, we are assuming this is about how to test a widget during development.
You can test your Zoho CRM widget locally using the Zoho CLI. Run the following command from the root directory of your widget project:
zet run |
This launches the widget on a local server where you can validate the UI and functionality before pushing it live.
Since the localhost connection opens in a new tab and is not private, you will need to manually authorize it.
Click Advanced, then choose Proceed to 127.0.0.1 (unsafe) to continue.
Note
If your widget needs to access data from your Zoho CRM organization, such as fetching or updating records, it must be deployed within a Zoho CRM iframe. To do this, you should upload the widget through the Zoho CRM Widgets setup page.
We recommend using the sandbox environment in such cases before deploying the widget to your production environment.
Making HTTP Calls from Widget
Following is a query we received from a user:
Using REST API in Canvas Widgets: Make HTTP calls in widgets (e.g., to external tax or product APIs)
Yes. You can make HTTP requests to external services from any type of Zoho CRM widget using the ZOHO.CRM.HTTP object from the Widget JS SDK.
Canvas Widget - What's Supported?
Though full widget support within Canvas is on our roadmap, currently, you can invoke widgets from a Canvas view using Client Script. This lets you render widgets inside fly-outs or pop-ups. Here is a quick start guide on how you can achieve it:
Create a Widget
1. Create a widget project and code your logic using Zoho CLI as explained in our widget help page.
2. In Zoho CRM Developer Hub, create a new widget and set the type as Button.
Create a Client Script
3. Navigate to Client Scripts in Developer Hub and click New Script.
4. You can create your script either in the Modules or Commands category based on your use case.
In the Category Details section, ensure to select Canvas as the page type. Canvas views are supported in the following page contexts: List, Detail, Create, and Clone.
Choose the one that aligns with where your widget needs to appear.
5. Here is the sample script to render widget in a pop-up.
ZDK.Client.openPopup({ api_name: 'Canvas_Widget', type: 'widget', animation_type: 4, height: '450px', width: '450px', }, { data: 'sample data to be passed to "PageLoad" event of widget' }); |
Here is the sample script to render widget in a fly-out.
ZDK.Client.createFlyout('myFlyout', { animation_type: 4, height: '600px', width: '500px' } ); ZDK.Client.getFlyout('myFlyout').open({ api_name: 'Canvas_Widget', type: 'widget' }); |
You can also check out the Kaizen #99 on Rendering Widgets using Client Script for a detailed guide based on a real-time use case.
Using REST APIs from External Applications
The ZOHO.CRM.HTTP object enables you to make secure API calls directly from the Zoho CRM widget. It acts as a proxy, routing requests through Zoho servers, which eliminates the need for external applications to support CORS.
While this SDK is primarily used for integrating third-party services, it also supports Zoho CRM API calls. This provides you with greater flexibility to:
- Customize header and parameter structures
- Maintain a consistent calling pattern for both internal and external APIs within the widget.
Here is a basic syntax of the SDK:
ZOHO.CRM.HTTP.<method>({ url: "<request-url>", headers: { // Request headers as Key-value pairs "Authorization": "Bearer <token>" // example }, params: { // Request params as Key-value pairs "ids": "1234567890" // example }, body: "<stringified JSON>", // Required for POST, PUT and PATCH }) .then(function(response) { console.log("Response:", response); }); |
Supported Methods
- ZOHO.CRM.HTTP.get({ ... })
- ZOHO.CRM.HTTP.post({ ... })
- ZOHO.CRM.HTTP.put({ ... })
- ZOHO.CRM.HTTP.patch({ ... })
- ZOHO.CRM.HTTP.delete({ ... })
For more detail check out the HTTP method section of JS SDK help page.
Samples using Zoho CRM Contact Roles API
Let us explore a complete CRUD (Create, Read, Update, Delete) example using Zoho CRM’s Contact Roles API.
These structures have to be used within the JS function where you are executing your code logic.
POST Contact Roles
POST Contact Roles
// Prepare the API request var request = { url: "https://www.zohoapis.com/crm/v8/Contacts/roles", headers: { Authorization: "Zoho-oauthtoken 1000.XXXXXXXXXXXXXXXXXXX265bcf20e4" }, body: { "contact_roles": [ { "name": "Sales Lead", "sequence_number": 1 } ] } }; // Make API call ZOHO.CRM.HTTP.post(request).then(function(data) { console.log(data); }) |
GET Contact Roles
// Prepare the API request var request = { url: "https://www.zohoapis.com/crm/v8/Contacts/roles", headers: { Authorization: "Zoho-oauthtoken 1000.XXXXXXXXXXXXXXXXXXX265bcf20e4" } }; // Make API call ZOHO.CRM.HTTP.get(request) .then(function(response) { console.log(response); }) |
UPDATE Contact Roles
// Prepare the API request var request = { headers: { Authorization: "Zoho-oauthtoken 1000.XXXXXXXXXXXXXXXXXXX265bcf20e4" }, body: { "contact_roles": [ { "name": "Evaluator", "id": "5545974000000006871" } ] } }; // Make API call ZOHO.CRM.HTTP.put(request).then(function(data) { console.log(data); }) |
DELETE Contact Roles
// Prepare the API request var request = { params: { ids: "5545974000002617002" }, headers: { Authorization: "Zoho-oauthtoken 1000.XXXXXXXXXXXXXXXXXXX265bcf20e4" } }; // Make API call ZOHO.CRM.HTTP.delete(request).then(function(data) { console.log(data); }) |
We hope you found this post useful.
Let us know if you have any questions in the comments or drop us an email at support@zohocrm.com.
Cheers!
------------------------------------------------------------------------------------------------------------------------
Related Reading
1. Widget - An Overview, CLI Installation, Working with Widgets, JS SDKs, Mobile Compatibility of Widgets and Kaizens
3. Canvas - Getting Started, Purpose and Benefits
------------------------------------------------------------------------------------------------------------------------
Previous Kaizen : Answering Your Questions | Webhooks, Functions, and Schedules | Kaizen Directory: Home
Access your files securely from anywhere
Centralize Knowledge. Transform Learning.
All-in-one knowledge management and training platform for your employees and customers.
New to Zoho Recruit?
Zoho Developer Community
New to Zoho LandingPage?
Zoho LandingPage Resources
New to Zoho Survey?
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Bigin?
Topic Participants
Kiruthiga G
Haiku Technical Support
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 thisKaizen #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 howKaizen #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
New to Zoho TeamInbox?
Zoho TeamInbox Resources
Zoho CRM Plus Resources
Zoho Books Resources
Zoho Subscriptions Resources
Zoho Projects Resources
Zoho Sprints Resources
Qntrl Resources
Zoho Creator Resources
Zoho CRM Resources
Design. Discuss. Deliver.
Zoho Show Resources
Get Started. Write Away!
Writer is a powerful online word processor, designed for collaborative work.
Zoho CRM コンテンツ
-
オンラインヘルプ
-
Webセミナー
-
機能活用動画
-
よくある質問
-
Ebook
-
-
Zoho Campaigns
- Zoho サービスのWebセミナー
その他のサービス コンテンツ
Nederlandse Hulpbronnen
ご検討中の方
Recent Topics
Allow Global Admin to access/edit all forms without changing owners
Hi there, Please consider adding a feature where the Global Admin of the account an automatically access/edit any form in the Company Account. I'm the Global Admin on our Zoho One plan, and we have multiple users that use/create forms. But for me to accessERROR: "Please enter a valid Phone"
WHAT IS THE PHONE FORMAT? There is nothing ANYWHERE to define the format. At least the error should either show the correct format or provide a link to the help file I enter a valid phone number in as many formats as I can think of and none of them allow me to save the number to CRM Nothing works! No matter what format I enter I keep getting a red error "Please enter a valid Phone" The international format for MY mobile is +61414652366 (or +61 414 652 366) Local format is 0414652366 I call all overIntroducing Zoho Sprints 3.0
Zoho Sprints is consistently evolving in steady increments. The introduction of the latest version, with its enterprise level solutions, brings to you advanced capabilities that propel your agile efforts in the right direction. Here's a quick glimpseTransaction Rules & Customer Payments
So I have a situation as follows. We have many clients who are all invoiced on the 1st of each month on a recurring invoice for 1 of 10 plans. This means that almost all payment dates are the same (some people pay late) and that a lot of the amounts areCustomize Sign-out Button
Are there some url parameters I can use to make a form button sign-out the user from the app? The sign-out link on the top right is small. Here's and example of the url for the top right sign-out: https://creator.zoho.com/logoutpage.jsp?sharedBy=niskypto&appID=212085000006568003&appLinkName=MYAPP&signOutUrl=niskypto/MYAPP/view-login/SOMEPAGE Note: In my account, the sign-out is set to redirect users to my website. Can I also override this with some url parameters? John M. WhitneyPlease can the open tasks be shown in each customer account at the top.
Hi there This has happened before, where the open tasks are no longer visible at the top of the page for each customer in the CRM. They have gone missing previously and were reinstated when I asked so I think it's just after an update that this featureTip #65 - Exploring Technician Console: Short Keys - 'Insider Insights'
Hello Zoho Assist Community! Have you ever been in the middle of a remote support session, trying to pass a key combination onto the remote machine, only to find it's reflecting on the technician's computer. The Short Keys feature in Zoho Assist is hereReading from and writing to Zoho Projects Custom Module with Deluge
Does anyone know if there is a way to read from and write to the Custom Modules that Zoho now supports. I would love to be able to loop through a set of data and create the entities I need to for this new custom module I'm looking to put together.Disappointment with Zoho Payments
Dear Gowdhaman, I am writing to inform you that I am removing Zoho Payments from my website. I cannot continue to disappoint my customers due to the lack of UPI support, as has been the case with my experience so far. Please note that the 0.5% transactionEvolução do modelo de ambientes: Dev, Homologação e Produção com pacotes versionados
Hoje o Zoho CRM já oferece Sandbox, o que é um avanço importante para organizações que trabalham com customizações mais complexas. No entanto, na prática, o modelo atual ainda apresenta limitações significativas quando múltiplas equipes ou consultoriasPermissões granulares por usuário além do modelo baseado exclusivamente em perfis
Atualmente, o modelo de segurança do Zoho CRM é fortemente baseado em perfis. Embora funcional, esse modelo apresenta limitações quando equipes possuem variações individuais de acesso dentro do mesmo grupo operacional. Em cenários reais, é comum que usuáriosAdd or update lookup field values during Blueprint transition
Hello everyone, During blueprint transition users can add or modify the value of a lookup field. For instance, if the Tickets module includes a lookup field that connects it to records in the Assets module, agents can link the ticket to the correct assetCan you limit SEO penalties by delaying the appearance of a pop-up?
Google is not keen on pop-ups and has got even less keen on them with the new Core Web Vitals updates. But I like using pop-ups. If you delay the pop-up so it only appears 10 seconds after the page loads, do you avoid Google’s penalties?Adding bank details to the contact through API
How to add bank-related information to the contact while creating it using API? The account number needs to be encrypted before sending it through API but not sure how to encrypt and get those values. Please guide me in this.Restrict Payment Methods
Allow us to restrict certain payment methods specific for each customer.Clone Banking Transaction
Why is there no option to CLONE a Transaction in the Banking module?? I often clone Expenses (for similar expense transactions each month) so I would also like to clone Income transactions. But there is no option in Banking to clone an existing IncomePDF limit
Hello everyone, We have received an e-mail that we have reached our PDF limit. (see screenshot) However, I cannot find any reference to a PDF limit in our tariff plan (Premium). (see screenshot). What is the maximum number of PDFs that can be generatedHow can I see content of system generated mails from zBooks?
System generated mails for offers or invices appear in the mail tab of the designated customer. How can I view the content? It also doesn't appear in zMail sent folder.Credit Card Pre-Authorization with later Capture/Settlement
We really enjoy the convenience of being able to pay off a customer's invoice using our Auth.Net integration with Zoho Books. Unfortunately, we can only take advantage of this feature with a small percentage of our customers as it leaves a gaping holeZoho Projects and CRM Integration in Analytics
Hi Team, In Zoho CRM, I’ve integrated CRM with Zoho Projects and associated a project within the CRM. The integration is visible under the Deals module. However, I’m unable to find this data in Zoho Analytics. Does anyone know where this information isAccessibility in Zoho CRM: Not just a feature—a way to empower
For instructions on setting up these controls, please check this help document: Configuring accessibility controls. Hello everyone, Today (December 3, 2024), on the International Day of Persons with Disabilities, we begin our journey towards a CRM thatAutomation Series #1: Round Robin vs Direct Assignment in Zoho Desk
Direct Assignment vs Round Robin: Choosing the right routing method in Zoho Desk This post is part of the "Desk Automation Series," Chapter 1. Through this series, we will help you choose the right automation type in Zoho Desk by comparing commonly confusedInvalid tax authority ID.
How do I correct this ?Pay Pal Paylater button
I am testing the paypal setup to have my customers pay invoices with paypal and credit cards. But it seems to have two options. Paypal and Pay later. I don't want my customers access to pay later feature. How can I turn that part off.. My other integrationZoho Workshops are coming to the Netherlands - Join us on 14-16 April in Amsterdam!
Dear Zoho Community Members, After succesful recent editions in the UK and Scandinavia, we’re pleased to invite you to the upcoming Zoho Benelux Workshop 2026, taking place 14–16 April 2026 in Amsterdam. This three-day, in-person event at the Park PlazaHow to install Widget in inventory module
Hi， I am trying to install a app into Sales Order Module related list, however there is no button allow me to do that. May I ask how to install widget to inventory module related list?Sub form auto field population based on parent form
I have a parent form called "Sites" with a text field called "Site". I have a subform called "Design Comments" (actual form name "Review Comments") with a lookup field name "Sites1" that looks up from the Sites form. I want the Sites1 lookup field toBuilding Toppings #7 - Using schedules and workflow functions
Hello Biginners, In our previous forum post, we explored install and uninstall actions and learned how to trigger custom logic the moment a topping is added or removed from an organization. In this post, we'll look at how to automate actions during regular,Simplify scripting with Zia assistant bot
Hello everyone, Building automation using Deluge custom functions gives users flexibility and control. Traditionally, creating these functions required writing scripts, testing the logic, and validating the configuration before using it. With Zia assistantZoho Sprints iOS app update: Global view, screen capture control, file encryption, tags enhancement
Hello everyone! We are excited to introduce new features in the latest version(v2.1) of the Zoho Sprints iOS app update. Let’s take a quick look at what’s new. 1. Global view Global view brings all your project items into one centralised space. You canResource Management System built using Zoho CRM, Creator, Projects, and People:
In a Resource Management System built using Zoho CRM, Creator, Projects, and People: CRM Deal Closed → Creator Allocation Engine → Zoho Projects Task Assignment What is the recommended architecture to handle dynamic reassignment when: an employee goesRequest to Remove LinkedIn Verification from My Emai
I would like to submit a complaint regarding my Zoho Mail account. I previously used this email address to verify a LinkedIn account, but that LinkedIn account has now been closed. I need to remove or cancel the verification associated with the closedPin multiple columns and adjust column widths in CRM subforms
Hello all, Subforms act as secondary forms or tables in which you can associate multiple line items to a primary record and thereby ensure more structured and comprehensive data organization. We've made some recent enhancements to subforms. Here's what'sRemoving To or CC Addresses from Desk Ticket
I was hoping i could find a way to remove unnecessary email addresses from tickets submitted via email. For example, a customer may email the support address AND others who are in the helpdesk notification group, in either the TO or CC address. This resultsFrom Zoho CRM to Paper : Design & Print Data Directly using Canvas Print View
Hello Everyone, We are excited to announce a new addition to your Canvas in Zoho CRM - Print View. Canvas print view helps you transform your custom CRM layouts into print-ready documents, so you can bring your digital data to the physical world withAnnouncing Kiosk 1.1 - Customize screen titles, configure new fields & actions, use values from your Kiosk to update fields, and more.
Hello all We are back again with more enhancements to Kiosk. So what's new? Enhancements made to the Components Add titles for your Kiosk screens and adjust its width to suit your viewing preferences. Three new fields can be added to your screen: Percentage,CRM Percent custom fields: When will it show the % symbol and behave like %?
1. Actually Percent custom fields fail to show the % symbol. 2. When in formulas Percent fields work like number: 100 x 5% = 5 ideal world 100 x 5% = 500 what happens actually 3. When importing Percent fields the % symbol has to be removed and the dataIntroducing Color Coding of Picklist Values
Dear Everyone, Greetings!! Zoho CRM is uplifting the user experience. Recently, we had some notable aesthetic improvements in CRM like Kanban View UI enhancement, New List view UI enhancement, color coding of tags, and color coding of picklists in meetings.Where can I find the best mail backup tool for Windows?
Later this evening I found Mail Backup Tool in google. Actually I was looking for a solution to download/save emails to my local drive. As I had plenty of important data stored in my email account. So i was not in a mood to take this thing lightly. This made me curious to found any software which can help me to backup my data to hard drive. Then I found the above application which was like a gem. A complete email backup solution for Zoho Mail, Gmail, Yahoo Mail, Office 365 and more than 40+ emailMailbox storage showing incorrect usage
My mailbox shows 4.99 GB used out of 5 GB. However, actual mailbox usage is only around 394 MB. Trash and Spam are already empty. IMAP/POP is not enabled. WorkDrive is not in use. This appears to be a storage calculation issue. Please help to recalculateNext Page