For Zoho Services only:

I'm actually part of a bigger team at Ascent Business Solutions where we have support technicians and project consultants. Support is for smaller technical fixes but this can include developments, reports or integrations; depending on the size of the task. Projects are for more time-consuming developments such as revamps of the Zoho Suite of apps or on-site training. The advantage of a team is that if I am out-of-office for a day or so, there is always someone at Ascent Business Solutions who can deal with any queries/issues you may have.

Our support rates can be found and purchased at A support bundle doesn't have an expiry date. So whether we can do what you want within the bundle and a year later need further support, if there are minutes left on the bundle then there is no additional charge.

Our project rates for bigger developments can be found at and will involve a dedicated project consultant along with developers who will hold your hand through the development process.

If you want help building a solution for one of the Zoho Apps in the Zoho Suite, contact us on 0121 392 8140 (UK) or by email at You can also visit our website at

I regularly build and specialize in 2-way API integrations for Xero, Shopify and eBay.

Zoho Creator: Create a Widget which uses JavaScript

This is an article documenting how to create a Zoho Creator Widget which includes the Bootstrap and jQuery frameworks as well as other JavaScript functionality.

Quite simply that at time of print (2020-10-24), Zoho Creator does not allow you to use JavaScript anywhere in its app. HTML and CSS are mostly allowed but JavaScript automatically gets removed from any of your code.

As someone who's been using Zoho services and programming in Zoho Deluge for a few years now, even I thought of Zoho Widgets as a daunting task. But after doing some, I realize this is actually very quick to do and much easier than first thought. The article below documents how to create your first widget in a MacOS environment. I aim to create a WindowsPC version of this document at some point for my colleagues. The below instructions follow a fresh install as if this is the first time this computer has created a Zoho Creator Widget.

Software used:
  • Zoho Creator v5 (Plan Premium or greater is required - includes Zoho One)
  • macOS Catalina v10.15.7
  • Safari v14.0
  • MS Visual Studio Code v1.48.2

  1. Download nodejs source code from Don't worry about knowing anything about nodejs, as long as you know JavaScript and HTML/CSS you can use this:
    Download NodeJS
  2. Execute the download and go through the installation process with the final step to move it to trash/bin.
  3. Open the terminal app on your Mac and type the following to test the install:
    node –v
    npm –v
    1.  node -v 
    2.  npm -v 
    You should get a version number for each of these as a response. Failing this you should check your security and privacy and ensure that you have permission to install the above, then re-install.
    Check NodeJS Installation

Install the Zoho Extension Toolkit (ZET) via command line interface (CLI)
  1. In the terminal, type:
    npm install –g zoho-extension-toolkit
    1.  npm install -g zoho-extension-toolkit 
    If you get errors like “Missing write access to/usr/local/lib/node_modulesZET Installation Errors then type the following instead:
    sudo npm install –g zoho-extension-toolkit
    1.  sudo npm install -g zoho-extension-toolkit 
    You should get prompted for the Mac/Admin password which you type in the terminal (will not display, just type away and press the Return key). The response will be something like “added 98 packages from 60 contributors in 3.043s”.
    ZET Installed Successfully
  2. Check the CLI installation by typing:
    zet –v
    1.  zet -v 
    This should return the version of the Zoho Extension Toolkit (eg. 0.23.6)

