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

    • Changing sequence of buttons

      How can I change the sequence of these buttons? I want the 'Versturen referral campagne' to be displayed as the default button

    • Unapproved Articles for Review?

      What is this feature and how do I use it? I'm not seeing any option to mark articles as unapproved and needing review.

    • Trying to fetch related list data from deals module

      I need to fetch stage history data which comes in related list in deals module using coql. How can I achieve that? { "select_query": "SELECT Technical_Survey_Date as system_order_confirmation_date, Stage,Created_By, Latest_Quote_Creation_Date,Originating_Source,

    • Stage-Probability Mapping

      How do I answer this question in analytics? What is the Closed-Won percentage of all Deals that reach a given stage? Another way: Of all Deals that reach a given stage (eg. Artwork/Price Quote), what percentage of them become Closed-Won? I want to populate

    • Follow-up Sequences

      For following up with leads based on open/click status.

    • How do I change the sort order of items in the User Filter?

      I have a chart for which I have set a custom sort order for a field. I noticed that in the user filter for this field, the order is shown as alphabetical. It does not reflect the custom sorting that I configured. I even tried selecting the checkbox "Make

    • Automate Zoho Projects Task Data Export and Email Delivery (for Non-Users)

      In many real-world scenarios, we need to share Zoho Projects task updates with clients or team members who don’t use Zoho or don’t have access to the platform. Since there’s no built-in way to export and email tasks directly within Zoho Projects, I put

    • Bulk Add notes

      I think that it's an absolute need and basic feature to add. I know we can import notes from an xls spreasheet, but that's not what I'm talking about. We should be able the same way that we can bulk send email, bulk add activities, we should be able to

    • How to use CRM custom button and client script?

      Here's what I need. I know how to handle each step in isolation. I do not understand how to intercept a Button interaction, pass it to the client-script for the user prompt, and remainder of the processing. User Clicks Button on Details Page Client-Side

    • Match one bank transaction to multiple customer with TDS dedcuction

      Hi team, Just wanted to know. How can i match one bank entry to multiple customer invoices with tds.

    • Zoho Product Sync between Books and CRM is a mess

      The syncing of products between Zoho Books and CRM is completely broken. Why is ZOHO CRM the center of all products? Surely it should be Books or Inventory that is the central focal point of all things to do with a business backend (i.e. not marketing

    • How can i resend a campaign to only one of the recipients on the original campaign

      How can i resend a campaign to only one of the recipients on the original campaign ? Sincererly, Mike

    • Transferring CRM Attachments to Workdrive

      relatedrecords = zoho.crm.getRelatedRecords("Attachments","Conditions",conId); attachid = List(); for each ele in relatedrecords { attachementId = ele.get("id"); attachid.add(attachementId); } for each ele in attachid { counter = 1; downloadFile = invokeurl [ url: "https://www.zohoapis.com/crm/v2/Conditions/" + conId + "/Attachments/" + ele type: GET connection : "work_drive" ]; resp2 = zoho.crm.attachFile("Deals",dealId,downloadFile); resp3 = zoho.workdrive.uploadFile(downloadFile, dealWD, "PlaceHolder"+counter+"",

    • Zoho Campaign low open rate

      I have been using Zoho One, Zoho CRM and Zoho Campaign to make my web application, but since I started using zoho campaign to send emails, it has low open rate (actually zero for the latest campaign for 2 days) For people who have more experience or know

    • More Workflow Triggers

      We utilize a lot of workflows in our organization. Recently we've identified two use cases where we would like a workflow to run a function. Upon further checking, the workflow trigger wasn't available, or the only option was to run the workflow more

    • サブフォームアップデート 静的サブフォームについて

      昨年のアップデートにある「静的サブフォーム」の詳細についてご存じの方はおられませんでしょうか？ Zoho CRM - 2024年10月〜12月のアップデート https://www.zoho.com/jp/crm/blog/q4-2024-update.html 画像をみると項目を固定できるようですが、2025年5月現在、こちらの USデータセンター環境では設定箇所がみあたりません。 設定方法や設定箇所などご存じの方おられましたら共有いただけると幸いです。

    • IP Address List > Sigma

      We have developed a ZohoCRM extension that utilizes API calls to our server from Deluge scripts and Widgets. Our API server has IP restrictions in place. To ensure successful communication, we require a list of IP addresses utilized by Zoho's platform

    • Contacts per department

      Hello, Is it possible to limit Contacts to a Department? Thanks

    • Have One Custom Function Run After Another Custom Function Finishes - ZoHo Desk

      Hello, From what I'm seeing in ZoHo Desk. If there are multiple custom functions that run when a ticket is initially created, the custom functions seem to run simultaneously. Is there a way to have one custom function finish before starting another custom

    • email templates are a mess with fonts

      Any time I edit a template or adjust the content of an email while using it the fonts change. Previewing does no good as it appears one way but is sent another. for example .. this was made using Tomaha 2nd size with NO BOLDING. and this is what my client

    • New Style for multilevel list numbering

      Hi, in my country most of legal contracts are numbered in top level as First, Second.. (Primero, Segundo, Tercero...). I suggest include this style for multilevel lists. Thanks in advance.

    • integration with Notion

      Hi. I'm tryng to use zapier for syncing notes between Zoho and my Notion Database. But when creating a zap with their models, I get an error wih this kind of message : Step 1 - New Note Card in Notebook in Zoho Notebook request to https://notebook.zoho./%7B%7Bsel_dc%7D%7D/api/v1/notification/filtered/register?JSONString=%7B%22resource_type%22%3A%22NOTEBOOK%22%2C%22filter_type%22%3A%22ID%22%2C%22filter_value%22%3A%22lovap7e4ebb0fdbaf4ac697d9218619d32fbf%22%2C%22action%22%3A%22UPDATE%22%2C%22url%22%3A%22https%3A%2F%2Fzapier.com%2Fhooks%2Fstandard%2F19820952%2Fcf840faec6aa42c5acdf1f5775131ec6%2F%22%7D

    • Associate emails from both primary and secondary contacts to deal

      We need to associate emails from multiple contacts to a deal. Please advise how this can be achieved. At present, only emails from primary contacts can be associated. Thanks

    • Is A Coloured Picklist with Dynamic Automation possible?

      Hey All, Just wondering if it is possible to setup a coloured dynamic picklist, Example below. Automating colour for ticket age based on creation date, So it is dynamic and changes as the ticket ages? 24 Hrs > Green 48 Hrs > Orange 72 Hrs > Red

    • Enable Mixed Channels with Employees, Guest Users, and External Users

      Hi Zoho Cliq Team, We would like to request the ability to create a channel in Zoho Cliq that includes all three types of users: Internal employees (organization users) Guest Users (non-Zoho users joining via guest chat) External Users (users from other

    • Associate email to deal and multiple contacts to deals

      Hi any news in how to associate emails to deal and to varios contacts in Bigin CRM? This feature would help in having deal and conversation all in one place so that when we open the deal or contact we have all the information in regard to deal that we

    • Chequered lines in notebooks

      Can the notebooks also be used with chequered lines or only with ruled lines? Or is it only available in blank? Thanks for the info! Greetings Andreas

    • How to add/remove tag to a ticket with function?

      Hi, I have had to create a function in Zoho Desk. However, it appears that the syntax differs from that in CRM. I realized that it is necessary to add organization ID in some commands what is not necessary when you create a funciotn in CRM. Could you

    • Introducing our latest privacy enhancement - Hiding email IDs in Zoho Cliq Networks

      Hello everyone, Zoho Cliq Networks offers a powerful collaboration platform that allows businesses to create dedicated digital workspaces for external vendors, partners, or individuals you want to communicate with professionally without adding them to

    • ERROR CODE554 5.1.8: unable to send message reason 554 5.1.8 email out going blocked

      Dear Zoho Mail Support, It's been nearly 24 hours and we still can't send emails. Our outgoing emails are blocked with the error message "554 5.1.8 Email Outgoing Blocked." This restriction is and will severely impact our business operations and causing

    • Zoho Desk Onboarding Assistance - How to do bulk taging

      Hi How to apply a particular tag to multiple tickets in one go.

    • New Assembly Screen - Doesn't Search by SKU

      When one wants to make an Assembly by clicking the plus sign from the "Assemblies" tab, the first step is to enter the Composite Item that one wishes to assemble. Logical, but the problem is that one cannot search that by SKU, only product name. This

    • CRM Client Script Buttons

      Hello,  Client Script ZDK list button functions, but I am not sure how to interact with them. I tried a few methods of getting the API name for a custom button, but no luck. Any ideas where the button API names are stored?  Also, custom buttons must be

    • Announcement - Custom Function Series

      Hi folks! One of the key attributes of Zoho Books that we're really proud of is the ability to automate your routine accounting tasks in an efficient manner. For most businesses, accounting would involve a set of repetitive tasks that consume a good chunk

    • Zoho CRM Create Client script using Custom Buttons

      Client script has become quite sophisticated and it's really useful. There is a missing simple functionality: To create script should be able to be called in the details page using a custom button. If we have this feature for Field Event, shouldn't we

    • Client Script event on any field of a Detail page

      Hi everyone! I'd like to trigger a Client Script when a user modifies a field - any field - from the Account Details page, how can I do this? I don't want to trigger it on a specific field, but on all of them. Thanks in advance!

    • Move Quote/Deals from a Contact to Another

      In our business contacts often move to different accounts, and it is simple to reassign the contact, but not so easy to move their quotes/deals to another contact at the account they are no longer with. Looking to see if there is a function to move quote/deals

    • Feature Request – Support for Saskatchewan PST Self-Assessment in Zoho Books

      I’d like to suggest a feature enhancement for Zoho Books regarding Saskatchewan PST (SK PST) self-assessment. Currently, when filing the SK PST return using Zoho Books’ return generator, there is a field labelled “Consumption Tax”, which is intended for

    • Connect and Engage On the Go: How Zoho SalesIQ's Mobile App Empowers Sales Teams?

      In sales, timing is crucial. It makes a huge difference. What if a prospect is checking out your pricing page? Or a high-value lead revisits your business' website or mobile app while you're at lunch? You can’t afford to miss that opportunity, and you

    • Any timeline for these features?

      Hello! Was wondering if there was a timeline to for the following features: Increased API Access for automations. The Rules are nice, but really need more automation, such as adding things to CRM, automating task creation, forwarding emails, etc. "negative"

    • Next Page