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


------------------------------------------------------------------------------------------------------------------------

    • Recent Topics

    • [Webinar] Zoho Writer for the manufacturing industry

      Creating, sharing, and distributing complex documents are constant challenges in the manufacturing services industry. That's why our next webinar is focused on how to simplify these document workflows. Join us on May 8, 2025, for a Zoho Writer webinar

    • Add Comprehensive Accessibility Features to Zoho Writer

      Hello Zoho Writer Team, We hope you are doing well. We would like to submit a feature request to enhance Zoho Writer with a full set of accessibility tools, similar to the accessibility options already available in the Zoho Desk agent interface. 🚧 Current

    • [Webinar] Simplifying document workflows in financial services with Zoho Writer

      Creating, sharing, and distributing complex documents are constant challenges in the financial services industry. That's why our next webinar is focused on how to simplify these document workflows. Join us on April 10, 2025, for a Zoho Writer webinar

    • [Zoho Writer Webinar] Learn how to simplify your HR operations: Part 2

      Hi Zoho Writer users, We're excited to announce the Zoho Writer webinar for July 2024: Learn how Zoho Writer can simplify your HR operations: Part 2. This webinar will focus on how Zoho Writer can help HR teams streamline and automate their entire hiring

    • [Zoho Writer Webinar] Learn how to simplify your day-to-day HR operations

      Hi Zoho Writer users, We're excited to announce the Zoho Writer webinar for June 2024: Learn how Zoho Writer can simplify your day-to-day HR operations. This webinar will focus on how to automate your entire hiring process and generate various types of

    • Branding of native system emails

      Make system emails adjustable in terms of branding. We want our system to be completely white label, because it is not a CRM anymore, it's way more than that. We are following the strategy of "CRM for everyone" to use the CRM in all departments, not only

    • Support “Never End” Option for Recurring Meetings in Zoho Meeting

      Hello Zoho Meeting Team, Hope you are doing well. We would like to request support for creating recurring meetings with no end date in Zoho Meeting. Currently, when scheduling a recurring meeting, Zoho Meeting requires us to select a specific end date.

    • Add Custom Field Inside Parts Section

      How to Add Custom Field Inside Parts Section in Workorder like Category and Sub- Category

    • [Important announcement] Removal of Zoho Writer's DocuFiller Add-on

      Hi users, Effective 21st Feb. 2025, we will be removing the DocuFiller add-on for Zoho Writer's Fillable Templates. From that point on, the add-on's functionalities, such as sharing or publishing fillable forms for data collection and receiving submissions

    • Send Automated WhatsApp Messages and Leverage the Improved WhatsApp Templates

      Greetings, I hope all of you are doing well. We're excited to announce a major upgrade to Bigin's WhatsApp integration that brings more flexibility, interactivity, and automation to your customer messaging. WhatsApp message automation You can now use

    • Weekly Tips: Manage External Images in Zoho Mail

      When you receive emails every day, whether from clients, newsletters, or services, many of them contain external images that automatically load when you open the message. While this can make emails look more engaging, it can also impact your privacy and

    • Implementing a Self-Invoicing/Vendor Portal in Zoho Creator

      Hello Zoho Community / Creator Experts, We would like to build a Self-Invoicing Portal (Vendor Portal) in Zoho Creator for our external contractors. Our goal is to allow approved contractors to log in, submit their invoice details (hours worked, project

    • Function #32: Schedule low stock notifications on a timely basis to specific users of the organization

      Hello everyone and welcome back to our series! For a business that heavily relies on inventory, monitoring the stock levels and getting timely notifications of low stock items will ensure a smooth sail. Zoho Books allows you to always keep a check on

    • Is it really true that I can't set the default 'deposit to' account in 2025?

      I've been using Books for 7 years and the default account has never been a problem. I usually manually reconcile invoices and have never had a thought about which account. It has always been my account. However, I recently noticed that for the past 4

    • SINCH HUB MESSAGEMEDIA with ZOHO DESK

      1) what I need from MessageMedia, 2) what I want to confirm on the Zoho Desk Dev Forum. MessageMedia – needs and requirements Goal: Send SMS from a Zoho Desk widget for EU users. Auth: HTTP Basic (API Key + Secret). Keys must not live in the browser.

    • Function #46: Auto-Calculate Sales Margin on a Quote

      Welcome back everyone! Last week's function was about displaying the discount amount in words. This week, it's going to be about automatically calculating the sales margin for a particular quote, sales order or an invoice. Business scenario Where there is sales, there's also evaluation and competition between sales reps. A healthy rivalry helps to better motivate your employees to do smart work and close deals faster and more efficiently. But how does a sales rep get evaluated? 90% of the time, it's

    • Invalid URL error when embedded sending url into iframe for my website when using in another region

      Hi team, My site is currently working on integrating your signature feature as part of the system functionality, it's working great but recently there's been a problem like this: After successfully creating the document, i will embed a sending url into

    • 2024 Email Authentication Standards: Elevating Security with Google and Yahoo

      In contemporary email communication, email authentication plays a pivotal role in mitigating email fraud, spam, and phishing attacks. Brace yourself for a new level of security. Starting February 2024, Gmail and Yahoo will be implementing robust email

    • New features released: Data from Picture for Web, Pattern Fill, and Translation in Zoho Sheet!

      Hello Sheet users, In 2024, the Zoho Sheet team focused on research and development to bring new features that add to functionalities like productivity, data management, collaboration, and more. This year, we're all set to roll them out incrementally

    • Kaizen #59 - Creating alerts and custom messages using Client Script

      Hello everyone! We are happy to resume our Zoho CRM Developer Community series - The Kaizen series! Welcome back to the new start of Kaizen! This post is about Client Script and its simple use cases involving ZDK Client functions. What is Client Script?

    • [Webinar] Zoho Writer for content creators and publishing houses

      Managing multiple drafts, edits, and client reviews doesn't have to slow you down. Join our upcoming webinar to see how Zoho Writer helps content creators and publishing houses create, edit, and publish seamlessly—all in one place. You'll learn how to:

    • Universal search

      Hi, it would be useful if the search bar was universal-so if you entered a term, it would bring up results from contacts, candidates, clients etc all at the same time (but broken down under the relevant headings)

    • Attachment reminder?

      My team and I often need to attach files to our messages, e.g. an explanatory screenshot or a shipping label. More often that I want to admit I mention the attachment but forget to actually attach it. Some email clients have a check-for-missing-attachments

    • ZIA in Zoho Cliq

      Is It possible to use the ZIA feature from Zoho Analytics in the Zoho Cliq?

    • Automating CRM backup storage?

      Hi there, We've recently set up automatic backups for our Zoho CRM account. We were hoping that the backup functionality would not require any manual work on our end, but it seems that we are always required to download the backups ourselves, store them,

    • Multiple upload field CRM

      I desperately need the functionality to add more than one upload field to web to contacts form. How can I do this?

    • Critical Need for Global Search in Zoho FSM

      Hello Zoho FSM Team, We are currently in the process of deciding whether to fully transition to Zoho FSM for managing our field service operations. At present, our team actively uses Zoho Desk (with over 50 users) and Service Fusion, which we are considering

    • Collections Management: # 1 Payment Collection is All About Convenience

      "Sir, can you come tomorrow? My manager wasn't available for the cheque sign-off", the customer said, avoiding eye contact. Ravi forced a polite smile, but inside, he felt a sense of defeat. He had already visited the customer's office twice in the last

    • Can the Product Image on the Quote Template be enlarged

      Hello, I am editing the Quote Template and added ${Products.Product Image} to the line item and the image comes up but it is very tiny. Is there anyway that you can resize this to be larger? Any help would be great! Thanks

    • Audio/video quality issues with Zoho Meeting – Any roadmap for improvement?

      Hi Zoho Team, We’ve been using Zoho Meeting for both internal and external meetings, and unfortunately, the experience has been consistently poor. The video and audio quality are so unreliable that it often renders meetings ineffective—especially with

    • Cash based businesses cannot use the new fixed asset module

      Hello all, If your bookkeeping is reporting in cash, you cannot use the new fixed acid module, as it does all the depreciation bookings accrual and not cash. This is definitive and you can't turn them into a cash booking. They will never appear in your

    • Zoho Learn & Zoho Connect

      Hi, Is there a way to sync the knowledge base we have in Zoho Learn with the manuals section is Zoho Connect? Thanks,

    • Apply Payment Received Amount Zoho Books Invoice

      Hello team here is the sample code How can apply the payment received record over a unpaid zoho books invoice. //......................... paymentID = customer_payment.get("payment_id"); organizationID = organization.get("organization_id"); paymentmaplist

    • Zoho Books Finance Modules Not Accessible in Zoho CRM Mobile App

      We have integrated Zoho CRM with Zoho Books using the Zoho Finance Suite integration. In the CRM web version, we can see the Finance modules (Estimates/Quotes, Invoices, Sales Orders, Items, Payments) and are able to create invoices and quotes directly

    • [Live Webinar] New in Zoho WorkDrive: AI enhancements, Data Loss Prevention, Version Controls, and more

      Hello everyone, We're excited to bring you another round of powerful updates in Zoho WorkDrive! Join us on May 15 for an exclusive live webinar where we’ll unveil the latest features designed to enhance your team’s productivity, collaboration, and data

    • Live webinar: Streamlining legal operations: Leveraging Zoho WorkDrive for law firm success

      Hello everyone, Managing legal documents across departments and jurisdictions can be complex, but it doesn’t have to be. Join us on March 6 for an exclusive webinar where we’ll show you how Zoho WorkDrive empowers legal teams to stay compliant, organized,

    • Live Webinar: Optimizing back-office operations in the manufacturing industry to maximize profitability

      Hello everyone, We’re excited to invite you to our upcoming live webinar on February 6! Discover how Zoho WorkDrive can help manufacturing businesses optimize back-office operations, improve efficiency, and boost profitability. Our product experts will

    • Live webinar: 2024 recap of Zoho WorkDrive

      Hello everyone, We’re excited to invite you to our year-end live webinar! This session will take you through the transformative features and updates we’ve introduced in Zoho WorkDrive this year, helping you streamline document management like never before.

    • Live webinar: Explore WorkDrive's seamless integrations with key Zoho apps

      Hello everyone, We’re excited to invite you to our upcoming live webinar, where we'll delve into the seamless integration of WorkDrive with other key Zoho applications! This is a fantastic opportunity to enhance your productivity and streamline your workflows

    • Live webinar: Getting the most out of WorkDrive in Zoho Workplace

      Hello everyone, We’re excited to invite you to our upcoming live webinar, where we’ll explore how to maximize your use of WorkDrive as part of the Zoho Workplace bundle. This is a fantastic opportunity to elevate your productivity and streamline your

    • Next Page