Kaizen 202 - Answering Your Questions | Testing and Using REST APIs in Widgets

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:
  1. Kaizen #200 - Answering Your Questions | Token generation using the Python SDK
  2. Kaizen #201 - Answering Your Questions | Webhooks, Functions, and Schedules

Widget Testing

One of the queries we received was simply stated
Quote
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. 

Notes
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:
Quote
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. 

For assistance, refer to the step-by-step guide on Creating Client Script and Commands.



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' });

For detailed guidance, check out our Client API documentation on Pop-up and Fly-out.

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


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


------------------------------------------------------------------------------------------------------------------------

    • 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 FAQs

    • Kaizen #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

    • Recent Topics

    • How to sync Zoho CRM Quotes with Zoho Books/Finance Estimates or Quotes

      Hi everyone, We’re building quotes in the Zoho CRM Quotes module because of its strong CPQ features and better communication options (multiple contacts, email customization, etc.). However, these don’t sync directly with Zoho Books/Finance for invoicing.

    • [Free Webinar] Building Data Relationships Using Subforms - Creator Tech Connect

      Hello Everyone! We welcome you all to the upcoming free webinar on the Creator Tech Connect Series. The Creator Tech Connect series is a free monthly webinar that runs for around 45 minutes. It comprises technical sessions in which we delve deep into

    • Is it possible for using Zoho Creator as a public application without login?

      Hi there, I recently had a client who was looking at building a learning resource on Zoho Creator. However he had a requirement that course content that he builds may be publicly accessible. My question is that, is it possible to have public pages with

    • OpenAI Alert! Plug Sample #11 - Next-generation chatbots, Zobot + ChatGPT Assistant

      Hi Everyone! We have great news for all AI enthusiasts and ChatGPT users! The much anticipated Zobot integration with ChatGPT Assistant is now available with Plugs. Note: SalesIQ offers native integration with OpenAI, supporting several ChatGPT models,

    • COQL Query using multiple Lookup conditions causes SYNTAX_ERROR

      Hi everyone, I'm trying to build a COQL query that includes conditions on multiple lookup fields. Each condition works perfectly on its own — and also the condition on the Payment_Date field works fine. But when I try to combine two lookup conditions

    • Zoho Books | Product updates | May 2025

      Hello users, We’ve rolled out new features and enhancements to elevate your accounting experience. From configuring approval at the module level to allocating landed costs to multiple bills, these updates are designed to help you stay on top of your finances

    • Beyond Email: #1 Stay in Sync with Calendar

      Weekly Tips: Beyond Email As we approach the International day of Productivity, we are excited to bring you something extra special! Alongside our usual weekly tips, we have curated a dedicated series focused entirely on productivity apps available within

    • Zoho Booking > Enquiry Status change automatically

      Hello, We have a Zoho Booking link, we want the following to happen when it is complete: 1) it finds the person in Zoho CRM who submitted the booking and updates the Enquiry Status Column to 'Self Booked'. 2) is it possible to customise the booking form

    • Zoho Bookings and cancellations/reschedules

      Hi, I noticed that when someone books, they can reschedule/cancel; on the booking page that pops up and the option is in the upper right-hand corner. Is there a way for this option to also be available in the email that the client receives?

    • API question - adding a thread to an existing ticket

      Hi Is there an API function for the customer to add to an existing ticket thread? example, customer puts in new support ticket. support replies and ask for more details. customer replies with more details -what api function is used for this (will add record append to same ticket number?) Thanks

    • Bookings page very slow to load

      I recently switched to Zoho bookings from calendly and yesterday I switched back. Zoho Bookings page was taking 7-23 seconds to load. We were losing paid clicks from Google because they had to wait too long. Does anyone have any suggestions?

    • Presenting the brand new Zoho Bookings!

      Hello everyone, Greetings from Zoho Bookings! We're happy to announce a new version of our product with enhanced features to simplify scheduling, coupled with a sleek interface and improved privacy across teams. Here's what you can expect from the latest

    • Zoho Desk API - Influence which layout is used

      Hello, how can the ticket layout be changed using the API? I would like to choose the layout directly when creating the ticket. If this is not possible, my question would be how can I change it afterwards? Best regards, Sven

    • Zoho API Deal Creation and Pipeline

      I want to sync my zoho crm and backend with eachtoher, I can receive webhooks from crm and sync from it but when I try to sync to crm , I get this error for Deals module Zoho error: { data: [ { code: 'MANDATORY_NOT_FOUND', details: [Object], message:

    • Intermittently high CPU usage

      I get high CPU usage intermittently both using Zoho Mail on Firefox as well as on the Zoho Mail Desktop app (Mac). To me it seems like a bug because idle usage is normally quite low. Right now, for example, the desktop app uses <1% in the background which

    • Transfer to agent not working on flutter app after integration

      [media pointer="file-service://file-LF6KAwkyDJNd6MbzZmctS3"] [media pointer="file-service://file-FN66XQUngquBJGLdrS827u"] +7 -2 Lines changed: 7 additions & 2 deletions Original file line number Diff line number Diff line change @@ -1,10 +1,11 @@ import

    • Zoho Blog from Zoho Sites

      I keep receiving this error after trying to edit blog posts that were previously saved for posting at a later date: Additionally, I try to make new posts and they show this message, "Failed to save".

    • Help Center Home Tab Search Bar Description

      How do I change what it says above the search bar?

    • First Respons time questions regarding ticket SLA's, Ticket Re-Assignment, and Ticket Closure.

      I am chasing down a few outliers on tickets that my team is reporting to me seen in some of our Zoho Analytics Dashboards with regards to Zoho Desk with regards to First Response Time. Our support organization is setup with different SLA's based on three

    • Toggle Option for SQL Query Auto-Formatting

      We all write SQL queries in a style that makes them clear and easy to understand. However, I’ve noticed that Zoho Analytics sometimes reformats queries in a way that reduces readability - especially when editing existing queries written in a specific

    • payment configuration process

      payment configuration process

    • Lookups from Standard Modules to Custom Modules

      I have created an "External Contacts" Custom Module for adding Contacts who aren't directly associated with a Customer or Vendor but who are related to Orders by being a Site Contact, Job Contact, Warehouse Contact, etc for third party. How can I go about

    • Run automation on quiz completion

      Hello, We're exploring Zoho Learn as a possible solution to creating some training courses to external users on our system. We'd like to run a workflow/ integration to Zoho CRM when a course is completed. Is this possible?

    • Dynamic user applications for CPQ?

      Hi, I've been enjoying getting to know CPQ, the Product Configurator and Price Rules components have been very useful, albeit with some issues. I have noticed that I don't have the power to decide which level of sales staff has permissions when it comes

    • Need details on search criteria for zoho.crm.searchRecords

      Hi, If I understood correctly the integrated functions (getRecords, searchRecords, etc..) I can use inside Functions in Zoho CRM are actually using the Zoho CRM V2 API. I am looking for all the field types and criteria I can use with searchRecords. The

    • Do my notebooks get transferred to a new phone?

      Hello I was wondering about a new phone and I'd like to know whether your notes are automatically transferred to the new device? Regards Will.

    • Client Script Error - Cannot read properties of undefined (reading 'CRM')

      Hi Guys I have a custom form, and I have a client Script set for onLoad of the new form. Below is the script I have defined and the error: Cannot read properties of undefined (reading 'CRM') See Screen Shot Attachement for Details. Here is the Script:

    • Notebook sync

      Hi,After Restart Mobil-Phone since i pressen „Synchronisation“ in my Notebook-App (iPhone) the App is hanging all the time and I have no possibility to Break up. Also Not After Restart my mobile-Phone. After the Restart ( inkl. Connection to WiFi or mobile

    • Employee survey data when the survey creator's account is deleted

      I can’t find in the documentation on this topic, so asking here. When the employee who has created an Employee Engagement survey leaves the organisation and their Zoho account is deleted, will the survey results still be accessible to other persons if

    • DANE IS NOT implemented

      According to the answer of @Sagar S , "DANE has been implemented". on this topic Allow me to disagree, DANE is not implemented at least not to the EU area. The Zoho domain is not under DNSSEC protection and the related TLSA DNS records

    • Enhance Your CRM Experience with Zoho Webinars in Sandbox Environments

      Greetings all, Zoho Webinars will now be available for testing and deployment in Zoho CRM's sandbox environment. Sandboxes offer a safe way to replicate production environments and enable risk-free testing, training, and refining processes before making

    • Increase the elegant comparator to more than 5 users

      Hi Team Requesting to increase the elegant comparators number of custom users to more than 5, this is such a crucial tool in dashboarding but 5 users is simply not enough.

    • No emails coming in

      Hi, I am not receiving any emails, I have tried to send myself an email from another acct and I am not receiving anything, possibly for the last few days. Bit desperate as we are a nursery and not getting important emails from our parents.

    • Problem with Schedule Email parameters in "Send Reply to an Email" API

      Hello, This is my Json script: { "fromAddress": "test@gmail.com", "toAddress": "{{8.fromAddress}}", "subject": "{{8.subject}}", "content": "{{4.result}}", "action": "reply", "isSchedule": true, "scheduleType": 6, "timeZone": "Europe/Lisbon", "scheduleTime":

    • What's New? - May 2025 | Zoho Backstage

      Hi everyone, A May-zing month for you! As summer rolls in and event season picks up the pace, we’ve been working on a set of updates in Zoho Backstage to help make your day-to-day life a little easier. This month’s improvements are all about tackling

    • Integrate Zia AI into Zobot with Support for Hebrew and Bot Context

      Dear Zoho SalesIQ Team, Greetings. We would like to submit a feature request that would significantly enhance the functionality and intelligence of Zobot: native integration of Zia AI into Zobot scripts and blocks—with full support for Hebrew language

    • Mail Merge: Need Transparent Background for Signatures

      I'm using ZohoCRM and Zoho sign to send documents to customers to sign. We use zohoCRM's "Mail merge" option to create the templates. The problem is that those "Signature" fields have a solid white background so it looks like a stamp on the page instead

    • Zoho Flows

      Basically I can't build a connection that works between Excel on OneDrive and Zoho. I wanted to have 1 flow checking on a row added to an excel file and then intiate an import of that row. I'm doing that manually now and thought that this could be automated.

    • Zoho time tracking with automated screenshots

      Time tracking option with automated screen shots would be an exeptuonally good feature, any plans to develop something like that?

    • Sharing my portal URL with clients outside the project

      Hi I need help making my project public for anyone to check on my task. I'm a freelance artist and I use trello to keep track on my client's projects however I wanted to do an upgrade. Went on here and so far I'm loving it. However, I'm having an issue sharing my url to those to see progress. They said they needed an account to access my project. How do I fix this? Without them needing an account.

    • Next Page