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 #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.

    • Kaizen #226: Using ZRC in Client Script

      Hello everyone! Welcome to another week of Kaizen. In today's post, lets see what is ZRC (Zoho Request Client) and how we can use ZRC methods in Client Script to get inputs from a Salesperson and update the Lead status with a single button click. In this

    • Kaizen #222 - Client Script Support for Notes Related List

      Hello everyone! Welcome to another week of Kaizen. The final Kaizen post of the year 2025 is here! With the new Client Script support for the Notes Related List, you can validate, enrich, and manage notes across modules. In this post, we’ll explore how

    • Kaizen #217 - Actions APIs : Tasks

      Welcome to another week of Kaizen! In last week's post we discussed Email Notifications APIs which act as the link between your Workflow automations and you. We have discussed how Zylker Cloud Services uses Email Notifications API in their custom dashboard.

    • Kaizen #216 - Actions APIs : Email Notifications

      Welcome to another week of Kaizen! For the last three weeks, we have been discussing Zylker's workflows. We successfully updated a dormant workflow, built a new one from the ground up and more. But our work is not finished—these automated processes are

    • Recent Topics

    • Identify and clean hard bounce lists in Automation 2.0

      Hello. 1. I want to know how I can identify hard bounces in the lists I created to clean them before sending an email, given that the bounce rate has increased and it is necessary to clean the lists. 2. How can I exclude hard bounces and invalid emails

    • Trigger workflows from SLA escalations in Zoho Desk?

      Hey everyone, I’m currently working with SLA escalation rules in Zoho Desk and ran into a limitation that I’m hoping someone here has solved more elegantly. As far as I can tell, SLA escalations only support fairly limited actions (like changing the ticket

    • Delete a department or category

      How do I delete a Department? Also, how do I delete a Category? This is pretty basic stuff here and it's impossible to find.

    • Zoho Webinar - Sharing System Audio (NOT AVAILABLE)

      Hi, We are having a serious problem with Zoho Webinar. In the webinars we run, we very often share the audio from a video we are streaming directly from YouTube or other applications. Until recently we were using Zoom, but as we use other Zoho applications

    • Lost the ability to sort by ticket owner

      Hi all, in the last week or so, we have lost the ability to sort tickets by Ticket Owner. Unlike the other columns which we can hover over and click on to sort, Ticket Owner is no longer clickable. Is it just us, or are other customers seeing this too?

    • Cancellation Fees

      Hi, It really would be good if Billing could take subscription management further with cancellations & being able to apply or set a cancellation fee for a plan that is either fixed or prorated. It is not uncommon in subscriptions for cancellation fees

    • 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

    • Zoho CRM Meetings Module Issues

      We have a use-case that is very common in today's world, but won't work in Zoho CRM. We have an SDR (Sales Development Rep) who makes many calls per day to Leads and Contacts, and schedules meetings for our primary Sales Reps. He does this by logging

    • Notes - Reaction Buttons

      Using the native notes option within CRM is fine, it works and the RTF features are great, however, would it be possible - if there isnt already something in place, where we can add a reactions button, similar to teams/whatsapp to show that its been read

    • How to get the campaingns key?

      Reading the documentations of the API, I see that is necessary have the campaign key, but I don't see how can I get it. For example to get the campaign details we need to do the request: https://campaigns.zoho.com/api/getcampaigndetails?authtoken=[API Authentication Token]&scope=CampaignsAPI&campaignkey=[campaignkey] I have the API Authentication Token but I don`t see how to generate the campaignkey

    • Unable to switch existing AWS RDS connection to DataBridge after moving RDS behind VPN

      Unable to switch existing AWS RDS connection to DataBridge after moving RDS behind VPN Hi everyone, I’m facing a problem with an existing Zoho Analytics setup and would like to know the best migration path. Originally, my Zoho Analytics connection to

    • [Bug] WebAuthn passkey registration blocked on rpIds with TLDs longer than 6 characters (.accountant, .technology, etc.) — isValidDomain regex too strict

      Hi, Filing on behalf of an enterprise customer where Zoho Vault is deployed across the company. The Chrome extension blocks WebAuthn passkey registration on legitimate sites whose Relying Party ID (rpId) has a TLD longer than 6 letters. This affects every

    • Native QuickBooks integration for Zoho CRM: Connecting sales and finance

      Greetings, I hope all of you are doing well. We're excited to announce Zoho CRM's integration with QuickBooks Web, which is designed to synchronize your CRM data with your QuickBooks accounting records and bridge the gap between sales and finance. This

    • Syncing zoho books into zoho crm

      I was wondering how I can use zoho books in crm as I have been using them separately and would like to sync the two. Is this possible and if so, how? Thanks

    • ZohoBooks_add_expense_attachment Fails

      I'm working MCP in Claude to automate bookkeeping. Claude cannot seem to attach and reciept to an expense. The 'add expense attachment' tool is added to the server and enabled in Claude. I asked Claude to give me the calls he performed and this is what

    • ZohoBooks_create_chart_of_account

      I'm setting up Claude to do my bookkeeping workflows using a Zoho MPC server I setup. He does not seem to be able to create a chart of account. The 'create chart of account' tool is added to the server and enabled in Claude. I asked Claude to give me

    • Zoho Books Product Road Map

      I am planning to look into Zoho Books to maintain my Company's Account Books. Is the roadmap of Zoho Books Development available online? What happens if you product dies, without an export feature to other popular Accounting softwares like Tally or Quickbook. Are we going to be left in lurch? Do you have a product road map? Regards, Vishal.

    • I want to delete the email but I can't.

      I want to delete emails but I can't, please help me. Thanks!

    • Error while creating new user

    • Zoho Mail is blacklisted on magicspam.com and spamauditor.org

      As of today, the same problem with the IP addresses 136.143.188.51 and 136.143.188.52 How long does it take them to clear their IP addresses? I've read on this forum that these IP addresses have been blacklisted for years. //////////////////////// This

    • Unable to send emails from the delegated mailbox

      currently it's not possible to send emails from our delegated mailbox (just in our own name, our own mail-accounts) The permissions granted include "Send as," and we are also unable to delete delegated employees or add new ones. We can only add employees

    • Change Password

      How can I reset OR Change the Passwords for the Whole Organization at Once as Administrator using Admin Console?

    • Zoho Books bill pay option not available with zoho one

      Why isn't Zoho Books bill pay add-on not available for Zoho one customers not even as a purchasable option. I think this is very inconvenient for companies wanting to use this feature all in one system

    • Support - what am I doing wrong?

      Hi Everyone - I'm a new user and looking particularly for a replacement mail service. I'm just a home user not a professional but I do look after half a dozen domains. Zoho looks lovely and I'd like to switch but just want to get answers to a few 'easy'

    • Zoho Forms - Form Availability Redirect Option

      Hi Forms Team, It would be great if there was a redirect URL option on the Form Availability settings. For example, I would like to create a support form which is only available outside business hours and if the current data and time is not Mon-Fri 9-5

    • Consider Making Printing Easier (UI)

      I'm using Zoho Analytics in much the way that it was intended when it was "Zoho Reports" - as a way to pull together information across several apps in the ecosystem. I have a dashboard that I need to run each week for every employee (change the filter

    • Email Routing to Zoho from Cloudflare

      Hello, I'm new to Cloudflare, having had my domain hosted on Fasthosts and just used it for email forwarding. I'm looking for a little help to configure my email routing/hosting. I've looked at the documentation but haven't found exactly what I need to

    • Emails

      Good Morning, Is anyone else experiencing emails bouncing back? Thanks,

    • Secondary Reporting Manager permission level

      Hi, same time last year I was speaking to Zoho about the use of a Secondary Reporting Manager and certain challenges that I was facing. at the time, I was told that this functionality did not exist. I am still facing challenges, so I would like to ask

    • アナリティクスで商談中のパイプライン(ステージ）の件数比較

      アナリティクスで商談中のパイプライン(ステージ）の件数を前週と前々週で比較したい。前々週の件数が更新することで変動してしまう。対象方法をご教授ください。

    • why is my folder list is gone?

      Hi, All my email folders are gone, i cant found any email. could you please check it?

    • Our ZOHO mail is not working

      ZOHO mail is not working for any of our company's employees. All are able to access it in mobile. But not in laptops as a app or in webpage. please help asap.

    • Request to Release Email Aliases for Our Domain

      Dear Zoho Support Team, Greetings, We are currently configuring the email system for our organization in Zoho Mail and encountered an issue while creating several email aliases. When attempting to create these aliases, we receive the following error message:

    • Changing Base Currency to USD (we are based in the UAE)

      Hello everyone, Good day. We are based on the UAE and our bookkeeping is in USD. I followed the online resource that I select the country first where the currency I want as base is native then later on changed the country once the whole setup is done.

    • Error "The domain pinakajewels.com appears to be already in use in another organization. Learn More"

      Hi Team, I have the following account with zoho mail Organization ID: 644368849 This zoho mail account was earlier mapped to www.senacareese.com I no longer own the domain www.senacareese.com I wish to map www.pinakajewels.com to the same zoho mail account.

    • Add personal Facebook to Zoho Social

      Hi. is there any way i can post to my business and personal Facebook and Instagram at the same time when I make or schedule a post?

    • Option to Delete Chats in IM

      Currently, there is no option to delete any chats in IM, regardless of their source.

    • Billing Status Update

      Hello Latha, I’m working on a new automation (deluge) to fulfill one of our requirements. In this automation, there is a step to update the Work Order billing status from “Not Yet Invoiced” to “Non-Billable.” I tried to find the API information relevant

    • Please Enter Valid Amount

      Where to enter amount while importing file in journal.?

    • How to create a custom motorbike rental contract based from the customer list and print it.

      I would like to enter the customers information and then print out the contract with there name and information needed. how can I do this. I have the Zoho Books only. I'm just starting. Thanks

    • Next Page