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 does BadgeUp Work?

      When creating the badges, where do you all get those printed? especially if you use the plastic type badges. Does Zoho send the files out or do some kind of integration with a 3rd party badge printer? I'm on a ZohoOne subscription and didn't want to use my one license for a test event to see how this worked. Thanks for any insight Randall

    • Custom Script for Validation Rules

      In the Validation Rules I would like to have custom functions, we can do that in Zoho CRM and its really useful There are some custom fields in Sales Orders and Purchase Order Modules We are using Zoho Books With our internal apps, and we need to put

    • Invoicing from Saudi Arabia to other countries

      Team, i would like to know if i can invoice the partner in Tunisia as i am not able to push the invoice without Arabic name and National address to the Fatoora Portal which is a mandate

    • I want to change a User's role in zoho but it is giving me an error.

      Hi, I want to change a User's role in zoho but it is giving me an error - You cannot change the role of this user as the user's credentials are being used for the integration with Zoho CRM. Assign the super admin role to another user in Zoho CRM, click

    • upload attachment to Zoho books bill from Zoho CRM

      Hello I have a document stored in a file field in CRM (module reservation) I am trying to attach this document to the bill created in Zbooks using Deluge, but I keep having issue, either File is empty or {"code":2,"message":"The request passed is not

    • Zero in the Invoice Amount Text field is adding onto the figures entered.

      Hi Zoho, This is very small & minute error, but it gets the users irritated. While entering values in amount column of the Invoice the zero which was earlier present there by default will still add on to the figures entered, for suppose if we want to

    • The buying of forign currency

      Hello We had buying USD for AED. Those were bank transfers from a first bank account to a second with bank's exchange rates. We have chosen for those transactions category "The buying of forign currency" and putted bank's exchange rate. Is it correct

    • الخصم على مستوى فاتورة المبيعات

      السلام عليكم ورحمة الله وبركاته مطلوب في إنشاء خصم على مستوى فاتورة المبيعات وليس على مستوى البند أريد معرفة الطريقة؟

    • Having problems invoking Workdrive API via ClientScript

      I'm having problems creating a folder in Workdrive. The connection is invoked successfully, but I get the following return message: {"_keyModified":{},"_status":"error","_code":"SUCCESS","_message":"Invoke action failed","_details":{"statusMessage":"Invalid

    • Give Permission for User test in Development/Staging modes

      Hi Everyone, I am using Zoho Creator C6. Where there are development and staging modes. Is it possible to give special / temporary permission for users to test directly in development and staging? Or do you have any other ideas? Thank you very much.

    • Automation #7 - Auto-update Email Content to a Ticket

      This is a monthly series where we pick some common use cases that have been either discussed or most asked about in our community and explain how they can be achieved using one of the automation capabilities in Zoho Desk. Email is one of the most commonly

    • Add Date_of_Last_Purchase custom Function

      I am looking for a way to create a simple custom function that will execute when a new sales order is created. The function will set a custom field on the customer called "Date_Last_Purchase" to the current date. So as ever new sales order comes in for

    • Print a price list or price book

      Hi Community. Am I right in concluding that Zoho has no functionality to print a price list from either Zoho CRM, Zoho Inventory or Zoho Books? I won't get stuck on the fact that Zoho doesn't sync price books between Zoho CRM and Books/Inventory (more

    • Failed job notifications

      Is there are way to receive an alert when a job has failed? If not this would be a useful feature.

    • Option to separate First Name and Last Name into separate columns in entry reports

      It would be great if there was a way to show First Name and Last Name as separate columns in Zoho Forms entry reports. At the moment First Name and last name are combined together in reports and this means I need to create a formula in Excel/Sheet to

    • default reply email

      In the zoho mail application you can make another email your default email address.  So when you compose a new email it defaults to the email address you have set.  However this functionality does not work when you reply to an email.  you can select the email from a drop down, but I wanted to know if their is a way to set the reply email button as a different default email, just like the compose functionality.  An example:  I write an email from my zoho email account to a client witch show the sender

    • Import CRM Vendor Module for Mail Merge

      Hello, It seems I cannot import the vendor module field for a merge document? Is there a way to turn this on?  I have the ability to import my custom module fields, but not standard built-in CRM modules like Vendors.  Am I missing something? Thank you very much for your assistance!

    • Error in SalesIQ Chatbot: "Add Ticket" Card Fails with "Error" Route

      Hello Zoho Community, I'm encountering an issue with my Zoho SalesIQ chatbot. Previously, when the conversation flow reached the "Add Ticket" card, it successfully created a ticket in Zoho Desk. However, recently, upon reaching this card, the flow follows

    • Merging 2 tickets

      Hi I understand how to merge 2 tickets already but find the process quite cumbersome. It is not always simple to perform a search that causes the 2 tickets in question to show up on the Ticket Screen, and this is the only place a merge can be performed. Doing a search for the customer or contact linked to the ticket displays all of their tickets which could be hundreds to sort through, you could do a custom search that only shows open tickets but doing that every time is also time consuming. Not

    • Can’t Send Outgoing Mail

      Hello, one of the email addresses on my account had its outgoing mail privileges blocked. This was due to some bot signups on my website, causing my email to send a bunch of undeliverable emails. I have corrected this issue on my website. Please restore

    • Efficient way to get a list of records like Notes under Leads that changed in last N minutes

      Hi, I am writing a process to consume the Zoho Leads and put it in an internal system. For Leads, Accounts and Contacts, the getRepords with lastModifiedTime works great as I can call the API to get only the updated records say in last 30 minutes. However

    • IMAP Connection Issue – "Disconnect called before connection setup" (Zoho + Freshdesk Integration)

      Hello, Since April 25, 2025, we are facing a critical issue with our Zoho Mail integration with Freshdesk. Incoming emails are no longer being received in Freshdesk. Freshdesk Support has confirmed that their system is trying to connect to our Zoho mailbox,

    • Cannnot find criteria tab

      We need to be able to segment contacts based on an account view or field. The online help shows a screen with three options: Under Sync Details there is All Contacts; Custom view; Criteria.  The latter is missing from my screen.  I need it. I also want to know if I delete contacts from campaigns, will they still remain in CRM? 

    • Dial Charts in Analytics using field values for colored ranges

      Hey all! It would be supremely helpful if we could use field values for ranges in Analytics for dial charts. We currently display an analytics report to our sales team showing how close they are to reaching the next tier for commission payouts. We update

    • South Africa Tax Edition is now Available!

      Managing taxes just got easier for field service businesses in South Africa! With Zoho FSM's new South Africa tax edition, field service businesses operating in South Africa can now effortlessly stay compliant with local tax regulations. Easily manage

    • Bulk user onboarding for Cliq Channels in a jiffy

      As developers, we frequently switch between coding, debugging, and optimizing tasks. The last thing we want is to be burdened by manual user management. Adding users one by one to a channel is tedious and prone to errors, taking up more time than we could

    • Weekly Tips: Secure your attachment downloads with Zoho Mail

      Safety is one of our main concerns, whether it’s about device security or online protection. We use tools like fingerprint scanners, facial recognition, and two-factor authentication to keep our devices and email accounts secure. We use methods like OTP

    • Issues with Dashboard Filter and KPI in Zoho Analytics (CAGR)

      Hi everyone, I'm trying to build a CAGR (Compound Annual Growth Rate) KPI in Zoho Analytics, but I'm running into some issues with filter synchronization. Here's the scenario: I created two test reports: One that filters results from 2021 to 2025. Another

    • Adding Product Photos through Import or In Bulk

      I am about to add about 1000 products in the CRM. I am shocked that there is no way to add product photos through the Import feature. I'll be spending days adding product photos.... Very dissapointing. Anyone know of a work around to add product photos

    • Announcing Multi-language Support in Zoho FSM

      Zoho FSM now speaks your language. The much-awaited multi-language support is now available in Zoho FSM. The following languages are supported in Zoho FSM: Dutch (Nederlands) English - United Kingdom English - United States French (français) French -

    • Quiz of the Day on Dashboard

      Hi team, Is it possible to enter a feature for enabling a widget as a quiz for the day. This widget can have one question popping up daily from the list of some pre-fed questions and the employees need to either type a response or can select from a multiple-choice

    • Canvas Button Vanished

      I have a button that has mysteriously vanished. It shows in the canvas builder but then is no where to be found in the actual record and before you ask, yes I have tried to access through incognito mode and same issue.

    • Multiple Tabs in the Dashboard

      Hi team, Can we enable an option to add multiple tabs in a dashboard? This will help to group the content to be displayed to employees and make it more usable and user-friendly intranet space.

    • Function #6: Calculate Commissions for paid invoices

      Zoho Books helps you automate the process of calculating and recording commissions paid to sales persons using custom functions. We've written a script that computes the commission amount based on the percentage of commission you enter and creates an

    • IMAP as a source option in Dashboards

      Hi Team Can I request IMAP be added as a source option for running a report or creating a KPI in dashboards. I have selected all options and my IMAP linked emails are not showing, I can only check these by going to emails in a contact. Thankyou Josh

    • Canvas responsive preview in different browser window causes re-authentication/verification

      I'm trying to design a view in Canvas. I am testing in a tab with a desktop view, and another tab (on my same desktop/IP) with a responsive view of an iphone. Every time I refresh, it boots me out of the previously used tab. If I forget to refresh the

    • Can I add external account to Zoho PageSense?

      Hello, I would like to ask you about adding external users to projects in Zoho Pagesense. I can add only users from my organization. Is any solution for adding as we have in The Zoho Projects clients accounts?

    • Import subform entries conveniently in CRM

      Dear All,   Subforms have always been crucial for associating additional data with CRM records. You can easily associate line items with parent records and keep track of various details related to your records. We're pleased to announce that we've introduced

    • Cómo convencer a tu manager para venir a Zoholics 2025

      ¿No estás seguro de si a tu manager le convence que asistas a Zoholics 2025? ¡No te preocupes! Aquí te damos algunos argumentos clave que te ayudarán a convencer a tu manager de que participar en este evento es una inversión tanto para ti como para la

    • HTML Email in Zoho Books

      Is it possible to create custom html email template in zoho books. 

    • Next Page