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

    • Optimizing Zoho CRM Integration – Tips & Insights Needed

      I hope you're all doing great! I'm currently working on integrating Zoho CRM with our platform, which helps users get iPhone Free of cost through verified government programs. Everything's coming together nicely so far, but I'd really appreciate some

    • Forms - Workflow

      Apologies if this has been asked before. I would like to know if there is a way to setup a form where a customer completes the fields/questions on Page 1 and then it is forwarded to an internal department employee who completes the fields/questions on

    • Using the "Like" operator in Custom Formula

      HI there, Can someone please explain the way to use the "LIKE" operator in an IF statement to compare strings? I have tried the following but am not getting the results I'm after. if( "CurrentStatus" like 'Rejected*','Unsuccessful','Pipeline') Thanks Matt

    • ABA Files payment description

      Hi, is there a way to automate the payment description on the ABA file creation. When you paying many vendors having to put this in each time is very time-consuming. I couldn't see if there was a way to workflow this to automate using deluge.

    • GDPR Contd. - Handling Lawful Bases for Your Customers using Zoho CRM.

      Hello folks,   Continuing from our previous GDPR post, we bring to you the first cut of GDPR centric enhancements that are released for handling lawful bases for your customers in Zoho CRM. For your understanding we have split the entire process into three sections: Identifying Data Processing Basis Updating the Data Processing Basis in Zoho CRM  Consent Management in Zoho CRM 1. Identifying Data Processing Basis The fundamental principle to handle the personal data of your data subjects is to process

    • Upgrade the Lato font to the Lato 2 font

      While there's not a major difference, I noticed that Zoho doesn't use the upgraded Lato 2 font but it instead uses the standard one. Lato 2 enhances the look of letters and numbers when you italicize them, among little things that get tweaked. Is it possible

    • Masked Field Type with Permission-Controlled Visibility in Zoho CRM

      Dear Zoho CRM Team, Greetings, We would like to request a new feature that would enhance data security and access control within Zoho CRM, especially when handling sensitive internal information. Use Case: Our team occasionally needs to store sensitive

    • How to properly setup Databridge on Linux Server?

      Hello guys, i am running a Linux server on which I am installing the Zoho Databridge via command line. The Zoho tutorial ( https://help.zoho.com/portal/en/kb/analytics/user-guide/import-connect-to-data/databases-and-datalakes/articles/postgresql-3-3-2021#1_How_do_I_install_Zoho_Databridge

    • Haven't used banking function for years and now want to reconcile and clean up my account

      I'm in the UK and have been using Zoho Books for my private mental health practice since 2018. Up until recently, I've entered everything manually and not reconciled any items with my bank account. Every year, I run a report for that year and use that

    • invalid element hsn_or_SAC

      Hi, I am trying to record expense in Zoho expense. when submitting I am facing this issue invalid "element hsn_or_SAC" please help me with this. Regards, Abdul Hameed M

    • Plug Sample #14: Automate Invoice Queries with SalesIQ Chatbot

      Hi everyone! We're back with a powerful plug to make your Zobot smarter and your support faster. This time, we're solving a common friction point for finance teams by giving customers quick access to their invoices. We are going to be automating invoice

    • Recap - Desk Story Series

      In our exploration of the Wheels of Ticketing Series, we kicked things off by diving into a fundamental element of Desk Ticketing: the fields. These fields serve as the building blocks that gather essential information about tickets, customers, organisations,

    • Tip of the Week #60– Reduce response time with shared inboxes!

      When customer messages are scattered across different platforms and team members aren't sure who's responding, delays are inevitable. Slow responses frustrate customers and create a poor experience for your brand, especially when expectations are high.

    • Hybrid project management in IT and software development services

      Project management models serve a wide range of audience, however the highest takers for Agile project management methodology are the IT and software services industry. The flexibility to develop and release software iteratively with continuous improvement,

    • Introducing Forms in Zoho Sheet

      We hereby bring you the power of ​forms in Zoho Sheet. ​Now, build and create your own customized forms using Zoho Sheet. Be it compiling a questionnaire or rolling out a survey, Zoho Sheet can do it all for you. Forms is an excellent feature that helps you collect information in the simplest of ways and having it in Zoho Sheet takes it a notch higher. Build Simple yet Powerful forms Building forms using Zoho Sheet is fairly simple. The exclusive 'Form' tab lets you create one quickly. Whether you

    • What's New in Zoho Inventory | January - March 2025

      Hello users, We are back with exciting new enhancements in Zoho Inventory to make managing your inventory smoother than ever! Check out the latest features for the first quarter of 2025. Watch out for this space for even more updates. Email Insights for

    • Overdue payments pending approval max

      I needed to validate update the email to pay for goods sold out, travel expenses and cars and vehicles for office, office supplies, properties purchase etc

    • How do I mass edit time entries?

      Since you can not filter or sort time entries by what has and has not been invoiced (you can only see the icon but not separate invoiced from non-invoiced), I would like all time to initially be entered in as un-billable and I can change to billable as I bill them. (since you can see this separation)  So my question is HOW do I mass edit this? Can it be done?

    • Zoho Booking Page Footer

      Is there any option available to add social media, like LinkedIn, on the Zoho Booking page?

    • Custom SMTP is now available in Zoho Sign

      Hi there! Want to send Zoho Sign emails from your organization's or personal email server? Look no further! Zoho Sign has introduced custom Simple Mail Transfer Protocol (SMTP) for Enterprise users across all data centers. By enabling custom SMTP, you

    • Help with SEO

      Hi There, I have recently published a site and added some Keywords in the SEO settings. Searching Google I currently don't find my site though. When do these settings take effect? In the SEO settings there is also a section "Sitemap" I can change settings for "frequency" and "Priority" What do these settings do? Kind regards

    • Report Level Button

      Currently I couldn't find a way to add a report level button I think currently we can only add buttons/actions for records, but having custom report level button would be really beneficial Usecases Click to import/sync Data from On Prem Systems Click

    • Create collection from start integer to end integer

      I want create some ticket number. Starts at 1 and end at 10. I want the result to be a string 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10. Trying something like this but need the correct way write the start and end part. start = 1; end = 3; sequence = List();

    • Importing Subform Data is Removed in Zoho Creator 6

      Previously It was possible to import Data to the Subform in Creator 5 This basic and mandatory Feature was completely removed from Creator 6 with no Timeline to add support for it How are we supposed to add our data if we want to use Creator? Manually?

    • Function #50: Send Mass emails to your customers

      Hello everyone, and welcome back to our series! We have reached a milestone of 50 Functions, which means that we have automated 50 different tasks in Zoho Books. Every Friday, we have shared a nifty function aimed at either automating a task or streamlining

    • Smart Document Automation:: From Zoho Projects to Zoho Writer – Merge, Edit, and Share

      Hello Everyone, A custom function is a software code that can be used to automate a process and this allows you to automate a notification, call a webhook, or perform logic immediately after a workflow rule is triggered. This feature helps to automate

    • Zoho Desk - Cannot Invite or Register New User

      Hi who may concern, we encountered a problem that we cannot invite user or the visitor cannot register for a user at all through our help center portal, with the snapshot shown as below and the attachement. It always pops up that "Sorry, Unable to process

    • How to remove an Instagram post on Zoho Social?

      Hi there, I wanted to delete yesterday's post on all social platform and managed to do so for Twitter and Facebook. I couldn't for Instagram as there is no option for delete. How can I delete successfully?

    • 【開催報告】東京 ユーザー交流会 Vol.2 2025/6/13 CRM Plus/Formsの活用におけるポイントやおすすめ機能を紹介

      ユーザーの皆さま、こんにちは。コミュニティチームの藤澤です。 6月13日（金）に東京で「ユーザー交流会 Vol.2」を開催し、16名の方にご参加いただきました。ご参加くださった皆さま、ありがとうございました。 この投稿では、当日のセッションの様子や使用した資料を紹介しています。残念ながら当日お越しいただけなかった方も、ぜひご覧ください。 ユーザー活用事例セッション：マーケ・営業・サポートをつないで顧客体験を向上させる！Zoho CRM Plusのおすすめサービス活用事例 Zoho Champion

    • No Real DANE Support

      The issue in https://help.zoho.com/portal/en/community/topic/will-zoho-implement-dane was closed today claiming DANE was implemented. You never implemented DANE correctly, even if you think you did. DANE requires DNSSEC to work properly, you never added

    • Applying Price List to All Customers

      I just created a new price list as we have several items that have volume price breaks. To create my price lists, I followed the instructions in this article: https://www.zoho.com/us/inventory/help/items/price-list.html When it comes to applying my price

    • What's wrong with this deluge code to create a Bill?

      I know that all the data in the map is correct. The line items are pulled directly from a purchase order. // Add the purchase order ID to the bill billPOIds.add(poID); // Retrieve and merge the line items poLineItems = purchaseOrder.get("line_items");

    • 2 Ideas, Clone timesheet entry from monthly view and Notes in Weekly view

      While i love timekeeping I am finding some things slow me down.  Slow to the point of considering writing my own API call to do this. It would be so useful to be able to clone a timesheet entry from the monthly view.  It is somewhat painful to have to

    • Zoho Workdrive API call to find public external Link for a Folder

      Hi all, I can create new external share links for a WD Folder using this API call https://workdrive.zoho.com.au/api/v1/links . This works fine, however if there is already an external link created for a given folder, trying to create a new one fails (which

    • Converting Sales Order to Purchase Order

      Hi All, Firstly, this code works to convert a sales order(SO) to a purchase order (PO) via a button, however I am running into an issue when I convert the SO where the values from the line items are not pulled across from the SO to the PO. The ones in

    • Accessing and Using Formula Field

      Hi There, I created a formula field called 'Day of the Week' in the Leads module that takes the record created time and transforms it into the day of the week. The formula field returns the correct values. However, I am unable to find or use the field

    • 🇺🇸 🇨🇦 🇲🇽 Ask the Experts: A Live Q&A Session

      Session Closed Thank you to everyone who participated in this Ask the Experts session! Your questions, insights, and engagement made it a valuable discussion for the entire Zoho Recruit community. The comment section is now closed, but feel free to browse

    • Request For Quotation (RFQ) module

      Hello, Do you have any plans to implement a RFQ module in to ZOHO Inventory? I would like to chose items that I require a price for, select a number of different suppliers to e-mail and have them submit there pricing online. I would then like to see a

    • Ability to Append or Prepend specific signer name field to all documents in an envelope

      We use templates regularly and have a need to be able to rename the individual pdf documents contained in an envelope, such that a signer's name is appended or prepended (e.g. Form1 - SignerName). This is critical for us, because of how we process documents

    • 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

    • Next Page