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

    • Add export option that only export one or selected notebooks

      Currently the export function will export ALL data every time, this not only wastes user bandwidth, disk I/O and local storage space, but also consumes more resources on the server. Partial export should be a very basic and easy-to-implement feature.

    • Zoho Creator Mobile app no Default Workspace

      When I use the Zoho Creator mobile app I do not get a default workspace. This is occurring for me and another new user. I believe this is an issue with Zoho One / Zoho Creator. I have tried working with support and it's been over a week of no solution

    • Kaizen #189: Manipulating Multi-Module Lookup (MML) Field using Zoho CRM APIs

      Hello everyone! Welcome back to another week of Kaizen. In this post, we explore the Multi-Module Lookup (MML) field in the Appointments module of Zoho CRM. You learn what an MML field is, how it works, and how to use it with Zoho CRM APIs. Table of Contents:

    • Xcode 16.2

      I am facing multiple bitcode enable issue with Zoho. Which version is compatible with xcode 16.2 or version with out bitcode Flutter 3.27.4 pod 'ZohoDeskPortalCore' pod 'ZohoDeskPortalServices'

    • Unable to invite contacts

      Hi! I'm unable to invite contacts as end-users from my trial account. The green pop-up displays "Invited succesfully" but the email never arrives, nor the re-invitation - even though it's "sucessfully" as well. Tried with several e-mail accounts, even

    • Set expiration date on document and send reminder

      We have many company documents( for example business registration), work VISA documents. It will be nice if we can set a expiry date and set reminders ( for example 90 days, 60 days, 30 days etc.,) Does Zoho workdrive provide that option?

    • Refresh Page Or View After Workflow-Triggered Rule

      Good Morning, Is this feature that's discussed on this CRM thread available on Recruit? https://help.zoho.com/portal/en/community/topic/refresh-page-or-view-after-workflow-triggered-rule

    • Forward, attach, or flag email to an open ticket.

      Hi, when resolving customer requests through tickets in Zoho Desk, it is very common to receive emails from suppliers or third parties in Zoho Mail accounts or email groups that are not registered in the system. Is there any way to forward these emails

    • Need help adding Zoho Vault License

      "Proceed" is grayed our when i try to add 5 more license on our Zoho Vault account. Thanks

    • 'call for best price' option

      Hi guys, Pricing of items that we sell to end-customers changes often, so I don't want to put up a 'static' price, but would like to have the option to 'call for best price', or what-ever the best wording is.. Has anybody got a suggestion on how to do

    • Modifying product search in invoice field

      Hello, I imported my product list in Books. Since I have many products with the same name, but with different order units, and that Books doesn't permit same names in items, I used ID's number has product name, and put the product name in the description.

    • How do I embed the webinar into a webpage?

      All I can seem to do is embed the signup form. This is cheesy. Surely they must have fixed this by now, right? How do I do it?

    • 404 Error When Using record_cursor in ZOHO.CREATOR.DATA.getRecords (js api)

      Iam working on fetching all records from a Zoho Creator report using the Get Records API (V2.1) with the following recursive function: js CopyEdit // Recursive function to fetch records using record_cursor from the response function fetchAllRecords(recordCursor

    • Add haptic feedback when QR / barcode is scanned

      Hi, One of my user has a Creator App and scan QR codes. He suggests a haptic feedback is a great addition to validate that the QR code is effectively scanned and inserted in to the field. He is using an iPad for scanning. Thank you !

    • Input list of records in Lookup

      Salut, I have 2 scripts that input list of records in a lookup. The first on works fine, the second one doesn't and I do not know why. The only differences, is that the first one input in a lookup a list of records from an actual lookup field, and with

    • In line code commenting in Deluge

      A request to enhance readability: currently you can add 'in line' comments for Deluge code, but after you save and reopen, the comments are moved down to the new line. i.e. info "test response"; //this is a info statement for a test response gets changed

    • Delete purchase order

      Buenos días, quisiera su ayuda para retirar los documentos adjuntos, ya que necesito iniciar sesión nuevamente para la venta de unos vehículos.

    • Zoho One Groups and Departments - how are they used ?

      I've seen that Zoho One has the ability to create Groups and Departments, however they don't seem to do anything ? There is no ability to pick up these same groups in ; Zoho Analytics, Zoho Forms, Zoho Vault for just starters . Why aren't the Zoho One

    • Automate Note Creation for Service Appointments

      Hi Latha, I hope you're doing great. Thank you for your continued support in helping resolve previous issues — it's truly appreciated. I'm currently working on automating another workflow using Deluge in the Service_Appointment module. Specifically, I

    • Date & Time Field | Minimum 24 hour notice.

      I'm trying to use Zoho Forms to build a booking request form. I have the date and time field selected as the field users can select their booking time for. My issue is I need a minimum of 24 hour notice for each appointment. I have it sent to only future

    • I can't understand Quiet Mode

      I want to set my Zoho mail notifications to only show during set times. I only want to see my notification pop-ups from 9am-5pm Monday-Friday. Or, in another words, I don't want to receive pop-up notifications between the hours of 5pm and 9am and for

    • Add subform record on data import

      I have some data pulled from analytics. I also have a "Projects" form with an "Assignments" subform linked to the "Assignments" form (not a blank form). Now when I edit a Project record, I can add new assignments manually and it will add the records in

    • Update Main Form Date with Most Recent Subform Submission Date

      Hello, I have a field in my main form (equipment info) with the "date of last equipment inspection". I have a subform (equipment inspection) That wheen submitted for a piece of equipment I would like the submission date of the subform (equipment inspection)

    • Need Help with MX Record Verification

      Dear Zoho Mail Support Team, I’m setting up Zoho Mail for my domain "nexiumdynamics.com" and have already added the MX, SPF, and DKIM records as instructed. The domain DNS is managed through Odoo. However, the MX record verification on Zoho Mail is still

    • ¡Participa en los Zoholics Awards 2025!

      ¿Tu organización utiliza el software de Zoho de una forma innovadora? ¿Has logrado resultados dignos de noticia con nuestras aplicaciones? ¿O tienes un caso de uso especial de Zoho que te gustaría compartir con el mundo? Si es así, ¡este es tu momento

    • Email Stuck in "Retry Queue" – Host Not Reachable

      Hello everyone, I’ve been encountering an issue when trying to send emails. Although the email appears in my Sent folder, it doesn’t reach the recipient, and I see the following status: In Retry Queue Temporary failure when delivering email to the recipients.

    • Identify, Qualify and Retarget Potential Leads Using Zoho SalesIQ & Campaigns

      Finding the right leads can often feel like guesswork. Because not all your website visitors are worth targeting — some may just be browsing, while others may have landed in there by accident. So how do you filter out the noise and focus on those who

    • Don't Receive Email

      Hi, I would like to report a problem . One of registered email in my organization is info@kedata.id . that email is used to register into MongoDB atlas. But for that case, i have a problem which the email of verification code from MongoDB atlas haven't

    • Laravel - Failed to authenticate on SMTP server

      For some reason, I cant send e-mails from my Laravel app Error: Failed to authenticate on SMTP server with username "myuser" using the following authenticators: "LOGIN", "PLAIN". Authenticator "LOGIN" returned "Expected response code "235" but got code

    • Custom View Row Limit?

      Is there a way to view more than 5 rows on a "Custom View" component on a user's homepage? I didn't see an option when creating or editing it. I'd like to be able to show the users 10 tasks at a time if possible.

    • Unable to import canvas template to canvas forms

      I'm unable to import exported canvas template to canvas form, the canvas form not recognizing the template code plus the canvas import prompt title is (Create your own form page) instead of import, find the attached screenshot Please advise

    • Remote Control Functionality During Screen Sharing in Zoho Cliq

      Hello Zoho Cliq Team, We would like to request the addition of remote control functionality during screen sharing sessions in Zoho Cliq. Currently, while screen sharing in Cliq is very useful, it lacks the ability for another participant to take control

    • Power of Automation :: Automatically Approve/Reject the associated timelogs of Issues

      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 iOS and Android app update: Attachment restriction

      Hello, everyone! We are excited to introduce an option to restrict uploading certain attachment types on the Zoho Desk app. This feature allows you to specify the types of attachments are allowed to be uploaded and shared within the Zoho Desk. This can

    • Zoho CRM Outlook integration: no option showing up even after installation

      I followed the instructions on this page to install the add-in: https://help.zoho.com/portal/en/kb/crm/integrations/microsoft/ms-outlook-add-in-for-zoho-crm/articles/outlook-add-in-for-zoho-crm#Understanding_the_add-in But I don't see the options in Outlook

    • Portal URL Not Working?

      When I view my Company Profile, it shows my portal URL as being not created although it has been.  For example my profile shows the following:  https://meeting.zoho.com/a/..  The directory name that I chose is missing and it appears that I need to create a new Portal URL although one already exists for my organization. When I try to visit the URL that I previously created, I receive a "Page Not Found" error.

    • Improve user efficiency with Automated reminders

      When it comes to business, keeping up with the deliverables is imperative. Automated reminders help you just with that, allowing you to set up notifications that are automatically triggered to your workspace users to remind them about important updates,

    • Setup Outlook for domain email address fails

      I am trying to setup outlook for one of my domains email addresses and I am unable to add the account in Outlook I get "Operation could not be completed" errors. I am using the imap.zoho.com 993 for incoming and smtp.zoho.com 465 for outgoing email. I

    • Free webinar alert! Empower Customer Experience in a Changing World with Zoho Desk and Zoho Workplace

      Hello Zoho Workplace Community! We’re back with another exciting webinar—and this time, it’s all about delivering exceptional customer experiences. Join us for "Empower Customer Experience in a Changing World with Zoho Desk and Zoho Workplace," where

    • Portal permission for report only

      Hello, I have a hard time setting portal permission for my users. I have a form that is an order subform for items. I use that subform to create a filtered report for sellers to see their own orders, but at the same time I have to give them access to

    • Next Page