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

    • Peppol integration zoho invoicefu

      Hi, Belgium will require Peppol invoicing as of 2026. I found that this is being prepared for Zoho books, to be released in Sep 2025. Will Zoho Invoice get this functionality too? I like the Invoice app for my part-time side business as bike mechanic

    • Error in formula

      Can someone PLEASE tell me what is wrong with this formula? Formula return type, I have tried string and decimal fn.Year(fn.Now())-fn.Year(${cf_purchase_date}) I keep getting the following error. Incorrect argument type passed for function Year Thanks

    • Sync “Display Author Info” Setting from Zoho Desk to Zoho SalesIQ

      Dear Zoho SalesIQ Team, We’d like to suggest a refinement to how Zoho SalesIQ displays knowledge base articles that are synced from Zoho Desk. Current Behavior Zoho Desk allows us to control whether author information (name, profile picture, etc.) is

    • Respect Help Center Visibility Settings for Knowledge Base Sync Between Zoho

      Dear Zoho SalesIQ Team, We’d like to suggest an important improvement to the integration between Zoho Desk and Zoho SalesIQ with regard to the knowledge base synchronization. Current Behavior SalesIQ offers excellent functionality by allowing us to sync

    • Enhancing Answer Bot's Capabilities

      Wouldn't it be amazing if the answer bot could directly search for answers in our database, FAQs, articles, etc., without needing to display the entire article? without relying on external tools like ChatGPT This way, it could provide concise and relevant

    • Centralize and Streamline Zobot and Flow Control Settings in Zoho SalesIQ

      Dear Zoho SalesIQ Team, We would like to suggest a crucial improvement to the current setup and configuration experience within SalesIQ. Problem Statement Zoho SalesIQ currently offers three primary mechanisms for handling customer chats: Answer Bot –

    • Client Portal ZOHO ONE

      Dear Zoho one is fantastic option for companies but it seems to me that it is still an aggregation of aps let me explain I have zoho books with client portal so client access their invoice then I have zoho project with client portal so they can access their project but not their invoice without another URL another LOGIN Are you planning in creating a beautiful UI portal for client so we can control access to client in one location to multiple aps at least unify project and invoice aps that would

    • Show Attachments in the customer portal

      Hi, is it possible to show the Attachments list in the portal for the particular module? Bests.

    • Custom Formula

      Good day, I am trying to create a formula field in Zoho Desk to calculate an age, but I'm having trouble figuring out how to make the formula. This is a formula I found, but it keeps telling me the wrong field name. Can someone please help me? Field name:

    • Click to edit fields with Canvas layout

      Hi, I have integrated new layouts using Canvas and its been going well so far. Although I cant seem to figure out how to change the fields so you can click anywhere on it to select or edit the field. Now a small pencil will appear next to the field you

    • Show Custom CSS Changes in SalesIQ Preview

      Hello Zoho SalesIQ Team, We truly appreciate the ability to customize the chat window using custom CSS via: Settings > Brands > [Select Brand] > Personalization > Appearance > Upload Custom CSS. This flexibility is extremely helpful in aligning the chat

    • Light Agents for External Users

      We are currently on the Zoho One version of desk and cannot create any light agents. We would like to create light agents for external users in order for them to see their tickets and approve changes.

    • Inquiry Regarding Accessing Multi-Select Field in Pivot Chart

      I'm currently working on a project and would appreciate guidance on accessing and utilizing a multi-select field within a pivot chart in Zoho Creator. Could you provide instructions or resources to help me implement this feature efficiently? Your assistance

    • What should I be using Salesinbox or Zoho Mail

      Hi everyone, I again find myself a little confused by the Zoho offering.  I am a long time Zoho CRM and Zoho mail user. About a year and a half ago, Zoho mail had a major update and things like streams were added. We have learned to use the new features, although I am sure not to their fullest.  Now while getting help with an issue that I had with emails associated with Contacts in CRM, I now have just discovered that I have Salesinbox. OK, so it looks pretty cool, but now I find myself again in

    • {"error":"invalid_client"}

      Im sending POST query to https://accounts.zoho.com/oauth/v2/token like this described in https://www.zoho.com/crm/help/api/v2/#generate-access article, but got error {"error":"invalid_client"}. Im first thinking that this my mistake, but after this I

    • Digest Mai - Un résumé de ce qui s'est passé le mois dernier sur Community

      Chers utilisateurs, Encore un mois vient de filer à toute vitesse chez Zoho Community France ! Jetons un œil à ce qu’il s’est passé. Vos données non structurées méritent mieux qu’un simple stockage. Avec WorkDrive 5.0, Zoho vous propose une solution intelligente,

    • Looking to Hire: Zoho Creator Developer for Vendor Dashboard Portal

      We are a Florida-based licensed liquor distributor using Zoho Books, Inventory, CRM, and Analytics. Many of our vendors are also our customers. We’re looking to build a centralized, secure Vendor Dashboard Portal in Zoho Creator that gives access to real-time

    • Create your own convert feature in Zoho CRM | Kiosk Studio Session #7

      In a nutshell: Want to replicate the leads-to-contacts conversion flow for your custom modules? Use Kiosk Studio to build a convert feature in less than one day—with zero code—that enables the following: Conditional approvals Dynamic module mapping Automatic

    • Split View for Zoho CRM : Break down Your Module Data for Smarter Selling

      Hello Everyone, We’re excited to unveil Split View, a powerful new way to explore and interact with your data in CRM For Everyone. In addition to the recent new module views --- Chart View, Timeline View & Grid View, we've added Split View as well to

    • Some website items no longer centered.

      At some point (probably after some Zoho Sites updates) my items on the website stopped being centered. I just noticed it now so unsure when that change happened: Strange as it is - I entered the editor and I can not find the option to move them back in

    • Swipe, Snap, and Submit Instantly with Zoho Expense's Real-time Feeds

      It's time your employees enjoy the smoothest expense reporting experience ever. It's time to switch to Real-time Feeds by Zoho Expense. Upgrade your Zoho Expense experience with real-time corporate card management for the fastest, easiest, and most accurate

    • how to set the recency in segmentation rules in the last X days?

      I just change the segmentation rules recency to be like this: I want score 5 if the deal won time is in the last 30 days I want score 4 if the deal won time is in the last 60 days I want score 3 if the deal won time is in the last 90 days I want score

    • Issue with Schedule Workflows – "Usage Limit Crossed" Error

      Hi Zoho Support, We are currently facing an issue with the scheduled workflows in our Zoho Creator application. We are receiving the following error: "Usage limit crossed" for schedules. However, when we checked the usage statistics for our Creator app,

    • Card Scanner app creating duplicate Accounts

      Hi all, I recently added Card Scanner app by ZOHO on my phone. I scanned several business cards, and realized that there were some newly added Accounts. Let's say there is an Account named ABC (US) CO., LTD in our system already. The app scanned the business

    • How do I create a time field?

      I want a field that only records time. I can only see how to create a date-time field. If I do that and enter a time, without a date, nothing is recorded. If I create a number or decimal field, I cannot use it in time calculations. All I want is a field

    • Introducing Image Upload Field

      Hello everyone, In this post we will discuss about the benefits and usage of the Image upload field. The field is available for standard and custom modules.  Usage: This field can be used to upload a gallery of images to a record and share the record with peers or customers. The record can be made accessible to users outside of Zoho CRM via Portals, where they can upload the necessary images. Preview, editing, and deleting images: The uploaded images can be directly edited and saved from the record

    • Zoho Forms CRM Field Mapping

      Using the Zoho CRM Field in Zoho Forms, there is no direct integration between the Zoho Forms Time field, and Zoho CRM. We use this single field in most of our client-side forms to collect information. Initially reading this request, you might think that

    • How to Improve the Speed of the Website Zoho Commerce

      Is there another way to improve the speed of the website in Zoho Commerce that was created?

    • Free Webinar - Fundamentals of Zoho Sign: Overview and latest updates for new users and evaluators.

      Hello there! Want to get the most out of your favorite digital signature provider? Did you miss our last session on Zoho Sign features but eager to learn more? We have just the thing for you! Join us for the second edition of our free monthly webinar:

    • 【Desk ナレッジベース】　記事自体のフッターのカスタマイズについて

      お世話になります。 サービスのヘルプセンター構築のために、Deskとナレッジベースを使い始めていますが、 構築にあたり以下の質問があります。 ・質問 記事自体のフッターにある「評価」と「共有リンク」（添付ファイル参照）を非表示にしたいのですが、 これを非表示にするのはどうしたらよいでしょうか。 ヘルプセンター自体ののヘッダー、フッターはカスタムできるのですが、 記事そのもののフッターはカスタムできるところが見つかっていません。 もしご存知の方がいらっしゃいましたら、教えて下さい。

    • Timeline View in CRM - a linear way to visualize records over time

      Hello all, We would like to introduce the next phase in our quest to deliver a seamless user experience as part of the CRM for Everyone: the Timeline View. It allows you to visualize your records plotted across a given timeline. You can view the records

    • SalesIQ not loading on mobile

      We have installed the snipped through Google Tag Manager and it's working as it should on PC but the widget is not loading on mobile. Is there something we're doing wrong from our side? Edit: Widget seems to be loading just fine on Android and the problem

    • Is there a way to disable the Activity Reminders Pop-Up Window every time I log in?

      Just wondering if there is a setting to disable the window from opening every time I open my CRM? Thanks Chris

    • Unable to make calls at the moment.

      One of our employees has been getting this message all day when trying to make an outgoing call. We use the zoho phone bridge, and all other employee calling works as intended. 

    • Importing multiple Zoho backstage events at once

      Currently it seems it's only possible to import data from one Zoho backstage event into Zoho Analytics using. This means that if you have 10 events, you have to import them all separately into Zoho backstage. What I would like is to import all events

    • How can an employee edit their tax withoholdings / w4

      I have an employee who has already been onboarded and wants to adjust his tax withholdings / W4. I would prefer that employees have access to make this change themselves without relying on an admin. How can they do this?

    • 【Zoho CRM】 「自動メール送信」機能廃止のお知らせ

      ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 今回は「Zoho CRM アップデート情報」の中から、自動メール送信機能廃止についてお知らせします。 Zoho CRMの「自動メール送信」機能は2025年9月30日をもって利用できなくなります。 自動メール送信機能でフォローアップを自動化している場合は2025年6月30日までに 「ケイデンス」に移行することを強くお勧めします。 本記事で言及している「自動メール送信」機能は、こちらの機能を指しております。 ワークフロールールで設定している通知メール送信処理やカスタム関数で設定しているメール送信機能とは異なります。

    • Quick timeline for each field

      Hi, The timeline feature is great, and so is its API. However, both aren't suitable for day-to-day quick fetch of a specific field timeline/history. A very good example of a similar feature can be found with the "show edit history" in Google Sheets. Ideally,

    • 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

    • Next Page