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

    • 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

    • How to modify query from a DataBridge Connection

      Hello, I just installed the new DataBridge tool to import data to our Zoho Analytycs account from our local database. It works well so far, and data gets sync every day. The only issue that I found is that we do not know how to modify the query that imports

    • Tip of the Week #55 – Assign roles to inbox members

      Ever heard the phrase, "Right people, right access"? That’s exactly what you can achieve in Zoho TeamInbox by assigning roles to your inbox members! In any team, not everyone needs the same level of access to your shared inboxes. Some members may need

    • iOS 18 is here! Discover the enhanced Bigin app with iOS 18, iPadOS 18 and macOS Sequoia.

      Hello, everyone! We are excited to be back with new features and enhancements for the Bigin app. Let us take a look at the new iOS 18 and iPadOS 18 features. The following is the list of features covered in this update: Control widgets. New app icons.

    • Fourth Insight - The power of Multi-Layouts

      The Wheels of Ticketing - Desk Stories The power of Multi-Layouts In the previous insights, we have established that layouts are the foundation for a ticketing system, and fields are the building blocks for the same system. Fundamentals of layouts Fields

    • App Crash on MacBook Pro

      Hi Zoho, I am still struggling to keep Zoho Notebook stable on my Mac platform. I have sent in a couple of crash logs and I am making sure I have the latest version from the Mac App store. I love this application and really want to get it stable. The

    • Automating Sales Order Confirmation & Picklist Generation in Zoho Inventory

      Hi everyone, I’m looking to automate the sales order creation and confirmation process in Zoho Inventory, along with the automatic generation of picklists with bin-level details. Here’s what I need: Sales orders should be automatically created and confirmed

    • Spotlight series #7: Path animation

      Animating objects on your slide helps make your presentations lively and interesting. Animations add movement to an otherwise static deck, which helps grab your audience's attention. While you can animate your objects' entry and exit, or use animation

    • Zoho Forms to Zoho Projects

      Can Zoho Forms be used to collect task details and automatically create a new task under a specific project in Zoho Projects upon submission?

    • campaings flagging domain error but crm says OK

      campaings flags error with domain buy crm says notig wrong - this is new, help

    • Zoho Books - Currency Conversion

      I am trying to convert all the transactions into another currency such as converting multiple currencies into global USD Currencies. How Can I do this ?

    • Changing Default PDF Name

      Is it possible to change the default name of a PDF? As of right now, all of my quotes are named 'QT_$QuoteNumber' (i,e: 'QT_19803471298374) - would it be possible to change this to: '$CompanyName - $AccountName - $QuoteNumber' for instance?

    • Singup Form Embed code won't load

      I created a new signup form, and can't seem to get the code to load in to make it usable. It is constantly stuck with the loading image. The only code I can access is the iFrame code.

    • Workflow : Update a multiline text field

      Hello, I'm creating a workflow to update a multiline text field. But it looks like I only can format my text as a one-line. How can I format the text to multiple lines ? Thanks

    • how to prevent double entry

      How to set up a form so that someone cannot fill it out twice or more Thanks a lot

    • "The data you have entered already exists" when trying to create contac@mydomain.com

      Hi all, Our domain is ananasjuicebar.com. Working as admin in the control panel: When I try to add the email account "contact@ananasjuicebar.com" I get the error: "The data you have entered already exists" I've tried creating a new user or creating a new group with this address associated. To my knowledge this address has never been added and I can also not find any reference to it. (Shopify used this address to send customer notifications BEFORE setting up Zohomail.) Any ideas? are there any restrictions

    • Incoming Emails Are Delayed by 20 Minutes

      Emails are showing up in my Zoho email 20 minutes after they were received. Is Zoho having problems with their servers at the moment? This started happening about 3 weeks ago.

    • Sharing shreadsheets

      My wife and I each have zoho accounts. If She creates a spreadsheet and shares it with me using my email that is associated with my account, zoho shows a warning that I do not have a zoho account and the only way I can access this file is via the link

    • Filter Vendors/Suppliers from Campaigns

      We are unable to filter out our vendors/suppliers from any mass campaigns we send out. When synching our CRM contacts within Campaigns, we are unable to map the "Vendor Name" field. We have tried to create a segment from our all contacts list but to no

    • Field Validation and Profile restrictions bypassed using Mass Actions

      We have a Validation Rule that prevents ticket closure if the "Subcategory" field is blank. This has been working fine, but recently we noticed a few tickets per day somehow being closed without a "Subcategory". Upon further investigation we found the

    • Any Companies using HubSpot for Marketing integrated to Zoho CRM ? - Looking for Feedback

      Our company is using HubSpot for Marketing looking at moving from our presently working Z-CRM to hubspot for CRM. I am looking for any companies that are successfully integrating HubSpot Marketing functions with Zoho CRM. Upsides/Downsides/Effort/etc.

    • Customize Thank You message for native forms

      While it allows me to add a personalized message when completing a form, it would be nice to be able to customize the title (Thank You) and the button text (Close). In my case, the page is in Spanish, and those texts are in English, so I can't edit them.

    • Customize forms validation for native forms

      I'd like to be able to edit and/or translate the validation messages of a native form. My page is in Spanish, but the messages appear in English, and I couldn't find a place to edit what I want to display. Perhaps they can be edited when adding fields

    • Add picklist in subform lookup

      Hello, I am trying to rewrite a script that works on a from as parent form, to the same form when is is a subform. Here is what I did in the form itself : RefCat = Offre_de_produits.distinct(Categorie_OFFRE); clear Categorie_LIGNE; for each Record in

    • Delete a department or category

      How do I delete a Department? Also, how do I delete a Category? This is pretty basic stuff here and it's impossible to find.

    • Ticket layout based on field or contact

      Hi! I want to support the following use-case: we are delivering custom IT solutions to different accounts we have, thus our ticket layouts, fields and languages (priority, status field values should be Hungarian) will be different. How should I setup

    • Looking for basic script structure course

      Hi, I am not a programmer, but try to learn on my own. I get a lot of good advises in this forum, and thanks, but I tend to ask the same questions since I do not remember comparable answers I already received. Is there a basic course of "scripting structure"

    • How to let only account-bound products visible to users

      Hello friends, I'm trying to leave only the Products linked to the accounts visible to Zoho Portal users. If the user clicks "All Products," they can open tickets incorrectly for products that do not belong to the account that are registered. Is it possible

    • RTL Support on iPad

      hi I have this issue that when I create notes on my android app [in hebrew] all the text is aligned correctly to the right because I’m typing in Hebrew. But then when I open it up on my iPad, everything is suddenly aligned to the left and there is no

    • No sync

      I have amended a note on my PC, startet syncing but on the smart phne sync starts und runs for minutes. The note amendment ist not shown, but when I go to version the new version is shown but not possibility to accepte the new version

    • Dark mode

      Because the whole world talks about it and iOS also will get this option. Please make a real dark mode happen. It is very cool to switch the navigational color, but the content always stays in light colors.

    • Compliant SQL?

      I am a Microsoft Access developer. At the moment I am downloading tables from Zoho into an Access database to create join queries that I am unable to do in Zoho. I am doing this because Zoho doesn't seem to fully support all SQL statements that Access

    • Assign existing general timelog to a task

      Hello, is there a way to assign a General timesheet log to a task? I.e. I have the following General log: General | Log name | 01:30 I'd like to assign it to a task: Task name | Log name | 01:30 Thank you

    • "Error while processing" when I try to send an e-mail

      Several times today when I have tried to send an e-mail it tells me that there is an "error while processing." What's that about?

    • E-Mail auto-complete for deleted contacts

      I am having contacts pop-up in auto-complete when I start to type a letter in the TO address line. These e-mail address have been deleted from my contacts. I also have deleted all e-mails from/to these e-mail address but still there address is showing

    • How to validate Rich Text in Zoho Creator! Urgent!

      Hi members, Recently I just started to use Rich Text field. Now I have a requirement where I need to validate to ensure this Rich Text field must contain a value. Meaning must contain something. I use the below script if(input.Rich_Text == null) { alert

    • Public send to group address?

      Am I doing something completely wrong or is it not possible for the public to send to a group email address? For example support@domain.com? I'm able to send from support@domain, but am not receiving emails to that address? Thanks for any help!

    • [Webinar] Zoho Writer for the manufacturing industry

      Creating, sharing, and distributing complex documents are constant challenges in the manufacturing services industry. That's why our next webinar is focused on how to simplify these document workflows. Join us on May 8, 2025, for a Zoho Writer webinar

    • What to Add in the Redirect URIs for Zoho Books Integration with Make.com

      I'm currently setting up an integration between Zoho Books and Make to automate my accounting processes. However, I'm stuck on the Authorized Redirect URIs part and could use some help. As part of the OAuth authentication process, I need to configure

    • Allowing workflows to execute as an admin

      Workflows currently seem to execute with the permissions of the logged in user. This is a problem for most of the forms we have where we have hidden fields that perform business logic. If we restrict the permissions of these fields so users can't view

    • Next Page