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

    • ZohoCRM上での接触回数の集計や評価について

      当方toB営業を行う会社なのですが、 顧客ごとの接触手段と接触回数を蓄積してKPIや評価指標としてレポーティングしたいのですが、どのタブでどのような運用をするのが適切でしょうか。 商談タブ、取引先タブ、連絡先タブそれぞれにおいて運用方法を考えましたがイメージが湧かず、ご教授いただければ幸いです。

    • 【Zoho Backstage】2025年4月のアップデート紹介

      本投稿は、本社のZoho Desk コミュニティに投稿された以下の記事を翻訳し、一部抜粋したものです。 What's New - April 2025 | Zoho Backstage ユーザーの皆さま、こんにちは。コミュニティチームの中野です。 本投稿では、Zoho Backstage の直近のアップデートを4点抜粋して、ご紹介します。 目次 1.参加者リストのエクスポート 2.予約メールに添付ファイルを追加 3.セッションの詳細を登壇者のメールに追加 4.登録フォームへの日時（Time）項目追加

    • Record template - How to format a table

      HI, I have a table in my form. I want to extract that in to my record template as a comma separated list - anyone else tried this? e.g. My Form... row1 value1 row 2 value2 " " My Template: my rows contain: val ue1, value2

    • Allow reconciliation for bank acct with no transactions for month

      Is there a way to allow a bank reconciliation to take place when there are no transactions for the month? I am unable to create a reconciliation for the month because there are no transactions to select. I want to be able to attach the bank statement

    • Direct Integration Between Zoho Cliq Meetings and Google Calendar

      Dear Zoho Team, We’d like to submit the following feature request based on our current use case and the challenges we’re facing: 🎯 Feature Request: Enable meetings scheduled in Zoho Cliq to be automatically added to the host's Google Calendar, not just

    • error while adding a domain

      I am adding a domain to admin console but they're showing this kind of error! pls help me with this.

    • Multiple barcodes and sku aliases

      Hi, It would be great if you could add the following features: Allocating multiple barcodes to a product as sometimes different barcodes are in circulation in a particular market. As well as different barcodes, sometimes, different SKUs are used by different

    • Video Interview features

      I tested the video interview feature. It's supported only on desktop version of chrome/firefox. Most of the times, the candidates are available on their cellphone. Need to have this for mobile devices too.

    • Different Domain Name Sync AD Password to Zoho Mail

      Hello, may I ask if how to configure or is possible to sync AD password to Zoho mail? Example AD domain name is xaxis.net and zoho mail domain name is yaxis.net.

    • Announcing New Features in Trident for macOS (v.1.19.0)

      Hello everyone! Trident for macOS is here with interesting features and enhancements to elevate your workplace communication. Let's take a quick look at them. View and manage .pst files. A .pst (Personal Storage Table) file is an Outlook Data Storage

    • Creating Email template that attaches file uploaded in specific field.

      If there's a way to do this using Zoho CRM's built-in features, then this has eluded me! I'm looking to create a workflow that automatically sends an email upon execution, and that email includes an attachment uploaded in a specific field. Email templates

    • User manual as PDF

      Hi, on the User Manual pages (for CRM, Support and other Zoho Apps) is a print button, but mostly the pages contain only links to other pages. So, printing the manual is of no use. Is there any PDF version of the FULL manual? Or any other source where

    • Custom Field for Subscription

      Hi, I can't find a way to add a custom field (to contain a license key generated from our software) against a subscription? Is the only place to add this information in the Invoice module (as custom field for invoice)? When a customer views his subscription via the customer portal, there appears no way to display a license key for them? The invoice is not the natural place to store a license key for a particular subscription, so where else can this be stored and displayed?

    • Disable fields in multiple subform rows

      Hello everybody! I have an odd one here. I have a subform that collects hours of operation. It contains these fields: Days, Type, Open, and Closed. On load of the form I add 7 rows with Mon - Sun in the Days field. I then disable that field and the add/delete

    • Deal Product reference

      Hello All, I'm trying to use Zoho Writer to dynamically create a statement of work document. Our statement of work is heavily dependent on what products are included in the deal. As such, I need to be able to add or remove sections of text depending on

    • How to record the Customer Payment received against previous year invoice

      Hi . How to adjust the receipt of this payment in customer account statement received for previous year invoices, which are not there in the statement with us. Because it is showing as prepaid expenses or unearned revenue Advise Thanks radha

    • Discripency in inventory adjustment value and FIFO cost lot tracking report report

      In zohobooks, I have added 200 bag of itemA with unit rate is Rs.1408 as opening stock on Apr01/2025, after that i make a inventory adjustment for 100 bag that I transfer to stock in process account, after that I make a purchase bill for the same item

    • How do I add todays date to merge field

      I don't see any selection of todays date when creating a letter.  Surely the date option of printing is standard? John

    • Zoho FSM API to search Zoho FSM Assets by Asset_Number?

      How can I search or otherwise retrieve an Asset from the Assets module in Zoho FSM using the Asset_Number? The API docs seem to say that the only field that can be searched is the Asset Name. Is this true? https://www.zoho.com/fsm/developer/help/api/search-records.html

    • Sync Creator form submissions to WorkDrive folder

      I've made 10 Creator applications, and need to sync my each application's submissions into a WorkDrive folder. I need the form submissions to be PDF file type and sync to a specific folder for documentation purposes. I have tried to use a workflow, but

    • Add Voting Polls Feature Similar to WhatsApp to Zoho Cliq

      Hi Zoho Cliq Team, Hope you're doing well. We are using the Voting Polls feature in WhatsApp (see: WhatsApp Voting Polls FAQ), and we believe a similar functionality would be extremely valuable in Zoho Cliq. Currently, when our teams want to quickly gather

    • ZML Snippet: Auto Refresh Section

      Is there a way that I can set an auto refresh on each of the ZML snippet only and not the entire page? Just wondering..

    • Availability of the Custom Sort Order feature for Windows and Mac platforms??

      Notebook Team, I hope this message finds you well. I am reaching out to inquire about the current status and planned updates for the Custom sort order feature within your application. A year ago, it was mentioned that this feature is supported on iOS,

    • Have you checked your Email headers for DKIM Failure?

      Have you taken a look at your email headers for DKIM failures even with DKIM set up properly? I've had DKIM successfully set up for many months. My account currently shows Email Verified and Authenticated. Big green check marks. Email Relay is also showing

    • Wizard Form

      I would like the option to create a wizard that works when you create a record and contacts that are already in the CRM captured with a web 2 lead form (field data inserted in to the wizard).  Having the option to create up to 3/4 segments per screen

    • Pivot Table - Zoho Analytics

      I'm creating a Profit and Loss chart in Zoho Analytics using the Pivot Chart feature. While Net Profit can be calculated using the total value, I also need to calculate and display the Gross Profit/Loss directly within the chart. To do this, I need to

    • Fetch function not working for CRM Contacts

      I've created a flow that checks if a contact exists in CRM (based on form input), and if it does, then it updates one of the fields for the contact. In my test, the fetch function correctly identifies that a contact exists (based on email address), but

    • Clone a project

      To whom it may concern, I did a quick search of the forum and found nothing relating to this idea, so am posting fresh. The service that our company provides means that we follow an essentially identical process for each new job, and this includes the time frames for each stage. Ideally we would have a complete "template" project, with all the task lists and tasks in place with associated start dates, due dates (and by extension, duration) and - most importantly - the dependencies between tasks so

    • Add Sequential Processing Option in Zoho Flow

      Hi Zoho Team, I hope you're doing well. We would like to request a new feature for Zoho Flow: the ability to configure a flow to run in Sequential Processing mode — meaning, each instance of the flow waits until the previous execution is fully completed

    • Zoho Sign URL cannot be embedded in an iframe on the React side.

      The Zoho Sign URL cannot be embedded inside an iframe within a React application (or any web application) because Zoho enforces a Content Security Policy (CSP) that explicitly prevents iframe embedding from external origins. When attempting to load the

    • Zoho CRM Developer Series - Queries

      Hey everyone! We’re excited to invite you to our next Zoho CRM Developer Series focused on Zoho CRM Queries, happening on June 5, 2025 and June 26, 2025. Whether you're working on CRM customizations, integrating with third-party services, or just curious

    • Can Clients have Access to their record Attachments in Client Portal

      Is there a way to have allow clients access to attachments in their client portal? Attachments is currently hidden in the client portal and I cannot find a way to allow client access. Thank you!

    • Canvas: how can I edit theme?

      This says "Theme Colours", and I would like to edit theme colors (and styles ala CSS). How can I edit these "Theme Colours"? I'm a software developer, so just point me in a direction where I can alter code if needed.

    • CRM For Everyone - Bring Back Settings Tile View

      I've been using CRM for Everyone since it was in early access and I just can't stand the single list settings menu down the left-hand side. It takes so much longer to find the setting I need. Please give users the option to make the old sytle tile view

    • Mass Update of Lookup Fields not possible

      Hello List I've created a custom field for Leads and Contacts 'Current Campaign'. This is very Handy as I can filter leads and then related them to a campaign. Everything ready, but then I realized that mass update doesn't work for lookup fields... a

    • are Zoho Meeting and Zoho Webinar two separate products?

      hey all, i'm new to Zoho One and I'm trying to figure out what's the best platrofrm to do a Webinar for my subscribers. I see that Meeting have a Webinar option, but i see there's also a separate product (?) called Zoho Webinar. Are these two actually

    • Very Worst Experience = Screen sharing was Awful. There is a huge lag. I switched to Google meet, with same network speed, there is no lag at all.

      Very Worst Experience = Screen sharing was Awful. There is a huge lag. I switched to Google meet, with same network speed, there is no lag at all. Requesting you to work on your improvements. Otherwise this will give a very poor experience. Thanks,

    • Enable Native Zia Integration in Zoho Mail Without Requiring OpenAI API Key

      Hello Zoho Team, We hope you're doing well. We would like to request a feature enhancement for Zoho Mail's integration with Zia, specifically concerning the AI-powered capabilities like: Auto-complete sentences Generate email content Summarize email Currently,

    • Email policy not working?

      Hi, I created an email policy called "default", under which I created a "default" entry for the access items (the third icon with the key). I've set everything to "ON" (POP, IMAP, ActiveSync, etc.). But then when I create a new user and check it in Mail

    • One notebook is on my Android phone app, but not on Web or PC app.

      This problem started in stages. At first my phone was occasionally failing to sync. Then I noticed two things added to my Phone App. One was an existing notebook had a new cover, and the other was a new Note Card with an odd text in it. These were only

    • Next Page