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

    • Estimated Time for releasing in Australia?

      wondering if theres any timelines for when this feature might be availible to use in Australia?? would be very helpful sooner rather than later! Thank you :)

    • Zoho Books | Product Updates | April 2025

      Hello partners, We’ve rolled out new features and enhancements to elevate your accounting experience. From FEC report to BillPay Add-on, these updates are designed to help you stay on top of your finances with ease. Export Transactions in Factur-X Format

    • Please cancel my trial / subscription

      I’m doing a free trial of the Enterprise version. I’m trying to cancel it and make sure I won’t be charged a subscription. I can’t follow your help pages for this because I don’t get a sidebar with the details. I’ve wasted a lot of time trying to do this.

    • 日付別メール送信リストの作成

      日々顧客に個別にメールを送信しています 日付別に送信先リストを作成することは可能でしょうか？

    • 【Zoho CRM】キオスク機能のアップデート

      ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 今回は「Zoho CRM アップデート情報」の中から、キオスク機能のアップデートについて、 一部を抜粋してご紹介します。 キオスク機能とは？ 特定の処理を行うための専用画面（キオスク）をノーコードで作成できる機能です。 自社の業務プロセスにあわせた画面の表示、タブをまたいだ処理などが可能です。 本アップデートにより、キオスクの柔軟性と操作性が大きく向上しました。 詳細について以下より確認しましょう。 ＜目次＞ データ取得機能：「データ選択不要」のデータ表示

    • Zoho CRM IP Addresses to Whitelist

      We were told to whitelist IP addresses from Zoho CRM.  (CRM, not Zoho Mail.) What is the current list of IP Addresses to whitelist for outbound mail? Is there a website where these IP addresses are published and updated?  Everything I could find is over

    • Ability to Add Custom Favicon to Zoho Desk Survey Window

      Dear Zoho Desk Team, Greetings! We would like to request the addition of a feature that allows users to add a favicon displayed in the Zoho Desk Survey window. Currently, there is no option to set a favicon. Customizing the favicon would allow businesses

    • Campaigns Place-holder $ tags

      Hi there I’ve just started using Campaigns and I’ve been making use of the placeholder inserts available when constructing the email. However, in my contacts in CRM rather than have a first name and last name field I put their full name into the last

    • Setting Up Automated Lead Nurturing Campaign in Zoho CRM

      I want to create an automated lead nurturing campaign within Zoho CRM and Zoho Campaigns with the following requirements: Leads should receive a sequence of 5 emails, spaced 3 days apart. If a lead clicks a link in any email: A notification should be

    • Books Not Matching Transactions from Feed - "The total amount does not match with that of the transaction"

      Recently, transactions that are transfers from a foreign currency (FCY) account to a base currency (BCY) account are not allowing for matches with transactions from the bank feed. Please see the screenshots below: As one can see, the amount is in the

    • Inline and background image with from scratch contract type

      When using the "Create From Scratch" option to build a new contract type is it possible to add inline images as well as a background image? We want our company logo on the cover page as well as each page header and also have a background image that we

    • Is it possible to display a graph of data within a contact record

      I’ve had someone create deluge code to import data from another SaaS platform into Zoho CRM for my swimming pool company. This data is stored within each customer’s contact record under a custom module called "Chemicals" and is updated weekly with new

    • Adding the date of an expense to an invoice

      Hi there, I have uploaded a whole load of expenses. I have prepared an invoice, and want to add the expenses. However I need to show the date which the expenses were incurred - how can I do this in the template? Thanks Michael

    • How to Link WooCommerce Orders to Contacts in Zoho CRM for Better Customer Segmentation?

      I’m running a fashion e-commerce website using WordPress. My sales staff usually rely on customers’ past orders to segment and re-approach them for sales. However, I’m not sure how to apply Zoho CRM for this purpose, since I can’t link the orders from

    • [WEBINAR] - Importing PDF bank statements into Zoho Books [ Indian and GCC editions ]

      Hey everyone! Manually entering the bank statements into your accounting software for reconciliation purpose is a tedious and error-prone task that can compromise the accuracy of your accounts. The banking module in Zoho Books helps you solve this problem

    • Download a file from within a zoho creator widget

      I have a widget running in Zoho Creator , it displays uploaded documents in a table file, and I have added a download link in the view. ( The widget is created with html, css and javascript). I do not succeed in getting the download working. Do I have

    • Let’s Talk: What’s a Good Engagement Rate in 2025?

      What engagement rates are you seeing as healthy for Instagram, Facebook, & LinkedIn (higher education focused?) My top posts on the university alumni pages I manage typically see a 4-9 % engagement rate. What is industry average? Is this measured by the

    • Mandatory DEFAULT for Billable and markup percentage

      Hello. So we have been using books and process bills from vendors that are to be invoiced to customers. When we convert from a PO to a bill we can enter the customer name on the line items and that is great. However, we would like to know if the default

    • why is zoho assist server so slow

      Hello why is zoho assist server so slow, i use it every and and have fast speed at either end of the connection but zoho assist take upto 10 seconds per click, I connect on the chat they we will have a look and come back saying they have done a reset

    • Can no longer upload my own Notebook cover

      I've had Notebook for over a year and have been able to create my own notebook covers, but when I tried to upload my own cover for a new notebook today, the upload feature has suddenly been starred, requiring me to upgrade my account. When did this

    • Nested notebooks

      Dear Sir/Madam, I would like to know if it is possible to nest notebooks. It would be very helpful when there are too many, as it would improve organization. Thank you for your response. Best regards.

    • Third Insight - The Importance of Data Segregation

      The Wheels of Ticketing - Desk Stories The Importance of Data Segregation Data segregation In ticketing systems, data segregation organises data into logical groups or categories to reduce ticket backlogs and resolution time and improve the overall customer

    • Inquiry Regarding Adding labels to Quick View Cards in Report

      Dear Zoho Support Team, I have created a report and designed it's Quick View and formatted the records as cards. However, I would like to include the field labels alongside the values for better clarity, as users may find it challenging to interpret the

    • Facing Issues? No typing—just record and share

      We get it—reporting a technical issue isn’t always easy. Explaining what went wrong over text can be time-consuming, and screenshots often miss the full context. That’s exactly why we want to spotlight a tool that’s been quietly waiting in your Zoho Recruit

    • Creation of Path and subpath

      In order to improve the structure of the website for better organization, I would like to consider that when publishing a page, it can be within a section and sub-section. For example, if I have an events option in the menu, I can put past events and

    • onDuty Request approval from API

      use case We have custom CRM modules and meeting devices where a user can add meeting details We are pushing these details to People using onDuty Request API Now what we want is If the onDuty request is pushed using API, it should be auto approved i-e

    • Move a mail to another inbox without being parto of it.

      I would like to move an email from my inbox to another team's inbox in, without being a member of that other team. The goal is to assign the customer's request to the colleagues who manage that inbox, so they can take over and handle it.

    • Zoho CRM CPQ NOT in criteria patern

      Hi, It would be great to have the logic-block of "NOT" in the criteria patern. Currently, only "AND" and "OR" are valid criteria when using the product configurator. Often, a "NOT" logic-block would greatly increase the usability of the CPQ. Example:

    • Filter by Portal User Reports no longer work

      I've had multiple reports that filter the data that shows based on the portal user - thisapp.portal.loginUserName(). They have worked fine for years but a few months ago they stopped working. Currently, no records appear in the report. Also, this is the

    • Quickly migrate attachments to Zoho CRM without having to restart the process multiple times

      Hello everyone, Customers often want to transfer all their data and attachments to Zoho CRM when they're switching CRMs (or moving from one Zoho CRM org to another). Admins use the built-in import tool to perform these migrations. There's a common source

    • Numeric Field Issue

      Hi We are trying to import deals but hitting a roadblock every time. If I create a single line field, the data imports fine for this field (it's a currency field in csv). I have found I can't sum this field though when trying to do a revenue report. When

    • Transfering Creator data to Books

      Hello, I am working on a new app that will have suppliers, products, customers, order, etc. When I will be finished, I will want the end result (an order of goods) to be transfered to Books for invoicing and accounting. I will also use the supplier order

    • Your Incoming has been blocked and the emails will not be fetched in your Zoho account and POP Accounts

      Can some on help me regarding our account . thank you so much

    • Custom code ass to header and footer code doesn't appear

      I am trying to insert custom code into both the header and footer of my Zoho site. I edit the site "general settings" as demonstrated in the various articles, click save, but the code does not appear on my site. Is there something special I need to do

    • Geo-Powered Retail Intelligence with Zoho Analytics

      In today’s highly competitive retail landscape, data-driven decisions are no longer optional — they’re essential. While businesses collect vast volumes of data across regions, stores, and customer segments, the real value lies in how effectively this

    • In the Pivot table in the value section i want to the actual value instead of sum or count

      I am creating Early/late Check and check out in pivot report based on Zoho analytics I need the data to include: Employee Name Late Entry, Early Entry, Early Exit, Late Exit, First In, Last Out, and Total Hours.

    • Outgoing blocked again.

      Hi Dear, My outgoing mails are blocked again. I am just using it as normal business emails going in and out. Could you please help fix the problem? I am happy to support where I can do to make it work properly. Thank you very much. Aurora

    • Tip of the Week #54 – Automatically assign emails to your team members.

      Managing incoming emails can feel exhausting at times. But what if you could ensure that every email reaches the right team member — without lifting a finger? That’s where automatic email assignment comes in! With Zoho TeamInbox, you can easily set up

    • Keep your forms spam-free with CAPTCHA

      Is your online form getting loads of unwanted responses? Tired of spam ruining your valuable form data? CAPTCHA is the solution you are looking for. CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is a simple yet effective

    • how to get the first word in string using deluge?

      let say I have string "David Beckham". how to get just "David" using deluge? I need to get the first word in string using deluge?

    • Next Page