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

    • Automation Assistance for Zoho Form Integration and Workflow

      Hi, We are currently using a Zoho Form to send out our Global Credit Application and would like to automate the process further. Specifically, we’d like the ABN number submitted through the form to automatically populate the GST/VAT Number field in Zoho

    • COQL does not return queryable value if the result set is empty

      See linked video for running code illustration of the problem: https://workdrive.zohoexternal.com/external/d49bb40033b43b288d56fdf843095b7c65b28391d3ec5d09c854f416d853003d Moderation update: We are appending the comment that was removed, to add context

    • Zoho CRMでの商談の管理のしかたについて初歩的な質問です。

      先月からZoho CRMを試験的に導入して運用しています。 商談の管理（運用？）の仕方について教えてください。 商談の数が増えてくると、ダッシュボードの「ステージ別進捗状況」にどんどん過去の商談が蓄積されてくると思うのですが、 現在動きのあるものを中心に確認したくなる気がします。 そのあたりについては、どのように運用が一般的なのでしょうか？ アドバイスいただけるととてもありがたいです。 よろしくお願いします。

    • Composite Items & Purchase Orders

      The Composite Item is great way to bundle different products and services into a single line and sell it as a single line item in Estimates, Sales Orders and Invoices. However, on the other side - i,e,. Purchasing - this item creates quite a bit of a

    • using custom function is it possible to update the created by field in Zoho Crm custom module

      using custom function is it possible to update the created by field in Zoho Crm custom module

    • Slow Sloww Slowwww Responses

      Good day, Has anyone been experiencing slow responses from support? Since Thursday I migrated my Whats app to Sales Iq and I had to synch with Social to get the otp they were sending. Apparently What's app can't be automatically added so I reached out

    • You have exceeded the maximum number of attempts for this action. Please retry doing the same in 30 minutes.

      When one of Zoho Books user tries to select a vendor, recording a new bill, these message appears: You have exceeded the maximum number of attempts for this action. Please retry doing the same in 30 minutes. Other user, at the same time, but different

    • Enable Conversation Context Retention for SalesIQ Answer Bots

      Hello Zoho SalesIQ Team, We hope you are doing well. We have noticed that SalesIQ bots currently fail to maintain conversation context in Hebrew. For example, when we follow up on a previous answer or ask for clarification in Hebrew, the bot either provides

    • Automatic Hebrew Small Talk Setup Without Duplicate Term Errors & Manual Configuration

      Dear Zoho SalesIQ Team, Greetings, We would like to request an enhancement to the Small Talk feature in Zoho SalesIQ, specifically for Hebrew language support. Current Challenge: When setting up Small Talk for Hebrew, we encounter multiple issues: Simple

    • Should I Add Leads in Bigin?

      ok, first off I'm new here. I just started using Bigin. I'm debating if it's appropriate to enter leads. by leads I mean a list of contacts that I have not yet reached out to...it's a cold calling list.  if I enter them I can track them (I understand

    • Zoho Books - Perform a validation check before an invoice is marked as sent or sent

      Allow the validation rules to apply to button actions. For example: an invoice could not be sent or marked as sent if it has an empty value in a custom field. (The field could remain blank while it is being worked on.)

    • Flow error "given url is wrong"

      when I setup a flow to update a task status, I get an error when it runs that says "given url is wrong."

    • Upgrade Zoho Desk Agent-Side Answer Bot to GenAI

      Hello Zoho Desk Team, We hope you're doing well. Following the recent announcements and rollout of the GenAI-based Answer Bot in Zoho SalesIQ (Nova '25), we’d like to formally request a similar upgrade for the Answer Bot used by agents inside Zoho Desk.

    • Bigin Android app update: Email filters enhancement, change owner for related records.

      Hello, everyone! In the most recent Bigin Android app update, we have introduced additional email filters and an option to change the owner of related records. Email filters: We have now brought in support for 'All Emails' and 'Added from Widgets' filter

    • How can I get all conversations and comments of a Zoho Desk ticket using ZOHODESK

      Hi everyone, Currently, I am developing a Zoho Desk extension, and I am following the guide available at https://www.zoho.com/desk/extensions/guide/#ticket-object. While working with Zoho Desk, I have noticed that I can only retrieve the general information

    • AI & Zoho Recruit

      Hello, I guess we all are using AI in our personal and professional lives. Now, let's imagine. Recruitment is just a succession of stages and steps. For which step would you like to see AI implemented into Zoho Recruit ? I'll start : - Automatic translation

    • Workdrive and ChatGPT Team Synced Connectors

      Hi, we want to be able to integrate Zoho Workdrive with OpenAI’s ChatGPT Team plan. Google Drive and OneDrive both offer this, zoho please catch up asap. We dont want to have to put our company files in google drive, we want to allow chatgpt Team edition

    • widget url 404'ing

      I'm creating a widget for the first time. When I grab the url from the base url section of the widget builder and append /widget.html it 404's Just wrote a very basic test. I have a folder structure app.zip - widget.html --js/app.js /widget.html <!DOCTYPE

    • Unable to Edit Pick-List Items in Custom Project Field(s)

      I can edit most fields normally, but if I try to edit - in any way - a Pick List field, I just get this error: To be perfectly clear, I'm trying to edit an existing Pick List field (adding or removing items), not adding a new instance. If I rename it,

    • How to display results from zoho.crm.searchRecords in message window

      Hello, I've created a custom function which is linked to a custom button which pulls a date from our contacts module and searches a date field in our quotes module and returns all records matching the date. My issue is, how to I get this to display the

    • Domain Transfer

      Hello there! I wanted to know if I can transfer my domain from Zoho to other hosting providers or use a different hosting provider instead of zoho's services.

    • Select CRM Custom Module in Zoho Creator

      I have a custom module added in Zoho CRM that I would like to link in Zoho creator.  When I add the Zoho CRM field it does not show the new module.  Is this possible?  Do i need to change something in CRM to make it accesible in Creator?

    • New User - Opening Stock Aging Report

      I am setting up new client and am entering Opening Stock - created items and entered quantity/price details. Now the aging report is showing all the opening stock as new. How do I enter the Purchase Dates of these items so that I get accurate Inventory

    • Bulk Receive Multiple Purchase Orders

      Is there a feature or function that will allow you to bulk receive issued purchase orders? I have about 100 that need to be received from 5 years ago.

    • Manual Invoice

      How to create a Manual invoice, I need to enter Amount directly instead of (qty*Rate). our company is a service sector

    • Effective Inbox Organization: Folders vs Tags in Zoho Mail?

      I'm exploring the best ways to organize a busy inbox, especially when managing multiple clients or project using Zoho Mail. I’d love to know what works best for others: 1. Do you prefer **folders** (possibly with sub-folders) for each client or project?

    • Merging contacts and or accounts

      Hello, In a prior CRM we were able to merge contacts and or accounts.  We have turned on the function to stop multiple contacts with the same email, so we can prevent multiple contacts from happening, however, we now have multiple contacts that have the

    • Capture Reason for absence next to Campaign Member Status. Is there a reasonable workaround?

      I've reviewed the topics I could find to do with this but still couldn't find anything that satisfies our requirements: We would like to track a *reason* (picklist or text, doesn't matter which) why a Campaign Member (Lead or Contact associated with a

    • Zoho Learning Management System - Certificate Upload by Employees

      We are planning to enroll employees in courses which are hosted by coursera or similar sites. I want to share the links of those courses and also want employees to upload their completion certificate once they are done. Is this function possible in

    • Add RTL and Hebrew Support for Candidate Portal (and Other Zoho Recruit Portals)

      Dear Zoho Recruit Team, I hope you're doing well. We would like to request the ability to set the Candidate Portal to be Right-to-Left (RTL) and in Hebrew, similar to the existing functionality for the Career Site. Currently, when we set the Career Site

    • Button or Links order

      Is there a way to re-order the buttons or links that are created?

    • Adding Multiple Products (Package) to a Quote

      I've searched the forums and found several people asking this question, but never found an answer. Is ti possible to add multiple products to a quote at once, like a package deal? This seems like a very basic function of a CRM that does quotes but I can't

    • 'Pin' notes, so that specific ones are always visible at the top of the 'notes' tab.

      It doesn't appear Bigin has the functionality to 'pin' a note to then have it always show at the top of the notes tab section of a record. Often times we have a large number of records, but key information we may want to have easily visible to all at

    • Request for Subform Support in Zoho CRM Webforms

      Hi Team, I hope you're doing well. I would like to bring to your attention that currently, Zoho CRM Webforms do not support Subforms, which limits our ability to send forms that mirror the actual structure used within Zoho CRM. This feature is extremely

    • Formatting Mailing Labels

      I want to use the "Print Mailing Labels" function on the drop down list, but I am not seeing a way to change the formatting on the mailing labels. At the moment, the information that appears on the mailing labels ARE NOT mailing addresses, but random

    • Maxima Address on FSM Customer

      Im trying to add probably 50 customers from one company but couldn't make it since it has limit..how do i add the limit?

    • How to Track Inventory Usage from Zoho FSM to Zoho Inventory?

      Hi everyone, We’re currently working on integrating Zoho FSM with Zoho Inventory, and we’ve encountered a challenge we’re hoping the community can help us understand better. Here’s the context: When we create a Work Order in Zoho FSM that involves parts

    • View subform entries without viewing a record in Zoho CRM | Kiosk Studio Session #8

      In a nutshell Have you ever wanted to take a quick peek at a record's subform? Examples might be invoiced items in an invoice, ordered items in a sales order, or purchased items in a purchase order. Let's say you're viewing your list of invoices in Zoho

    • How to Create a YTD vs Last YTD Comparison Report in Zoho Analytics?

      Hi everyone, I'm trying to build a report that compares Year-to-Date (YTD) metrics from this year to last year. I’m struggling to get accurate results using custom formulas or aggregate functions. Has anyone successfully created a YTD vs LYTD comparison

    • Transforma tu Inventario: Control Inteligente y Funciones Clave en Zoho Inventory (Spanish Webinar)

      ¿Tu empresa necesita mayor trazabilidad y control en almacenes? Conoce cómo gestionar tu inventario con eficiencia y automatización... ¡y descubre las sorpresas que trae Zoho Analytics! Participa en nuestro webinar gratuito en español, este 19 de agosto

    • Next Page