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

    • Export an email as an HTML file?

      How do we export an email in Zoho Marketing Automation as an HTML file? We have an advertising partner that needs our campaign email as an HTML file. We can't find any way to do this. If this is not possible, please explain why. It doesn't make sense

    • Function #30: Display list of associated PO on SO details screen

      Hello everyone, welcome back to our series! Imagine having the ability to effortlessly access and view details of all purchase orders linked to a sales order directly from the sales order itself. Well, today's script is designed to do just that for you.

    • Custom Print Button in Page/Stateless Form

      [Zoho Creator] Unable to Add Custom Print Button to Page or Stateless Form We need the ability to add a custom print button on a page or stateless form in Zoho Creator to print a templated or formatted output (e.g., appointment confirmation, summary slip).

    • Page Variable Not Passed from Report to Form

      [Zoho Creator] Page Variable (Resource) Not Passed from Report to Form in Appointment Module We are facing a limitation in our Appointment Module related to the handling of page-level variables. We are using a page variable to select a resource, which

    • MS Teams Meeting to Zoho CRM

      Has anyone figured out a good way to push MS Teams meeting info on a trigger of "meeting end" to Zoho CRM? We're looking for a way to take attendees of a meeting and meeting duration and push it into Zoho CRM after the meeting has ended. If I can just

    • Creating Layout Rule With Formula Field

      By The Grace Of G-D. Hi, I see that i cannot use Layout Rules to show/hide Formula Fields. Is that something you plan on adding sometime soon?

    • Combine / merge multiple invoices into master

      Good morning Zoho! Upon looking for a solution for my issue, I found many that had my similar problem...dating 13 years ago! Please, any updates on this? Merging multiple invoices on a Master Invoice would alleviate all the extra work of resending and

    • Free Webinar Alert! Productivity Hacks that you don't want to miss on June 24

      Hello Zoho Community! Want to work smarter and get more done with Zoho Mail? We’re here to help! Join our interactive webinar to explore powerful Zoho Mail features that can boost your productivity. Watch live demos, learn helpful tips, and take part

    • Web Clipper cannot save to collections

      With the recent update that added collections, i am unable to use the web clipper to save to a collection

    • sort by name is always z to a

      I typically keep my notes in alphabetical order. Suddenly they are all backwards - z to a. They stay that way whether I select a to z or z to a. Is there a way to fix this?

    • Project Management Bulletin: June, 2025

      Our project management suite's representatives have been busy socializing with global customers in the USA (Zoholics) and Australia (roadshows). We also had multiple stop overs at our customer’s establishments and were glad to see the efficiency our products

    • Agenda For Zoholics Benelux & Nordics 2025

      Dear Zoho Benelux community, We are pleased to announce the agenda for Zoholics Benelux & Nordics 2025 on September 23-24 at NBC Congrescentrum in Nieuwegein. The topics of the presentations are: Zoho innovations in the region and worldwide The introduction

    • How to query Deal "Stage" "Is Open" in Analytics SQL?

      How do I query this "field" in Analytics? What is going on? It seems like there is another 'mapping' somewhere but that it is inaccessible with raw sql??? If I query "Stage" Like '%Won%' I get a wildly different number than I do when I manually filter

    • Enhanced Candidate Portal: Now Featuring Federated Login, Passwordless Access & MFA

      You can now enhance your Candidate Portal experience with Federated Login, Password less Sign-in and Multi-Factor Authentication (MFA). These features offer greater flexibility and control—allowing seamless sign-ins through trusted platforms and adding

    • Custom View and Custom Fields

      Hi We have custom fields that we need in the Sales\Customer module and we would like to have the fields available to view in the Bills module so that we can add them to a custom view, is that possible? That way we can look at the Bills screen to see what

    • Can I write a check in Zoho Books with no associated bill?

      This currently does not seem possible, and I have a client that desperately needs this function if I am able to convert them with Quickbooks. Thank you in advance for your reply. 

    • Automation#35 : Auto-Add Comments under the Owner's Name in Tickets via Macros

      Hello Everyone, This week's custom function provides simple steps to configure a Macro for adding comments to tickets with the name of the Comment owner. When managing tickets, you can use the Comment feature to communicate internally with your team and

    • Subfrom Changes are NOT included in Audit Logs and Timeline

      In the Timeline the subform changes are not tracked We have an important custom module for Recording Pricing Information It has a subfrom, now if Changes are made to the subform fields they are not shown in the timeline, ONLY the aggregated fields This

    • Tracking Emails sent through Outlook

      All of our sales team have their Outlook 365 accounts setup with IMAP integration. We're trying to track their email activity that occurs outside the CRM. I can see the email exchanges between the sales people and the clients in the contact module. But

    • Changing Link Color

      When I create a link from a block of text, the text color changes to a color i do not want. After scrolling through the CSS and HTML files I cannot find the setting for the link color. Changing the link color word by word seems inefficient and must be a setting somewhere? Greg Aanes 2109 Queen Street Bellingha WA USA

    • Content Management System

      Is there any plan to develop a CMS application that allows us to manage all of the ZOHO services such as Writer, Sheet, and Planner? Besides that, it would be nice to manage the files and logs of WebNMS using SOA. Otherwise i'll try to make it. Thanks, Takash F

    • How do I pause or halt a running campaign?

      Hi, I set up an A/B campaign - and after testing, scheduled the campaign, I noticed an error in the subject line and had to pause or halt the campaign 'mid-flight' - could not find this, and the only option was to delete the entire campaign to halt the send (it was an emergency). Is there a campaign Pause or Stop function/button? I could not find it - am I missing something? (Thank you for your help  - I searched the resources and could not find an answer)

    • Contact Segments with multiple CRM modules

      Hello, We have a somewhat unique setup in our system involving various components: Contacts, Accounts, Deals, and a couple of custom modules named Properties and Audit Logs. We're looking to implement a notification system via SMS and Email specifically

    • Cannot reorder fields in Page Layout in Expenses and Purchase Requests

      It is very inconvenient that the custom fields in Page Layout cannot be re-ordered. The only way is to remove the fields and re-create them; however, it is impractical. This would affect the reports and dashboards we are having. Not able to re-order the

    • Having issues with creator, flow and calendar

      So I have made a creator app when engineer puts in the date and time for when they are going to out on site , this then passes the calendar data to flow and then should populate the inputed data to the calendar. So If use${system.zf_current_date_time}.

    • Problem when forwarding emails

      When I want to forward an email received through Zoho, the layout changes: Buttons are cut Pictures change size Text changes alignment (left/right/center) Is this a common problem in Zoho? Thank you, Suzannah 

    • View Audit Trail field

      The Audit Trail feature is great, but its data is only available to admin users. It would be really great to have a system field "Audit trail" that we can add to the detailed view of a record. This would allow supervisors, directors and etc. to quickly track what changes have been done by whom for each record. It is a current feature from a client of mine and while it's probably possible to hard code it, since this data is already available in Zoho, I would be surprised to hear how hard it would

    • Recuring bills payments

      I've entered recuring bills that are auto drafted from my account monthly. Can I set up the recuring payment or do I continue to manually do it monthly?

    • Automatically assign Contact Roles to a Deal

      Hi guys, Is there a way to assign multiple Contact Roles to a Deal via a workflow or similar? Thanks

    • on submit of creator form then record is create in Zoho crm purchase module then on automatically task want to create in the crm

      on submit of creator form then record is create in Zoho crm purchase module then on automatically task want to create in the crm

    • Zoho CRM Webinar – Automate everything across Customer Journeys in CommandCenter 2.0

      How efficient is your current CRM automation setup? As customer journeys become more dynamic, it's common for data and actions to get scattered across teams and modules. This leads to broken processes and inconsistent customer experiences—especially across

    • Changing employees email address

      How do I change an employee's email address? I am an administrator on the account but it says that I am "not allowed" to do it?

    • MULTI-SELECT LOOKUP - MAIL TEMPLATE

      Dear all how are you? We need to insert data from MULTI-SELECT LOOKUP in a email template, but I can't do that, when I'm creating the template I can't find the field to insert it. is there any solution? PVU

    • Changing the owner of a call

      Am I correct in my conclusion that I cannot change the owner of a call in Zoho? The field does not show up in the screen, nor can I make it show up as the systems does not give me that option. I cannot "mass update" it either. I tried it, but Zoho refuses to change the name of the owner. Please help out: how do I change the owner of a call.

    • Global Fields

      Just like Global Sets for Picklists, we would like to have global fields for any kind of field. Three things that should be saved globally: 1. The Existence of the field 2. The Name and 3. Association with a module should be set up in a respective place

    • Introducing Screen Share with Audio

      Share your entire screen or just the chrome tab with audio for more engaging presentations. Your audience will hear sound just like you do, whether it's a video, demo or any other content. This is ideal for training sessions, team meetings, and client

    • Need Help Preventing Overselling in Zoho Inventory

      Hi fellow Zoho Inventory users, I'm reaching out for advice on managing inventory control in our growing business. We've recently encountered situations where sales orders get confirmed despite insufficient stock, creating operational challenges. Our

    • Tip #53: Populate and search values from tables using Table Lookup

      Qntrl supports tables to store organization-related data and access it easily. Data stored here can be populated and displayed in orchestration using Table Lookups. This helps organizations list sizeable data in dropdown or multiselect dropdown fields

    • Introducing more AES digital signature options in Zoho Sign

      Greetings! Zoho Sign has continually strived to partner with trust service providers across the globe to give you complete security and confidence, so you can e-sign documents no matter where you are. We've recently partnered with IgniSign, a trust service

    • Shuffling between one note to the next

      I usually start all my notes per interaction with a contact with the date and then a little detail. But when I search for it it only see a small portion of the note and can't immediately tell which contact its associated with. can we make the note content

    • Next Page