Create a project
  1. In the terminal, type
    zet init
    1.  zet init 
  2. You will be given a list of Zoho services, use the arrow up/down keys to select “Zoho Creator” and press the return/enter key.
  3. Give the project a name: eg. “joels_awesome_app” (without the double-quotes and no funny characters). It will initialize a project in a folder called something like “/Users/<your_username>/joels_awesome_app
  4. It will then initialize some NPM dependencies and it will ask you to type the following commands; to change current directory to the app directory and then to run the toolkit
  5. copyraw
    cd joels_awesome_app 
    zet run
    1.  cd joels_awesome_app 
    2.  zet run 
    The terminal response will advise that it is running zet at along with the instructions “please enable the host ( in a new tab and authorize the connection by clicking Advanced -> Proceed to (unsafe)”.
    ZET Initialization and Run This message is somewhat out of date but follow the following instructions to preview your app:
  6. Open a browser and Ensure you type the preceding “https” rather than the default “http”
  7. [Optional Step] This is an added note/step if you get the following error when trying to access your app on your localhost:
    “ normally uses encryption to protect your information. When Google Chrome tried to connect to this time, the website sent back unusual and incorrect credentials. This may happen when an attacker is trying to pretend to be, or a Wi-Fi sign-in screen has interrupted the connection. Your information is still secure because Google Chrome stopped the connection before any data was exchanged. You cannot visit at the moment because the website sent scrambled credentials that Google Chrome cannot process. Network errors and attacks are usually temporary, so this page will probably work later.”
    Google Chrome HTTPS Error - ERR_CERT_INVALID
    My workaround was simply not to use Google Chrome but to open the Safari app instead (ensure you type the as the URL as it may default to use HTTP instead of HTTPS): Open Safari and click on Show Details Again you may get a warning but simply click on “Show Details” then on “Visit this website” then on “Visit Website” (on yet another popup) and then finally enter your password to make changes to your Certificate Trust Settings: Click on Visit Website... a few times
  8. You should get the following page open in your browser which is the root folder of your app: Safari - App Root Folder
  9. In the browser url, type, your browser page should now display something similar to the following: Safari - App Preview Page
  10. Note that for every action you are doing in the Safari browser, there will be a log in the terminal: Server Side Logs

Editing the Widget
  1. So let’s modify the widget.html file in this app by opening a finder/file explorer window and browsing to the app folder: Finder - Browse to Home then Browse to app folder
    Finder - widget.html file
  2. Then open the file “widget.html” in your favorite code editor, here I am using MS Visual Studio Code for Mac and I get the following: Visual Studio Code - source of widget.html
  3. If I change the HTML and save the file, I can refresh the browser page and immediately see the changes: Visual Studio Code - Change Html Safari - Preview Changes
  4. Adding custom CSS and JS files: If using MS Visual Studio Code, I’m adding the app folder to my workspace so that I can easily create a stylesheet and javascript file specific to this app: VSC - Workspace add Custom CSS and JS files
  5. Adding third-party frameworks: I’m going to use my favorite third-party extensions (Bootstrap & jQuery) which I’m referring to over the web (Content Delivery Network – CDN)

So as a recap, this is how it looks so far:
  • The HTML: VSC - the HTML
  • The CSS: VSC - the CSS
  • The JavaScript: VSC - the JS
  • The Preview in Browser: Safari - Preview

Adding some Zoho SDK functionality:
  1. First I’m going to add the Zoho Javascript to the page VSC - the JS with some Zoho SDK

Packaging the Widget
  1. Return to the terminal and hold down the CTRL key and press C to interrupt the logging terminal and return to the prompt. (your safari browser can not display this page anymore)
  2. Type:
    zet validate
    1.  zet validate 
  3. You should get a response saying that Validation Rules passed successfully. Now Type:
    zet pack
    1.  zet pack 
  4. You should get a response saying something like “Extension packed successfully as … in dist folder”: Terminal CLI - Validation and Packaging
  5. Return to your finder/file explorer window and a “dist” folder should have appeared containing a ZIP file: Finder - Dist App File Zip

Adding your Widget in Creator
  1. Now return to your Creator app, go to Settings and then Widgets then click on "Create" or “New Widget” and enter the details of your widget:
    • Name: to whatever you want
    • Hosting: I select “Internal” though the benefits of “External” could be for development updates (untested).
    • Widget File: upload the ZIP file from your dist folder.
    • Index File: put here the root html file along with the path (do not forget the leading slash or your widget will error)
    • Click on "Create" (bottom-right of your screen)
    Zoho Creator - Add New Widget
  2. Now go to a Creator page (new or existing), select "Widgets" and drag your new Widget to the page:
    Zoho Creator - Add Widget to Creator Page
  3. Don't forget to click on the page settings (cog in the top right) and add a parameter, in this case "name":
    Zoho Creator - Add Parameter to Creator Page
  4. Great! Now access this application and preview your masterpiece! The following screenshot shows what happens when I change the parameter:
    Zoho Creator - Preview Widget in Creator Page

Additional Note(s):
I have found that adapting Widgets created for Zoho Creator to work in Zoho CRM is pretty easy to do. The only differences are the step where you select the type of project in the CLI, in particular the widget JS script that is referred to in widget.html and secondly, the way you retrieve records in the Zoho JavaScript. If you do not include Zoho queries, then I have found the app can be ported between either Creator or CRM (as in pure HTML,CSS and JS).
Files referring to Creator specifically:
  • ./app/widget.html: reference to script src at
  • ./app/custom.js: my custom javascript file referring to the ZOHO.CREATOR.init() and calling Creator records.
  • ./plugin-manifest.json: JSON specifying service as "CREATOR".

Category: Zoho :: Article: 732

Credit where Credit is Due:

Feel free to copy, redistribute and share this information. All that we ask is that you attribute credit and possibly even a link back to this website as it really helps in our search engine rankings.

Disclaimer: The information on this website is provided without warranty and any content is merely the opinion of the author. Please try to test in development environments prior to adapting them to your production environments. The articles are written in good faith and, at the time of print, are working examples used in a commercial setting.

Thank you for visiting and, as always, we hope this website was of some use to you!

Kind Regards,

Joel Lipman

Related Articles

Joes Revolver Map

Joes Word Cloud


Badge - Certified Zoho Creator Associate
Badge - Certified Zoho Creator Associate

Donate & Support

If you like my content, and would like to support this sharing site, feel free to donate using a method below:

Donate to Joel Lipman via PayPal

Donate to Joel Lipman with Bitcoin - Valid till 8 May 2022 bc1qjtp4l4ra452wzvuk9a45yfj82zkahsyy2z379y
© 2022 Joel Lipman .com. All Rights Reserved.