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

    • Access a field from incoming webhook Zoho Flow

      I would like to further process an incoming webhook in zoho flow. How can I access a field in the script / custom function. I tried this in many variations but not working: exfield=${webhookTrigger.payload.AnalyseErgebnis}; I would be very grateful if

    • Possible Bug: ZML Editor code in Panels not rendered successfully.

      I'm using Panels in my Zoho page because they allow clickable interactions like opening URLs or navigating to other pages. However, I'm facing two major issues: Persistent White Background: Despite multiple attempts, I’m unable to remove the default white

    • How to Find and Merge Duplicate records in Zoho CRM

      Hello Everyone,   Today, let's see how to find Duplicate records in your Zoho CRM account and Merge them.   Eliminating duplicate records in CRM seems to be a frequent issue for many businesses. Duplicate records can affect your productivity, increase manual work, and more importantly show incorrect data when it comes to reporting. Hence, it is crucial for businesses to have the ability to avoid creating duplicate records and the ability to merge duplicate records in CRM. As a first step, we need

    • Is Zoho Tables part of Zoho One

      Cant seem to add the app as part of my Zoho One Subscription?

    • Sending a Link to a Record in an Email template

      I recently introduced CRM Blueprints for the Deals module in my organization, and since our sales process involves several people from different departments, I created a few email templates to be used in the Email Notifications of some of the transitions, to let a user or group know that they need to take action or just be informed of a status change for that deal. Even though everything was working as expected, shortly after setting this up, some users came up to me asking if the notification email

    • Payroll in Saudi Arabia

      Zoho is a popular software platform that offers a wide range of business solutions, from customer relationship management to finance and accounting tools. However, one major drawback for businesses operating in Saudi Arabia is the lack of a payroll feature

    • How I can export emails from zoho crm ?

      Hello, I am looking for the workaround for exporting the sent e-mails. We use the Zoho crm free version (with upgrated storage) - and the e-mails are written/sent within/out of the crm feature. For our cases we only use 1) companies and 2) contacts -

    • Pre-loading related contact lookups to a subform

      Hello, I'm trying to create a module to track group meetings and field data for each group member. Subforms appear to be a good fit for this but I don't want to add each contact every time manually. Can anyone suggest a good solution for this scenario?

    • Fetching Comments From A Zoho Ticket Comment using Zoho Desk Api

      Hi I've been integrating Zoho Desk API into our product however, I'm unable to fetch any ticket comments when using your API. I get the following response => { "data": [] } The URL I'm hitting is https://desk.zoho.com/api/v1/tickets/ticketIdHERE/comments.

    • What are the formulas behind the system default dashboards?

      We want to know the exact formulas especially for the "time based dashboards". For example the "First Time Closure" logic for the "First Call Resolution" dashboard is not very clear. How does the system calculate that a ticket has been closed at the first time? Please elaborate with further details.

    • Grouping payments to match deposits

      Is there a way to group multiple invoice payments together so they match credit card batches and grouped deposits in the bank account? Basically, we are creating invoices for each of our transactions, and applying a payment to each of the invoices. Our payments are either credit cards or checks. We want to be able to group payments together so when our bank account reflects a credit card batch made up of many transactions, or the deposit we took to the bank that has multiple checks from different

    • How to create groups in Zoho People?

      I want to create groups and add users.

    • Deleted Blog Still Visible on Zoho Site

      I deleted the blog on the Zoho site and permanently removed it from the trash, but the article is still visible. Please make sure it does not appear. The URL is below https://seeds.tech-manage.co.jp/blogs/post/WL-04550

    • Data Import validations

      Hi, I currently have a CSV file download from a 3rd party SFTP server prior to performing the data transform. When we don't have any transactional data, a file is still uploaded by the 3rd party to the server, but it is blank. This causes the transform

    • Is Setting Up Sub Domain for Email Sends Good Idea?

      Hi there, our team just bought a dedicated IP for our email sends. We send more than 100k emails/month. Because we face deliverability issues and also because of the mass sends, we decided to get a dedicated IP. My question is, should we set up subdomains

    • Abandoned Cart Recovery doesnt work on Woocommerce

      Hi, Does someone have implemented ACR with Woo successfully? My connection seems to be established but no user entered the workflow since I'm running the integration. I also faced problems in reinstalling the plugin on my wordpress. I simply cant uninstall.

    • Vault extension for Chrome rarely works anymore in Brave browser

      Hello, Until about a year ago the Vault extension for Chrome worked very reliably in the Brave browser. Since then, though, the extension fails to open, more often than not. Is there a known fix for this? I love Vault - it is, by far, the best password

    • Discussion : How are you sharing your Zoho Analytics Dashboards/Reports?

      I have all of my companies data in Zoho Analytics and now want to use it to prepare regular reporting for my SLT. They currently produce a Word document with screen shots of various reports… Analytics own dashboard engine is not great and doesn't fit

    • Collaborate without compromise, with Ticket Sharing.

      We often hear that the ability to move tickets is a big benefit. That kind of flexibility is great to have when your tickets require expertise across departments. But there's often a price to pay: Moving tickets across departments could result in a (well-intentioned) battle for access. When tickets move between departments while agents are working on them, chaos ensues.   To put an end to all these worries, Zoho Desk brings out a new ticket action: simply share. With ticket sharing, everyone gets

    • How to get the call recording external ID via desk API

      I have enabled phonbridge integration with Zoom Call. I am trying to access the call recording in Zoom by calling Zoom API. I have built a Desk workflow to trigger on a new call, to call a custom function. when calling the API, the response doesn't contain

    • How to get Monday as 1st day of the week?

      Hi, The first day of the week is Sunday in Zoho Creator calendar.So it is hardly usable as in Europe the 1st of the week is always Monday. How can I get Monday as 1st day of the week? Best regards, Chris

    • What's New - April 2025 | Zoho Backstage

      Hello there, Phew! It’s been a busy month—and it’s all for you. You know that feeling when your to-do list is long, your coffee’s gone cold, but your team is absolutely crushing it behind the scenes? That’s been us this month. Between brainstorming, building,

    • Mi cámara se desconecta permanentemente.

      Buenos días. Tengo una cámara web de última generación. En concreto el modelo W4DS de VIZOLINK. Realiza una primera conexión pero después se desconecta con el mensaje de que no es compatible con ZOHO. Me extraña mucho que una aplicación tan reciente cometa

    • Overall unsubscribes from mailing/contact lists

      Hi, I’m looking to track how many people are unsubscribing from our mailing/contact lists overall — not just from individual campaigns. Is there a way to access this total unsubscribe number on a weekly basis for internal reporting? Thanks in advanc

    • Tips and Tricks #40: Find and add YouTube videos to your slide from within Show

      Hi Everyone!  When using the right videos in a presentation, you can easily capture your audience's attention and help them connect with your message. This is useful especially when you want to explain any complex concept. For example, you can use a video

    • I want to add a button in Zoho Creator that, when clicked, opens a Zoho authorization window and then redirects to my website to obtain API tokens.

      Here's the translation of your text into English: "I want to add a button in Zoho Creator that, when clicked, opens a Zoho authorization window and then redirects to my website to obtain API tokens. When running in the developer environment, I get the

    • Enhance Data Visibility with Mapping Fields from Lookup Module

      We’re thrilled to announce an exciting new feature in Zoho Recruit: Mapping Fields from Lookup Module! This powerful addition is designed to display additional details from a related module when using lookup fields. This enhances data visibility and provides

    • Feature Request – Support for Stripe Direct Debit for Canadian Customers in Zoho Books

      I’d like to request support for Stripe Direct Debit as a payment option for Canadian customers within Zoho Books. Currently, while Stripe credit card payments are supported for Canadian businesses, there is no option to enable Direct Debit (ACH/EFT) through

    • Form fields appearing twice on creator mobile

      We have a custom application created in Zoho Creator. When we look at the application form on desktop everything looks normal. Whenever we access the application on Creator Mobile App some fields appear twice instead of only ones. I provided an example

    • Creator Widget using values from Creator Form on the same page

      Hi all, I have a widget I'm working on that I'd like to use values from a form that's on the same page as the widget. I have something working right now, where I have a stateless form on a page. On input to the form I load an inner page, setting query

    • Smart Hiring Made Easy: Experience our Optimized Chatbot

      We're thrilled to announce that Zoho Recruit's Chatbot has received an exciting update! With this enhancement, recruiters will have access to even more features that will help them passively find the best candidates for their open positions. Listed below

    • `insert into` Always Fails with “Improper Statement” — Even with Minimal Code

      Im develeping my inventory database using ChatGPT to help me and I´m running into an issue in my scan inventory form script when I try to make a form for logging the scanned items. 🆘 Zoho Creator: `insert into` Always Fails with “Improper Statement”

    • I want to know the gross profit by sales person. How?

      Kindly guide me how to know the amount of gross profit which is calculated on the basis of sales person. That means, how much is the amount of gross profit made by a particular sales person.

    • ZOHO CRM Lead_Status_History

      Hi, ZOHO CRM Lead_Status_History table is showing only ID and Modified Date. I want the history of status change in CRM Lead

    • Instant Sync of Zoho CRM Data?

      With how valuable Zoho Analytics is to actually creating data driven dashboards/reports, we are surprised that there is no instant or near instant sync between Zoho CRM and Zoho Analytics. Waiting 3 hours is okay for most of our reports, but there are

    • Zoho Writer page break in a merge repeating region always adds an unwanted blank page

      Hi I'm merging a Zoho CRM record to a Zoho Writer document with a repeating region to display subform records on their own page within the document. When I try to insert a page break in a repeating region, the resulting merge always adds an unwanted blank

    • Creating a grid of worker activity in Zoho analytics

      Hi, We provide medical services to patients and billing is time based. We want to create a filterable grid in which we can look at any month by day and any worker and how many minutes of billable activity they performed by patient. I know exactly what

    • Power of Automation :: Automatically start / pause / stop timer on task status update.

      Hello Everyone, A Custom function is a user-written set of code to achieve a specific requirement. Set the required conditions needed as when to trigger using the Workflow rules (be it Tasks / Project) and associate the custom function to it. Requirement:-

    • Restrict users on Form Submission

      In Zoho Creator, is there a way to restrict users/customers on form submission, on-click event of the submit button, they will be redirected to the customer login portal page (where they sign in / sign up) to complete a service purchase. We want a common

    • Update date field custom module using Zoho Inventory Update Record

      I'm trying to update a date field in a custom module inside zoho inventory but keep getting this error: "code": 6, "message": "syntax.error.invalid.json" This is how my code looks: campo_sku = Map(); campo_sku.put("cf_sku_master",i_sku); campo_sku.put("cf_sku_common",i_sku_common);

    • Next Page