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

    • Multiple team members to access one office PC

      Hello, We have a high-performance PC in our office that we use for resource-intensive tasks. All team members need to remotely access this PC from time to time. However, when I enable remote access for myself through Zoho Assist, the PC does not appear

    • Zoho Bookings API, timezone is not recognized when passed

      Has something changed? Time zone is being passed through API but it is NOT being recognized. response is not showing time zonetime that was passed through request. This is an URGENT issue as it is preventing bookings! Seems like this is due to a recent

    • Zoho Bookings: How to set a limit for maximum bookings per day?

      Let's say I have 1 hour slots OPEN for an entire day. What if I want all of the OPEN slots to turn OFF if/when I hit a certain number of total bookings for that day? I usually only want a total of 5 appointments to be booked but I'm not sure of the exact

    • Zoho Booking API to update service for Assigned Agent

      Hi there, I have been testing and looking at the Zoho booking API for the Assigned Agent update from Zoho CRM for a long time. There is only a Fetch service request, but no updated Assigned Agent options. Does anyone know how to do that? PS: I can use

    • Zoho Accounts and Book Keeping candidate required

      Urgently required data operator who can do following tasks: Purchase Bill Entry Sale Bill Entry Bank Entries Cash Book entries 40-75 entries per days

    • Cancellation waiting list - Zoho Bookings

      Is it possible to have a waiting list in case I got a cancellation it can be filled automatically with people on this list? 

    • Zoho Bookings Integration with Make.com

      Dear Zoho Bookings Support Team, We are writing to request a new integration between Zoho Bookings and Make.com, a leading automation platform widely used by Zoho users. Current Integration: We acknowledge the existing integration with Zapier, another

    • Different Page Numbering

      I want the page numbers not just 1,2,3... but i,ii,iii,iv,... or even I,II,III,IV.... How can I do this?

    • Leads Should Support Business-Centric Structure for B2B Use

      We’re a B2B company that generates leads for other businesses and often engage with multiple contacts within the same company. For years, we’ve struggled with Zoho CRM’s limitation of requiring a Last Name field for leads. For example, if we’re pursuing

    • Zoho AI Translate – No Support for Hebrew?

      I want to use Zoho AI Translate, but I see that it does not support Hebrew. Since Zoho supports multiple languages, I was hoping this function would also work with Hebrew. Is there any plan to add Hebrew support in the near future? Or is there an alternative

    • Exclude Segment from Campaign Recipients

      I've created two Segments in order to separate Non-Marketing Contacts from Marketing Contacts. I'd like to send an Eblast to all Marketing contacts in my lists, but when I go to select Recipients, I have two options: 1. To Choose Lists to Send to; 2.

    • Equivalent domains

      Need a settings feature for adding/modifying/deleting domains that use the same login service. The feature can also suggest some popular sites that use shared credentials to access domains under their control. For example: amazon.com and its local variations like amazon.in. For example: gmail.com and google.com. LastPass has this feature.

    • Can't verify DKIM key?

      So basically I just wanted to verify the email on my domain so it doesn't showup as spam in other people's inboxes. So I did what Zoho told me to do, it was to verify a DKIM key. I created the key with the address, added the correct information to the TXT file in my domain's DNS settings, tried to verify it and it keeps saying 'Verification failed'. I tried it more then once, I reset the DKIM key, and for some reason it just won't verify. Either it's me being impatient or this thing isn't working.

    • Forecast performance analysis

      Last modified on 15/05/2023: Performance analysis in forecasts is now available for all Zoho CRM users in all DCs. Note that it was an early access feature available only upon request. As of May 10, 2023, it is rolled out for all Zoho CRM accounts. Find

    • Deleting Records Older Than 14 Days

      I have a form called vacancies that contains a field "status_date". I need to create a schedule that runs once a week and if the status date is > 14 days it deletes that record.  I would appreciate anyones help.  -Aaron 

    • I need open my email in Zoho from oulook account

      Hi Can you help me to solved this First, I’m unable to access my email account via Outlook. Second, when I send any email from my Zoho account, it doesn’t reach Gmail inboxes. Thank you for your support

    • Default value for Subject field in Case module

      I would like to add a default value to the Subject field in a custom module based on the Case module. Since this field is mandatory, I can't use a workflow rule that adds a default subject if the field is left empty. So I would like to display a default

    • Zoho Payroll's USA and KSA editions are available in Zoho One!

      Greetings! We’re excited to share that Zoho Payroll, currently available only in India and the UAE, is now introducing the KSA (Kingdom of Saudi Arabia) edition and the USA (United States of America) edition, and these editions are now available in Zoho

    • Zoho books and venmo

      Hi, Is there a way to hook Venmo into zoho books? I have a Venmo business account and want to be able to sync that. I know you can do it with the paypal integration but I dont want to use paypal for the fees and that doesnt allow me use/integrate my current

    • Create custom field using API.

      Hi Zoho Support, can we create the custom field using Zoho API? Thanks, Parth Moderation Update: I'm locking this post as the feature has now been implemented. Please refer to the help link provided in the comment below.

    • I don't really understand leads in the campaigns tab on Zoho CRM

      Good morning, fellow CRM users. I am having quite a hard time understanding the leads in the campaigns tab. In this particular campaign in the screenshot below, we sent out emails to our mailing leads through Zoho Campaigns, and the data is linked back

    • Attention API Users: Upcoming Support for Renaming System Fields

      Hello all! We are excited to announce an upcoming enhancement in Zoho CRM: support for renaming system-defined fields! Current Behavior Currently, system-defined fields returned by the GET - Fields Metadata API have display_label and field_label properties

    • what is the header code and footer code, do you provide it for my website

      I am unable to understand few terms in making website, i need your help in header code, footer code, face book pixel integration etc..

    • Zoho DataPrep

      Zoho DataPrep is not updating the dataset. I post the updated dataset in Zoho WorkDrive under the same file name. (I delete the old file and upload the updated file with the same filename.) Zoho DataPrep is supposed to pull the dataset from Zoho WorkDrive,

    • Zoho Assist Unattended Access prevent my Windows 10 Pro business computers to sleep (ever)!

      Since I begin my trial period of Zoho Assist (Unattended Access) for business, I have sleep mode issues on all my business computer. In fact none of the sleep delay worked or even if I manually click the "Sleep" button into the Start Menu... After using the "powercfg -requests" command from Microsoft to troubleshoot sleep issues, I see that Zoho was responsible to all my sleep issues. Of course after uninstalling Zoho Assist Unattended Access from my test computer, the sleep mode returned to normal

    • zoho notebook won't let me sign in on arch linux

      just gives me an eternal loop when i try to sign in within the app. signing in with google does the same, showing the blank white screen in browser at the same time

    • Where to find User Performance Page in CRM?

      Hi all Just googling answers to another forum post I've just put here when I found this page; https://help.zoho.com/portal/en/community/topic/forecast-performance-analysis-public-early-access-2023 It shows this User Performance Page screenshot. I can't

    • Zoho Payroll: Product Updates | April 2025

      At Zoho Payroll, we’re always working to make every payday feel effortless. And sometimes, that means listening closely to your unique needs. This month, we’ve focused on adding features that give you the flexibility to pay your employees based on your

    • How to mass update member status in a CRM Campaign?

      Does anybody knows how to mass update member status of the contacts (or leads) associated to a campaign. I can click on a campaign record and go to the Contacts in the Related List fields but then it shows only 10 contacts per page at once. It is hard

    • CRM API w/ Self Client (Administrator): You do not have sufficient permission to associate this record. Contact your administrator.

      I am using the CRM API and am having an issue creating a contact. I've successfully created a contact linking to an existing account by ID, but then when I created a separate test account (which succeeded) and tried to create a contact linked to that

    • I need to know the IP address of ZOHO CRM.

      The link below is the IP address for Analytics, do you have CRM's? https://help.zoho.com/portal/ja/kb/analytics/users-guide/import-connect-to-database/cloud-database/articles/zoho-analytics%E3%81%AEip%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9 I would like to

    • Allow non admins to create folders

      I want to allow users in my company to create their own reporting based upon selected Datasources, however they currently can't create folders to save their work in. This can only be done by admins, which seems excessive. Is this possible ?

    • Filter a report for a specific bank and a specific transaction type (interest income)

      I am trying to run a report - any report - on a specific bank account for the interest income. I do not see it as an option. I can see the Bank Account under Account in the Filters, and I can see the Interest Income under Account in the Filters But I

    • How to launch ZohoIQ by clicking on URL

      I want to add an option for visitors to launch the chat by clicking a hyperlink.

    • Error: Unable to save integration in Desk

      Hi, Problem here. When I try to integrate Zoho CRM with Zoho Desk, I get an error when saving: Unable to save integration in Desk. See print screen below. I'm selecting the right accounts and fields, so not sure what's going wrong.

    • Sendmail based on individual subform rows on form submission

      Salut, My order form has an product subform with items that can be bought from different suppliers. I would like every suppliers to receive an email saying "you have an order" with all items (records) of the order associated with them. The suppliers'

    • Can't attach a file with ZOHO Mail

      I am a new user of ZOHO mail.  The attachment feature of the mail does not work.  I get the dialog box to choose the file, then nothing happens and it does not attach the file.  Please fix.

    • Gmail to Zoho Mail: Filters

      I'm considering a switch from Gmail (using its Workspace with a custom domain) to Zoho Mail. Reading the tutorials but didn't find the info on Gmail's filters. I have tons of them to auto-label my incoming emails. I know that those labeled emails will

    • How to nurture leads, manage contacts and grow your B2B business with SalesIQ?

      Zoho SalesIQ is one of the most powerful support tools in the industry and is preferred by millions of customers. SalesIQ is used to acquire leads across various sectors and automate your workflows. The all-new SalesIQ brings more power to your business

    • Contracts Management

      Hello, We are implementing Zoho FSM for our field service operations and, one of the features we are lacking is Service Contract Management. I was told that such feature might be in the pipeline but an estimated launch date for this is not available at

    • Next Page