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
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 #197: Frequently Asked Questions on GraphQL APIs
🎊 Nearing 200th Kaizen Post – We want to hear from you! 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 #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.Celebrating 200 posts of Kaizen! Share your ideas for the milestone post
Hello Developers, We launched the Kaizen series in 2019 to share helpful content to support your Zoho CRM development journey. Staying true to its spirit—Kaizen Series: Continuous Improvement for Developer Experience—we've shared everything from FAQsKaizen #193: Creating different fields in Zoho CRM through API
🎊 Nearing 200th Kaizen Post – We want to hear from you! 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.Client Script | Update - Introducing Commands in Client Script!
Have you ever wished you could trigger Client Script from contexts other than just the supported pages and events? Have you ever wanted to leverage the advantage of Client Script at your finger tip? Discover the power of Client Script - Commands! Commands
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
How to overcome Zoho Deluge's time limit?
I have built a function according to the following scheme: pages = {1,2,3,4,5,6,7,8,9,10}; for each page in pages { entriesPerPage = zoho.crm.getRecords("Accounts",page,200); for each entry in entriesPerPage { … } } Unfortunately, we have too many entriesAdd Webhook Response Module to Zoho Flow
Hi Zoho Flow Team, We’d like to request a Webhook Response capability for Zoho Flow that can return a dynamic, computed reply to the original webhook caller after / during the flow runs. What exists today Zoho Flow’s webhook trigger can send custom acknowledgementsTriggering Zoho Flow on Workdrive File Label
Right now Im trying to have a zoho flow trigger on the labeling/classification of a file in a folder. Looking at the trigger options they arent great for something like this. File event occurred is probably the most applicable, but the events it has arentBidirectional sync between Zoho Bookings and Zoho CRM - Part 1
Hey, community members! The default integration between Zoho CRM and Zoho Bookings is unidirectional, which means that any appointments booked, rescheduled, or deleted in Zoho Bookings will be reflected in Zoho CRM. However, any modifications made toIs it possible to edit placeholder text?
In the master slides I want to make sure my templates have more meaning for the users and want to replace the standard placeholder text with something more instructional. Instead of "Click to edit Mast subtitle styles" I want to have "Click to enter reportingDelay function execute
I've got a workflow which uses a webhook to send information to Flow, which in return updates a record in Creator. Problem is, by the time this has executed, the rest of my script has run and can't find the (yet to be) updated info in the record. Is thereRefunds do not export from Shopify, Amazon and Esty to Zoho. And then do not go from Zoho inventory to Quickbooks.
I have a huge hole in my accounts from refunds and the lack of synchronisation between shopify , Amazon and Etsy to Zoho ( i.e when I process a refund on shopify/ Amazon or Etsy it does not come through to Zoho) and then if I process a manual credit note/How to allow download of a file AFTER information is collected?
I can't find this anywhere. Can someone help with what seems to be a pretty basic web function today? - File is stored in Workdrive - Prospect goes to a URL where the file is located - System requests prospect to enter "Name" and "Email" - An email isEmail Reminders on Shared Calendars
How do we turn off the setting that emails reminders to everyone who has accepted or declined a calendar invite? If 8 of us have been invited to the same meeting, we receive 8 notifications for every step of the process, from invitation to decision.Add Baseline methods to API
There are no API methods for creating or querying baselines, Use case: Customer is notified of the current project start date according to plan via another product/integration. We would like to auto create a baseline (Automated via API) at the pointBulk Fill In & Edit PO/Bill/SO/Invoice
Hello, I am adding stock in bulk on a PO, the system is automatically populating the Rate (price) and Tax from the item data. Problem is that the bill rate is different from the rate on the item data, so I have to manually erase each and enter the price.Fixed Assets beg balance
Hello, I trust you are well I'm a new zoho books user and I find it difficult to plug in the fixed assets balance and here's what I have done: 1- I imported the fixed assets data into the fixed assets module as per the instructions 2- the import processSyncing with Google calendar, Tasks and Events
Is it possible to sync Zoho CRM calendar, task and events with Google Calendar's tasks and events. With the increasing adoption by many major tool suppliers to sync seamlessly with Google's offerings (for instance I use the excellent Any.do task planningCRM Deluge how can link attach file with workdrive file.
Hi, We have create file at workdrive and would like to link to attachment at crm module by deluge. Right now can only upload it to attachment but can not link the file from workdrive. Thank youFeature announcement: AI-powered document generator in Zoho Sign
Hi there! We recently announced manual document creation by offering an editor within Zoho Sign. Today, we are excited to announce AI-powered document generation to help you draft agreements, purchase orders, and other important business documents inPermanently deleted files
Is there a way to get back permanently deleted files from your account if they were accidentally deleted and no longer recoverable from the recycling bin? I know I am probably screwed but I just figured I would ask.Shared Mailbox in iOS app
Hi, On the desktop I am using a Shared mailbox for our company's general mailbox that somebody else should be able to view. In the iOS app however I can't find it? Old sources on the internet says this isn't possible but that can't be right? SomebodyTip #41- Simplify Compliance and Efficiency with Zoho Assist’s Data Cleanup Feature- 'Insider Insights'
Managing device data efficiently is just as important as securing remote access. With Zoho Assist’s Data Cleanup feature, admins can easily remove outdated or unnecessary device records, keeping the console organized and secure. This action is carriedRevenue Management: #6 Revenue Recognition in Professional Services Industry
If you run a consulting firm, agency, or any service-based business, you have a situation where you have signed the contract, maybe even sent the invoice, and have received some initial payments. So, can you consider this as revenue? What if the projectThis domain is not allowed to add. Please contact support-as@zohocorp.com for further details
I am trying to setup the free version of Zoho Mail. When I tried to add my domain, theselfreunion.com I got the error message that is the subject of this Topic. I've read your other community forum topics, and this is NOT a free domain. So what is theZoho fsm scheduled maintenance dispatch
Hi, I'm reaching out regarding an issue I'm encountering with the Scheduled Maintenance feature in Zoho FSM. I’m trying to configure it so that it automatically dispatches all maintenance jobs scheduled within the next 150 days, starting from today. However,Template modifiactions
Hello, I am struggling with the templates in ZOHO Books. Especially with the placement of some items, like company address, ship to, bill to etc. For example: One item I like from template X (placement of ship to and bill to next to each other in thezoho.inventory.getRecords returns no records
I running a custom function (Deluge) in Zoho Flow with a connection to Zoho Inventory. To debug the problem, I created the test function below. It returns "Number of contacts fetched: 0". This confirms that there's no issue with the org ID or connectionHow do I get Status History data of my Projects?
I want to build a table in Zoho Analytics that Groups by Date, when Projects entered a certain status. I cannot find Status History or any such useful data available in the Setup of my Data Source sync. Please advise how I can achieve this?Zoho Campaigns Event timestamps do not propagate to Zoho CRM
We have integrated Zoho CRM and Zoho Campaigns. But when looking at Contact records, the Campaign event data is missing the actual timestamps: especially when a particular email was sent. They're not in the Campaigns related list, and the cannot be foundFeature announcement - Simplifying document creation with Zoho Sign
Hi there, We are pleased to announce the release of our document creation feature, enabling you to create, edit, and finalize documents like agreements, purchase orders, and contracts without relying on external tools or applications. <br> ThisIntegrating File Attachments in Zoho Flow Email Notifications
Hi, I would like to be able to send an email once an entry is made in a form, and in this email, I would like to attach a file that has been added to the form using the ImageUpload (or FileUpload) widget. So, I started by creating a flow that will triggerCRM->INVENTORY, sync products as composite items
We have a product team working in the CRM, as it’s more convenient than using Books or Inventory—especially with features like Blueprints being available. Once a product reaches a certain stage, it needs to become visible in Inventory. To achieve this,Zoho Mail SMTP IP addresses
We are using Zoho Mail and needs to whitelist IP for some redirections from your service to another e-mails. You can provide IP address list for Zohomail SMTP servers?Zoho project purchases
Hi Folks, I think having a purchase module in projects will help in putting together a project p and L. Project wise purchases and expenses. Do let me know your thoughts.Create Tasklist with Tasklist Template using API v3
In the old API, we could mention the parameter 'task_template_id' when creating a tasklist via API to apply a tasklist template: https://www.zoho.com/projects/help/rest-api/tasklists-api.html#create-tasklist In API v3 there does not seem to be a way toHow can I restore all the deleted Time entries of a Task in Zoho Projects
How can I restore all the deleted Time entries of a Task in Zoho Projects? Query: In Zoho Projects, I cloned a task and deleted the time entries from the cloned task. However, this also deleted the time entries from the original task. How can I restoreIs there a way to make an account inactive in ZoHo Desk
We have a few Clients "Accounts" that we no longer do business with. It would be beneficial for them to not show up in lists. However, we want to go back and view tickets, time, etc.How to set the value of the Phone field importing contacts in Zoho Desk
Hi everyone, i'm new in Zoho Desk, we're setting up the environment and i'm importing contacts from another CRM using a file CSV and i'm getting a problem with phone numbers (italian): the leading zero is cut away, also if the value is inside double quotes.Can we generate APK and IOS app?
Dears, I want to know the availability to develop the app on zoho and after that .. generate the APK or IOS app and after that I added them to play store or IOS store.. Is it possible to do this .. I want not to use zoho app or let my customers use it. thanksSet Custom Icon for Custom Modules in new Zoho CRM UI
Change total display format in weekly time logs
Hi! Would it be possible to display the total of the value entered in the weekly time log in the same format that the user input? This could be an option in the general settings -> display daily timesheet total in XX.XX format or XX:XX.Deprecation Notice: OpenAI Assistants API will be shut down on August 26, 2026
I recieved this email from openAI what does it means for us that are using the integration and what should we do? Earlier this year, we shared our plan to deprecate the Assistants API once the Responses API reached feature parity. With the launch of Conversations,How to center a field inside a section?
I’ve been trying to center a field inside a section in Zoho Canvas. When I align it visually, it looks centered in the editor, but after clicking Save, the field appears misaligned on the actual canvas. I also tried setting the field to full width, butKaizen #192 - Implementing Custom Token Persistence in Python SDK
Welcome back to another week of Kaizen! Last week, we discussed how to implement Login with Zoho using OAuth 2.0 and saw how to bring it to life in a real-world application with the Zoho CRM Python SDK. We also discussed how Zylker Academy built a customNext Page